Blazor加载页面的顺序是什么?

huangapple go评论52阅读模式
英文:

What is the sequence of pages Blazor loads

问题

  1. 开始于 _Host.cshtml

    1. 问题: 一切的根需要是一个包含一些 JavaScript 的 HTML 文件,这个根/初始的 HTML 是从这里构建的吗?
    2. 问题: 如何告诉它从这个文件开始?
  2. 在 _Host.cshtml 中的 <component type="typeof(App)" .../> 然后将 App.razor 插入到 _Host.cshtml 的 <body> 中。

  3. App.razor 设置身份验证和授权(如果使用.NET Core Identity),并使用 <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"> 设置路由。

  4. 现在处理 MainLayout.razor(DefaultLayout="@typeof(MainLayout)")。

  5. 问题: 这个文件的目的是实例化 Blazor 的基础框架吗?除了授权,这个文件还有什么作用?

  6. MainLayout.razor 是所有 Blazor 页面的模板。在文件中有一个 @Body,那里是实际请求内容放置的位置。

  7. 通常在正文之前有一个 <NavMenu/>,之后有一个标准的页脚。

  8. 其他文件

    1. NavMenu.razor 通常是标准菜单的位置。但这里没有特殊/必需的内容,它只是在 MainLayout.razor 中引入的。
    2. _Imports.razor 似乎是所有 .razor 文件的 GlobalUsings.cs。
    3. _ViewImports.cshtml 似乎是所有 .cshtml 文件的 GlobalUsings.cs。
    4. 问题: _ValidationScriptsPartial.cshtml 的目的是什么,它在哪里使用?
    5. 问题: 由于一切都始于 _Host.cshtml,看起来 Blazor 是建立在 MVC 之上的,这是否意味着默认情况下在 Blazor 应用中启用并可用所有 MVC 功能?

以上是否正确?可以有人回答上面的五个问题吗?

英文:

I want to make sure I understand how Blazor (server side) builds up a web page. Is the following correct?

  1. It starts with _Host.cshtml
    1. Question: The root of everything needs to be an html file with some JavaScript in it - is that root/start html built from this?
    2. Question: How is it told to start with this file?
  2. The <component type="typeof(App)" .../> in _Host.cshtml then inserts App.razor into the <body> of _Host.cshtml
  3. App.razor sets up the authentication & authorization (if using .NET Core Identity) and sets the route with <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
  4. This now processes MainLayout.razor (DefaultLayout="@typeof(MainLayout)").
  5. Question: Is the purpose of this to instantiate the base framework for Blazor (.razor)? Aside from authorization, what is the purpose of this file?
  6. MainLayout.razor is the template for all the Blazor pages. In the file there is a @Body and that is where the actual page requested contents go.
  7. Usually there is a <NavMenu/> before the body and a standard footer after.
  8. Other files
    1. NavMenu.razor is the usual place for the standard menu. But there is nothing special/required about this, it's simply brought in in MainLayout.razor
    2. _Imports.razor appears to be a GlobalUsings.cs for all the .razor files.
    3. _ViewImports.cshtml appears to be a GlobalUsings.cs for all the .cshtml files.
    4. Question: What is the purpose of _ValidationScriptsPartial.cshtml and where is it used?
    5. Question: As this all starts with _Host.cshtml, it appears that Blazor is built on top of MVC and therefore does this mean all of MVC is by definition enabled and available in a Blazor app?

Is the above correct? And can someone answer the five questions above?

答案1

得分: 1

一个稍微更好的起点将是“Blazor Server App Empty”模板。NavMenu组件就是那样一个组件。

> 8.5 由于一切始于 _Host.cshtml,看起来 Blazor 是建立在 MVC 之上

接近。_Host.cshtml 是 Razor 页面。而 <component type="typeof(App)"> 是一个“Razor 组件”,又称为 Blazor。

实际上,Blazor Server 应用程序就是一个运行一个大组件的 Razor 页面应用程序。你可以在你的 Blazor 应用程序周围使用 Razor 页面中可用的所有内容,但不能在其内部使用。

当然,你的程序始于 Program.cs,而 app.MapFallbackToPage("/_Host"); 这一行启动了所有过程。

英文:

A slightly better starting point would be the "Blazor Server App Empty" template. The NavMenu component is just that, a Component.

