2014-10-17 60 views
1

我想在我的項目中使用persian datetimepicker。我正在使用MVC4。在MVC4中使用波斯語Datetimepicker

所以我找到了一個鏈接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") 
} 

當你CA N參看我添加了一些額外的代碼,以我的日期時間,你可以在這裏看到:

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

左右,但哪裏是:

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

你上面看到我加入這部分代碼在創建視圖問題,當我運行我的應用程序的DateTimePicker不起作用。我看到使用的瀏覽器頁面查看源代碼和我的日期時間輸入有這樣的語法:

<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"爲什麼?

此致敬意。

任何想法可以理解

回答

2

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 \日期時間。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組成的對象,該對象本身具有id。這是因爲EditorFor只是設置了ViewData中的值。