2014-10-17 48 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中的值。