How to refresh Partial View using ASP.NET MVC view model?

Question

I've a partial view and I'm sending few parameters using ajax every time a button is clicked from a Kendo grid row. Here I'm using asp.net mvc framework. Partial view is able to get latest values but the Model parameters are not getting refreshed with latest values sent by ajax call once it's initialized first time to "0", basically @Model.SubmissionID and @Model.EntityOrganizationID never gets changed to new values, always showing 0. I'm new to this, can you please take a look if you could help to resolve this issue?

This is my partial view call from main.cshtml -

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

This is the ajax call, every time button is clicked latest SubmissionID and entityOrgID values are passed.

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

This is my mvc action -

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

Here is my partial view which is getting all the latest values every time button is clicked but once @Model.SubmissionID and @Model.EntityOrganizationID gets initialized to 0 they are not changing to new values. What am I doing wrong here?

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

You could just stick the partial view into a div with an ID and then use an `ajax` to get the data for the partial view and then populate the id html with that data? — JamesS, Apr 22 '21 at 08:49
James - I tried this approach. I wrapped that partial call with a div
@Html.Partial(...)
and next in ajax success I tried to replace div like this with html content with no luck.("#commentSubmission").html(result); Any idea what could be wrong? — Partha, Apr 22 '21 at 19:05

score 0 · Accepted Answer · answered Apr 22 '21 at 10:26

You can refresh the Partial View by using Ajax.BeginForm's UpdateTargetId parameter in AjaxOptions by wrapping the Partial view in a div and using the div's ID for UpdateTargetId param and using the "Replace" mode in the AjaxOption's InsertionMode

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

Inside the PartialView, you then need to make use of the following to ensure the contents of the div above get replaced with the same partial view, but with updated Model data

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

You just need to be sure that you have included jQuery's unobtrusive-ajax.min.js and be sure that the Controller Action the BeginForm is using returns the Partial view initially called

Thank you, Tristan. Due to some reason it's not working when I try with Ajax.BeginForm. I did install Jquery unobtrusive and embedder both of the js file in partial view beside resource bundle registration. Are you saying to put entire div inside BeginForm something like this? @using (Ajax.BeginForm()) {
.... Code...
} It would be great if you could modify the partial view I posted with Ajax.BeginForm and show it to me. — Partha, Apr 22 '21 at 18:14
Taking a look at your partial view, I can see you do not have an button. You will need to use this as the entire form needs to be posted to the controller in the same way you would with a normal Html.BeginForm(). Take a look at this video for clarity on the correct implementation for Ajax.BeginForm: https://youtu.be/Om0jX0PM77g — Tristan Paulus, Apr 23 '21 at 17:04

How to refresh Partial View using ASP.NET MVC view model?

1 Answers1