1. 首頁
  2. 問答
  3. asp.net mvc 3剃鬚刀和jQuery的日期選擇器

asp.net mvc 3剃鬚刀和jQuery的日期選擇器

2012-05-02 94 views
0

我想在我的日期時間文本框中顯示jQuery的日期選擇器。asp.net mvc 3剃鬚刀和jQuery的日期選擇器

我創建了意見DateTime.cshtml文件/共享/ EditorTemplates ADD相加這樣的：

@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">მთავარი 

         საიტი</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="#">ლომბარდის პროფილი</a></li> 

          <li><a href="#">პარამეტრები</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 ახალი შეტყობინება</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> 

         მთავარი მენიუ</h3> 

        <ul> 

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

          <ul> 

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

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

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

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

          </ul> 

         </li> 

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

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

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

         <li><a href="#">ანალიზი</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">გვარი</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">სქესი</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">მისამართი</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">ელ-ფოსტა</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">უკან დაბრუნება</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>

來源

2012-05-02 Irakli Lekishvili

+0

您可以發佈您的瀏覽器呈現的HTML？ –

+0

請參閱更新 –

回答

0

你有許多問題。首先，你需要擺脫模板中的引用標籤，它們是不合法的。這不是你如何使用參考標籤。

其次，您不希望包含腳本標記，因爲否則如果您在頁面上有多個DateTime，它將多次執行代碼。

接下來，你可以這樣做：

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

編輯模板不採取HTML屬性。您還要指定一個空模板（第二個參數），因此它根本不使用任何模板，即使您的模板名爲DateTime.cshtml，也會覆蓋模板選擇。

只是這樣做：

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

而且，擺脫了全球的::你的財產的類型定義，而是確保您在使用列表中包括系統。不確定global ::是否會干擾類型解析。

來源

2012-05-02 17:27:52

+0

謝謝你我說的一切，但結果是一樣的。什麼也沒有發生 –

+0

@Acid - 你在哪裏把你的datepicker JavaScript代碼？ –

+0

的意見。它是否正確？ –

0

好吧，我也有類似的問題，這是我如何解決我的問題：

我在視圖中創建一個用戶控件，並把它稱爲「日期時間」（DateTime.ascx）/共享/ EditorTemplates ADD相加這樣的：

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

來源

2014-02-21 09:45:46 Enkosi

相關問題

 相關問題