在 MVC4 中使用波斯日期时间选择器答案

【问题标题】：Using Persian Datetimepicker in MVC4在 MVC4 中使用波斯日期时间选择器
【发布时间】：2014-10-17 14:51:13
【问题描述】：

我正在尝试在我的项目中使用persian datetimepicker。我正在使用 MVC4。

所以我找到了一个链接http://stackoverflow.com/questions/16248909/persian-calender-in-mvc-asp-net，我决定实现它。

我在我的项目中添加了一些 css and js 文件，您可以在此处看到（我添加到我的布局页面）：

<link href="@Url.Content("~/Content/js-persian-cal.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/js-persian-cal.min.js")"></script>

所以我创建了一个模型，你可以在这里看到：

 namespace MvcApplication2.Models
{
    public class DTpicker
    {
         public string name { set;get;}
         public DateTime datetime { set; get; }
    }
}

我创建了一个视图create view，你可以在这里看到：

@model MvcApplication2.Models.DTpicker

@{
    ViewBag.Title = "create";
}

<h2>create</h2>
<script type="text/javascript">
        var objCal1 = new AMIB.persianCalendar('pcal1'); </script>
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>DTpicker</legend>

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

        <div class="editor-label">
            @Html.LabelFor(model => model.datetime)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.datetime, new { @id = "pcal1", @class = "pdate" })
            @Html.ValidationMessageFor(model => model.datetime)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

如您所见，我在日期时间中添加了一些额外的代码，您可以在此处看到：

 @Html.EditorFor(model => model.datetime, new { @id = "pcal1", @class = "pdate" })

正如您在上面看到的，我将这部分代码添加到创建视图中：

  <script type="text/javascript">
            var objCal1 = new AMIB.persianCalendar('pcal1'); </script>

但是问题出在哪里，当我运行我的应用程序时，日期时间选择器不起作用。我使用浏览器看到页面的视图源，并且我的日期时间输入的语法如下：

   <div class="editor-label">
            <label for="datetime">datetime</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line" data-val="true" data-val-date="The field datetime must be a date." data-val-required="The datetime field is required." id="datetime" name="datetime" type="datetime" value="" />
            <span class="field-validation-valid" data-valmsg-for="datetime" data-valmsg-replace="true"></span>
        </div>

您知道 id 应该是 pcal1 但您可以看到 id 是 id="datetime" 为什么？

最好的问候。

任何想法将不胜感激

【问题讨论】：

标签： c# asp.net asp.net-mvc asp.net-mvc-4 datetimepicker

【解决方案1】：

EditorFor 不支持传递 HTML 属性。所以你传递的对象没有做任何事情。（实际上，它正在做某事，这不是您所期望的。它将使用这些值在ViewData 中设置键，例如ViewData["id"] = "pcal1"。）id 被设置为datetime，因为那是您正在为其创建编辑器的属性的名称。

所以，你有两个选择：

不要使用EditorFor，而是使用TextBoxFor 之类的东西。这将允许您传递要在输入上呈现的 HTML 属性：
```
@Html.TextBoxFor(model => model.datetime, new { type="datetime", @id = "pcal1", @class = "pdate" })
```
创建用于DateTime 属性的编辑器模板：

Views\Shared\EditorTemplates\DateTime.cshtml
```
@{
    var htmlAttributes = HtmlHelper.AnonymousObjectToHtmlAttributes(ViewData["htmlAttributes"] ?? new {});
    htmlAttributes["type"] = "datetime";
    htmlAttributes["class"] = htmlAttributes["class"] == null
                                  ? "pdate"
                                  : "pdate " + htmlAttributes["class"];
}

@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, htmlAttributes)
```
那么在你看来：
```
@Html.EditorFor(model => model.datetime, new { htmlAttributes = new { id = "pcal1" } })
```
请注意，pdate 类正在由模板添加，因此您不必手动传递它。我假设这是您的 JavaScript 所附加的内容，因此您希望此类始终出现在 DateTime 属性的输入中。另外，请注意EditorFor 调用的语法。您需要传递一个由htmlAttributes 组成的匿名对象，而不是传递一个由id 组成的匿名对象，然后它本身就有一个id。这是因为EditorFor 只是在ViewData 中设置值。

【讨论】：