【发布时间】：2015-05-07 06:08:22
【问题描述】：
对于 MVC 和 jQuery 来说都很新，所以我不确定如何让它工作。我拼凑了一个（有点）工作模式对话框表单和一个 ajax 回发。已经搜索了两天，但没有找到很棒的 MVC+jQuery 示例。数据按预期插入，只是我很难使用的 UI。
我有两个视图：索引和创建。索引列出了普通表中的所有记录，并使用 Razor 循环结果。 Create 是我正在加载到模式对话框中的插入表单：
@model IEnumerable<MyProject.Models.StockIndex>
@{
ViewBag.Title = "Admin: Stock Index Home";
Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}
<h2>View Stock Indices</h2>
<p>
<a href="#" id="createLink">Create New</a>
<div id="createStockIndexForm"></div>
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Description)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Description)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
@Html.ActionLink("Details", "Details", new { id = item.Id }) |
@Html.ActionLink("Delete", "Delete", new { id = item.Id })
</td>
</tr>
}
</table>
@section Scripts {
<script>
$('#createLink').on('click', function () {
$("#createStockIndexForm").dialog({
autoOpen: true,
position: { my: "center", at: "top+350", of: window },
width: 600,
resizable: false,
title: 'Create Stock Index',
modal: true,
open: function () {
$(this).load('@Url.Action("Create", "AdminStockIndex")');
}
});
return false;
});
</script>
}
控制器动作：
public ActionResult Create()
{
var model = new StockIndexEditViewModel()
{
StockIndices = GetIndices()
};
return View(model);
}
[HttpPost]
public ActionResult Create(StockIndexEditViewModel model)
{
if (ModelState.IsValid)
{
...
}
return PartialView(model);
}
加载到对话框中的“创建”表单（上图）：
@model MyProject.Models.StockIndexEditViewModel
@{
ViewBag.Title = "CreatePartial";
Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}
<h2>CreatePartial</h2>
@using (Html.BeginForm("Create", "AdminStockIndex", FormMethod.Post, new { id = "createForm" }))
{
@Html.AntiForgeryToken()
<div id="result"></div>
<div class="form-horizontal">
<h4>StockIndexEditViewModel</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.SelectedParentId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownListFor(model => model.SelectedParentId, Model.StockIndices, "- Select One -", new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" id="createButton" class="btn btn-default" />
</div>
</div>
</div>
}
@section Scripts {
<script>
$("#createForm").on("submit", function (event) {
event.preventDefault();
$.ajax({
url: this.action,
type: this.method,
async: true,
data: $(this).serialize(),
success: function (data) {
if (data) {
var createForm = $("#createStockIndexForm").dialog();
createForm.dialog("close");
}
else {
$("#result").append("Something went fail.");
}
}
});
});
</script>
}
模式对话框总是空白，而不是关闭。在使用 Firebug 在 Firefox 中进行测试时，我偶尔会看到此错误，但并非每次都出现：
InvalidAccessError：参数或操作不受支持 底层对象
通过搜索，我发现这是一个 CORS 问题，FF 正在执行规则，而其他浏览器可能没有。令人沮丧的是错误并不总是发生 - 似乎是随机的。在 Chrome 中的行为相同，但不会在 JS 控制台中引发错误。
首先，我将如何做到这一点？其次，有没有办法通过ajax刷新父页面上的表格，无需插件？
更新：
在埃克特的帮助下，我取得了一些进展。
我试图避免使用 MVC Ajax 助手并坚持使用“纯”jQuery 方法。我用一个 div 替换了 Index 上的记录列表，其中包含一个 PartialView：
<div id="stockIndices">
@Html.Partial("_StockIndices", Model)
</div>
我已经通过使用 jQuery 对话框的 close 属性重新加载 div 来刷新基础表：
$('#createLink').on('click', function () {
$("#createStockIndexForm").dialog({
autoOpen: true,
position: { my: "center", at: "top+400", of: window },
width: 600,
resizable: false,
title: 'Create Stock Index',
modal: true,
open: function () {
$(this).load('@Url.Action("Create", "AdminStockIndex")');
},
close: function () {
$("#stockIndices").load('@Url.Action("GetStockIndices", "AdminStockIndex")');
}
});
return false;
});
手动关闭模式对话框后，div 会按照我想要的方式重新加载。伟大的！现在，如果我可以在表单发布时关闭对话框，我会被设置。这不起作用：
$("#createStockIndexForm").dialog("close");
Firebug 报告错误：
错误：无法在初始化之前调用对话框上的方法； 试图调用方法'close'
【问题讨论】：
标签： javascript jquery ajax asp.net-mvc