Question

我正在使用MVC 5 / C＃。我试图按照此处的示例进行操作：JQuery-ui in MVC5
这让我用NuGet添加JQuery-UI，我做了。

以下是我在Index.cshtml中的内容：

<div>
    <input type="button" value="Get Form" onclick="getForm()" />
</div>

<script type="text/javascript">
    function getForm() {
        $('#dialog').dialog({
            autoOpen: true,
            width: 400,
            resizable: false,
            title: 'Register',
            modal: true,
            open: function (event, ui) {

                $(this).load('@Url.Action("Register", "Registration")');
            },
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });
    }</script>

<div id="dialog"></div>

以下是我的_Layout.cshmtl文件中的内容：

    @Styles.Render("~/bundles/css")
    @Scripts.Render("~/bundles/scripts")
    @Styles.Render("~/Content/themes/base/css")

这是我的BundleConfig.cs中的内容（路径是正确的）：

    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add
        (
            // Ensure that "bootstrap.3.3.4.min.css" also exists in the directory so that it's used for minification, or else minification will fail.
            new StyleBundle("~/bundles/css")
                .Include
                (
                    "~/Content/css/bootstrap.3.3.4.css", 
                    "~/Content/css/sticky-footer.css",
                    "~/Content/css/style.css"
                )
        );

        bundles.Add
        (
            new ScriptBundle("~/bundles/scripts")
                .Include
                (
                    "~/Content/JS/jquery.1.11.2.js",
                    "~/Content/JS/bootstrap.3.3.4.js",
                    "~/Content/JS/ie10-viewport-bug-workaround.js",
                    "~/Scripts/jquery-ui-1.11.4.js"
                )
        );

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

我收到了javascript错误：

未捕获的ReferenceError：jQuery未定义
    $ .ui @ jquery-ui-1.11.4.js：14
    （匿名函数）@ jquery-ui-1.11.4.js：16
  未捕获的TypeError：$（...）。对话框不是函数

我猜测＆＃39; .dialog不是一个功能＆＃39;错误是因为jQuery-ui-1.11.4未正确加载。我的版本不匹配还是什么？

Answer 1

看起来jQuery ui没有加载到页面上或者在jQuery之前加载。检查页面的查看源以检查包含的库的顺序是否正确。

尝试使用JQuery-UI在MVC项目中创建模态

1 个答案: