摸金笑尉,花艳君,春闺记事 19楼
--引子
看下面一段mvc 2.0的代码。
<%if (model != null)
{%>
<p><%＝model%></p>
<%}%>
<%else
{%>
//do something
<%}%>
我们站在一个读者的立场上来看，”<% %>“这种标记c#代码的方法是十分蛋疼的。
如果写这段代码的人没有良好的缩进和对齐习惯的话，一段逻辑较为复杂的代码就会堆砌着杂乱无章的"<%“和"%>"--匹配它们就是一件头疼的事情，会让读者望而生畏。
即使是写代码的本人，闭合也是一件麻烦的事情，并且vs对”<% %>“的自动缩进和对齐支持不很友好，看惯了整齐的代码，面对自己写出的凌乱的东西会很不爽。
随着mvc 3.0的发布，新的razor视图引擎解决了这个问题。
razor的意思的就是 剃刀，可见它灰常犀利。引言中的代码，我们用razor的语法来写的话:
@if (model != null)
{
<p>@model</p>
}
else
{
//do something
}
razor使用了"@"来标记一段c#代码，并帮我们进行了内部的闭合，是不是感觉清爽多了?
razor在减少代码冗余、增强代码可读性和vs 智能感知方面，都有着很大的优势。下面我们来具体的介绍如何在asp.net mvc 3.0中使用razor。
---------------------------------------------引言end----------------------------------------------
一，创建基于razor的web程序
首先你的开发环境必须安装.net framework4.0，然后在vs中新建项目时选择asp.net mvc 3 应用程序，在选项页面中选择视图引擎为razor，如图1:
图1
然后创建项目，就会得到一个基于razor的web项目了，如图2。
图2
相信熟悉mvc的看官们对此结构并不陌生。注意红框部份，razor的页面是以cshtml为后缀的，下面我们来讲下如何使用razor来进行页面布局。
二，使用razor来进行页面布局
ui设计师们现在也讲究页面设计的语义化和结构化，把一个页面分成很多个模块，使用语义化的类名或id来标识这些模块。razor推出了新的布局解决方案来迎合这一潮流。
这里涉及到razor的一些语法，大家可以不深究"@"后面的内容，讲到页面布局，你只要专注与html代码就可以了。语法会在后面补充。
1.指定母版与加载机制
首先我们来看_viewstart.chhtml页面，它的内容很简单:
@{
layout = "~/views/shared/_layout.cshtml";
}
这句代码指定了默认的母版的位置: 当前应用程序根目录下<"~"的含义>的views/shared/_layout.cshtml
除非特殊情况，比如视图是partial视图，或显示的在视图中添加以下代码指示不使用母版:
@{
layout = null;
}
其他情况下，该指定页就是视图的母版页。
然后我们来看看razor母版页_layout.cshtml的内容:
view code
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<body>
<p class="page">
<p id="header">
<p id="title">
<h1>我的 mvc 应用程序</h1>
</p>
<p id="logindisplay">
欢迎 <strong>@user.identity.name</strong>!
</p>
<p id="menucontainer">
<ul id="menu">
<li>@html.actionlink("主页", "index", "home")</li>
<li>@html.actionlink("关于", "about", "home")</li>
</ul>
</p>
</p>
<p id="main">
@renderbody()<!--一般视图内容的占位符-->
</p>
<p id="footer">
</p>
</p>
</body>
</html>
注意@renderbody()这个方法相当于一个占位符，假如我们的首页视图index.cshtml是这样，
view code
@{
viewbag.title = "主页";
}
<h2>@viewbag.message</h2>
<p>
若要了解有关 asp.net mvc 的更多信息，请访问 <a href=".net/m">http://asp.net/mvc" title="asp.net mvc 网站">http://asp.net/mvc</a>。
</p>
一般的视图处理，比如当服务器响应一个homecontroller.index()请求的时候,需要返回index视图，
• 首先会加载母版页_layout.cshtml的内容，
• 遇到@renderbody()时，就用首页视图的内容置换到这里，最后处理完成返回静态页面。
2.使用partial视图
mvc 2.0中，你需要使用<asp:content></asp:content>标签来进行页面分割，太多的话自己都忘记了哪个对应的是哪个部份。
在razor中，可以将需要剥离出来的部份作为一个单独的partial视图，比如网站的头部(logo，导航等等..)，底部(友情链接，版权声明等等..)，或是某个功能模块(登陆框等等..)。
比如上面的母版页，我们可以把它的头部和底部剥离出来，在share文件夹下右键添加/视图,选择创建为分部视图，如图3:
图3
依照上述步骤创建”_headerpartial.cshtml“和"_footerpartial.cshtml"两个视图:
<!--_headerpartial.cshtml-->
<p id="header">
<p id="title">
<h1>我的 mvc 应用程序</h1>
</p>
<p id="logindisplay">
欢迎 <strong>@user.identity.name</strong>!
</p>
<p id="menucontainer">
<ul id="menu">
<li>@html.actionlink("主页", "index", "home")</li>
<li>@html.actionlink("关于", "about", "home")</li>
</ul>
</p>
</p>
<!--_footerpartial.cshtml-->
<p id="footer">
© 2008-2012 john connor all rights reserved.
</p>
可以看出，提取partial视图很简单，就是把需要的内容提取出来，放在新建的partial视图中。然后，我们还需要干一件事情，
类似于一般视图，partial视图使用自己特有的占位符来替换原内容。我们这么干之后，原_layout.cshtml页就变成了这样:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<body>
<p class="page">
@html.partial("_headerpartial")<!--_headerpartial视图占位符-->
<p id="main">
@renderbody()
</p>
@html.partial("_footerpartial")<!--_footerpartial视图占位符-->
</p>
</body>
</html>
这样，页面的布局是不是更清爽简洁了?如同一般视图，返回请求时会先加载母版页然后遇到占位符时加载相应的partial视图，最后返回处理完成的静态页面。
三，razor语法简介与应用
1.语法简介
如果我们希望在html代码中绑定数据，比如说我们有一个产品的对象product，需要绑定产品的名称product.name，只需要在变量前面加"@"即可，
也可以使用"@(expression)"绑定一个表达式:
<p>@product.name</p>
<p>@(product.price*0.8)</p>
razor中使用}“来标识一段c#代码,代码段可以出现在任何位置，并且支持与html混写:
@｛
var product=new product();
product.name="pen";
product.price=1.00;
<p>@product.name</p>
<p>@product.price</p>
｝
使用循环或条件语句时直接加"@"前缀，可以控制页面逻辑:
@foreach(var product in products)
｛
<p>@item.name</p>
｝
razor中注释是"@**@",即可以注释html代码，也可以注释c#代码,在代码块中仍可使用c#的注释方式:
@{
var product=new product();
product.name="pen";
//product.price=1.00;
<p>@product.name</p>
@*<p>@product.price</p>*@
}
2.asp.net mvc3.0 web中的应用
假设我们有一个product类位于johnconnor.data命名空间下,有name和price两个属性，homecontroller.index()方法返回一个list<product>对象给index视图，
打印所有产品名称，并且点击产品名称时，弹出产品价格。
homecontroller.index()方法如下:
view code
using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.web.mvc;
using johnconnor.data;
namespace johnconnor.web.controllers
{
public class homecontroller : controller
{
public actionresult index()
{
var products = new list<product>()
{
new product{ name="钢笔", price=11.55m},
new product{ name="铅笔", price=2.17m},
new product{ name="圆珠笔", price=5.98m},
};
return view(products);
}
}
}
我们来改一下index视图演示一下razor的简单应用。
@using johnconnor.data;
@model list<product>
@{
viewbag.title = "主页";//母版中viewbag.title用于绑定title标签，这里进行赋值。
}
<h2>razor</h2>
@foreach (var product in model)
{
//遍历所有的产品
<input type="button" name="@product.name" value="@product.name" onclick="alert(@product.price)" />
}
在一般视图中，首先声明视图模型，即action返回的viewresult对象的类型<也可以不声明，如果有返回对象建议声明>。
这里的视图模型是一个list<product>集合，因为product位于using johnconnor.data命名空间，所以先添加了引用。
在母版中viewbag.title用于绑定title标签，在一般视图中就可以进行赋值来绑定页面的title 。
如果你不想使用母版，就在代码块中添加"layout = null;"。
最后是就是一些数据绑定，或者是逻辑的处理。
razor的基本内容大概就讲这些了，当然它还有很丰富的底蕴，需要在实际的运用过程中去学习，一篇短文是无法涵盖所有信息的。
最后提一点，razor暂时没有设计视图，这是比较悲摧的一点。相信之后会有的。如果对razor的使用有任何问题，可以在此提出，能力范围内的问题我都可以提供帮助。
希望大家多多支持。
摘自 菊花台泡茶
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Blazor server side 自家的一些开源的, 实用型项目的进度之 CEF客户端
.NET IoC模式依赖反转(DIP)、控制反转(Ioc)、依赖注入(DI)
vue+.netcore可支持业务代码扩展的开发框架 VOL.Vue 2.0版本发布
我要评论
网友评论