jQuery DatePicker 不会出现 asp.net答案

【问题标题】：jQuery DatePicker doesn't appear asp.netjQuery DatePicker 不会出现 asp.net
【发布时间】：2015-05-20 23:19:09
【问题描述】：

我对 Web 开发领域还很陌生。我正在学习 Asp.net MVC，我想创建一个简单的表单元素，让用户从使用 jQuery 注入的 datepicker 中选择日期。这是我到目前为止所做的，

我向布局文件“_Layout.cshtml”添加了对 jquery 库的引用，如下所示：

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

这是我要渲染的视图，其中包含使用 razor 插入日期生成的文本框元素。在表单之前插入一个简单的 jquery 脚本以注入 datepicker，但在运行表单后我无法选择日期

 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：

每当我点击 BirthDate TextBox 时，我什么都没有

【问题讨论】：

如果将包含初始化的脚本移到fieldset之后，是否有效？另外，删除` , the file is already loaded in the head`。
谢谢大佬的建议，不过也没用
这很奇怪......实际上不起作用的是什么？日期选择器是否弹出？去掉所有选项，让默认设置看看有没有出现。
没错，日期选择器不会弹出
为什么要同时包含所有 jQuery 文件的开发和发布 (.min) 版本？您一次只能使用一个

标签： jquery html asp.net-mvc razor

【解决方案1】：

将日期选择器类添加到文本框。

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

那么……

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

可能还希望 javascript 位于页面底部，而不是顶部。

【讨论】：

【解决方案2】：

我认为从外观上看，您在整个商店都有参考，我建议您使用 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>

您不需要像以前那样手动加载它们。这将使您的所有脚本保持整洁。如果这不起作用，请加载浏览器控制台并查看正在加载的文件，并查看是否有两次加载。

【讨论】：