【发布时间】：2014-01-21 12:21:11
【问题描述】：
我有一个 MVC4 页面，它允许用户在保存到数据库之前选择和映像并向其中添加 cmets。该页面还有一个 jquery 模态对话框，用于将新图像上传到目录。
一切正常，但将 VS2013 项目迁移到新机器后，它似乎停止工作，在使用 IIS Express 或已发布版本的浏览器中出现错误：
Uncaught TypeError: Object [object Object] has no method 'dialog'
我尝试关注其他帖子，这些帖子表明 Jquery 被定义太多次或顺序错误，但这似乎并不能解决我的问题。
_Layout 页面是：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - ourLeaderboard</title>
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="@Url.Content("~/Scripts/tinymce/jquery.tinymce.js")" type="text/javascript"></script>
<link href="~/Content/jquery-ui.css" rel="stylesheet" />
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/jqueryval")
<link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")"
rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")"
rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")"
rel="stylesheet" type="text/css" />
<script src="~/Scripts/tinymce/jquery.tinymce.min.js"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")"
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")"
type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/DatePickerReady.js")"
type="text/javascript"></script>
<script>
$(function () {
$('#my-dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true
});
$('.modal').click(function () {
$('#my-dialog').load(this.href, function () {
$(this).dialog('open');
});
return false;
});
});
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Pyecombe Golf Club", "Index", "Home", null, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Competitions", "Index", "Competition")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - ourLeaderboard, (C) Pyecombe Golf Club</p>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"
type="text/javascript"></script>
</footer>
</div>
@Styles.Render("~/Content/themes/base/css", "~/Content/css")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
我的看法如下：
@model ourLeaderboardDev.Models.Message
@{
ViewBag.Title = "Upload Image";
}
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'TheTitle',
modal: true,
open: function(event, ui) {
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('.ShowDialogButton').click(function () {
$('#dialog').dialog('open');
});
});
</script>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Competition News</h4>
<hr />
@Html.ValidationSummary(true)
@Html.HiddenFor(model => model.Id)
<div class="form-group">
@Html.LabelFor(model => model.Message1, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Message1)
@Html.ValidationMessageFor(model => model.Message1)
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Message2, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(model => model.Message2, new SelectList(ViewBag.myFiles).AsEnumerable())
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Message3, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Message3)
@Html.ValidationMessageFor(model => model.Message3)
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
}
<a href="#" class="ShowDialogButton">Upload Image</a>
<div id="dialog" class="dialog" title="TheTitle" style="overflow: hidden;">
@using (Html.BeginForm("FileUpload", "Admin", null, FormMethod.Post, new { id = "FileUploadForm", enctype = "multipart/form-data" }))
{
<input type="file" name="files" id="file1" size="50" />
<input type="submit" id="submitFiles" name="submit" value="Upload Document" />
}
</div>
【问题讨论】：
-
你的html只有一个id为
dialog的元素，并且没有id为my-dialog的元素
标签： jquery asp.net asp.net-mvc-4 twitter-bootstrap modal-dialog