我在Index.cshtml视图中有一个大表单，其中有几个表是完整的CRUD功能。我不希望在从表中添加，编辑或删除行时刷新主页。我正在使用Bootstrap作为模态。这是我第一次将数据发布到表格中但又不想回发。对主页上的必填字段进行验证，这些字段在您回发邮件时失败，而且我不希望已输入的数据丢失。
部分视图（表格加模态）：
@model WST___Dev.ViewModels.MasterViewModel
<div style="width:90%; margin:0 auto" class="tablecontainer" id="footerlinks">
@*<a class="popup btn btn-primary" href="/StyleEditor/SaveFooterLink/0" style="margin-bottom:20px; margin-top:20px;">Add New Link</a>*@
<button type="button" class="btn btn-primary " onclick="AddFooterLink();">
<span class="glyphicon glyphicon-plus"></span>
New Link
</button>
<br /><br />
<table id="myDatatable" class="table table-striped table-hover small">
<thead>
<tr>
<th>Name</th>
<th>Target URL</th>
<th>
</th>
</tr>
</thead>
<tbody>
@if (Model != null)
{
for (int i = 0; i < Model.Footer_Links_List.Count; i++)
{
<tr>
<td>
@Html.DisplayFor(model => model.Footer_Links_List[i].name)
</td>
<td>
@Html.DisplayFor(model => model.Footer_Links_List[i].target_url)
</td>
<td>
<button onclick="EditFooterLink()" type="button" data-id="@Model.Footer_Links_List[i].id"
class="btn btn-primary btn btn-sm" data-toggle="tooltip" data-placement="left" title="Edit Footer Link">
<span class="glyphicon glyphicon-pencil"></span>
</button>
<button onclick="ConfirmDeleteFooterLink('@Model.Footer_Links_List[i].name', '@Model.Footer_Links_List[i].id');" type="button" data-id="@Model.Footer_Links_List[i].id"
class="btn btn-primary btn btn-sm" data-toggle="tooltip" data-placement="left" title="Delete Footer Link">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
}
}
</tbody>
</table>
</div>
<div id="addfooterlink" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Add New Link</h3>
</div>
@using (Ajax.BeginForm("AddFooterLink", "StyleEditor", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "footerlinks" }))
{
@Html.AntiForgeryToken()
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
@Html.LabelFor(m => Model.Footer_Links.name, new { @class = "control-label col-sm-3 required" })
<div class="col-sm-9">
@Html.TextBoxFor(m => m.Footer_Links.name, new { @class = "form-control" })
<div>
@Html.ValidationMessageFor(m => m.Footer_Links.name)
</div>
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => Model.Footer_Links.target_url, new { @class = "control-label col-sm-3 required" })
<div class="col-sm-9">
@Html.TextBoxFor(m => m.Footer_Links.target_url, new { @class = "form-control" })
<div>
@Html.ValidationMessageFor(m => m.Footer_Links.target_url)
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-sm-6">
<input class="btn btn-primary" type="submit" value="Save" />
</div>
<div class="col-sm-6">
<button class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
}
</div>
</div>
</div>
<div id="editfooterlink" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Edit Link</h3>
</div>
@using (Html.BeginForm("EditFooterLink", "StyleEditor", FormMethod.Post, new { id = "editfooter" }))
{
@Html.AntiForgeryToken()
@Html.HiddenFor(a => a.Footer_Links.id)
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
@Html.LabelFor(m => Model.Footer_Links.name, new { @class = "control-label col-sm-3 required" })
<div class="col-sm-9">
@Html.TextBoxFor(m => m.Footer_Links.name, new { @class = "form-control" })
<div>
@Html.ValidationMessageFor(m => m.Footer_Links.name)
</div>
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => Model.Footer_Links.target_url, new { @class = "control-label col-sm-3 required" })
<div class="col-sm-9">
@Html.TextBoxFor(m => m.Footer_Links.target_url, new { @class = "form-control" })
<div>
@Html.ValidationMessageFor(m => m.Footer_Links.target_url)
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-sm-6">
<input class="btn btn-primary" type="submit" value="Save" />
</div>
<div class="col-sm-6">
<button class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
}
</div>
</div>
</div>
<div class="modal " id="deleteFooterLinkConfirmModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"><i class="fa fa-question-circle fa-2x"></i> <span class="nav-label"> Delete Footer Link</span></h4>
</div>
<div class="modal-body">
<div class="row-fluid">
Delete this footer link?
<label id="LabelFooterLinkId" hidden="hidden" name="Id"></label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-outline " data-dismiss="modal">
<span> Cancel</span>
</button>
<button type="button" class="btn btn-primary " data-dismiss="modal" onclick="DeleteFooterLink(document.getElementById('LabelFooterLinkId').innerHTML);">
<span> Delete</span>
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#myDatatable').DataTable({
"deferRender": true,
"pageLength": 5,
"aaSorting": [],
"aoColumnDefs": [
{
'bSortable': false,
'aTargets': [2]
}]
});
});
function AddFooterLink() {
$('#addfooterlink').modal('show');
}
function EditFooterLink() {
$('#editfooterlink').modal('show');
}
function ConfirmFooterLinkDelete(Id) {
$("#LabelFooterLinkId").html(Id);
$('#deleteFooterLinkConfirmModal').modal('show');
}
function DeleteFooterLink(Id) {
var finishUrl = '@Url.Action("DeleteFooterLinkConfirmed", "StyleEditor", new { id = 0 })';
var finishUrl = finishUrl.replace("0", Id);
window.location.href = finishUrl;
}
</script>
添加的控制器方法：
[HttpPost]
public JsonResult AddFooterLink(footer_links footer_links)
{
if (ModelState.IsValid)
{
db.footer_links.Add(footer_links);
db.SaveChanges();
}
return Json(new { Result = "OK" }, JsonRequestBehavior.AllowGet);
}
答案 0 :(得分：0)
假设您的页面中没有脚本错误，则当用户单击“新建链接”按钮时，您的代码应启动模式。当用户单击“保存”按钮时，它会执行表单提交。由于您使用的是Ajax.BeginForm辅助方法，因此razor应使用相关数据属性呈现表单标记，这些属性将正常表单提交转换为ajaxified表单提交。
要启用ajaxified表单提交行为，请确保在页面或布局页面中包含jquery.unobtrusive-ajax文件。您可以通过搜索“Microsoft.jQuery.Unobtrusive.Ajax”并将其添加到项目中来从nuget源获取它。
当您在页面中加载此jquery.unobtrusive-ajax时，它会覆盖正常的表单提交行为。它改为做ajax表单。因此，一旦您包含此库，您应该能够看到ajax表单提交。但是您当前的代码仅指定updateTargetId。因此，当您的ajax调用（表单从模态提交）收到响应时，它将尝试更新id为“footerlinks”的div。但是您当前的服务器代码只返回一个JSON结构作为响应。用这个更新你的DOM有什么意义？
当您添加新项目时，您可能希望返回要添加到当前表的新项目的标记（html）或表示新实体的JSON结构（并且您将阅读此响应并更新DOM）。
例如，您可以在使用Ajax.BeginForm帮助器方法时指定OnSuccess回调。这个值将是ajax调用成功时执行的javascript方法的名称。
@using (Ajax.BeginForm("AddFooterLink", "Home", new AjaxOptions { HttpMethod = "POST",
OnSuccess = "footerAdded"}))
{
}
并拥有js方法
function footerAdded(response) {
//to do : Do something with the response
}
如果要返回新记录的标记，可以使用append方法将新行添加到DOM中的现有表中。
function footerAdded(response) {
$("#someTableName").append(response);
}