How to refresh partialview with Ajax call in ASP.NET MVC?

Question

I've a partial view, I'm sending two parameters and next trying to refresh the partial view div using $("#div").html(result). Data is correctly sent to partial view using mvc action and I see in console partial view is getting updated by the ajax call. Everything works as expected but the partial view in mainview never gets updated or refreshed. So I always see SubscriptionID and EntityOrganizationID as initialized first time i.e 0.

This is the partialview in main.cshtml

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

Here is my ajax call from java script function -- called after button clicked

$.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);
        });

This is my Action -

[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);
    }

And this is my partial view _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")
    }

Here is SubmissionHeaderActionViewModel class

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; }

    }
}

They won't get refreshed because you're referencing the Model, which is not being updated from your AJAX call. You're just dumping content from the call to the page. Model needs to be updated server side. — Matthew M., Apr 23 '21 at 12:17
Matt - Thanks. Inside SubmissionHeaderDetails Action I'm updating the Model with SubmissionID and EntityOrganizationID. This is not enough? What we can do to make this work? — Partha, Apr 23 '21 at 13:00
Oh see Sergey's answer below, probably the issue. Your `.done(function (response) {...}` needs to change `response` to `result`. — Matthew M., Apr 23 '21 at 13:37

Serge · Accepted Answer · 2021-04-23T13:37:09.213

1

Maybe it is a good idea to refined the action too:

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

And fix your ajax by moving result from done to success:

$.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;
            }
        });

edited Apr 23 '21 at 13:37

answered Apr 23 '21 at 13:11

Serge

40,935
4
18
45

Thank you. Yes, this time I see latest value is populated in Model.SubmissionID Model.EntityOrganizationID and displaying in headerCommentModal. But in partialview "commentrecipients" drop down values are not populating at all. dropdown list shows blank. – Partha Apr 23 '21 at 15:05
Pls post SubmissionHeaderActionViewModel class. I don't know what is there – Serge Apr 23 '21 at 15:08
sure, added SubmissionHeaderActionViewModel class. – Partha Apr 23 '21 at 15:14
I can see some strange kendo in your html. What it has to do with the question? IMHO you have to use html5 select and fill selectlist in the action. – Serge Apr 23 '21 at 15:21

How to refresh partialview with Ajax call in ASP.NET MVC?

1 Answers1