Razor代码复用

最新推荐文章于 2021-09-23 16:53:31 发布
最新推荐文章于 2021-09-23 16:53:31 发布
阅读量106 收藏
点赞数

　　上一篇博客中讲解了Razor语法，在这一篇博文中，我会和大家共同学习在Razor中如何复用代码。

 

　　1.布局（Layout）复用

　　Layout的使用，就像WebForm的模板页一样，甚至会更加简单，更加方便和明了。

　　要使用Layout，首先要在模板页相应的位置添加@RenderBody()方法：

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8"/>
<title>测试网站 - @Page.Title</title>
</head>
<body>
        @RenderBody()
</body>
</html>

　　在要使用模板页的页面中，指定所使用的模板页：

@{
    Layout = "/LayoutPage.cshtml";
    Page.Title = "第一个子页面";
}

<p>This is a layout test</p>

　　Layout的加载顺序不同于模板页，它是先加载子页，然后再加载布局页的。

 

　　2.页面（Page）复用

　　在Razor中，我们可以轻松的在页面中输出另一个页面的HTML代码：

<p>
    @RenderPage("/SubPage.cshtml")
</p>

　　SubPage的代码如下：

<font color="red">这是一个子页面</font>

 

　　3.Section

　　Section是在布局页（Layout Page）中使用的东西，在使用了布局页的子页面中定义Section的内容，布局页才能够使用。如果Page1.cshtml页面使用了布局页Layout.cshtml，那么，我们可以在Page1.cshtml中定义Section：

@section header{
<b>Header Section</b>
}

@section footer{
<b>footer Section</b>
}

　　Layout.cshtml的代码：

<body>
        @RenderSection("header");

        @RenderBody()

        @RenderSection("footer");
</body>

　　需要说明一点，虽然没有找到相应的文档，但我在测试的时候，只发现了这一种用法……

 

　　4.Helper复用

　　Helper是用来简化代码编写的，通常用来处理输出。例如，我们可以为一个模型构建一个Helper，用来处理该模型的Html输出；再比如，我们为系统菜单创建一个Helper，方便我们使用。

　　定义Helper，需要使用@helper标记，在该标记后面添加名称和相应的代码：

@helper MenuEx(params string[] strs){
<ul>
        @foreach(string str in strs){
<li>@str</li>
        }
</ul>
}

　　这种写法非常类似与类的静态方法，在这个MenuEx中，需要传递字符串数组作为参数。

　　另外，我们通常会把一类Helper放在一个cshtml文件中，这个文件名就相当于类名。例如MenuEx放在文件 HelperEx.cshtml文件中，在Page1.cshtml中的使用方法如下：

<p>
    @HelperEx.MenuEx("Microsoft", "IBM", "Apple", "Google")
</p>

　　这是我们自定义的内容，另外，系统还为我们提供了一些列的Helper，用来简化Html的书写。这些Helper放在@Html中，我们可以方便的使用：

<p>
    @Html.TextBox("txtName")
</p>

　　

　　OK，本节就讲到这里，更多的学习内容，敬请关注！

 

 

 

 

 

 

 

weixin_33695082
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Razor Demo
01-10
部分视图可以复用代码，用于构建可重用的组件。布局则定义了页面的通用结构，多个视图可以共享相同的布局，提高代码的组织性和一致性。 7. **错误处理**：在Razor模板中，如果遇到语法错误或运行时错误，会立即中断...
Razor 2.0模板引擎，支持布局
04-11
这大大提高了代码复用性，使得网站整体风格的一致性得以保证。开发者可以通过`@RenderBody()`和`@RenderSection()`等指令来定义和调用这些区域。 例如，在一个典型的ASP.NET MVC项目中，`_Layout.cshtml`文件就是...
[转]Razor里写函数
weixin_33809981的博客
02-06 183
本文转自：http://blog.csdn.net/leftfist/article/details/43243177 asp.net mvc的视图里使用Razor来书写服务器代码，人尽皆知。可以常常见到里面写上for循环语句，输出一大堆东东，牛逼得很。 可是，如果循环语句还不能满足我们的要求，需要定义一个函数来调用，该怎么搞？ 网上那些牛逼哄哄的教程文章立即三缄其口一大半。 好的，我现在...
Mvc示例代码之四Razor模板（二）
码海拾贝
09-30 2349
这节我们用一个实际的Action例子讲解一下mvc前后台传递数据。 前后台数据传递例子 public ActionResult GetList(string BigClassName,int? pageIndex) { int pageCount=0; int recordCount=0; string
使用Razor来进行页面布局
weixin_34205076的博客
05-14 520
　UI设计师们现在也讲究页面设计的语义化和结构化，把一个页面分成很多个模块，使用语义化的类名或id来标识这些模块。Razor推出了新的布局解决方案来迎合这一潮流。 　　这里涉及到Razor的一些语法，大家可以不深究"@"后面的内容，讲到页面布局，你只要专注与HTML代码就可以了。语法会在后面补充。 　　1.指定母版与加载机制 　　首先我们来看_ViewStart.chhtml页面，它的内容很...
Razor语法大全
weixin_30840573的博客
03-20 1006
Razor是基于framewor4以上写的一个开源项目：https://github.com/Antaris/RazorEngine/ Razor是包含了模板引擎和动态编译两部分。本部分就简单记录了模板引擎的一些语法，之后用Razor做一个代码生成器，就使用Razor的语法来。 Razor的发布是和MVC一起的，作为MVC的视图模板引擎。 Razor文件类型 Razor可以在v...
razor语法手册
02-05
2. 部分视图（Partial View）是可重用的HTML片段，可以嵌入到其他视图中，以提高代码复用性。 七、错误处理 Razor视图中的异常会被捕获并返回到错误处理流程，通常会导致HTTP 500错误响应。开发者可以使用`try-...
Razor语法的示例程序
04-27
此外，`@helper`可以自定义可复用的帮助函数，提高代码的可读性和维护性。 2. **数据绑定**：Razor视图与Model紧密关联，通过`@Model`可以轻松访问传递到视图的数据。在示例中，你可能会看到如何使用`@...
Razor-Pages-Tutorial
04-19
“Razor-Pages-Tutorial”这个教程可能涵盖了Razor Pages的基础知识，包括如何创建和组织页面，理解Razor语法，处理用户请求，进行数据绑定，以及利用布局和部分视图提高代码复用性。通过学习这个教程，开发者能够更...
（初识MVC Core）七、复用的View：View Component
angyi6424的博客
03-25 260
1.优点： 1）相当于PartialView + 一个小型轻量级的Controller（注：PartialView无法包含业务逻辑） 2）适用于较为复杂业务 3）可以使用Razor语法 2.创建View Component 结构： 1）创建ViewComponents文件夹、MovieCountViewComponent.cs using CoreMod...
RazorPage介绍(一)
你要明白，任何问题都不是孤立存在的，一定有人曾经遇到过，并且已经有更好的解决办法了，只是我还不知道。我不应该在黑暗中独自前行，去重新发明轮子，也许我的顿悟，只是别人的基本功！我应该要站在巨人的肩膀上，学习更成熟的经验和方法，然后再来解决这个问题
09-23 2587
什么是RazorPage 我们都知道在Asp.Net MVC中，Razor是其一种视图引擎。而今天我们介绍的Razor Page却是一种web框架，它是一种简化的MVC框架，如果你曾经做过WebForm的开发者，你会发现，Razor Page有点类似Web Form，一个page，一个class。 大家或许会有疑惑，我们现在Asp.Net MVC已经很完善了，为何还需要出来一种新型的框架呢？在我看来，MVC确实已经足够强大了，只是因为太强大了，却变成了它的缺点。当我们的业务越来越庞大的时候，你是否觉得你的一
Razor 语法@Html.DropDownList，根据List集合或者枚举生成Select标签
weixin_30530939的博客
01-31 638
1、根据List集合生成Select标签，根据数据库数据换成SelectListItem集合 Action 方法（也可使用下方的List集合的扩展方法）： 1 var selectList = DBList.Select(f => new SelectListItem { Value = f.Key, Text = f.Value }).ToList(); 2 selectList...
使用 Razor 生成 HTML5 中的 data- 属性
weixin_33755649的博客
08-21 86
在 HTML5 中, 可以使用 data- 属性来表示用户数据，这些数据甚至可以是 JSON 格式的数据，对 Web 前端开发带来很大的方便。 在 MVC 的 Razor 中，可以使用匿名对象来生成定制的属性，不过，这样的属性可不能通过 Razor  的语法检查。 new{ data-id= 1 } 编译器会直接报告错误。  The name 'data' does not exis...
VS2012快速编辑ASP.NET（HTML）页面——自定义复用代码块
我的专栏
11-18 3090
喜欢VS2012的html代码提示功能，尤其是装了VAssix
Razor练习3
weixin_34019144的博客
05-07 75
Razor语法中，物质循环处理，它使用到三种： for, while，foreach。 下面Insus.NET分别在ASP.NET MVC环境中列举一个例子，附加源代码： while:&lt;br /&gt; @{ int a = 0; int b = 5; while (a &lt; b...
razor 使用vue教程
最新发布
05-19
以下是使用 Vue.js 开发 Razor 页面的基本步骤： 1. 安装 Vue.js 可以通过 CDN 或者 npm 安装 Vue.js。 如果使用 CDN，可以在 Razor 页面中添加以下代码： ```html <script src="https://cdn.jsdelivr.net/npm/vue"></script> ``` 如果使用 npm，可以在项目中运行以下命令进行安装： ```bash npm install vue ``` 2. 创建 Vue 实例 在 Razor 页面中，可以通过以下方式创建 Vue 实例： ```html <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> ``` 这个例子中，我们创建了一个 Vue 实例，并将它挂载到 id 为 "app" 的元素上。Vue 实例中的 data 对象包含了一个 message 属性，它的值为 "Hello Vue!"。在 HTML 中，我们使用 {{ message }} 将这个值渲染到页面上。 3. 组件化开发 Vue.js 的核心思想是组件化开发。一个组件是一个可复用的代码模块，它包含了 HTML、CSS 和 JavaScript。 在 Razor 页面中，可以创建一个 Vue 实例作为组件，并将其作为一个 Razor 组件使用： ```html @model MyModel <my-component :prop1="Model.Property1" :prop2="Model.Property2"></my-component> <script> Vue.component('my-component', { props: ['prop1', 'prop2'], template: '<div>{{ prop1 }} - {{ prop2 }}</div>' }) </script> ``` 这个例子中，我们创建了一个名为 "my-component" 的组件，并将其作为一个 Razor 组件使用。组件接收两个属性 prop1 和 prop2，它们的值来自于 Razor 页面中的 Model 对象。在组件的模板中，我们使用 {{ prop1 }} 和 {{ prop2 }} 渲染这两个属性。 4. 发送 Ajax 请求 在 Vue.js 中，可以使用 Axios 库发送 Ajax 请求。 在 Razor 页面中，可以通过以下步骤使用 Axios： 1. 安装 Axios： ```bash npm install axios ``` 2. 在 Razor 页面中引入 Axios： ```html <script src="https://unpkg.com/axios/dist/axios.min.js"></script> ``` 3. 在 Vue 实例中使用 Axios 发送请求： ```html <div id="app"> <button @click="loadData">Load Data</button> <ul> <li v-for="item in items">{{ item }}</li> </ul> </div> <script> var app = new Vue({ el: '#app', data: { items: [] }, methods: { loadData: function() { var self = this; axios.get('/api/data') .then(function(response) { self.items = response.data; }) .catch(function(error) { console.log(error); }); } } }) </script> ``` 这个例子中，我们创建了一个按钮和一个列表。当用户点击按钮时，Vue 实例中的 loadData 方法会使用 Axios 发送一个 GET 请求到 "/api/data"，并将返回的数据渲染到列表中。 以上就是使用 Vue.js 开发 Razor 页面的基本步骤。如果你想深入学习 Vue.js，可以访问 Vue.js 官方文档：https://cn.vuejs.org/v2/guide/
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值