2023年2月18日 23:29:34go评论105阅读模式

英文:

Add Razor Page Component in MVC

问题

I've added Razor Page Component to my existing MVC application

Pages/Test.razor

@page "/test";
<h1>Hello World!</h1>
@code {
    
}

Program.cs

var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllersWithViews();
builder.Services.AddServerSideBlazor();
builder.Services.AddRazorPages();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
}
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
    endpoints.MapRazorPages();
    endpoints.MapBlazorHub();
});
app.Run();

Views/Shared/_Layout.cshtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - MVCApp</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/MVCApp.styles.css" asp-append-version="true" />
    <base href="/" />
    <script src="_framework/blazor.server.js"></script>
...

但它不起作用：在/test上我得到404错误。

你需要做什么来使Razor Component的路由与MVC路由一起工作呢？

英文:

I've added Razor Page Component to my existing MVC application

Pages/Test.razor

@page &quot;/test&quot;
&lt;h1&gt;Hello World!&lt;/h1&gt;
@code {
    
}

Program.cs

var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddControllersWithViews();
builder.Services.AddServerSideBlazor();
builder.Services.AddRazorPages();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler(&quot;/Home/Error&quot;);
}
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =&gt;
{
    endpoints.MapControllerRoute(
        name: &quot;default&quot;,
        pattern: &quot;{controller=Home}/{action=Index}/{id?}&quot;);
    endpoints.MapRazorPages();
    endpoints.MapBlazorHub();
});
app.Run();

Views/Shared/_Layout.cshtml

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot; /&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
    &lt;title&gt;@ViewData[&quot;Title&quot;] - MVCApp&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;~/lib/bootstrap/dist/css/bootstrap.min.css&quot; /&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;~/css/site.css&quot; asp-append-version=&quot;true&quot; /&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;~/MVCApp.styles.css&quot; asp-append-version=&quot;true&quot; /&gt;
    &lt;base href=&quot;/&quot;/&gt;
    &lt;script src=&quot;_framework/blazor.server.js&quot;&gt;&lt;/script&gt;
...

but it doesn't work: I get 404 on /test

What am I missing to make Razor Component's routing work with MVC routing?

答案1

得分: 0

你需要安装 Microsoft.AspNetCore.Components 包，并将 _Host.cshtml、App.razor、_Imports.razor 文件添加到你的 MVC 项目中。

_Imports.razor:

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Project

_Host.cshtml:

@page &quot;/&quot;
@namespace Project.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = &quot;_Layout&quot;;
}
&lt;component type=&quot;typeof(App)&quot; render-mode=&quot;ServerPrerendered&quot; /&gt;

App.razor:

@using Microsoft.AspNetCore.Components.Routing
&lt;Router AppAssembly=&quot;@typeof(App).Assembly&quot;&gt;
    &lt;Found Context=&quot;routeData&quot;&gt;
        &lt;RouteView RouteData=&quot;@routeData&quot; /&gt;
        &lt;FocusOnNavigate RouteData=&quot;@routeData&quot; Selector=&quot;h1&quot; /&gt;
    &lt;/Found&gt;
    &lt;NotFound&gt;
        &lt;PageTitle&gt;Not found&lt;/PageTitle&gt;
        &lt;LayoutView&gt;
            &lt;p role=&quot;alert&quot;&gt;Sorry, there&#39;s nothing at this address.&lt;/p&gt;
        &lt;/LayoutView&gt;
    &lt;/NotFound&gt;
&lt;/Router&gt;

你的端点：

app.UseEndpoints(endpoints =&gt;
{
    endpoints.MapControllerRoute(
        name: &quot;default&quot;,
        pattern: &quot;{controller=Home}/{action=Index}/{id?}&quot;);
    endpoints.MapRazorPages();
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToPage(&quot;/_Host&quot;);
});

测试结果：

如果你想在 Blazor 中使用 UI，你也可以从 Blazor 应用程序复制 MainLayout.razor 并在 App.razor 中使用它，就像这样：

//...
&lt;RouteView RouteData=&quot;@routeData&quot; DefaultLayout=&quot;@typeof(MainLayout)&quot; /&gt;
//...
&lt;LayoutView Layout=&quot;@typeof(MainLayout)&quot;&gt;
//...

请注意，如果你这样做，你的默认页面将是一个 Razor 组件，其中定义了 @page "/"，而不是 Index.cshtml。

英文:

You need to install the Microsoft.AspNetCore.Components package and add the _Host.cshtml, App.razor, _Imports.razor files to your MVC project.

_Imports.razor:

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Project

_Host.cshtml:

@page &quot;/&quot;
@namespace Project.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = &quot;_Layout&quot;;
}
&lt;component type=&quot;typeof(App)&quot; render-mode=&quot;ServerPrerendered&quot; /&gt;

App.razor:

@using Microsoft.AspNetCore.Components.Routing
&lt;Router AppAssembly=&quot;@typeof(App).Assembly&quot;&gt;
    &lt;Found Context=&quot;routeData&quot;&gt;
        &lt;RouteView RouteData=&quot;@routeData&quot; /&gt;
        &lt;FocusOnNavigate RouteData=&quot;@routeData&quot; Selector=&quot;h1&quot; /&gt;
    &lt;/Found&gt;
    &lt;NotFound&gt;
        &lt;PageTitle&gt;Not found&lt;/PageTitle&gt;
        &lt;LayoutView&gt;
            &lt;p role=&quot;alert&quot;&gt;Sorry, there&#39;s nothing at this address.&lt;/p&gt;
        &lt;/LayoutView&gt;
    &lt;/NotFound&gt;
&lt;/Router&gt;

Your Endpoints:

app.UseEndpoints(endpoints =&gt;
{
    endpoints.MapControllerRoute(
        name: &quot;default&quot;,
        pattern: &quot;{controller=Home}/{action=Index}/{id?}&quot;);
    endpoints.MapRazorPages();
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToPage(&quot;/_Host&quot;);
});

Test Result:

If you want to use the UI in Blazor, you can also copy MainLayout.razor from a Blazor App and use it in App.razor like this:

//...
&lt;RouteView RouteData=&quot;@routeData&quot; DefaultLayout=&quot;@typeof(MainLayout)&quot; /&gt;
//...
&lt;LayoutView Layout=&quot;@typeof(MainLayout)&quot;&gt;
//...

Note that if you do this, your default page will be a Razor Component with @page "/" defined instead of Index.cshtml.

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

添加 Razor 页面组件到 MVC

问题

答案1

Simple Injector – 使用配置中的构造函数值动态注册插件

Very slow EF Core with Azure Functions when try block is added

如何使用AAD Graph API发送电子邮件，使用个人Outlook帐户。

如何避免在工厂中使用条件语句？

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。