MVC4 jQuery UI 不起作用答案

【问题标题】：MVC4 jQuery UI does not workMVC4 jQuery UI 不起作用
【发布时间】：2012-10-28 20:05:34
【问题描述】：

我无法让 jQuery UI 在我的 ASP.NET MVC4 应用程序中工作。我尝试了对话框和日期选择器。这是我观点的部分代码。

<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
    alert('A');
    //$('#datepicker').val('test');
    $('#datepicker').datepicker();
    alert('B');
});
</script>
<h1>Test</h1>
<form id="testForm" action="#" method="get">
    <input type="text" id="datepicker" name="datepicker" class="datepicker" />
</form>

显示警报 A。当我取消注释下一行时，将分配值测试。但是 datepicker 不工作并且不显示警报 B。

谢谢，彼得

【问题讨论】：

控制台中是否有任何错误（Chrome 开发工具栏、Firebug 等？）

标签： asp.net-mvc jquery-ui asp.net-mvc-4 jquery-ui-datepicker

【解决方案1】：

在 layout.cshtml 视图中，移动

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

从身体到头部并添加头部

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

【讨论】：

不，您还需要添加 css：@Styles.Render("~/Content/themes/base/css")

【解决方案2】：

我花了很多时间来弄清楚如何让它发挥作用。

最后的步骤如下：

创建 ASP .NET MVC4 项目 Internet 应用程序。

清理_Layout.cshtml 的最后几行，使其看起来像这样

<footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>

    @RenderSection("scripts", required: false)

像我在这里所做的那样更改标题

 <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")
        @Styles.Render("~/Content/themes/base/css")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryui")
        @Scripts.Render("~/bundles/modernizr")
        <script type="text/javascript">
            $(document).ready(function () {
                // We will test DataPicker
                $('#datep').datepicker();
                // We will test TABS
                $(function () {
                    $("#tabs").tabs();
                });
            });
        </script>
    </head>

删除@section featured {部分之后的所有代码并添加一些html到Home/Index.cshtml

A.从http://jqueryui.com/tabs/页面的查看源代码链接放一些代码（在< div id="tabs" > ... < div >里面）

B.添加这个

日期：

完成！！！

【讨论】：

【解决方案3】：

您的代码运行良好：http://jsfiddle.net/m3QFL/

检查控制台是否有错误以及脚本的路径。 Chrome 包含一个控制台来帮助进行 js 调试，或者您可以运行 FireFox 和 FireBug。

任何一个都可以帮助您解决此类问题。

此外，jquery 和 jquery ui 的托管版本可通过 jquery 和 jquery ui 或 Google 获得。这是你的：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

jquery ui 在其主页底部有指向其托管版本的链接。

顺便说一句，// 而不是 http:// 允许脚本从站点获取 http 前缀。如果您使用 ssl，它将获取 https://，因此您的页面上没有安全和非安全项目。

【讨论】：

非常感谢您的回答。我尝试了 googleapis 脚本，结果相同。当我在 FireBug 中的所有三行设置断点时，第一个被命中，然后出现警报 A，然后页面被加载并且调试器显示“调试器未激活”。
@Petr 这是 Firebug 安装的问题：stackoverflow.com/questions/9990906/…

【解决方案4】：

您需要在 _Layout.cshtml 中添加几行代码，以使 jQuery UI 开箱即用。首先是 javascript 包：

@*you should already have this line*@
@Scripts.Render("~/bundles/jquery")

@*add this line*@
@Scripts.Render("~/bundles/jqueryui")

接下来，您还需要 jQuery UI 的 CSS：

@*you should already have this line*@
@Styles.Render("~/Content/css")

@*add this line*@
@Styles.Render("~/Content/themes/base/css")

【讨论】：