jquery - asp.net mvc 3 razor & jquery ui datepicker

Question

我想在我的日期时间文本框中显示 jquery datepickers。

我在 Views/Shared/EditorTemplates 创建了 DateTime.cshtml 文件，添加了这个：

@model Nullable<System.DateTime>
@if (Model.HasValue)
{
    @Html.TextBox("", String.Format("{0:yyyy-MM-dd HH:mm}", Model.Value), new { @class = "date" })
}
else
{
    @Html.TextBox("", String.Format("{0:yyyy-MM-dd HH:mm}", ""), new { @class = "date" })
}
@{
    string name = ViewData.TemplateInfo.HtmlFieldPrefix;
    string id = name.Replace(".", "_");
}
<reference path="jquery-1.4.4.js" />
<reference path="jquery-ui.js" />
<script type="text/javascript">
    $(document).ready(function () {
        $(".date").datepicker
            ({
                dateFormat: 'dd/mm/yy',
                showStatus: true,
                showWeeks: true,
                highlightWeek: true,
                numberOfMonths: 1,
                showAnim: "scale",
                showOptions: {
                    origin: ["top", "left"]
                }
            });
    });
</script>

这是我的看法：

<td>
                <div class="editor-label" >
                    @Html.LabelFor(model => model.Birthdate)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.Birthdate, null, new { @class = "date"})
                    @Html.ValidationMessageFor(model => model.Birthdate)
                </div>
</td>

我在实体 ado 模型中的模型：

 public Nullable<global::System.DateTime> Birthdate
        {
            get
            {
                return _Birthdate;
            }
            set
            {
                OnBirthdateChanging(value);
                ReportPropertyChanging("Birthdate");
                _Birthdate = StructuralObject.SetValidValue(value);
                ReportPropertyChanged("Birthdate");
                OnBirthdateChanged();
            }
        }

但它不起作用我已经添加$(".date").click(function{alert('Clicked')});但DateTime.cshtmljquery没有提醒任何东西

谢谢

浏览器 html

<!DOCTYPE html>

<html>

<head>

    <title>Add Client - Lombard Admin Panel</title>

    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />

    <script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>

    <script src="/Scripts/jquery-ui.js" type="text/javascript"></script>

    <link href="/Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <div>

        <div id="top-bar">

            <div class="page-full-width cf">

                <ul id="nav" class="fl">

                    <li class="v-sep"><a href="#" class="round button dark ic-left-arrow image-left">მთავარი

                        საიტი&lt;/a></li>

                    <li class="v-sep"><a href="/home" class="round button dark home-left image-left">სახლი

                    </a></li>

                    <li class="v-sep"><a href="#" class="round button dark menu-user image-left">შესული

                        ხართ როგორც: <strong>acid</strong></a>

                        <ul>

                            <li><a href="#">ლომბარდის პროფილი&lt;/a></li>

                            <li><a href="#">პარამეტრები&lt;/a></li>

                            <li><a href="#">პაროლის შეცვლა</a></li>

                            <li><a href="/logout">გასვლა</a></li>

                        </ul>

                    </li>

                    <li><a href="#" class="round button dark menu-email-special image-left">3 ახალი შეტყობინება&lt;/a></li>

                    <li><a href="#" class="round button dark menu-logoff image-left">გასვლა</a></li>

                </ul>

            </div>

        </div>

        <div id="header-with-tabs">

            <div class="page-full-width cf">

                <a href="#" id="company-branding-small" class="fr">

                    <img src="/Content/images/company-logo.png" alt="Blue Hosting" /></a>

            </div>

        </div>

        <div id="content">

            <div class="page-full-width cf">

                <div class="side-menu fl">

                    <h3>

                        მთავარი მენიუ&lt;/h3>

                    <ul>

                        <li><a href="#">დამატება/რედაქტირება&lt;/a>

                            <ul>

                                <li><a href="#">ფილიალები&lt;/a></li>

                                <li><a href="/client">კლიენტები&lt;/a></li>

                                <li><a href="#">მომხმარებლები&lt;/a></li>

                                <li><a href="details.aspx">კომპანიის დეტალები</a></li>

                            </ul>

                        </li>

                        <li><a href="#">საწყობი&lt;/a></li>

                        <li><a href="#">შემოსავლები&lt;/a></li>

                        <li><a href="#">გაყიდვების ისტორია&lt;/a></li>

                        <li><a href="#">ანალიზი&lt;/a></li>

                    </ul>

                </div>

                <div class="side-content fr">

                    <div class="content-module">

                        <div id="render-body">

                            <h1>

    ახალი კლიენტის დამატება</h1>

<br />

<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>

<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

<script src="/Scripts/jquery-ui.js" type="text/javascript"></script>

<script src="/Scripts/jquery-1.4.4.js" type="text/javascript"></script>

<link href="/Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />



<form action="/client/Create" method="post">    <table>

        <tr>

            <td>

                <div class="editor-label">

                    <label for="Firstname">სახელი</label>

                </div>

                <div class="editor-field">

                    <input class="text-box single-line" id="Firstname" name="Firstname" type="text" value="" />

                    <span class="field-validation-valid" data-valmsg-for="Firstname" data-valmsg-replace="true"></span>

                </div>

                <div class="editor-label">

                    <label for="Lastname">გვარი&lt;/label>

                </div>

                <div class="editor-field">

                    <input class="text-box single-line" id="Lastname" name="Lastname" type="text" value="" />

                    <span class="field-validation-valid" data-valmsg-for="Lastname" data-valmsg-replace="true"></span>

                </div>

                <div class="editor-label">

                    <label for="IsMale">სქესი&lt;/label>

                </div>

                <div class="editor-field">

                    <select class="list-box tri-state" id="IsMale" name="IsMale"><option selected="selected" value="">Not Set</option>

