是否可以在 ASP.NET Core 2.1 Razor 页面中刷新视图组件？答案

【问题标题】：Is it possible to refresh a View Component in an ASP.NET Core 2.1 Razor page?是否可以在 ASP.NET Core 2.1 Razor 页面中刷新视图组件？
【发布时间】：2018-12-14 23:11:39
【问题描述】：

是否可以在 ASP.NET Core 2.1 Razor 页面中刷新视图组件？

我发现在使用 AJAX 的 ASP.NET MVC 中这是可能的——请参阅Viewcomponent alternative for ajax refresh 和ViewComponents are not async 上的解决方案。但是 ASP.NET Core 呢？

我发现的一个解决方案基本上是让控制器返回视图组件，然后使用 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 一起工作，我不知道这是否可能。

【问题讨论】：

您想用新数据刷新 div 吗？
你可以做一个 ajax post/get 到控制器，它返回一个呈现的视图（作为 HTML 字符串），把它放到 JSON 响应中，然后在 javascript 中替换整个 div，比如 $("#divid" ).html(responseJson.HtmlView).
@MuhammadHannan，是的，这是因为 VC 需要刷新数据。
@Iztoksson，问题是我没有控制器，因为我正在使用剃须刀页面，我无法让它同时使用剃须刀页面和控制器。
您的问题可能与获取错误 URL 一样简单。 Razor 页面基于文件结构构建其路由，这意味着您尝试从中发出 AJAX 请求的 URL 类似于 /My/Razor/Page。然后，您请求home/GetHelloWorld，它实际上将被解释为/My/Razor/Page/home/GetHelloWorld。您需要在 AJAX 请求的 URL 前加上 /（即 /home/GetHelloWorld）。

标签： ajax asp.net-mvc asp.net-core razor-pages asp.net-core-viewcomponent

【解决方案1】：

TLDR

打开 Startup.cs 并替换它

app.UseMvc();

有了这个

app.UseMvcWithDefaultRoute();

详情

ASP.NET Core Razor 页面模板 (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

【讨论】：

app.UseMvcWithDefaultRoute();抛出异常@net core 3.0。我当前的解决方案如下 app.UseEndpoints(endpoints => { endpoints.MapRazorPages(); endpoints.MapControllerRoute("default", "{controller=Home}/{action=Index}");

【解决方案2】：

要在 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 提供各种示例

【讨论】：