如何使用 ASP.NET MVC 视图模型刷新局部视图？

Question

我有一个局部视图，每次从 Kendo 网格行中单击一个按钮时，我都会使用 ajax 发送几个参数。这里我使用的是 asp.net mvc 框架。部分视图能够获取最新值，但是一旦第一次初始化为“0”，模型参数就不会被 ajax 调用发送的最新值刷新，基本上@Model.SubmissionID 和@Model.EntityOrganizationID 永远不会更改为新值，总是显示 0。我是新手，能否请您看看是否可以帮助解决此问题？

这是我从 main.cshtml 调用的部分视图 -

 @Html.Partial("_SubmissionCommentActions", new SubmissionHeaderActionViewModel());

这是 ajax 调用，每次单击按钮时都会传递最新的 SubmissionID 和 entityOrgID 值。

    $.ajax({
            url: '/Submission/SubmissionHeaderDetails',
            type: 'POST',
            async: false,
            data: { id: SubmissionID, entityOrgID: EntityOrganizationID, tab:0 },
            success: function (result) {
                
            }
        });

这是我的 mvc 操作 -

[HttpPost]
        public ActionResult SubmissionHeaderDetails(int? submissionID, int? entityOrgID, SubmissionTabEnum tab = SubmissionTabEnum.None)
        {
            SubmissionHeaderActionViewModel newModel = new SubmissionHeaderActionViewModel();
            newModel.SubmissionID = (int)submissionID;
            newModel.EntityOrganizationID = (int)entityOrgID;

            return View("~/Views/Shared/_SubmissionCommentActions.cshtml", newModel);
        }

这是我的部分视图，每次单击按钮时都会获取所有最新值，但是一旦 @Model.SubmissionID 和 @Model.EntityOrganizationID 被初始化为 0，它们就不会更改为新值。我在这里做错了什么？

@model XYZ.Domain.Model.Submission.SubmissionHeaderActionViewModel

<script>
    $(function () { $('[data-toggle="tooltip"]').tooltip();})
</script>

    @{
        // I get correct SubmissionHeaderID, EntityOrganizationID values every time using ajax call but they never gets refreshed inside "headerCommentModal" div
        var SubmissionHeaderID = 0;
        int EntityOrganizationID = 0;
        if (Model != null){
            SubmissionHeaderID = Model.SubmissionID;
            System.Diagnostics.Debug.WriteLine("SubmissionHeaderID : " + SubmissionHeaderID);
        }
        if (Model.EntityOrganizationID != null){
            EntityOrganizationID = (int)Model.EntityOrganizationID;
            System.Diagnostics.Debug.WriteLine("EntityOrganizationID : " + EntityOrganizationID);
        }
        Model.SubmissionID = SubmissionHeaderID;
        Model.EntityOrganizationID = EntityOrganizationID;
    }
    
    @Html.Hidden("SubmissionHeaderID", SubmissionHeaderID, new { data_ng_model = "model.SubmissionHeaderID" })
    
    @Html.JsonDataSourceVariable("securitygroupsusers", "SecurityGroupsUsersAccessRight", "Utility", Model.EntityOrganizationID.GetValueOrDefault())
    
    <!-- _SubmissionHeaderActions  start  -->
    <div class="stayenabledonclose">
        <div class="form-horizontal" ng-controller="submissionHeaderActionsController">
            <div id="headerCommentModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="submissionComment-title" style="padding-right:19px;">
                <div class="modal-dialog" role="document">
                    <div id="adcmodal" class="modal-content">
                        <div id="adcmodal" class="modal-header col-nopadding ">
                            <h3 class="modal-title" id="submissionComment-title">Submission Comment | SubmissionID: @Model.SubmissionID | EntityOrganizationID : @Model.EntityOrganizationID</h3>
                            <button type="button" class="close pull-right" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true"><i class="fas fa-times"></i></span>
                            </button>
                        </div>
                        <div class="modal-body submissioncomment-modal-body">
                            <div class="row form-group spacer">
                                <div class="col-md-12">
                                    <div class="col-md-12">
                                        @Html.Label("Recipients")
                                        <select id="commentrecipients" class="dirtyignore" kendo-multi-select k-options="securitygroupsusersSelectOptions()" k-ng-model="initSecurityGroupsUsers()"></select>
                                    </div>
                                </div>
                            </div>
    
                            @Html.Hidden("SubmissionHeaderID", SubmissionHeaderID)
                            <div class="row form-group spacer">
                                <div class="col-md-12">
                                    <div class="col-md-12">
                                        @Html.Label("Comment (will be sent to the recipients via email)")
                                        @Html.TextArea("Comment", "", new { @class = "form-control dirtyignore", rows = "2", maxlength = "1000", data_ng_model = "model.comment" })
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- _SubmissionHeaderActions  end  -->
    
    @using (Html.RequiredScripts())
    {
        @Html.RequirePageScript("Shared", "SubmissionHeaderActions")
    }

Answer 1

您可以在 AjaxOptions 中使用 Ajax.BeginForm 的 UpdateTargetId 参数刷新部分视图，方法是将 Partial 视图包装在 div 中，并将 div 的 ID 用于 UpdateTargetId 参数，并在 AjaxOption 的 InsertionMode 中使用“替换”模式

<div id="idOfDivToReplace">
      @Html.Partial("_SubmissionCommentActions", new SubmissionHeaderActionViewModel());
</div>

在 PartialView 内部，您需要使用以下内容来确保上面 div 的内容被替换为相同的局部视图，但更新后的模型数据

@using (Ajax.BeginForm(
        "SubmissionHeaderDetails",                       //Action Name
        "Submission",                                    //Controller Name
         null,                                           //Route Values (URL params)
         new AjaxOptions() {                             //Ajax Options
               HttpMethod = "POST", 
               UpdateTargetId = "idOfDivToReplace",      //Response replaces div inner
               InsertionMode = InsertionMode.Replace
         }
)) 

您只需要确保已包含 jQuery 的 unobtrusive-ajax.min.js 并确保 BeginForm 使用的控制器操作返回最初调用的 Partial 视图