从 Control class OnPost 方法刷新 Razor Page ViewComponent

Question

我正在尝试通过 razor 页面的 OnPost() 方法刷新 ViewComponent。使用以下代码从 razor 页面调用时，ViewComponent 正在正确加载：

@await Component.InvokeAsync("Menu", new { parameters... })

但是当通过 OnPost() 方法从 Razor 页面代码调用时，它不起作用。我已尝试按照 DontNet 教程进行操作，但无法重新加载 ViewComponent。我尝试调试代码以查看该方法是否正在调用 InvokeAysnc() 方法，但它没有调用。

这是我正在尝试的代码：

MenuViewComponent

public class MenuViewComponent : ViewComponent
{
    public IViewComponentResult Invoke(param1, param2, param3)
    {
        return View(new MenuModel() { set values... });
    }
}

EditPage.cshtml.cs

public async Task<IActionResult> OnPostAsync()
{
     //DO other operations
     ViewComponent("Menu", new { param1, param2, param3 });
}

如果有人能指导我如何从 OnPost() 方法重新加载 ViewComponent，我将不胜感激。

Answer 1

您可以使用ajax调用处理程序，并重置innerHTML，这里是一个演示：

EditPage.cshtml:

@Html.AntiForgeryToken()
<div id="MenuComponent">
    @await Component.InvokeAsync("Menu", new { param1 = 1, param2 = 2, param3 = 3 })
</div>


<button onclick="change()">change</button>
@section scripts
{
    <script>
        function change() {
            $.ajax({
                type: "POST",
                url: '?handler=Change',
                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                contentType: "application/x-www-form-urlencoded",
            }).done(function (result) {
                document.getElementById("MenuComponent").innerHTML = result;
            });
        }

    </script>
}

EditPage.cshtml.cs:

public async Task<IActionResult> OnPostChangeAsync()
        {
            //DO other operations
            return ViewComponent("Menu", new { param1=2, param2=3, param3=4 });
        }

菜单视图组件：

public class MenuViewComponent : ViewComponent
    {

        public async Task<IViewComponentResult> InvokeAsync(int param1,int param2,int param3)
        {
            return View(new MenuModel() {Param1=param1,Param2=param2,Param3=param3});
        }

    }

MenuViewComponent 视图：

@model MenuModel
<h1>parama1:@Model.Param1</h1>
<h1>parama2:@Model.Param2</h1>
<h1>parama3:@Model.Param3</h1>

菜单模型：

public class MenuModel
    {
        public int Param1 { get; set; }
        public int Param2 { get; set; }
        public int Param3 { get; set; }

    }

结果：

从 Control class OnPost 方法刷新 Razor Page ViewComponent

Refresh Razor Page ViewComponent from Control class OnPost method

c#

asp.net-mvc

razor

asp.net-core