Razor Pages - 在 ajax 成功时重新加载部分视图

Question

In my view (let's name this view - Main/Index) I have list with some items on the left side (used Component), and main div on the right side, which has partial view inside. When I click some item on the left side, I want to send parameter to the method in Main/Index class, process this data and send it back as json, but also refresh the partial at the same time. Partial is getting data from this view. Really, I don't know the way I try to do this is good, maybe will you have some suggestions for me? Would be great.

Anyway my code is: Main/Index.cshtml

<div class="row">
    <div class="col-3">
        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            @await Component.InvokeAsync("DisplayBar")
        </div>
    </div>
    <div class="col-9">
        <div id="mainDiv">       
            <partial name="~/Pages/Shared/_MainContent.cshtml" />
        </div>
    </div>
</div>

Main/Index.cshtml.cs

public class IndexModel : PageModel
{

    public string ParamValue{ get; set; }

    public void OnGet() {}

    public JsonResult OnPostRefreshMain(string paramValue)
    {
        ParamValue= DictionaryHelper.TranslatedParamsDict[paramValue];

        return new JsonResult(ParamValue);
    }
}

Shared/_MainContent.cshtml (partial)

@model Pages.Main.IndexModel

@{
    var paramValue = string.IsNullOrEmpty(Model.ParamValue) ? "No param" : Model.ParamValue;
}

<h5>@paramValue selected</h5>

js script

$(document).on('click', 'a.nav-link.appsList-element:not(.active)', function () {
    var paramValueResult = 'some id';
    $.ajax({
        url: '/Main/Index?handler=RefreshMain',
        type: 'post',
        dataType: 'json',
        data: {
            paramValue: paramValueResult
        },
        beforeSend: function (xhr) {
            xhr.setRequestHeader("XSRF-TOKEN",
                $('input:hidden[name="__RequestVerificationToken"]').val());
        },
        success: function (obj) {
            $('#mainDiv').load('/Shared/_MainContent.cshtml');
        }
    });
});

Now js is calling my method fine, method is returning translated data, but the partial is not reloading.

In the future I will get many data depends on this paramValue - I will display statistics of product related to this paramValue, so I'm not sure my solution is ok and maybe is better way to do this?

Answer 1

you have to populate view with jquery you get the json from controller in success of ajax so <h5>@paramValue selected</h5> this should have new value that is returned so you can use some sort of identity to h5 element and change it's content with new value so in the success function $('h5'),html('<h5>'+what you want to show here+' selected</h5>') and you received the json in obj you can see what is in obj by console.log(obj); in success function in short you can send the whole html from controller and just replace the html content $('#parentDivId').html(data); so in this case ajax data type should be 'text/html' or you can get the json and put json content where ever you want which been described earlier btw I said you can transfer whole page so in this case controller should return html (return type should be accordingly could be View)