在Razor页面中的OnGet方法之后刷新div内容 [英] Refresh div content after OnGet method in Razor Pages

问题描述

我在视图中有%1个数据，该数据在OnGet方法中分配为视图数据。

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

Razor

推荐答案计算视图并创建客户端看到的HTML.例如，如果你检查一下Chrome上的源代码，你会注意到你所有的Razor代码都被标准的HTML替换了。

如果您想要在页面加载后修改HTML，您有两个选择。使用新数据重新加载页面，以便创建新的HTML并重新计算新的条件，或者使用JS/JQuery在客户端修改页面。不过，jQuery不能访问视图数据，这是纯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);
}

这篇关于在Razor页面中的OnGet方法之后刷新div内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！