然后在Startup.cs文件的Configure中加入回退路由:
app.UseEndpoints(endpoints =>{
endpoints.MapBlazorHub();
endpoints.MapFallbackToPage("/_Host");
});
这里把这个_Host.cshtml登记为回退路由,作用是把所有请求到 Razor 的页面,先路由到这个页面中,由这个页面做最终合成。
这个页面中必须有的元素为:
@page,定义这个页面的访问点
@namespace,当前页面的namespace
addTagHelper,标记帮助
base,定义这个页面的路由起始
app,这一句是这个页面的核心。我们后边创建的Razor页面,会以一个组件的形式,放在这个位置
script,用来跟服务器通讯
上面的代码中,调用到一个typeof(App),这个App,是路由组件。下面我们来创建这个路由 - 创建一个App.razor:
<Router AppAssembly="@typeof(Program).Assembly"><Found Context="routeData">
<RouteView RouteData="@routeData" />
</Found>
<NotFound>
Page Not found
</NotFound>
</Router>
这个模板的用处,是在 Dotnet 编译时.razor时,为带有@page的类提供指定的路由模板属性RouteAttribute,同时,也映射出了上面说的App类。
运行。浏览器中会出现Page Not Found。这是我们在App.razor里定义的,表明我们没有找到任何可用的路由。
三、创建一个页面下面,我们来创建一个页面index.razor:
@page "http://www.likecs.com/"<h1>Hello, world!</h1>
这个页面简单。
@page,告诉路由这个页面的URL是/。
再运行,我们就看到了这个页面。
@page定义的是这个页面的路由。路由有以下几种样式,我简单列一下:
直接路由:/page
参数路由:/page/{page_id}
约束路由:/page/{page_id: int}
四、创建一个布局模板
我们先在项目中创建一个目录Shared,用来存放各种组件和模板。在目录中,我们创建一个布局模板 - MainLayout.razor:
@using Microsoft.AspNetCore.Components@inherits LayoutComponentBase
<div>
<h3>This is layout</h3>
</div>
@Body
这里面有几个重点:
布局模板必须继承自类LayoutComponentBase
@Body定义了引用布局的页面的内容位置
Body的数据类型是RenderFragment,在Microsoft.AspNetCore.Components中,需要引用
其实这些操作,都是C#的结构,只不过用了Razor,换了一种写法
下面,我们给刚才的Index.razor加入布局模板:
@using demo.Shared@layout MainLayout
只要在Index.razor代码的最上边加上这两行就行。这两行中:
@layout是定义这个页面用哪个布局模板的;而@using是引用这个模板的位置,就是 C# 中的using。
运行,我们就看到,这个布局加到页面前边了。
五、设置默认布局引用上面的例子,是把布局给到一个页面。
我们也可以设置所有页面的默认布局模板,通过改动路由模板App.razor:
@using demo.Shared<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
Page Not Found
</NotFound>
</Router>
对方前边的文件内容,这一段,仅仅在RouteView中加了一个DefaultLayout。
现在,所有的页面都默认加上了布局模板。
六、设置默认命名空间引用上面的例子,在App.razor和Index.razor中,我们都引用了demo.Shared命名空间。
Blazor提供了一个默认的文件,叫_Imports.razor,用来存放所有.razor文件中共同的引用。
@using demo.Shared我们把引用加到这个文件中,同时把上面两个.razor中的引用去掉,就完成了。
*这儿也多说一句:布局模板也可以在这里引用。布局模板的引用优先级是:页面引用 > _Imports.razor引用 > App.razor 引用。
以上就是Blazor Server的项目结构。做好这个结构后,所有的功夫,就只在 Razor 页面了。
(全文完)
本文的代码在https://github.com/humornif/Demo-Code/tree/master/0017/demo