是否可以在剃刀页面asp.net core 2.1中刷新ViewComponent?

时间:2018-07-06 10:50:28

标签: ajax asp.net-mvc asp.net-core razor-pages view-components

我发现可以使用Ajax在asp.net MVC中执行此操作,请在此处Viewcomponent alternative for ajax refresh和此处ViewComponents are not async参见解决方案

我发现的一个解决方案基本上是让控制器返回ViewComponent,然后使用Ajax进行刷新。

这个例子是从ViewComponents are not async借来的

〜/ HelloWorldViewComponent.cs

public class HelloWorldViewComponent : ViewComponent
{
    public IViewComponentResult Invoke()
    {
        var model = new string[]
        {
            "Hello", "from", "the", "view", "component."  
        };

        return View("Default", model);
    }     
}

〜/ HomeController.cs (我无法在剃须刀页面上使用此部分)

public class HomeController : Controller
{
    public IActionResult GetHelloWorld()
    {
        return ViewComponent("HelloWorld");
    }
}

〜/ Views / Shared / Components / HelloWorld / Default.cshtml

@model string[]
<ul>
    @foreach(var item in Model)
    {
        <li>@item</li>
    }
</ul>

〜/ wwwroot / index.html

<body>
<script src="js/jquery.min.js"></script>
<script>
    $.get("home/GetHelloWorld", function(data) {
        $("body").html(data);
    });
</script>
</body>

我的问题是我无法让控制器与Razor Pages一起使用,我无法弄清楚这是否可能。

2 个答案:

答案 0 :(得分:1)

TLDR

打开Startup.cs并将其替换

app.UseMvc();

与此

app.UseMvcWithDefaultRoute();

详细信息

ASP.NET Core Razor Pages模板(dotnet new razor)不包含控制器路由,因为它不包含控制器。添加控制器路由的最简单方法是通过UseMvcWithDefaultRoute(),它等效于以下内容:

app.UseMvc(routes => 
{
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{id?}");
});

安装该路由后,URL ~/Home/GetHelloWorld映射到HomeController.GetHelloWorld()操作。

这里是a GitHub commit,它在新的ASP.NET Core Razor Pages应用程序中演示了您的用例。

另请参见

https://docs.microsoft.com/en-us/aspnet/core/mvc/controllers/routing?view=aspnetcore-2.1

答案 1 :(得分:1)

要在RazorPage中执行此操作,请确保处理程序方法遵循OGet [MyMethodName]约定,这应该可以解决路由问题

public class HomeController : Controller
{
    public IActionResult OnGetHelloWorld()
    {
        return ViewComponent("HelloWorld");
    }
}

并修改get请求以使用处理程序

<body>
<script src="js/jquery.min.js"></script>
<script>
    $.get(window.location.href.split('?')[0] + "?handler=HelloWorld", function(data) {
        $("body").html(data);
    });
</script>
</body>

https://docs.microsoft.com/en-us/aspnet/core/razor-pages/?view=aspnetcore-3.1&tabs=visual-studio

上有各种示例