如何在 ASP.NET MVC 中使用 Ajax 调用刷新局部视图？

Posted 2023-05-08

【中文标题】如何在 ASP.NET MVC 中使用 Ajax 调用刷新局部视图？

【英文标题】：How to refresh partialview with Ajax call in ASP.NET MVC?

【发布时间】：2021-07-17 15:03:15

【问题描述】：

我有一个局部视图，我正在发送两个参数，然后尝试使用$("#div").html(result) 刷新局部视图 div。使用 mvc 操作将数据正确发送到局部视图，我在控制台中看到局部视图正在通过 ajax 调用进行更新。一切都按预期工作，但主视图中的部分视图永远不会更新或刷新。所以我总是第一次看到 SubscriptionID 和 EntityOrganizationID 被初始化，即 0。

这是 main.cshtml 中的部分视图

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

这是我从 java 脚本函数调用的 ajax 调用——在单击按钮后调用

$.ajax(
            url: '/Submission/SubmissionHeaderDetails',
            type: 'POST',
            async: false,
            dataType: 'html',
            data:  id: SubmissionID, entityOrgID: EntityOrganizationID, tab:0 ,
            success: function (result) 
                console.log('Success... : ' + result);
            
        ).done(function (response) 
            alert('refore replacing partial view with latest data');
            $("#myPartialViewDiv").html(result);
        );

这是我的行动 -

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

        return PartialView("_SubmissionCommentActions", newModel);
    

这是我的部分观点 _SubmissionCommentActions.cshtml

@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")
    

这里是 SubmissionHeaderActionViewModel 类

namespace XYZ.Domain.Model.Submission

    [DataContract]
    public class SubmissionHeaderActionViewModel
    
        //fields will be used to determine display of action items
        [DataMember]
        public bool CanReassign  get; set; 

        [DataMember]
        public bool CanEditComments  get; set; 

        [DataMember]
        public bool CanClone  get; set; 

        [DataMember]
        public bool CanTransfer  get; set; 

        [DataMember]
        public bool CanCreateNew  get; set; 

        [DataMember]
        public int SubmissionID  get; set; 

        //export/print actions are under a sub menu in the header

        [DataMember]
        public bool CanExport  get; set; 

        [DataMember]
        public bool CanExportPdf  get; set; 

        [DataMember]
        public bool CanExportCsv  get; set; 

        [DataMember]
        public bool CanPrint  get; set; 

        [DataMember]
        public bool CanGetArchive  get; set; 

        [DataMember]
        public bool CanDeleteArchive  get; set; 

        [DataMember]
        public bool ShowSubMenu => CanExportCsv || CanExportPdf || CanPrint || CanGetArchive || CanDeleteArchive;

        [DataMember]
        public int? ArchiveStatusTypeID  get; set; 

        [DataMember]
        public int SubmissionStatusTypeID  get; set; 

        public int? EntityOrganizationID  get; set; 

    

【问题讨论】：

它们不会被刷新，因为您正在引用模型，而模型并未从您的 AJAX 调用中更新。您只是将调用中的内容转储到页面。模型需要更新服务器端。

马特-谢谢。在 SubmissionHeaderDetails 操作中，我正在使用 SubmissionID 和 EntityOrganizationID 更新模型。这还不够吗？我们可以做些什么来完成这项工作？

哦，看看下面谢尔盖的回答，可能是问题所在。您的.done(function (response) ... 需要将response 更改为result。

谢谢马特。这是一个很好的发现。

【参考方案1】：

也许改进动作也是个好主意：

public ActionResult SubmissionHeaderDetails(SubmissionHeaderActionViewModel 
       model)
    
    
        return PartialView("_SubmissionCommentActions", model);
    

并通过将结果从完成移动到成功来修复您的 ajax：

$.ajax(
            url: '/Submission/SubmissionHeaderDetails',
            type: 'POST',
            data:  SubmissionID : SubmissionID, 
                    EntityOrganizationID: EntityOrganizationID, 
                   tab:0 ,
            success: function (result) 
            $("#myPartialViewDiv").html(result);
            ,
            error: function (xhr, exception) 
                ...error code
                return false;
            
        );

【讨论】：

谢谢。是的，这次我看到 Model.SubmissionID Model.EntityOrganizationID 中填充了最新值并显示在 headerCommentModal 中。但是在部分视图中，“commentrecipients”下拉值根本没有填充。下拉列表显示为空白。

请发布 SubmissionHeaderActionViewModel 类。我不知道那里有什么

当然，添加了 SubmissionHeaderActionViewModel 类。

我可以在你的 html 中看到一些奇怪的剑道。跟问题有什么关系？恕我直言，您必须在操作中使用 html5 选择并填写选择列表。