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

Question

日時テキストボックスにjquerydatepickersを表示したい。

私は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.cshtmlたのは機能しませんが、jqueryは何も警告しません

ありがとう

ブラウザの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

あなたには多くの問題があります。まず、テンプレート内の参照タグを削除する必要があります。これらは合法ではありません。これは、参照タグの使用方法ではありません。

次に、スクリプトタグを含めないでください。そうしないと、ページに複数のDateTimeがある場合、コードが複数回実行されます。

次に、これを行うことはできません：

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

エディタテンプレートはhtml属性を取りません。また、nullテンプレート（2番目のパラメーター）を指定しているため、テンプレートの名前がDateTime.cshtmlであっても、テンプレートはまったく使用されません。これにより、テンプレートの選択が上書きされます。

これを行うだけです：

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

また、プロパティの型定義でglobal ::を削除し、代わりに使用リストにSystemが含まれていることを確認してください。global::が型の解決に干渉するかどうかわからない。

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"/>

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

2 に答える 2

Related

Reference