[ASP.NET MVC 小牛之路]03 - Razor语法

2023-10-31 15:58
文章标签 语法 03 mvc asp net 小牛 razor

本文主要是介绍[ASP.NET MVC 小牛之路]03 - Razor语法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

http://www.cnblogs.com/willick/p/3224144.html


Razor是MVC3中才有的新的视图引擎。我们知道,在ASP.NET中,ASPX的视图引擎依靠<%和%>来调用C#指令。而MVC3以后有了一套新的使用@标记的Razor语法,使用起来更灵活更简洁。下面通过一些简单示例让大家快速撑握Razor语法的使用。

本文目录

  • 准备工作
  • 使用Model对象
  • 使用表达式
  • 使用代码块
  • 使用@:和text标签
  • 使用ViewBag
  • 使用Layuot

准备工作

在演示Razor语法的使用之前,我们需要做一些准备工作。

1.打开VS创建一个ASP.NET MVC空项目,很简单,就不具体演示了。

2.添加一个Model。在项目的Models文件夹中添加一个名为Product的类。在这我们把前一篇C#知识点提要用到的Product类搬过来用。代码如下:

namespace MvcApplication1.Models {public class Product {public int ProductID { get; set; }public string Name { get; set; }public string Description { get; set; }public decimal Price { get; set; }public string Category { set; get; }}
}

3.添加一个Controller。右击项目中的Controllers文件夹,选择添加控制器,命名如下图所示:

点添加后,对ProdcutController中的代码进行如下编辑:

using System.Web.Mvc;
using MvcApplication1.Models; namespace MvcApplication1.Controllers
{public class ProductController : Controller{public ActionResult Index(){Product myProduct = new Product {ProductID = 1,Name = "苹果",Description = "又大又红的苹果",Category = "水果",Price = 5.9M};return View(myProduct); }}
}

4.添加一个View。右击Index方法,选择添加视图,在弹出的窗口进行如下配置:

点添加后,系统自动帮我们创建一个Product文件夹和一个Index.cshtml文件,Index.cshtml内容如下:

@model MvcApplication1.Models.Product@{ViewBag.Title = "Index";
}<h2>Index</h2>

5.修改默认路由。为了方便,我们应该让应用程序启动时直接导向我们需要的请求处理(此处是Product/Index)。打开Global.asax文件,找到注册路由RegisterRoutes方法下的routes.MapRoute方法,把controller的值改为“Product”,如下所示:

routes.MapRoute("Default", // 路由名称"{controller}/{action}/{id}", // 带有参数的 URLnew { controller = "Product", action = "Index", id = UrlParameter.Optional } // 参数默认值
);

先不管这些是什么意思,我会在后面的文章中专门介绍路由。到这,我们可以按F5,程序能正常运行,准备工作就做好了。

使用Model对象

介绍Razor语法,让我们从Index.cshtml文件的第一行开始:

@model MvcApplication1.Models.Product

Razor语句都是以@符号开始的。每个视图都有自己的Model属性(通过@Model调用)。上面这句代码的意思是将本视图的Model属性的类型指向MvcApplication1.Models.Product类型,这就实现了强类型。强类型的好处之一是类型安全,如果写错了Model对象的某个成员名,编译器会报错;另一个好处是在VS中可以使用VS中的代码智能提示自动完成类型成员调用的代码编写。 当然这句代码不要程序也可以正常运行,只是给编写代码造成了一定的困难。

视图中的Model属性用于存放控制器(Controller)传递过来的model实例对象(本示例中ProductController通过“return View(myProduct)”传递给Index视图),下面的代码演示了如何调用该model对象:

@model MvcApplication1.Models.Product@{ViewBag.Title = "Index";
}
<!-- 调用Product实例的Name属性 -->
<h2>名称:@Model.Name</h2>

注意,第一行代码用于声名Model属性类型用的是@model <Model类型名>(小写m),而调用控制器传递过来的Model对象用的是@Model.<属性名>(大写M)。按F5运行效果如下:

使用表达式

上面讲的使用Model对象是很常用的一种Razor代码。其实上面示例中的@Model.Name就是一个简单的表达式,表示向Web页面呈现Model.Name的文本值。Razor语法中的表达式除了可以使用Model对象,也可以使用几乎任何一个其他可访问权限范围内的对象,来向Web面面输出该对象成员的文本值。如下代码所示:

@model MvcApplication1.Models.Product@{ViewBag.Title = "Index";
}现在的时间是: @DateTime.Now.ToShortTimeString()

运行效果如下:

这种使用对象的简单表达式(@DateTime.Now.ToShortTimeString()和@Model.Name),在这我们不防称之为对象表达式。

除了对象表达式,还可以是其他任意的有返回值的表达式,如条件表达式。如下面代码所示:

@model MvcApplication1.Models.Product@{ViewBag.Title = "Index";
}现在的时间是: @DateTime.Now.ToShortTimeString()<br/>@(DateTime.Now.Hour>22 ? "还早,再写一会吧!" : "该睡觉咯!")

运行效果如下:

注意,一般使用非对象表达式时都需要用小括号括起来。

使用代码块

和表达式的使用方式一样,Razor语法中也可以使用由{}括起来的单个C#过程控制代码块(如if、switch、for等)。使用方式如下:

@model MvcApplication1.Models.Product@{ViewBag.Title = "Index";
}@if (Model.Price > 5M) {string test = "买不起!";<p>@Model.Name <b>太贵了!</b> @test </p>
}

效果如下:

由{}括起来的代码块内可以写任何C#代码,也可以使用任何HTML标签。但需注意的是,当控制语句内只有一句代码时不能像写C#后台代码一样省略大括号。

还有一种更常用的使用代码块的方式。你也可以通过以@{开始,以}闭合的方式来使用代码块,它可以把多个代码块放在一起,开成一个更大的代码块。如下代码所示:

@model MvcApplication1.Models.Product@{ViewBag.Title = "Index";
}
@{if(Model.Category=="水果"){string test="是一种水果。";@Model.Name @test}if (Model.Price > 5M) {string test = "买不起!";<p>@Model.Name <b>太贵了!</b> @test </p>} 
}

运行结果如下:

使用@:和text标签

我们注意到,在代码块中,要么是C#代码,要么是HTML标签,不能直接写纯文字,纯文字须包裹在HTML标签内。但如果需要在代码块中直接输出纯文字而不带HTML标签,则可以使用@:标签,在代码块中输出纯文本文字非常有用。如下代码所示:

