Question

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

<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不显示。

谢谢，彼得

Answer 1

在layout.cshtml视图中，移动

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

从身体到头部也加入头部

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

Answer 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

一个。从http://jqueryui.com/tabs/页面的 视图来源 链接中添加一些代码（它位于< div id="tabs" > ... < div >内）

B中。添加此

＆LT; div> 日期：＆lt;输入id =＆＃34; datep＆＃34;类型=＆＃34;文本＆＃34; /＆gt; ＆LT; / div＆gt;

DONE !!!

enter image description here

Answer 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://，因此您的网页上没有安全和不安全的商品。

Answer 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")

MVC4 jQuery UI不起作用

4 个答案: