在MVC4中使用波斯Datetimepicker

Question

我正在嘗試在項目中使用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" })

如上所見，我將這部分代碼添加到了create視圖中：

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

因此，問題出在哪里，當我運行我的應用程序時，datetimepicker無法正常工作。我看到了使用瀏覽器的頁面視圖源，並且datetime輸入具有如下語法：

   <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"為什么？

最好的祝福 。

任何想法將不勝感激

Answer 1

EditorFor不支持傳遞HTML屬性。 因此，您傳遞的對象沒有任何作用。 （實際上，它所做的事情並沒有達到您的期望。它會使用這些值在ViewData設置鍵，例如ViewData["id"] = "pcal1" 。）id被設置為datetime因為那是屬性的名稱您正在為其創建編輯器。

因此，您有兩個選擇：

1. 不要使用EditorFor但類似TextBoxFor代替。 這將允許您傳遞要在輸入上呈現的HTML屬性：

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

2. 創建一個用於DateTime屬性的編輯器模板：

   視圖\\共享\\ 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調用的語法。 無需傳遞由id組成的匿名對象，您需要傳遞由htmlAttributes組成的htmlAttributes ，該對象本身具有id 。 這又是因為EditorFor僅在ViewData設置值。