asp.net-mvc-3 - 使用 jquery 的 mvc3 日期选择器示例

Question

我是 mvc3 的新手，视图引擎是剃刀，如何在我的视图中获取日期选择器。我应该在哪里编写日期选择器函数来影响它的所有视图。在我的每一个观点中怎么能称之为它。

Answer 1

您可以向所有需要显示为 datepicker 的输入字段添加一些通用类：

@Html.TextBoxFor(x => x.SomeDate, new { @class = "date" })

然后在一个单独的 javascript 文件中：

$(function() {
    $('.date').datepicker();
});

那么你所要做的就是在你的布局中包含这个 .js 文件，以便它为每个页面和每个拥有日期类的输入字段执行。

Answer 2

1. 在 _Layout.cshtml 添加以下行

//CSS

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/redmond/jquery-ui.css" rel="Stylesheet" type="text/css"   /> 

//脚本

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

1. 导航到 Shared 文件夹，然后创建一个名为 EditorTemplates 的文件夹

2. 在 EditorTemplates 文件夹中创建一个名为 DateTime 的局部视图

3. 将以下代码添加到 DateTime 部分视图

   @model System.DateTime ？@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "pickDate" })

       <script type="text/javascript">
            $(document).ready(function () {
   
                $('.pickDate').datepicker({ 
                    changeMonth: true,
                    changeYear: true
                });
            });
       </script>
   

现在您已设置好所有内容，并且在您拥有 DateTime 类型字段的每个视图上，当您在该字段内单击或在单击图标等时修改它的属性时，您将看到一个 jqueryUI 日期选择器。

例如，您的视图就像从模型中创建的一样，您无需添加任何内容。

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

更新

您可能有某种脚本冲突。尝试添加

@if(false)
{
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
}

在你的视野之上。