ASP.NET MVC 5 (六-2) 使用Razor表达式

2024-02-06 11:30
文章标签 使用 表达式 mvc asp net razor

本文主要是介绍ASP.NET MVC 5 (六-2) 使用Razor表达式,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

    上一章介绍Razor视图与布局,现在可以在此基础上使用Razor表达式来创建视图内容。

  • 开始使用Razor表达式
  • 插入数据值
  • 设置标签属性值
  • 使用条件语句
  • 枚举数组和集合
  • 处理命名空间
  • 番外篇

开始使用Razor表达式

    因为MVC是注重并强迫应用程序各部分之间的分离,因此虽然Razor表达式可以使用C#语句,但最好不要使用Razor执行业务逻辑或对域模型进行操作。同样不应该对动作方法传递给视图的数据进行格式化而应该传递一个完整的模型对象。如:

...public ActionResult NameAndPrice(){return View(myproduct);}
...

这样在视图中使用Razor表达式可以得到要插入属性的值:

...
The product name is @Model.Name and it costs $@Model.Price 
...

插入数据值

    当希望控制器向视图插入数据时可以采用@ModelRazor表达式,也可以使用@ViewBag表达式以引用试图包特性动态定义的属性。以下的例子则采用这两种方式向视图传递数据。
在HomeConroller.cs文件添加一个DemoExpression动作方法:

using System.Web;
using System.Web.Mvc;
using Razor.Models;namespace Razor.Controllers
{public class HomeController : Controller{Product myproduct = new Product{Name = "Kayak",Price = 275M,IntProductID = 1,Category = "Watersports",Description = "A boat for one person"};// GET: Homepublic ActionResult Index(){return View(myproduct);}public ActionResult NameAndPrice(){return View(myproduct);}public ActionResult DemoExpression(){ViewBag.ProductCount = 1;/*使用ViewBag动态属性传递数据*/ViewBag.ExpressShip = true;ViewBag.ApplyDiscount = false;ViewBag.Supplier = null;/*向视图传递Product对象*/return View(myproduct);}}
}

    在Views/Home文件夹中创建一个名称为DemoExpression.cshtml的强类型视图来演示这些基本表达式传递的数据。

@model Razor.Models.Product
@{ViewBag.Title = "DemoExpression";
} 
<table>
<thead><tr><th>Property</th><th>Value</th></tr>
</thead>
<tbody><tr><td>Name</td><td>@Model.Name</td></tr><tr><td>Pric</td><td>@Model.Price</td></tr><tr><td>Stock Level</td><td><b>@ViewBag.ProductCount</b></td></tr>
</tbody>
</table>

    这里创建了一个html表格,使用模型对象和视图包的一些属性填充了单元格的值。启动项目并导航到/Home/DemoExpression,可以看到结果如下:
使用viewbag和模型对象传递数据

设置标签属性值

    Razor表达式不仅可以设置元素内容,还可以设置标签属性的值,在DemoExpression.cshtml最后添加一个div和一组checkbox,修改为如下内容:

@model Razor.Models.Product@{ViewBag.Title = "DemoExpression";} <table><thead><tr><th>Property</th><th>Value</th></tr></thead><tbody><tr><td>Name</td><td>@Model.Name</td></tr><tr><td>Pric</td><td>@Model.Price</td></tr><tr><td>Stock Level</td><td><b>@ViewBag.ProductCount</b></td></tr></tbody></table>
<div data-discount="@ViewBag.ApplyDiscount" dataexpress="@ViewBag.ExpressShip" data-supplier="@ViewBag.Supplier">The containing element has data attributes
</div>Discount:<input type="checkbox" checked="@ViewBag.ApplyDiscount" />
Express:<input type="checkbox"checked="@ViewBag.ExpressShip" />
Supplier:<input type="checkbox" checked="@ViewBag.Supplier" />

    这里使用Razor表达式在div元素上设置了一些data标签属性的值。
    Razor会将值为null的视图包属性或模型属性渲染成空字符串,并且Razor处理checked这种属性标签时,当值false或null时会完全删除该标签属性。因为当checked属性为false、null或空字符串时,浏览器会显示复选框已勾选,而Razor直接删除该属性则使得复选框处于未选中状态了。
    运行结果如下:
Razor设置标签属性

使用条件语句

    Razor能够处理条件语句,就可以根据视图数据的值,对视图输出进行剪辑而创造复杂而流畅的视图,并使其易于阅读和维护。
如在DemoExpression.cshtml视图中添加了一个条件语句;

@model Razor.Models.Product@{ViewBag.Title = "DemoExpression";} <table><thead><tr><th>Property</th><th>Value</th></tr></thead><tbody><tr><td>Name</td><td>@Model.Name</td></tr><tr><td>Pric</td><td>@Model.Price</td></tr><tr><td>Stock Level</td><td>@switch((int)ViewBag.ProductCount){case 0:@:Out of stockbreak;case 1:<b>Low Stock (@ViewBag.ProductCount)</b>break;default:@ViewBag.ProductCountbreak;   }</td></tr></tbody></table>

    要开始一个条件语句,要在C#条件关键字前面放一个@字符,以{结束。需要注意的是在switch中,Razor表达式不能求取动态属性的值,因此必须进行强制类型转换为int类型。
在Razor代码块内部,只要定义html以及Razor表达式就可以将html元素和数据插入到视图输出,如

...<b>Low Stock (@ViewBag.ProductCount)</b>
...

或者 像这样:

@ViewBag.ProductCount

不必使用其他任何特殊方式来表示html元素和Razor表达式。还有就是,可以使用如下一个Razor辅助工具直接显示文本文字:

 @:Out of stock

@:字符阻止Razor将此行解释为一条C#语句。
    以下是Razor视图使用if语句:

@model Razor.Models.Product@{ViewBag.Title = "DemoExpression";} <table><thead><tr><th>Property</th><th>Value</th></tr></thead><tbody><tr><td>Name</td><td>@Model.Name</td></tr><tr><td>Pric</td><td>@Model.Price</td></tr><tr><td>Stock Level</td><td>
@if (ViewBag.ProductCount == 0) { @:Out of Stock}else if (ViewBag.ProductCount == 1){<b>Low Stock (@ViewBag.ProductCount)</b>}else{}</td></tr></tbody></table>

枚举数组和集合

    在Home控制器中定义DemoArray动作方法演示如何在MVC中传递和使用枚举和数组集合。

using System.Web;
using System.Web.Mvc;
using Razor.Models;namespace Razor.Controllers
{public class HomeController : Controller{Product myproduct = new Product{Name = "Kayak",Price = 275M,IntProductID = 1,Category = "Watersports",Description = "A boat for one person"};...省略了其他动作方法public ActionResult DemoArray(){Product[] arry ={new Product{Name="Kayak",Price=275M},new Product{Name="LifeTackt",Price=48.95M},new Product{Name="Soccer",Price=19.50M},new Product{Name="Corner flag",Price=34.95M}};return View(arry);}}
}

    该动作方法创建了Product[]对象并传递给View方法,以使用默认视图来渲染这些数据。Visual Studio无法指定一个数组为模型类型,但可以在视图文件中手动修改强制模型视图的模型类型,以下是添加的DemoArray.cshtml视图文件代码:

@using Razor.Models
@model Razor.Models.Product[]
@{ViewBag.Title = "DemoArray";
}@if (Model.Length > 0)
{<table><thead><tr><th>Product</th><th>Price</th></tr></thead><tbody>@foreach (Product p in Model){<tr><td>@p.Name</td><td>$@p.Price</td></tr>}</tbody></table>
}
else
{<h2>No product data</h2>
}

    @model Razor.Models.Product[]指定本视图的强制模型类型为Product[],这里使用了一个@if-else语句,以便根据数据内容修改视图。另外,使用一个@foreach表达式来枚举数组的内容,并为每一条数据生成一个html表格行。可以看出来,在foreach循环中创建了一个p局部变量,然后永Razor表达式@p.Name@p.Prcie引用了它的属性。
导航到/Home/DemoArray,运行结果如下:
Razor使用条件语句

处理命名空间

    上例中

@using Razor.Models

代码像.cs类中一样引用了一个命名空间,只不过需要在using前面加一个@符号而已。

番外篇

    倒霉的是,这两天遇到了一个尴尬的问题:Visual Studio编译运行ASP.NET web应用程序时打开浏览器总是会显示“无法显示此页”,查找了各种处理方法都没法解决,之前重新启动Visual Studio或者重启电脑就可以解决了,但这次这种粗暴的方法好像被免疫了。我之前用的VS2013,就算我再安装了VS2015同样不好用。
    有人说是浏览器的问题,但我电脑上的5个浏览器(Edge、IE、Google Chrome、360安全浏览器、世界之窗浏览器)都不行;有人说防火墙或者安全软件的问题,但我关闭了防火墙和安全软件(没有安装NOD32安全防护,使用的是腾讯电脑管家 )也没有卵用;有人说网卡驱动的问题,我使用驱动精灵更新了所有驱动,可悲是的电脑直接崩溃了,祸不单行啊!
    这下好了,电脑黑屏一下午就是无法开机,用win10自带的修复工具重装了系统才能重新开机,这下终于又能愉快的调试了!!
    不过也因祸得福,电脑磁盘一下干净多了,而且其他盘里的资料都保留下来了,重新装VS和Office和LOL又费了我一整天时间,哈哈哈哈!!!

这篇关于ASP.NET MVC 5 (六-2) 使用Razor表达式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/684167

相关文章

如何使用celery进行异步处理和定时任务(django)

《如何使用celery进行异步处理和定时任务(django)》文章介绍了Celery的基本概念、安装方法、如何使用Celery进行异步任务处理以及如何设置定时任务,通过Celery,可以在Web应用中... 目录一、celery的作用二、安装celery三、使用celery 异步执行任务四、使用celery

使用Python绘制蛇年春节祝福艺术图

《使用Python绘制蛇年春节祝福艺术图》:本文主要介绍如何使用Python的Matplotlib库绘制一幅富有创意的“蛇年有福”艺术图,这幅图结合了数字,蛇形,花朵等装饰,需要的可以参考下... 目录1. 绘图的基本概念2. 准备工作3. 实现代码解析3.1 设置绘图画布3.2 绘制数字“2025”3.3

Jsoncpp的安装与使用方式

《Jsoncpp的安装与使用方式》JsonCpp是一个用于解析和生成JSON数据的C++库,它支持解析JSON文件或字符串到C++对象,以及将C++对象序列化回JSON格式,安装JsonCpp可以通过... 目录安装jsoncppJsoncpp的使用Value类构造函数检测保存的数据类型提取数据对json数

python使用watchdog实现文件资源监控

《python使用watchdog实现文件资源监控》watchdog支持跨平台文件资源监控,可以检测指定文件夹下文件及文件夹变动,下面我们来看看Python如何使用watchdog实现文件资源监控吧... python文件监控库watchdogs简介随着Python在各种应用领域中的广泛使用,其生态环境也

Python中构建终端应用界面利器Blessed模块的使用

《Python中构建终端应用界面利器Blessed模块的使用》Blessed库作为一个轻量级且功能强大的解决方案,开始在开发者中赢得口碑,今天,我们就一起来探索一下它是如何让终端UI开发变得轻松而高... 目录一、安装与配置:简单、快速、无障碍二、基本功能:从彩色文本到动态交互1. 显示基本内容2. 创建链

springboot整合 xxl-job及使用步骤

《springboot整合xxl-job及使用步骤》XXL-JOB是一个分布式任务调度平台,用于解决分布式系统中的任务调度和管理问题,文章详细介绍了XXL-JOB的架构,包括调度中心、执行器和Web... 目录一、xxl-job是什么二、使用步骤1. 下载并运行管理端代码2. 访问管理页面,确认是否启动成功

使用Nginx来共享文件的详细教程

《使用Nginx来共享文件的详细教程》有时我们想共享电脑上的某些文件,一个比较方便的做法是,开一个HTTP服务,指向文件所在的目录,这次我们用nginx来实现这个需求,本文将通过代码示例一步步教你使用... 在本教程中,我们将向您展示如何使用开源 Web 服务器 Nginx 设置文件共享服务器步骤 0 —

Java中switch-case结构的使用方法举例详解

《Java中switch-case结构的使用方法举例详解》:本文主要介绍Java中switch-case结构使用的相关资料,switch-case结构是Java中处理多个分支条件的一种有效方式,它... 目录前言一、switch-case结构的基本语法二、使用示例三、注意事项四、总结前言对于Java初学者

Golang使用minio替代文件系统的实战教程

《Golang使用minio替代文件系统的实战教程》本文讨论项目开发中直接文件系统的限制或不足,接着介绍Minio对象存储的优势,同时给出Golang的实际示例代码,包括初始化客户端、读取minio对... 目录文件系统 vs Minio文件系统不足:对象存储:miniogolang连接Minio配置Min

使用Python绘制可爱的招财猫

《使用Python绘制可爱的招财猫》招财猫,也被称为“幸运猫”,是一种象征财富和好运的吉祥物,经常出现在亚洲文化的商店、餐厅和家庭中,今天,我将带你用Python和matplotlib库从零开始绘制一... 目录1. 为什么选择用 python 绘制?2. 绘图的基本概念3. 实现代码解析3.1 设置绘图画