需要引导模式的解决方案，以便在 MVC 中提交时不回发父页面

我在 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>
&nbsp;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">&times;</span></button>
<h4 class="modal-title"><i class="fa fa-question-circle fa-2x"></i> <span class="nav-label">&nbsp;&nbsp;&nbsp;&nbsp;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);
}

假设页面中没有脚本错误，当用户单击"新建链接"按钮时，您的代码应该启动模式。当用户单击"保存"按钮时，它会提交表单。由于您使用的是Ajax.BeginForm帮助程序方法，因此 razor 应呈现具有相关数据属性的表单标记，该属性将普通表单提交转换为 ajaxized 表单提交。

若要启用 ajaxized 表单提交行为，请确保在页面或布局页面中包含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回调。它的值将是 javascript 方法的名称，该方法将在 ajax 调用成功时执行。

@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);
}

相关内容

最新更新

热门标签：