如何使用.Net Core 3实现UpdatePanel功能

Question

我的 .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 部分视图。用户选择“删除”按钮，“编辑”页面上的 Javascript 将打开模式并使用 _DeleteFiles 部分视图填充它。当用户选择“是”删除文件时，将运行“DeletetheFile”代码。这会在编辑页面上的 javascript 再次拦截 POST 之前设置一些 viewbag 数据。这次，JavaScript 在刷新整个编辑页面之前捕获了 Viewbag 和 ViewData 填充的一些值，因此它反映了文件已被删除。

我希望能够仅刷新 _DisplayFiles 部分视图而不是整个页面。我怎样才能做到这一点？

Answer 1

我在以下网址找到了答案：Update an MVC Partial View With AJAX。 我最终用 div 包围了部分视图：

<div id="partialContent">
    //Partial View Data
</div>

然后在页面上的一些 javascript 中，我添加了当 ajax 拦截来自部分视图的提交时加载的代码：

$("#partialContent").load('/Controller/Action');