Asp.net mvc MVC4 jQuery UI不工作_Asp.net Mvc_Jquery Ui_Asp.net Mvc 4_Jquery Ui Datepicker

Asp.net mvc MVC4 jQuery UI不工作

asp.net-mvc jquery-ui asp.net-mvc-4

Asp.net mvc MVC4 jQuery UI不工作,asp.net-mvc,jquery-ui,asp.net-mvc-4,jquery-ui-datepicker,Asp.net Mvc,Jquery Ui,Asp.net Mvc 4,Jquery Ui Datepicker,我无法在ASP.NET MVC4应用程序中使用jQuery UI。我试过dialog和datepicker。这是我观点的部分代码 <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"></scr

我无法在ASP.NET MVC4应用程序中使用jQuery UI。我试过dialog和datepicker。这是我观点的部分代码

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


$（文档）.ready（函数（）{
警报（“A”）；
//$（'#datepicker'）.val（'test'）；
$（'#datepicker'）。datepicker（）；
警报（“B”）；
});
试验

将显示警报A。当我取消注释下一行时，将分配值test。但是日期选择器不工作，并且警报B不显示

谢谢，

Petr

您的代码运行得很好：

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

任何一个都将在帮助您解决此类问题方面发挥很大作用

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

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

顺便说一句，

而不是

http://

允许脚本从站点拾取

http

前缀。如果您使用ssl，它将拾取https://，因此您的页面上没有安全和非安全项目。

在layout.cshtml视图中，移动

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

从身体到头部，再加上头部

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

您需要在_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")

我花了很多时间想办法让它工作

最后，步骤如下：

创建ASP.NETMVC4项目Internet应用程序

清理

\u 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)


&抄袭@DateTime.Now.Year-我的ASP.NET MVC应用程序
@RenderSection（“脚本”，必需：false）

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


@Title-我的ASP.NET MVC应用程序
@style.Render（“~/Content/css”）
@style.Render（“~/Content/themes/base/css”）
@Scripts.Render（“~/bundles/jquery”）
@Scripts.Render（“~/bundles/jqueryui”）
@Scripts.Render（“~/bundles/modernizer”）
$（文档）.ready（函数（）{
//我们将测试数据采集器
$（'#datep'）.datepicker（）；
//我们将测试标签
$（函数（）{
$（“#制表符”）.tabs（）；
});
});

删除

@section{

部分之后的所有代码，并将一些html添加到

Home/Index.cshtml

A.从页面的查看源代码链接中放入一些代码（它位于
…
）
B.加上这个

日期：
完成

控制台（Chrome dev工具栏、Firebug等）中是否有任何错误？非常感谢您的回答。我尝试了googleapis脚本，得到了相同的结果。当我在Firebug的所有三行上设置断点时，第一行被命中，然后出现警报a，然后页面被加载，调试程序显示“debugger not activated”@Petr这是Firebug安装的一个问题：不，您还需要添加css：@Styles.Render（“~/Content/themes/base/css”）
<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>