ASP.NET MVC Razor视图引擎攻略

程序员文章站 2023-02-28 16:04:26

--引子　　看下面一段mvc 2.0的代码。 <%if (model != null) {%>

<%＝model%>

&...

--引子

　　看下面一段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:
　　 ASP.NET MVC Razor视图引擎攻略图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:
　　 ASP.NET MVC Razor视图引擎攻略　　图3

　　依照上述步骤创建”_headerpartial.cshtml“和"_footerpartial.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>


<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")
        <p id="main">
            @renderbody()
        </p>
         @html.partial("_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的使用有任何问题，可以在此提出，能力范围内的问题我都可以提供帮助。
　　希望大家多多支持。

摘自菊花台泡茶

上一篇：网上购物系统（Task009）——FormView插入删除商品详细信息

下一篇： SQLSERVER查询时日期格式化的实例讲解

ASP.NET MVC Razor视图引擎攻略

ASP.NET MVC4 Razor模板简易分页效果

详解ASP.NET MVC 利用Razor引擎生成静态页

asp.net mvc4 mysql制作简单分页组件（部分视图）

ASP.NET MVC从视图传参到控制器的几种形式

使用ASP.NET MVC引擎开发插件系统

ASP.NET Razor模板引擎中输出Html的两种方式

使用ASP.NET MVC引擎开发插件系统

ASP.NET MVC从视图传参到控制器的几种形式

asp.net core mvc权限控制：在视图中控制操作权限

详解使用asp.net mvc部分视图渲染html