Question

Datepicker.js

$(function () {
$('#voters_bdate').datepicker();

}）;

这些是布局视图中包含的文件：

@Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="~/Scripts/vendor/jquery.hashchange.min.js" type="text/javascript"></script>

我还在视图中包含了这些文件：

<link href="@Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />

<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<script src="~/Scripts/Datepicker.js"></script>

但仍无效。

<input type="text" name="voters_bdate" id="voters_bdate">

我也得到了这个错误＆＃34; Uncaught TypeError：undefined不是函数＆＃34;当我看着控制台时。

Answer 1

所以，这里是MVC4模板创建的默认_Layout文件，删除了所有额外的标记：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>
    <body>
        @RenderBody()

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

注意RenderBody（）与RenderSection相关的位置（＆＃34;脚本＆＃34;）？记下它，因为我们马上回过头来。

以下是我们可能创建的视图示例：

@{
    ViewBag.Title = "Example";
}

<div>
    <p>
        As Gregor Samsa awoke one morning from uneasy dreams, he found himself transformed in his bed into a gigantic insect-like creature.
    </p>
</div>

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

当调用此特定操作时，视图将替换（或注入，如果您愿意），其中RenderBody出现在_Layout中。如果视图包含@section，那么该部分中的任何内容都将替换为_Layout中的等效部分。鉴于_Layout和上面的观点，我们得到了这个生成的HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Example - My ASP.NET MVC Application</title>
        <link href="~/Content/Site.css" rel="stylesheet" />
        <script src="~/Scripts/modernizr-2.6.2.js"></script>
    </head>
    <body>
        <div>
            <p>
                As Gregor Samsa awoke one morning from uneasy dreams, he found himself transformed in his bed into a gigantic insect-like creature.
            </p>
        </div>

        <script src="/Scripts/jquery-1.8.2.min.js"></script>
        <script src="/Scripts/jquery.validate.min.js"></script>
        <script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
    </body>
</html>

现在，如果我们不使用某个部分，并在视图中直接引用jQuery验证，会发生什么？

@{
    ViewBag.Title = "Example";
}

<div>
    <p>
        As Gregor Samsa awoke one morning from uneasy dreams, he found himself transformed in his bed into a gigantic insect-like creature.
    </p>
</div>

@Scripts.Render("~/bundles/jqueryval")

我们呈现的HTML看起来像这样：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Example - My ASP.NET MVC Application</title>
        <link href="~/Content/Site.css" rel="stylesheet" />
        <script src="~/Scripts/modernizr-2.6.2.js"></script>
    </head>
    <body>
        <div>
            <p>
                As Gregor Samsa awoke one morning from uneasy dreams, he found himself transformed in his bed into a gigantic insect-like creature.
            </p>
        </div>

        <script src="/Scripts/jquery.validate.min.js"></script>
        <script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>

        <script src="/Scripts/jquery-1.8.2.min.js"></script>
    </body>
</html>

不幸的是，这是一个问题。 jQuery Validate需要jQuery，因此无法加载，您将在JavaScript控制台中看到错误。

同样的概念适用于您可能在项目中使用的任何库，因此请花些时间学习如何使用部分并进行适当的捆绑。如果您正在学习ASP.NET MVC，音乐商店教程是一个不错的起点：http://www.asp.net/mvc/overview/older-versions/mvc-music-store/mvc-music-store-part-1

Datepicker在MVC4中不起作用

1 个答案: