Blazor中的布局页面以及嵌套

最新推荐文章于 2024-08-19 16:43:22 发布

65号腕

最新推荐文章于 2024-08-19 16:43:22 发布

阅读量3.8k

点赞数 1

分类专栏： Blazor

本文链接：https://blog.csdn.net/weixin_46295080/article/details/107167429

版权

本文介绍了Blazor框架中的布局页面概念，包括如何定义布局页面，如何进行嵌套布局以满足多层次的页面结构需求，以及如何通过_Imports.razor文件实现更灵活的布局页面应用，使得代码维护更加便捷。

摘要由CSDN通过智能技术生成

定义布局页面

布局页面(layout)，习惯上我更喜欢称之为模板页，或者母版页。她的作用是用来呈现页面上的一些公共元素，或者托管一些公共的逻辑代码。

先来看看Blazor的默认布局：
在这里插入图片描述
图中红色区域即是布局页里面的内容，对应的代码是MainLayout.razor，如下：

@inherits LayoutComponentBase

<div class="sidebar">
    <NavMenu />
</div>

<div class="main">
    <div class="top-row px-4">
        <a href="http://blazor.net

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

65号腕

关注关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

人人都会Blazor —— 3.5 布局

不忘初心

12-05

317

有些应用元素（例如菜单、版权消息和公司徽标）通常是应用整体布局的一部分。将这些元素的标记副本放入应用的所有组件是一种效率较低的做法。每次更新其中一个元素时，都必须同时更新使用该元素的每个组件。这种方法的维护成本很高，并且如果缺少更新，还可能会导致内容不一致。那么 “布局” 就是用来解决这些问题的。

Mvc3 Razor 的布局页嵌套

weixin_34319999的博客

06-29

293

首先，在项目中已经有了一个全站公用的布局页：/Views/Shsred/_Layout.cshtml在部分页面中需要使用一个局部的布局页，就考虑利用布局页的嵌套，几经尝试后，总结方法如下：1、在/Views/Shsred/文件夹下建立这个局部的布局页：/Views/Shsred/_LocalLayout.cshtml在_LocalLayout.cshtml中加上以下代码，指定自己的...

1 条评论您还未登录，请先登录后发表或查看评论

Blazor开发框架Known-V2.0.8

最新发布

knownchen的专栏

08-19

555

基于C#和Blazor的快速开发框架，开箱即用，跨平台。模块化，单页应用，混合桌面应用，Web和桌面共享一处代码。UI默认支持AntDesign，可扩展其他UI组件库。包含模块、字典、组织、角色、用户、日志、消息、工作流、定时任务等功能。低代码、简洁、易扩展，让开发更简单、更快捷！

Blazor布局（Layouts）

Cool2Feel的博客

10-24

907

Blazor布局类似于母版页的ASP Webforms概念，并且与ASP MVC中的Razor布局相同。 Web上几乎每个网站都有一个模板，该模板可在整个网站（页面顶部的品牌，底部的版权）或网站的特定子部分（例如管理员的特定菜单结构）中使用网站页面）。这是通过创建一个用作当前页面内容周围的HTML包装程序的视图来实现的，该模板包含一个占位符，用于指示应在其中显示所包装页面内容的位置。 <h1>This is the start of my reusable layout</h1&

Blazor使用布局

Cool2Feel的博客

10-24

899

指定应用程序的默认布局指定布局的最通用方法是编辑**/Pages/_Imports.razor**文件，然后编辑单行代码以标识其他布局。 @layout MainLayout 布局的名称是强类型的。 Blazor仅在存在具有指定名称的布局的情况下才正确语法突出显示代码，如果标识符不正确，则编译器也会失败。注意：显然，如果您只想更改现有布局的外观，则可以更改**/Shared/MainLayout.razor**文件。为应用程序区域指定默认模板如果您的应用程序具有单独的区域，例如“管理员”区域，

Blazor 嵌套布局

Cool2Feel的博客

10-24

731

指定@layout（显式或通过_Imports.razor文件）时，Blazor将使用LayoutAttribute装饰生成的目标类。 [Microsoft.AspNetCore.Components.LayoutAttribute(typeof(MainLayout))] public class AdminUsers : Microsoft.AspNetCore.Components.ComponentBase { } 注意：生成的.cs文件可以在项目的obj \ D

创建Blazor布局

Cool2Feel的博客

10-24

264

对应打算用作页面布局模板的任何内容都必须来自LayoutComponentBase类。为了表明您希望页面内容出现的位置，您只需输出Body属性的内容。 @inherits LayoutComponentBase <div class="main"> <header> <h1>This is the header</h1> </header> <div class="conte

在Blazor中构建数据库应用程序-第4部分-UI控件

04-04

在Blazor应用中，每个页面都是一个 Razor组件，这些组件可以嵌套和重用，形成复杂的UI结构。 2. **C#在UI中的作用**：C#代码可以直接在Razor组件中编写，用于处理事件、数据绑定和逻辑控制。例如，你可以使用`@code...

Blazor-AoC:测试blazor应用

04-08

- **样式表（Stylesheets）**：在Blazor项目中，CSS用于定义组件的外观和布局。开发者可以使用内联样式、内部样式表或外部样式表。Blazor还支持CSS隔离，确保组件样式不会相互影响。 - **响应式设计**：利用CSS媒体...

mysql 失败捕获 net core_处理 ASP.NET Core Blazor 应用中的错误

weixin_42512128的博客

02-27

848

本文介绍 Blazor 如何管理未经处理的异常以及如何开发检测和处理错误的应用。开发过程中的详细错误当 Blazor 应用在开发过程中运行不正常时，从该应用接收详细的错误信息有助于故障排除和修复问题。出现错误时，Blazor 应用会在屏幕底部显示一个黄色条框：在开发过程中，黄色条框会将你定向到浏览器控制台，你可在其中查看异常。在生产过程中，黄色条框会通知用户发生了错误，并建议刷新浏览器。此错误处...

Blazor简单教程(2)：布局

qq_44695769的博客

08-12

590

我们现在主流的页面都是单页面Layout布局，即一个页面有侧边栏，抬头，下边栏，中间主题。BootstrapBlazor UI， Blazor Server 模式配置注入LayoutComponentBase@inherits LayoutComponentBase < h1 > 我是EmptyLayout布局 < main > @Body @code {

Blazor University （2）布局 — 创建 Blazor 布局

dotNET跨平台

03-25

452

原文链接：https://blazor-university.com/layouts/布局Blazor 布局类似于 ASP Webforms 母版页的概念，与 ASP MVC 中的 Razor 布局相同。几乎网络上的每个网站都有一个模板用于整个网站（页面顶部的品牌，底部的版权）或网站的特定子部分（例如站点管理页面上的特定菜单结构）。这是通过创建一个视图来实现的，该视图充当...

嵌套子路由

weixin_48879122的博客

01-04

352

react中的嵌套子路由。

.Net Core开发学习(四) ——Blazor(MVVM)应用

自云—自在之心，无缚于体

06-13

3608

.Net Core开发学习(四) ——Blazor(MVVM)应用 MVVM(Model-View-ViewModel) MVVM，双向数据绑定。既模型数据与页面显示的数据双向绑定，改变视图数据也会改变模型数据。使用Blazor框架可以减少很多Js脚本代码甚至可以无Js脚本实现快速开发。当然，想要做到这点，必须浏览器与服务器保持实时连接，所以Blazor的底层是基于WebSocket的。现在比较出名的mvvm架构的框架有vue.js，angular.js等。创建Blazor应用创

如何在现有的Vue项目中嵌入 Blazor项目？

dotNET跨平台

01-21

509

目前官方只提供了angular和react俩种示例,所以本教程将来讲解如何在Vue的现有项目中使用，上期已经做好了react的教材！准备流程Vue项目创建流程使用Vue创建一个Demo项目全部选择默认No即可然后项目名称就用demo了npm init vue@latest cd demo npm i安装完成依赖，在项目的根目录找到index.html添加以下代码即可<!DOCTYP...

Blazor之Router入门

qq_36819973的博客

11-10

332

Router 组件允许路由到 Razor 组件。 Router 组件在 App 组件 (App.razor) 中使用。编译带有 @page 指令的 Razor 组件 (.razor) 时，将为生成的组件类提供一个 RouteAttribute 来指定组件的路由模板。

.NET in Browser - Blazor

a4604678的博客

10-28

551

什么是Blazor Blazor 是一个实验性的. NET web 框架, 使用 C# 和 HTML 在任何浏览器中不需要插件即可运行 WebAssembly 程序集。什么是WebAssembly WebAssembly是一种新的适合于编译到Web的，可移植的，大小和加载时间高效的格式，是一种新的字节码格式。它的缩写是”.wasm”，.wasm 为文件名后缀，是一种新的底层安全的“二进...

.NET6 Blazor体验 -＞ 1. 项目结构探索并添加新页面

qq994877603的博客

06-30

382

cs文件中定义了一个字段表示table是否显示，一个方法控制table显示，并在listTestENtity中插入数据，一个entity:table内容。razor文件中@Page指令表示其路径，创建一个button，click方法调用cs中的IsShow来控制table的显示，最后将table显示出来。a.Found中注册了一个的路由,路由指向MainLayout，带了一个参数@routeData。b.main中写死了一个Link，再组合了一个article，显示@Body的内容。

怎样在LinearLayout布局中嵌套RelativeLayout

05-21

可以使用如下代码，在LinearLayout中嵌套RelativeLayout： ``` <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">  <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content">  </RelativeLayout> </LinearLayout> ``` 在LinearLayout布局中嵌套RelativeLayout时，需要注意以下几点： - 使用match_parent或者wrap_content来设置RelativeLayout的宽高； - RelativeLayout中的子View组件可以使用android:layout_alignParentXXX属性来设置相对父布局的位置； - 使用LinearLayout时，需要根据实际情况设置orientation属性，决定子View组件的排列方式。