jQuery DatePicker不會出現asp.net

我對web開發的世界很陌生。我正在學習Asp.net MVC，我想創建一個簡單的表單元素，讓用戶從使用jQuery注入的日期選擇器中選擇日期。這是我迄今已完成，jQuery DatePicker不會出現asp.net

我加入到jQuery庫的引用版式文件「_Layout.cshtml」像這樣：

<head> 
    <meta charset="utf-8" /> 
    <title>@ViewBag.Title - My ASP.NET MVC Application</title> 
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> 
    <meta name="viewport" content="width=device-width" /> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
    <script src="~/Scripts/jquery-1.8.2.js"></script> 
    <script src="~/Scripts/jquery-1.8.2.min.js"></script> 
    <script src="~/Scripts/jquery-ui-1.8.24.js"></script> 
    <script src="~/Scripts/jquery-ui-1.8.24.min.js"></script> 
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> 
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> 
    <script src="~/Scripts/jquery.validate-vsdoc.js"></script> 
    <script src="~/Scripts/jquery.validate.js"></script> 
    <script src="~/Scripts/jquery.validate.min.js"></script> 
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script> 
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> 
    <script src="~/Scripts/knockout-2.2.0.debug.js"></script> 
    <script src="~/Scripts/knockout-2.2.0.js"></script> 
    <script src="~/Scripts/modernizr-2.6.2.js"></script> 
</head>

這是我想渲染視圖包含一個文本框元素使用剃鬚刀插入日期生成。表格前插入一個簡單的jQuery腳本注入日期選擇器，但我不能選擇後，我跑的形式

model MvcApplication3.Models.RegisterModel 
@{ 
ViewBag.Title = "Register"; 
} 

<hgroup class="title"> 
    <h1>@ViewBag.Title.</h1> 
    <h2>Create a new account.</h2> 
</hgroup> 

<script src="~/Scripts/jquery-1.8.2.js"></script> 
<script> 
     $(document).ready(function() { 
      $('#BirthDate').datepicker({ 
       showOn: "button", 
       buttonImage: "/images/calendar-icon.png", 
       buttonImageOnly: true, 
       buttonText: "Select date" 
      }); 
     }); 
</script> 

@using (Html.BeginForm()) { 
@Html.AntiForgeryToken() 
@Html.ValidationSummary() 

<fieldset> 
    <legend>Registration Form</legend> 
    <ol> 
     <li> 
      @Html.LabelFor(model => model.UserName) 
      @Html.TextBoxFor(m => m.UserName) 
     </li> 
     <li> 
      @Html.LabelFor(model => model.Password) 
      @Html.PasswordFor(model => model.Password) 
     </li> 
     <li> 
      @Html.LabelFor(model => model.ConfirmPassword) 
      @Html.PasswordFor(model => model.ConfirmPassword) 
     </li> 
     <li> 
      @Html.LabelFor(model => model.Email) 
      @Html.TextBoxFor(model => model.Email) 
     </li> 
     <li> 
      @Html.LabelFor(model => model.BirthDate) 
      @Html.TextBoxFor(model => model.BirthDate) 
     </li> 
    </ol> 
    <input type="submit" value="Register" /> 
</fieldset> 
} 

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
}

這是呈現HTML日期：

Rendered Hmtl

每當我點擊出生日期TextBox我什麼也沒有

來源

2015-05-20 Ibrahim Amer

如果在'fieldset'之後移動包含初始化的腳本，它會工作嗎？此外，刪除''，該文件已經加載到'head'中。 –

謝謝您的建議，但它也不起作用 –

這很奇怪......它是什麼不實際工作？日期選擇器是否彈出或不彈出？刪除所有選項並讓默認設置查看是否顯示。 –

我認爲你有看到它的所有商店的參考，我建議你使用MVC包含的捆綁。在你BundleConfig類檢查你把所有的腳本加載這樣的：

  bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
         "~/Scripts/jquery.cookie.js", 
         "~/Scripts/jquery-{version}.js")); 

      bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
         "~/Scripts/jquery-ui-{version}.js")); 

      bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
         "~/Scripts/dataTables.js", 
         "~/Scripts/jquery.unobtrusive*", 
         "~/Scripts/jquery.validate*"));

這是如何我有一些項目加載一個例子。然後在您_Layout.cshtml你把這樣的：

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <title>@ViewBag.Title</title> 
    @Styles.Render("~/Content/css") 
    @Styles.Render("~/Content/themes/base/css") 
    @Scripts.Render("~/bundles/modernizr") 
</head> 
    <body> 
     @RenderBody() 
     @Scripts.Render("~/bundles/jquery") 
     @Scripts.Render("~/bundles/jqueryui") 
    </body>

你不應該需要一個像你必須手動加載它們。這將保持你所有的腳本整潔。如果這不起作用，請加載瀏覽器控制檯並查看正在加載哪些文件，並查看是否有任何文件正在加載兩次。

來源

2015-05-20 14:51:16 nik0lias

將datepicker類添加到文本框中。

@Html.TextBoxFor(model => model.BirthDate, new { @class="datepicker" })

然後...

$(document).ready({ 
    $('.datepicker').datepicker(); 
});

可能還需要的是JavaScript的是在你的頁面的底部，而不是往上頂。

來源

2015-05-20 14:56:10 ragerory

jQuery DatePicker不會出現asp.net

回答

相關問題