正在尝试JQuery UI在MVC项目中创建模式

本文关键字:项目 模式 MVC 创建 UI JQuery | 更新日期: 2023-09-27 17:59:55

我使用的是MVC 5/C#。我试图遵循这里的示例:MVC5中的JQuery ui
这让我添加了带有NuGet的JQuery UI,我做到了。

以下是我的Index.chtml:中的内容

<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
未捕获的类型错误:$(…)。对话框不是函数

我猜".dialog不是函数"错误是因为jQuery-ui-1.11.4没有正确加载。我有版本不匹配或其他什么吗?

正在尝试JQuery UI在MVC项目中创建模式

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