在Razor Pages中的OnGet方法之后刷新div内容

如何解决在Razor Pages中的OnGet方法之后刷新div内容

我在视图中有1个数据，这些数据在OnGet方法中分配为ViewData。

public void OnGet(string parameter = "default")
{
    ViewData["SelectedParam"] = parameter;
}

我的观点：

@{
    var selectedParam= ViewData["SelectedParam"];
}

<h1>Some Page</h1>
<hr />
<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("MyComponent")
        </div>
    </div>
    <div class="col-9">
        <div id="mainDiv">
            @selectedParam
            <hr />
            @if (string.IsNullOrEmpty(selectedParam.ToString()))
            {
                <h5>No param selected</h5>
            }
            else
            {
                <h5>@selectedParam selected</h5>
            }
        </div>
    </div>
</div>

我的组件正在发送参数，View正在更改ViewData [“ SelectedParam”]的值，现在我想刷新div的内容。

jQuery：

$(document).on('click','componentElement',function () {
    var parameterResult = "test";
    $.ajax({
        url: '/Index',type: 'get',data: {
            parameter: parameterResult 
        },success: function () {            
            <!-- here I need to reload -->
        }
    });
});

我尝试做location.reload()，但是我只能刷新此div，而不刷新整个页面，也尝试过$('#mainDiv').load(' #mainDiv')，但仍然没有任何反应

解决方法

Razor评估视图并创建客户端看到的HTML。例如，如果您在Chrome上检查源代码，您会发现所有Razor代码都已替换为标准HTML。

如果要在页面加载后修改HTML，则有2个选项。用新数据重新加载页面，因此将创建新的HTML并重新评估新的条件，或者在客户端使用JS / JQuery修改页面。 jQuery不会访问ViewData，但这是纯HTML / JS。既然您不想重新加载页面，那是唯一的方法。

用于从HTML中删除和添加内容的JQuery函数示例：

$(document).on('click','componentElement',function () {
    var parameterResult = "test";
    $.ajax({
        url: '/Home/OnGet/',//assuming controller would be Home
        type: 'POST',//if you are sending data,it's a POST
        dataType: "Json",//specify the datatype you are sending
        data: {
            parameter: parameterResult 
        },success: function (obj) { //notice I'm expecting an object back here
            $( "#mainDiv" ).empty(); //this will clear all the children inside the mainDiv  
            $( "#mainDiv" ).append("<h5<" + obj + " selected</h5>"); //this will add back the string you get your OnGet
        }
    });
});

这是您的OnGet应如何响应ajax请求的方法：

public JsonResult OnGet(string parameter = "default") //I'll return a Json,so class needs to be JsonResult
{
    return Json(parameter);
}