[英]Using Persian Datetimepicker in MVC4
我正在尝试在项目中使用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"
为什么?
最好的祝福 。
任何想法将不胜感激
EditorFor
不支持传递HTML属性。 因此,您传递的对象没有任何作用。 (实际上,它所做的事情并没有达到您的期望。它会使用这些值在ViewData
设置键,例如ViewData["id"] = "pcal1"
。)id被设置为datetime
因为那是属性的名称您正在为其创建编辑器。
因此,您有两个选择:
不要使用EditorFor
但类似TextBoxFor
代替。 这将允许您传递要在输入上呈现的HTML属性:
@Html.TextBoxFor(model => model.datetime, new { type="datetime", @id = "pcal1", @class = "pdate" })
创建一个用于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
设置值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.