在Razor Pages中的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评估View并创建客户端看到的HTML。例如，如果你在Chrome上检查源代码，你会注意到你所有的Razor代码都被标准HTML取代了。

如果你想在页面加载后修改HTML，你有两个选项。用新数据重新加载页面，这样就会创建新的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);
}