[英]Using Persian Datetimepicker in MVC4
I am trying to use a persian datetimepicker
inside my project .I am using MVC4. 我正在尝试在项目中使用persian datetimepicker
。我正在使用MVC4。
So i found a link http://stackoverflow.com/questions/16248909/persian-calender-in-mvc-asp-net
and i decided to implement this . 所以我找到了一个链接http://stackoverflow.com/questions/16248909/persian-calender-in-mvc-asp-net
,因此我决定实现它。
I added some css and js
file to my project as you can see here (i added to my layout page): 我在项目中添加了一些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>
So i created a model as you can see here : 所以我创建了一个模型,您可以在这里看到:
namespace MvcApplication2.Models
{
public class DTpicker
{
public string name { set;get;}
public DateTime datetime { set; get; }
}
}
I create a view create view
as you can see here : 我创建了一个视图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")
}
As you can see i added some extra code to my datetime as you can see here : 如您所见,我在日期时间中添加了一些额外的代码,如此处所示:
@Html.EditorFor(model => model.datetime, new { @id = "pcal1", @class = "pdate" })
I added this part of code to the create view as you saw above : 如上所见,我将这部分代码添加到了create视图中:
<script type="text/javascript">
var objCal1 = new AMIB.persianCalendar('pcal1'); </script>
So but where is the problem ,when i run my application the datetimepicker doesn't work .I saw the view source of the page using browser and my datetime input have a syntax like this : 因此,问题出在哪里,当我运行我的应用程序时,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>
As you know the id should be pcal1
but as you can see the id is id="datetime"
why ? 如您所知,该ID应该是pcal1
但是如您所见,该ID为id="datetime"
为什么?
best regards . 最好的祝福 。
any ideas will be appreciated 任何想法将不胜感激
EditorFor
doesn't support passing HTML attributes. EditorFor
不支持传递HTML属性。 So the object you're passing isn't doing anything. 因此,您传递的对象没有任何作用。 (Actually, it is doing something just not what you expect. It will set keys in ViewData
with those values, eg ViewData["id"] = "pcal1"
.) The id is being set to datetime
because that's the name of the property you're creating an editor for. (实际上,它所做的事情并没有达到您的期望。它会使用这些值在ViewData
设置键,例如ViewData["id"] = "pcal1"
。)id被设置为datetime
因为那是属性的名称您正在为其创建编辑器。
So, you have two options: 因此,您有两个选择:
Don't use EditorFor
but something like TextBoxFor
instead. 不要使用EditorFor
但类似TextBoxFor
代替。 That will allow you pass HTML attributes to be rendered on the input: 这将允许您传递要在输入上呈现的HTML属性:
@Html.TextBoxFor(model => model.datetime, new { type="datetime", @id = "pcal1", @class = "pdate" })
Create a editor template to be used for DateTime
properties: 创建一个用于DateTime
属性的编辑器模板:
Views\\Shared\\EditorTemplates\\DateTime.cshtml 视图\\共享\\ 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)
Then in your view: 然后在您看来:
@Html.EditorFor(model => model.datetime, new { htmlAttributes = new { id = "pcal1" } })
Notice that the pdate
class is being added by the template, so you don't have to pass it manually. 请注意,模板已添加pdate
类,因此您不必手动传递它。 I'm assuming this is what your JavaScript attaches to, so you'd want this class to always be present on inputs for DateTime
properties. 我假设这是您的JavaScript附带的内容,因此您希望此类始终出现在DateTime
属性的输入中。 Also, note the syntax for the EditorFor
call. 另外,请注意EditorFor
调用的语法。 Instead of passing an anonymous object consisting of id
, you need to pass one consisting of htmlAttributes
, which then itself has an id
. 无需传递由id
组成的匿名对象,您需要传递由htmlAttributes
组成的htmlAttributes
,该对象本身具有id
。 This is because, again, EditorFor
just sets the values in ViewData
. 这又是因为EditorFor
仅在ViewData
设置值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.