3

我无法让 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。

谢谢，彼得

4

4 回答 4

10

在 layout.cshtml 视图中，移动

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

从身体到头部并添加头部

@Scripts.Render("~/bundles/jqueryui")
于 2012-11-01T15:13:55.360 回答
4

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

最后步骤如下：

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

  2. 清理最后几行，_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)

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

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

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

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

    B. 添加这个


<div> 日期：<input id="datep" type="text" /></div>

完毕！！！

在此处输入图像描述

于 2013-04-18T13:00:51.480 回答
2

您的代码在小提琴中运行得很好：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://因此您的页面上没有安全和非安全项目。

于 2012-10-28T20:52:39.873 回答
2

您需要在 _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")
于 2013-03-09T02:56:04.337 回答