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

Question

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

OnGet 方法：

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')，但仍然没有

Answer 1

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