...@if (Model.Price > 5M) {@Model.Name@:太贵了 。<br />@: @@:后面可以是一行除@字符以外的任意文本,包括<、>和空格,怎么写的就怎么输出。<br />@: 如果要输出@符号,当@符号前后都有非敏感字符(如<、{、和空格等)时,可以直接使用@符号,否则需要使用两个@符号。
}

注意@符号的使用。上面代码运行效果如下:

使用@:标签在代码块中输出一行不带html标签的文本非常方便,但如果需要在代码块中输出续或不连续的多行纯文本,则使用text标签较为方便,如下代码所示:

...@if (Model.Price > 5M) {<text>名称:<b>@Model.Name</b><br />分类:<b>@Model.Description</b><br />价钱:<b>@Model.Price</b><br /><pre>测试行一: <a>aaaa</a>测试行二: @@ fda@aaa</pre></text>
}

运行结果:

使用ViewBag

上面讲了通过Model对象来从Controller传递数据到View。和Model对象一样,ViewBag对象也可以用来从Controller传递数据到View。下面代码演示了如何在ProductController中使用ViewBag:

public ActionResult Index()
{Product myProduct = new Product {ProductID = 1,Name = "苹果",Description = "又大又红的苹果",Category = "水果",Price = 5.9M};ViewBag.TestString = "这是一行测试文字!";return View(myProduct); 
}

 不一样的是,ViewBag是动态类型,其中TestString是自己定义的。ViewBag在View中的使用方式是和Model一样,如下:

...动态表达式解析的时间是:@ViewBag.TestString

运行结果就不贴图了。

使用Layuot

前面我们创建一个视图的时候,我们勾选了使用布局和母版页,但没有告诉VS使用哪一个。请仔细看下图:

这个对话框告诉我们“如果在Razor _viewstart中设置了此选项,则留空”。在项目的Views文件夹中,我们可以看到一个_ViewStart.cshtml文件,里面的内容是:

@{Layout = "~/Views/Shared/_Layout.cshtml";
}

MVC呈现视图的时候,默认情况下会自动查找_ViewStart.cshtml文件,以它作为母版来呈现用户请求的视图。母版的呈现是MVC内部处理的,这种以下划线(_)开头的视图文件,一般是不能直接返回给用户。

使用布局或母版页的好处是,我们不需要在每个视图中都设置一份相同的内容。按照_ViewStart.cshtml文件内容指示的路径,我们找到_Layout.cshtml文件,打开它会发现我们在Index视图中定义的 ViewBag.Title = "Index" 就是在这里调用的:

<!DOCTYPE html>
<html>
<head><title>@ViewBag.Title</title><link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /><script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head><body>@RenderBody()
</body>
</html>

类似于ASP.NET母版页中的ContentPlaceHolder服务器控件,在MVC中使用@RenderBody()来呈现子Web页面的内容,它可以省去我们在每个视图文件中写相同的html元素、JS和样式等的工作。

如果创建一个视图不想使用Layout,则可以在创建视图的对话框取消“使用布局和母版页”选项,创建后会生成如下代码:

@{Layout = null;
}<!DOCTYPE html><html>
<head><title>About</title>
</head>
<body><div></div>
</body>
</html>

由于没有使用Layout,视图中必须包含用于呈现HTML页面每个基本元素,而且必须指定Layout=null。


这篇关于[ASP.NET MVC 小牛之路]03 - Razor语法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Spring MVC如何设置响应

《SpringMVC如何设置响应》本文介绍了如何在Spring框架中设置响应,并通过不同的注解返回静态页面、HTML片段和JSON数据,此外,还讲解了如何设置响应的状态码和Header... 目录1. 返回静态页面1.1 Spring 默认扫描路径1.2 @RestController2. 返回 html2

.NET利用C#字节流动态操作Excel文件

《.NET利用C#字节流动态操作Excel文件》在.NET开发中,通过字节流动态操作Excel文件提供了一种高效且灵活的方式处理数据,本文将演示如何在.NET平台使用C#通过字节流创建,读取,编辑及保... 目录用C#创建并保存Excel工作簿为字节流用C#通过字节流直接读取Excel文件数据用C#通过字节

poj 1258 Agri-Net(最小生成树模板代码)

感觉用这题来当模板更适合。 题意就是给你邻接矩阵求最小生成树啦。~ prim代码:效率很高。172k...0ms。 #include<stdio.h>#include<algorithm>using namespace std;const int MaxN = 101;const int INF = 0x3f3f3f3f;int g[MaxN][MaxN];int n

如何在Visual Studio中调试.NET源码

今天偶然在看别人代码时,发现在他的代码里使用了Any判断List<T>是否为空。 我一般的做法是先判断是否为null,再判断Count。 看了一下Count的源码如下: 1 [__DynamicallyInvokable]2 public int Count3 {4 [__DynamicallyInvokable]5 get

2、PF-Net点云补全

2、PF-Net 点云补全 PF-Net论文链接:PF-Net PF-Net (Point Fractal Network for 3D Point Cloud Completion)是一种专门为三维点云补全设计的深度学习模型。点云补全实际上和图片补全是一个逻辑,都是采用GAN模型的思想来进行补全,在图片补全中,将部分像素点删除并且标记,然后卷积特征提取预测、判别器判别,来训练模型,生成的像

cross-plateform 跨平台应用程序-03-如果只选择一个框架,应该选择哪一个?

跨平台系列 cross-plateform 跨平台应用程序-01-概览 cross-plateform 跨平台应用程序-02-有哪些主流技术栈? cross-plateform 跨平台应用程序-03-如果只选择一个框架,应该选择哪一个? cross-plateform 跨平台应用程序-04-React Native 介绍 cross-plateform 跨平台应用程序-05-Flutte

Spring MVC 图片上传

引入需要的包 <dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-

【iOS】MVC模式

MVC模式 MVC模式MVC模式demo MVC模式 MVC模式全称为model(模型)view(视图)controller(控制器),他分为三个不同的层分别负责不同的职责。 View:该层用于存放视图,该层中我们可以对页面及控件进行布局。Model:模型一般都拥有很好的可复用性,在该层中,我们可以统一管理一些数据。Controlller:该层充当一个CPU的功能,即该应用程序

FreeRTOS内部机制学习03(事件组内部机制)

文章目录 事件组使用的场景事件组的核心以及Set事件API做的事情事件组的特殊之处事件组为什么不关闭中断xEventGroupSetBitsFromISR内部是怎么做的? 事件组使用的场景 学校组织秋游,组长在等待: 张三:我到了 李四:我到了 王五:我到了 组长说:好,大家都到齐了,出发! 秋游回来第二天就要提交一篇心得报告,组长在焦急等待:张三、李四、王五谁先写好就交谁的

C++语法知识点合集:11.模板

文章目录 一、非类型模板参数1.非类型模板参数的基本形式2.指针作为非类型模板参数3.引用作为非类型模板参数4.非类型模板参数的限制和陷阱:5.几个问题 二、模板的特化1.概念2.函数模板特化3.类模板特化(1)全特化(2)偏特化(3)类模板特化应用示例 三、模板分离编译1.概念2.模板的分离编译 模版总结 一、非类型模板参数 模板参数分类类型形参与非类型形参 非类型模板