正在尝试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没有加载在页面上,或者它是在jQuery之前加载的。检查页面的视图源以检查包含库的顺序正确性。