asp.net

位置:IT落伍者 >> asp.net >> 浏览文章

ASP.NET MVC Razor视图引擎攻略


发布日期:2018年09月30日
 
ASP.NET MVC Razor视图引擎攻略

引子

看下面一段MVC 的代码

<%if (Model != null)

{%>

<p><%=Model%></p>

<%}%>

<%else

{%>

//Do something

<%}%>

我们站在一个读者的立场上来看<% %>这种标记C#代码的方法是十分蛋疼的

如果写这段代码的人没有良好的缩进和对齐习惯的话一段逻辑较为复杂的代码就会堆砌着杂乱无章的<%%>匹配它们就是一件头疼的事情会让读者望而生畏

即使是写代码的本人闭合也是一件麻烦的事情并且VS对<% %>的自动缩进和对齐支持不很友好看惯了整齐的代码面对自己写出的凌乱的东西会很不爽

随着MVC 的发布新的Razor视图引擎解决了这个问题

Razor的意思的就是 剃刀可见它灰常犀利引言中的代码我们用Razor的语法来写的话

@if (Model != null)

{

<p>@Model</p>

}

else

{

//Do something

}

Razor使用了@来标记一段C#代码并帮我们进行了内部的闭合是不是感觉清爽多了?

Razor在减少代码冗余增强代码可读性和vs 智能感知方面都有着很大的优势下面我们来具体的介绍如何在ASPNET MVC 中使用Razor

引言End

创建基于Razor的Web程序

首先你的开发环境必须安装NET Framework然后在VS中新建项目时选择ASPNET MVC 应用程序在选项页面中选择视图引擎为Razor如图:

然后创建项目就会得到一个基于Razor的Web项目了如图

相信熟悉MVC的看官们对此结构并不陌生注意红框部份Razor的页面是以cshtml为后缀的下面我们来讲下如何使用Razor来进行页面布局

使用Razor来进行页面布局

UI设计师们现在也讲究页面设计的语义化和结构化把一个页面分成很多个模块使用语义化的类名或id来标识这些模块Razor推出了新的布局解决方案来迎合这一潮流

这里涉及到Razor的一些语法大家可以不深究@后面的内容讲到页面布局你只要专注与HTML代码就可以了语法会在后面补充

指定母版与加载机制

首先我们来看_ViewStartchhtml页面它的内容很简单

@{

Layout = ~/Views/Shared/_Layoutcshtml;

}

这句代码指定了默认的母版的位置 当前应用程序根目录下<~的含义>的Views/Shared/_Layoutcshtml

除非特殊情况比如视图是Partial视图或显示的在视图中添加以下代码指示不使用母版

@{

Layout = null;

}

其他情况下该指定页就是视图的母版页

然后我们来看看Razor母版页_Layoutcshtml的内容

View Code

<!DOCTYPE html>

<html>

<head>

<meta httpequiv=ContentType content=text/html; charset=utf/>

<title>@ViewBagTitle</title>

<link @UrlContent(~/Content/Sitecss rel=stylesheet type=text/css />

<script src=@UrlContent(~/Scripts/jqueryminjs type=text/javascript></script>

</head>

<meta httpequiv=ContentType content=text/html; charset=utf/>

<body>

<div class=page>

<div id=header>

<div id=title>

<h>我的 MVC 应用程序</h>

</div>

<div id=logindisplay>

欢迎 <strong>@UserIdentityName</strong>!

</div>

<div id=menucontainer>

<ul id=menu>

<li>@HtmlActionLink(主页 Index Home)</li>

<li>@HtmlActionLink(关于 About Home)</li>

</ul>

</div>

</div>

<div id=main>

@RenderBody()<!一般视图内容的占位符>

</div>

<div id=footer>

</div>

</div>

</body>

</html>

注意@RenderBody()这个方法相当于一个占位符假如我们的首页视图Indexcshtml是这样

View Code

@{

ViewBagTitle = 主页;

}

<h>@ViewBagMessage</h>

<p>

若要了解有关 ASPNET MVC 的更多信息请访问 <a ASPNET MVC 网站>;/a>

</p>

一般的视图处理比如当服务器响应一个HomeControllerIndex()请求的时候需要返回Index视图

? 首先会加载母版页_Layoutcshtml的内容

? 遇到@RenderBody()时就用首页视图的内容置换到这里最后处理完成返回静态页面

使用Partial视图

MVC 你需要使用<asp:Content></asp:Content>标签来进行页面分割太多的话自己都忘记了哪个对应的是哪个部份

在Razor中可以将需要剥离出来的部份作为一个单独的Partial视图比如网站的头部(Logo导航等等)底部(友情链接

上一篇:Asp.Net中使用水晶报表

下一篇:ASP.NET 页面间数据传递方法