javascript - 如何使用 .Net Core 3 实现 UpdatePanel 功能
问题描述
我的 .Net Core 3 应用程序需要只刷新页面的某些部分而不影响其他页面部分。这是页面的高级视图(问题/编辑):
一般操作如下。用户选择他们想要编辑的问题。他们可以更改许多属性。当他们完成更改后,底部有一个保存按钮来提交他们的更改。在编辑页面上有 2 个部分视图。一种允许用户使用模式弹出窗口添加/更新问题的状态信息(我们维护所有状态信息)。另一部分允许用户使用模式弹出窗口上传/编辑/删除他们想要附加到问题的文件。
当用户更改状态或文件时,该数据会立即保存到数据库中。目前我刷新了整个问题/编辑页面,因为我想在保存这些更改后反映它们。令人担忧的是,对表单上任何其他字段所做的任何更改都会丢失。一种选择是在我保存状态或文件信息时传递表单数据并保存整个问题。这似乎是一个巨大的开销,因为我会在不需要时多次重新保存整个问题,并且我必须处理所有这些数据的传递。另一种选择是找到一种仅刷新与之交互的部分视图的方法。
这是编辑页面的精简版:
@model MYAPP.ViewModels.IssueViewModel
@{
ViewData["Title"] = "Issue Detail Page";
}
<script type="text/javascript">
$(document).ready(function () {
});
</script>
<div asp-validation-summary="All" class="text-danger"></div>
<hr />
<div class="row">
<div>
<form asp-action="Edit">
<input type="hidden" asp-for="IssueData.issueId" />
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div>
<table style="width:100%">
<tr>
<td style="background-color:midnightblue;color:white;padding-left:5px;">
<label class="control-label">Issue Title</label>
<img src="~/Images/pencil1.png" width="20" height="20" />
<input id="title" class="title" type="checkbox" onclick="onSelectChange(this)" style="position:relative;left:-24px; opacity:0" />
</td>
</tr>
</table>
<div class="form-group">
<input asp-for="IssueData.issueTitle" class="form-control formtableborders" id="titletext" disabled="disabled" />
<span asp-validation-for="IssueData.issueTitle" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<table style="width:100%">
<tr>
<td style="background-color:aquamarine;padding-left:5px;">
<label asp-for="IssueData.issueContext" class="control-label"></label>
</td>
</tr>
</table>
<textarea asp-for="IssueData.issueContext" class="form-control formtableborders" rows="3">IssueData.issueContext</textarea>
<span asp-validation-for="IssueData.issueContext" class="text-danger"></span>
</div>
<div id="modal-container" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
</div>
</div>
</div>
<div id="status">
@{
await Html.RenderPartialAsync("_Status");
}
</div>
<br />
<div class="form-group">
<label asp-for="@Model.IssueData.correctiveActionIdentified"></label>
<input asp-for="@Model.IssueData.correctiveActionIdentified" class="correctiveActionIdentified" type="checkbox" />
</div>
<div id="UploadSection">
@{
await Html.RenderPartialAsync("_DisplayFiles");
}
</div>
<br />
<div class="form-group">
<table style="width:100%">
<tr>
<td style="background-color:midnightblue;color:white;padding-left:5px;">
<label asp-for="IssueData.keyword" class="control-label"></label>
</td>
</tr>
</table>
<input asp-for="IssueData.keyword" class="form-control formtableborders" />
<span asp-validation-for="IssueData.keyword" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Save Changes" class="btn btn-primary" />
</div>
</form>
</div>
</div>
<script>
</script>
<div>
<a asp-action="Index">Back to List</a>
</div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script>
$(document).ready(function () {
var JumpTo = '@ViewBag.JumpToDivId';
if (JumpTo != "") {
$(this).scrollTop($('#' + JumpTo).position().top);
}
});
$('body').on('click', '.modal-link', function () {
var actionUrl = $(this).attr('href');
$.get(actionUrl).done(function (data) {
$('body').find('.modal-content').html(data);
});
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
});
$('body').on('click', '.relative', function (e) {
e.preventDefault();
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var dataToSend = form.serialize();
$.post(actionUrl, dataToSend).done(function (data) {
$('body').find('.modal-content').html(data);
var isValid = $('body').find('[name="IsValid"]').val() == 'True';
var issueid = "";
issueid = $('body').find('[name="issueidSaved"]').val();
var jumpto = $('body').find('[name="jumpto"]').val();
if (isValid) {
$('body').find('#modal-container').modal('hide');
if (issueid != "") {
window.location.href = "/Issue/Edit/?id=" + issueid + "&jumpto=" + jumpto;
} else {
window.location.href = "/Issue/Edit";
}
}
});
})
$(function () {
$('body').on('click', '.fileupload', function (e) {
e.preventDefault();
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var fdata = new FormData();
$('input[name="file"]').each(function (a, b) {
var fileInput = $('input[name="file"]')[a];
if (fileInput.files.length > 0) {
var file = fileInput.files[0];
fdata.append("file", file);
}
});
$("form input[type='text']").each(function (x, y) {
fdata.append($(y).attr("name"), $(y).val());
});
$("form input[type='hidden']").each(function (x, y) {
fdata.append($(y).attr("name"), $(y).val());
});
$.ajax({
url: actionUrl,
method: "POST",
contentType: false,
processData: false,
data: fdata
}).done((response, textStatus, xhr) => {
var isValid = $(response).find('[name="IsValid"]').val() == 'True';
var issueid = $(response).find('[name="issueidSaved"]').val();
var jumpto = $(response).find('[name="jumpto"]').val();
if (isValid) {
$('body').find('#modal-container').modal('hide');
window.location.href = "/Issue/Edit/?id=" + issueid + "&jumpto="+jumpto;
}
});
})
});
$('body').on('click', '.close', function () {
$('body').find('#modal-container').modal('hide');
});
$('#CancelModal').on('click', function () {
return false;
});
$("form").submit(function () {
if ($('form').valid()) {
$("input").removeAttr("disabled");
}
});
</script>
}
这是_DisplayFiles:
<table id="upload" width="100%">
<tr>
<td width="90%" style="padding:5px 5px 0px 5px;background-color:midnightblue;color:white">
<label class="control-label">Upload Attachments</label>
</td>
<td style="background-color: midnightblue; padding-right:5px">
<a href="@Url.Action("FileUpload", new { controller = "Attachment", issueid = Model.IssueData.issueId })"
class="modal-link btn btn-success">Upload Files</a>
</td>
</tr>
</table>
<table width="100%" border="1" class="tblAttachments">
<tr align="center">
<th width="20%" style="text-align:center">File Name</th>
<th width="75%" style="text-align:center">Description</th>
<th width="5%" style="text-align:center"></th>
</tr>
@for (var i = 0; i < Model.IssueData.AttachmentList.Count; i++)
{
<tr>
<td style="padding-left:3px">@Model.IssueData.AttachmentList[i].aFileName</td>
<td style="padding-left:3px">@Model.IssueData.AttachmentList[i].aIssueAttachmentDescription</td>
<td style="text-align:center">
<a href="@Url.Action("DownloadFile", new { controller="Attachment" , attachmentId=Model.IssueData.AttachmentList[i].attachmentId })" class="fa fa-download "></a>
<a href="@Url.Action("EditFile", new { controller="Attachment" ,
attachmentId=Model.IssueData.AttachmentList[i].attachmentId,
aFileName=Model.IssueData.AttachmentList[i].aFileName,
issueId=Model.IssueData.AttachmentList[i].issueId,
aIssueAttachmentDescription=Model.IssueData.AttachmentList[i].aIssueAttachmentDescription})" class="modal-link fa fa-pencil "></a>
<a href="@Url.Action("DeleteFile", new { controller="Attachment" ,
attachmentId=Model.IssueData.AttachmentList[i].attachmentId,
aFileName=Model.IssueData.AttachmentList[i].aFileName,
issueId=Model.IssueData.AttachmentList[i].issueId })" class="modal-link fa fa-trash "></a>
@*<button type='button' title='Download' style='background:transparent;border:none' asp-action="DownloadFile" asp-controller="Attachment"
asp-route-attachmentId="@Model.IssueData.AttachmentList[i].attachmentId">
<i class='fa fa-trash'></i>
</button>*@
</td>
</tr>
}
</table>
这是_DeleteFiles:
<!--Modal Body Start-->
<div class="modal-content">
<input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />
<input name="issueidSaved" type="hidden" value="@ViewBag.ID" />
<input name="jumpto" type="hidden" value="@ViewBag.JumpToDivId" />
<!--Modal Header Start-->
<div class="modal-header">
<h4 class="modal-title">Delete File</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<!--Modal Header End-->
<form asp-action="DeletetheFile" asp-route-attachmentid="@ViewBag.id" asp-route-issueId="@ViewBag.issueId" asp-controller="Attachment" method="post" enctype="multipart/form-data"
data-ajax="true" data-ajax-update="#UploadSection">
@Html.AntiForgeryToken()
<div class="modal-body form-horizontal">
Are you sure you want to delete the @ViewBag.title File?
<!--Modal Footer Start-->
<div class="modal-footer">
<button data-dismiss="modal" id="cancel" class="btn btn-default" type="button">No</button>
<input type="submit" class="btn btn-success relative" id="btnSubmit" data-save="modal" value="Yes">
</div>
<div class="row">
</div>
<!--Modal Footer End-->
</div>
</form>
</div>
<script type="text/javascript">
$(function () {
});
</script>
<!--Modal Body End-->
这是 _DeleteFiles 的控制器代码
[HttpGet]
public ActionResult DeleteFile(int attachmentId, string aFileName, string issueId)
{
ViewBag.id = attachmentId;
ViewBag.title = aFileName;
ViewBag.issueId = issueId;
return PartialView("_DeleteFile");
}
[ValidateAntiForgeryToken]
[HttpPost]
public ActionResult DeletetheFile(int attachmentid, string issueId)
{
string response = _adoSqlService.DeleteAttachment(attachmentid);
ViewBag.ID = issueId;
ViewBag.JumpToDivId = "upload";
IssueViewModel IVM = new IssueViewModel();
IVM.IssueData = new IssueDataModel();
IVM.IssueData = _adoSqlService.GetSingleIssue(issueId);
return PartialView("_DeleteFile");
}
上面的工作方式是加载问题/编辑页面,并用文件列表填充 _DisplayFiles 部分视图。用户选择 DELETE 按钮,编辑页面上的 Javascript 将打开模式并使用 _DeleteFiles 部分视图填充它。当用户选择“是”删除文件时,运行“DeletetheFile”代码。这会在编辑页面上的 javascript 再次拦截 POST 之前设置一些 viewbag 数据。这次 javascript 在刷新整个编辑页面之前捕获了一些由 Viewbag 和 ViewData 填充的值,因此它反映了文件已被删除。
我希望能够只刷新 _DisplayFiles 部分视图而不是整个页面。我怎样才能做到这一点?
解决方案
我在以下网址找到了答案:Update an MVC Partial View With AJAX。我最终用 div 包围了部分视图:
<div id="partialContent">
//Partial View Data
</div>
然后在页面上的一些 javascript 中,我添加了当 ajax 拦截来自部分视图的提交时要加载的代码:
$("#partialContent").load('/Controller/Action');