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

问题描述

我有一个局部视图，每次从 Kendo 网格行单击按钮时，我都会使用 ajax 发送几个参数。这里我使用的是 asp.net mvc 框架。部分视图能够获取最新值，但模型参数不会被 ajax 调用发送的最新值刷新，一旦它第一次初始化为“0”，基本上 @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")
    }

解决方法

您可以通过在 AjaxOptions 中使用 Ajax.BeginForm 的 UpdateTargetId 参数来刷新 Partial View，方法是将 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 视图