<option value="true">True</option>

<option value="false">False</option>

</select>

                    <span class="field-validation-valid" data-valmsg-for="IsMale" data-valmsg-replace="true"></span>

                </div>

            </td>

            <td>

                <div class="editor-label" >

                    <label for="Birthdate">დაბადების თარიღი</label>

                </div>

                <div class="editor-field">

                    <input class="date" id="Birthdate" name="Birthdate" type="text" value="" /><reference path="jquery-1.4.4.js" />

<reference path="jquery-ui.js" />

<script type="text/javascript">

    $(document).ready(function () {

        $(".date").click(function{

        alert('Boo')

        });

        $(".date").datepicker

            ({

                dateFormat: 'dd/mm/yy',

                showStatus: true,

                showWeeks: true,

                highlightWeek: true,

                numberOfMonths: 1,

                showAnim: "scale",

                showOptions: {

                    origin: ["top", "left"]

                }

            });

    });

</script>



                    <span class="field-validation-valid" data-valmsg-for="Birthdate" data-valmsg-replace="true"></span>

                </div>

                <div class="editor-label">

                    <label for="PrivateNumber">პირადი ნომერი</label>

                </div>

                <div class="editor-field">

                    <input class="text-box single-line" id="PrivateNumber" name="PrivateNumber" type="text" value="" />

                    <span class="field-validation-valid" data-valmsg-for="PrivateNumber" data-valmsg-replace="true"></span>

                </div>

                <div class="editor-label">

                    <label for="Address">მისამართი&lt;/label>

                </div>

                <div class="editor-field">

                    <input class="text-box single-line" id="Address" name="Address" type="text" value="" />

                    <span class="field-validation-valid" data-valmsg-for="Address" data-valmsg-replace="true"></span>

                </div>

            </td>

            <td>

                <div class="editor-label">

                    <label for="Phone1">ტელ. 1</label>

                </div>

                <div class="editor-field">

                    <input class="text-box single-line" id="Phone1" name="Phone1" type="text" value="" />

                    <span class="field-validation-valid" data-valmsg-for="Phone1" data-valmsg-replace="true"></span>

                </div>

                <div class="editor-label">

                    <label for="Phone2">ტელ. 2</label>

                </div>

                <div class="editor-field">

                    <input class="text-box single-line" id="Phone2" name="Phone2" type="text" value="" />

                    <span class="field-validation-valid" data-valmsg-for="Phone2" data-valmsg-replace="true"></span>

                </div>

                <div class="editor-label">

                    <label for="Email">ელ-ფოსტა&lt;/label>

                </div>

                <div class="editor-field">

                    <input class="text-box single-line" id="Email" name="Email" type="text" value="" />

                    <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>

                </div>

            </td>

        </tr>

    </table>

    <br />

    <p>

        <input type="submit" value="დამატება" class="button round blue image-right ic-add text-upper" />

    </p>

</form><div>

    <a href="/client">უკან დაბრუნება&lt;/a>



</div>



                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div id="footer">

            <p>

                &copy; Copyright 2012 <a href="#">Acid Labs 2011</a>. All rights reserved.</p>

            <p>

                <strong>Lombard Admin Panel </strong>V 1.0 <a href="http://www.acidlabs.ge">Acid Labs</a></p>

        </div>

    </div>

</body>

</html>

score 0 · Accepted Answer

好的，我遇到了类似的问题，这就是我解决问题的方法：

我创建了一个 UserControl 并在 Views/Shared/EditorTemplates 中将其命名为“DateTime”（DateTime.ascx）添加添加了这个：

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime?>" %>
<%: Html.TextBox("",  String.Format("{0:yyyy-MM-dd}", Model.HasValue ? Model : DateTime.Today), new { @class = "dp"})%>

我的视图看起来像这样：

<div class="editor-field">
        @Html.EditorFor(model => model.ReleaseDate) 
        @Html.ValidationMessageFor(model => model.ReleaseDate)
    </div>

我的脚本如下所示：

<script type="text/javascript">
$(function () {
    $(".dp").datepicker();
});

这些是我添加的链接（如果你没有它们）：

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js") " type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.datepicker.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.core.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/DatePickerReady.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" type="text/css" rel="Stylesheet"/>
<link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" type="text/css"/ rel="Stylesheet"/>
<link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" type="text/css" rel="Stylesheet"/>

score 0 · Accepted Answer

你有很多问题。首先，您需要去掉模板中的引用标签，它们是不合法的。这不是您使用参考标签的方式。

其次，您不想包含 script 标签，否则如果页面上有多个 DateTime，它将多次执行代码。

接下来，您不能这样做：

@Html.EditorFor(model => model.Birthdate, null, new { @class = "date"})

编辑器模板不采用 html 属性。您还指定了一个空模板（第二个参数），因此它根本不使用任何模板，即使您的模板名为 DateTime.cshtml，这也会覆盖模板选择。

只需这样做：

@Html.EditorFor(model => model.Birthdate)

另外，在你的属性的类型定义中去掉 global:: ，而是确保你在 using 列表中包含 System 。不确定 global:: 是否会干扰类型解析。

jquery - asp.net mvc 3 razor & jquery ui datepicker

2 回答 2

Related