不能在 Razor 视图中使用 jquery datepicker答案

【问题标题】：cannot use jquery datepicker with Razor view不能在 Razor 视图中使用 jquery datepicker
【发布时间】：2013-03-30 04:42:55
【问题描述】：

我正在开发一个 ASP.NET MVC 4 应用程序。在我的一种形式（使用 Razor 视图引擎）中，我想使用带有日期字段的 jquery datepicker。 但我的日期选择器代码不起作用。

视图/共享/_Layout.cshtml

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>

Views/MyController/Create.cshtml

@model wppf_test_1.Models.allocation_percentage

@{
    ViewBag.Title = "Create";
}

<script type="text/javascript">

$(document).ready(function () {

    alert("h");
    $("#date").datepicker();

});

</script>

<h2>Create</h2>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

<fieldset>
    <div class="editor-label">
        @Html.LabelFor(model => model.date)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.date)
        @Html.ValidationMessageFor(model => model.date)
    </div>

我没有发布视图的整个代码，因为它非常大。 jquery 代码中的警报消息有效。 但 datepicker 代码无效。我使用了firebug并验证了日期字段的id确实是“日期”。但我不知道是什么问题。

【问题讨论】：

添加datepiquer.js jquery，在你头上不会出现
但 jqueryui.com 中显示的示例代码不包含 datepicker.js

标签： jquery-ui razor asp.net-mvc-4

【解决方案1】：

我建议使用这样的输入元素：

<div class="editor-field">
    <input type="text" name="date" id="date" /> 
    @Html.ValidationMessageFor(model => model.date)
</div>

作为您约会的编辑。将名称设置为日期会将值正确链接到表单提交时的日期字段。我以前遇到过这个问题，这就是我解决它的方法，尽管我不能确定它为什么起作用。

【讨论】：

【解决方案2】：

我的情况与 Shuaib 相同，我尝试了您上面的建议，我可以在我的项目中使用日期选择器 (create.cshtml)。

<input type="text" name="CreatedDate" id="date" />

但是，我的项目（create.cshtml）中又多了很多输入元素。我尝试使用相同的 id (id="date")，如下所示。

<input type="text" name="UpdatedDate" id="date" />

当我运行应用程序时，我的第二个输入元素 (name="UpdatedDate) 上的日期选择器无法工作。我收到警告消息是此页面上的另一个对象已使用 ID 'date强>'.

这个方法是什么（调用id datepicker）只能在页面上使用一个输入元素（不能更多）？

感谢您的建议，干杯

【讨论】：