无法使 jquery UI 在 MVC 中工作

Question

我一整天都在尝试，但无法完成这项工作。这是我的设置：

我已经安装了：jQuery 2.1.3 和 jQuery.UI.Combined 1.11.2。

在BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));

但是在 ~/Content/themes/base/ 他们的名字中缺少 "jquery.ui." 前缀。

在我的布局中我有：

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")

我可以通过查看 firebug 来确认 jquery 和 jquery UI 已加载到页面上，但是当我尝试调用函数时 dialog() 我收到错误消息说它不是一个函数。

<td>
                    <div style="width:100px;height:30px; background:#009814" onclick="showPopup(this)"> </div>
                    <div style="position:relative" class="input-group"> Indicatoris go here </div>
</td>

    function showPopup(elem)
            {
                var el = $(elem);
                //el.siblings()[0] it has only 1 sibling (a div)
                el.siblings()[0].dialog({
                    autoOpen: false
                });
                el.siblings()[0].dialog('open');
            }

这里有什么问题？

Answer 1

您的代码有一些问题。首先，我建议不要使用 onclick 处理程序，而是使用 jquery click 事件，但我不会就此喋喋不休。

我会假定您的脚本位于正确的脚本块中，如果不是，则应该如此。

接下来，您的问题是您的 el.siblings()[0] 代码不是 return 一个 jQuery 对象，而是一个 HTML Dom DIV 对象，并且由于 jQueryUI 适用于 jQuery 对象，这就是它找不到对话框的原因。这是一个简单的修复。

function showPopup(elem)
        {
            var el = $(elem);
            //el.siblings()[0] it has only 1 sibling (a div)
            var sib = $(el.siblings()[0]).dialog({
                autoOpen: false
            });
            sib.dialog('open');
        }

因此，您的问题与 MVC、捆绑或任何您认为是的其他问题无关……它只是糟糕的 jQuery 代码。

无法使 jquery UI 在 MVC 中工作

Can't make jquery UI work in MVC

asp.net-mvc

jquery-ui