一文说通Blazor for Server-Side的项目结构 (2)

然后在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

 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyyyfw.html