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

Answer 1

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