MVC4 _Layout.cshtml 脚本包

Question

在我的 _Layout.cshtml 页面的头部我有这行代码...

<script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>

我检查了脚本目录，jquery-ui 就在那里。我对 MVC 尤其是 MVC4 相当陌生。我与 3 合作过，我不相信与我记得的捆绑包有任何关系，或者至少使用过。据我所知，这将所有脚本捆绑成一个紧密键入的文本格式，去掉空格和诸如此类的东西。所以我假设 jquery-ui 将被添加到每个页面，因为它是一个共享页面，就像 Web 表单中的母版页一样。

现在在我的 Index.cshtml 文件中，该文件使用顶部的共享布局页面。

$(function () {
    $('#DateOfBirth').datepicker();
});

我也在我的 Index.cshtml 文件中添加了包含此代码的部分视图。

@Html.Partial("_SignUp", Model)

部分视图包含我要添加到的字段。不幸的是，它没有将日期选择器添加到 type=text 的输入字段，是的，该字段的 id="#DateOfBirth"。有什么关系？

编辑：我确实收到此错误 - “未捕获的类型错误：对象 [对象对象] 没有方法 'datepicker'

Answer 1

我看不出您的代码有任何问题，并且无法重现该问题（ASP.NET MVC 4 Beta）。以下对我来说很好：

1. 使用 Internet 模板创建一个新的 ASP.NET MVC 4 项目

2. 添加视图模型：

   public class MyViewModel
   {
       public DateTime DateOfBirth { get; set; }
   }
   

3. 家庭控制器：

   public class HomeController : Controller
   {
        public ActionResult Index()
        {
           return View(new MyViewModel
           {
               DateOfBirth = DateTime.Now
           });
       }
   }
   

4. Index.cshtml:

   @model MyViewModel
   
   <script type="text/javascript">
   $(function () {
       $('#DateOfBirth').datepicker();
   });
   </script>
   
   @Html.Partial("_SignUp", Model)
   

5. _SignUp.cshtml

   @model MyViewModel
   @Html.EditorFor(x => x.DateOfBirth)
   

6. 结果：

所以我想现在问题变成了，你做了什么不同的事情？

Answer 2

我看到的情况是，如果我将 javascipt 代码移出视图

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

并将其放在 _Layout.cshtml 下方的

@Scripts.Render("~/bundles/jquery","~/bundles/jqueryui")
@RenderSection("scripts", required: false) 

行（注意我必须包含 jqUi 包）它工作正常！！！

但我希望它按照我希望的方式工作。所以在脚本完全加载之前就触发了准备好的文档？

更新： 只需用 @section scripts {} 包围您的脚本，这将在页面底部的 jquery.js 文件下方呈现。

@section scripts {
<script type="text/javascript">
    $(function () {

        // Accordion
        $("#accordion").accordion({ header: "h3", active: 0, fillSpace: false });
        $("#bidTabs").tabs();
        $("#jobTabs").tabs();
        $("#settingsTabs").tabs(); 
    });
</script>
}