> 8.5 As this all starts with _Host.cshtml, it appears that Blazor is built on top of MVC

Close. _Host.cshtml is a Razor Page. And &lt;component type=&quot;typeof(App)&quot; &gt; is a "Razor Component" aka Blazor.

A Blazor Server app is in fact a Razor Pages app running one big component. You can use everything available in Razor Pages around your Blazor app, but not inside it.

And your program starts of course in Program.cs, and the line app.MapFallbackToPage(&quot;/_Host&quot;); fires it all up.

答案2

得分: 1

  1. 是的,_Host.cshtml 是在服务器上呈现的标准服务器端网页。让Blazor生效的是:
    &lt;script src=&quot;_framework/blazor.server.js&quot;&gt;&lt;/script&gt;

这运行客户端Blazor Server脚本,与服务器建立SignalR连接,并用Blazor Hub会话渲染器提供的内容替换任何Component标记的内容。每个组件中定义的类型成为组件树的根组件,由渲染器(在Blazor Server hub会话中)维护。它将对此渲染树的更改传递给客户端代码,以应用于呈现的DOM。

  1. blazor.server.js 在浏览器加载页面时启动,并与服务器建立SignalR会话,并请求组件。从那时起,它监听SignalR会话上的更新,并将它们应用于浏览器DOM。

  2. MainLayout 只是另一个组件,设计为布局:只是渲染树的一部分。它是AuthorizeRouteViewChildContent,后者是Router组件的ChildContent。每当RouteData中提供的组件更改时,它都会被呈现。

AuthorizeRouteView 是控制授权的组件。它从CascadingAuthenticationState获取其身份验证数据。

  1. _ValidationScriptsPartial 只是服务器端身份验证代码的一部分。大部分代码是身份验证库提供的模板代码,在项目中不可见。

例如,注册页面:

&lt;a class=&quot;nav-link text-dark&quot; asp-area=&quot;Identity&quot; asp-page=&quot;/Account/Register&quot;&gt;Register&lt;/a&gt;
  1. 是的。请查看这篇文章,演示如何将Blazor添加到MVC模板解决方案中。https://www.codeproject.com/Articles/5321697/Building-a-Blazor-Server-Application-from-the-Web

有关组件的更多信息,请参阅此文章:https://www.codeproject.com/Articles/5277618/A-Dive-into-Blazor-Components

英文:
  1. Yes, _Host.cshtml is a standard server side web page rendered on the server. What brings Blazor to life is:
    &lt;script src=&quot;_framework/blazor.server.js&quot;&gt;&lt;/script&gt;

This runs the client side Blazor Server scripts, establishes a SignalR connection with the server and replaces the content is any Component tags with content provided by the Blazor Hub session Renderer. The type defined in each component becomes the root component of a component tree that the Renderer (in the Blazor Server hub session) maintains. It passes changes to this render tree to the client side code to apply to the rendered DOM.

  1. blazor.server.js starts when the browser loads the page and establishes a SignalR session with the server and requests the components. From that point it listens for updates on the SignalR session and applies them to the browser DOM.

  2. MainLayout is just another component, designed to be a Layout: just part of the Render Tree. It's the ChildContent of AuthorizeRouteView which is the ChildContent of the Router component. It gets rendered whenever the supplied component in RouteData changes.

AuthorizeRouteView is the component that controls Authorization. It gets it's authentication data from CascadingAuthenticationState.

  1. _ValidationScriptsPartial is just part of the server side authentication code. Most of the code is template code provided by the authentication library and not visible in the project.

For example the Register Page:

&lt;a class=&quot;nav-link text-dark&quot; asp-area=&quot;Identity&quot; asp-page=&quot;/Account/Register&quot;&gt;Register&lt;/a&gt;
  1. Yes. See this article which demonstrates how to add Blazor to a MVC template solution. https://www.codeproject.com/Articles/5321697/Building-a-Blazor-Server-Application-from-the-Web

For more information on components there's an article here: https://www.codeproject.com/Articles/5277618/A-Dive-into-Blazor-Components

huangapple
  • 本文由 发表于 2023年4月11日 06:20:24
  • 转载请务必保留本文链接:https://go.coder-hub.com/75981157.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定