ASP.NET MVC Razor视图引擎攻略

2024-02-29 02:38
文章标签 引擎 mvc asp net 视图 攻略 razor

本文主要是介绍ASP.NET MVC Razor视图引擎攻略，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！


--引子

　　看下面一段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。　　

　　ASP.NET MVC Razor视图引擎攻略 - 郁郁 - 郁郁的博客

 　图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的内容:

 

<!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>
    <div class="page">
        <div id="header">
            <div id="title">
                <h1>我的 MVC 应用程序</h1>
            </div>
            <div id="logindisplay">
                欢迎 <strong>@User.Identity.Name</strong>!
            </div>
            <div id="menucontainer">
                <ul id="menu">
                    <li>@Html.ActionLink("主页", "Index", "Home")</li>
                    <li>@Html.ActionLink("关于", "About", "Home")</li>
                </ul>
            </div>
        </div>
        <div id="main">
            @RenderBody()<!--一般视图内容的占位符-->
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>

　　

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

@{
    ViewBag.Title = "主页";
}

<h2>@ViewBag.Message</h2>
<p>
    若要了解有关 ASP.NET MVC 的更多信息，请访问 <a href="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-->
<div id="header"><div id="title"><h1>我的 MVC 应用程序</h1></div><div id="logindisplay">欢迎 <strong>@User.Identity.Name</strong>!</div><div id="menucontainer"><ul id="menu"><li>@Html.ActionLink("主页", "Index", "Home")</li><li>@Html.ActionLink("关于", "About", "Home")</li></ul></div></div>
复制代码

 

复制代码 
<!--_FooterPartial.cshtml-->
<div id="footer">
? 2008-2012 John Connor All rights reserved.
</div>
复制代码

　　

　　可以看出，提取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><div class="page">@Html.Partial("_HeaderPartial")<!--_HeaderPartial视图占位符--><div id="main">@RenderBody() </div>@Html.Partial("_FooterPartial")<!--_FooterPartial视图占位符--></div>
</body>
</html>
复制代码

　　

　　这样，页面的布局是不是更清爽简洁了?如同一般视图，返回请求时会先加载母版页然后遇到占位符时加载相应的Partial视图，最后返回处理完成的静态页面。

 

三，Razor语法简介与应用

 

     1.语法简介

　　如果我们希望在HTML代码中绑定数据，比如说我们有一个产品的对象Product，需要绑定产品的名称Product.Name，只需要在变量前面加"@"即可，

　　也可以使用"@(expression)"绑定一个表达式:

复制代码 
<p>@Product.Name</p>
<p>@(Product.Price*0.8)</p>
复制代码

　　

　　Razor中使用”@{code}“来标识一段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()方法如下:

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" οnclick="alert(@product.Price)" />
}
复制代码

　　

　　在一般视图中，首先声明视图模型，即Action返回的ViewResult对象的类型<也可以不声明，如果有返回对象建议声明>。

　　这里的视图模型是一个List<Product>集合，因为Product位于using JohnConnor.Data命名空间，所以先添加了引用。

　　在母版中ViewBag.Title用于绑定Title标签，在一般视图中就可以进行赋值来绑定页面的Title 。

　　如果你不想使用母版，就在代码块中添加"Layout = null;"。

　　最后是就是一些数据绑定，或者是逻辑的处理。

　　

　　Razor的基本内容大概就讲这些了，当然它还有很丰富的底蕴，需要在实际的运用过程中去学习，一篇短文是无法涵盖所有信息的。

　　最后提一点，Razor暂时没有设计视图，这是比较悲摧的一点。相信之后会有的。如果对Razor的使用有任何问题，可以在此提出，能力范围内的问题我都可以提供帮助。

　　希望大家多多支持。




原文： http://www.cnblogs.com/John-Connor/archive/2012/05/08/2487200.html

这篇关于ASP.NET MVC Razor视图引擎攻略的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

原文地址:
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.chinasem.cn/article/757328。

相关文章

如何解决Spring MVC中响应乱码问题

如何解决Spring MVC中响应乱码问题

《如何解决SpringMVC中响应乱码问题》：本文主要介绍如何解决SpringMVC中响应乱码问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring MVC最新响应中乱码解决方式以前的解决办法这是比较通用的一种方法总结Spring MVC最新响应中乱码解
阅读更多...
Spring MVC使用视图解析的问题解读

Spring MVC使用视图解析的问题解读

《SpringMVC使用视图解析的问题解读》：本文主要介绍SpringMVC使用视图解析的问题解读,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring MVC使用视图解析1. 会使用视图解析的情况2. 不会使用视图解析的情况总结Spring MVC使用视图
阅读更多...
基于@RequestParam注解之Spring MVC参数绑定的利器

基于@RequestParam注解之Spring MVC参数绑定的利器

《基于@RequestParam注解之SpringMVC参数绑定的利器》：本文主要介绍基于@RequestParam注解之SpringMVC参数绑定的利器,具有很好的参考价值,希望对大家有所帮助... 目录@RequestParam注解：Spring MVC参数绑定的利器什么是@RequestParam？@
阅读更多...
Spring MVC跨域问题及解决

Spring MVC跨域问题及解决

《SpringMVC跨域问题及解决》：本文主要介绍SpringMVC跨域问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录跨域问题不同的域同源策略解决方法1.CORS2.jsONP3.局部解决方案4.全局解决方法总结跨域问题不同的域协议、域名、端口
阅读更多...
MySQL常见的存储引擎和区别说明

MySQL常见的存储引擎和区别说明

《MySQL常见的存储引擎和区别说明》MySQL支持多种存储引擎,如InnoDB、MyISAM、MEMORY、Archive、CSV和Blackhole,每种引擎有其特点和适用场景,选择存储引擎时需根... 目录mysql常见的存储引擎和区别说明1. InnoDB2. MyISAM3. MEMORY4. A
阅读更多...
基于.NET编写工具类解决JSON乱码问题

基于.NET编写工具类解决JSON乱码问题

《基于.NET编写工具类解决JSON乱码问题》在开发过程中,我们经常会遇到JSON数据处理的问题,尤其是在数据传输和解析过程中,很容易出现编码错误导致的乱码问题,下面我们就来编写一个.NET工具类来解... 目录问题背景核心原理工具类实现使用示例总结在开发过程中，我们经常会遇到jsON数据处理的问题，尤其是
阅读更多...
MySQL InnoDB引擎ibdata文件损坏/删除后使用frm和ibd文件恢复数据

MySQL InnoDB引擎ibdata文件损坏/删除后使用frm和ibd文件恢复数据

《MySQLInnoDB引擎ibdata文件损坏/删除后使用frm和ibd文件恢复数据》mysql的ibdata文件被误删、被恶意修改,没有从库和备份数据的情况下的数据恢复,不能保证数据库所有表数据... 参考：mysql Innodb表空间卸载、迁移、装载的使用方法注意！此方法只适用于innodb_fi
阅读更多...
Node.js net模块的使用示例

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服
阅读更多...
Spring MVC如何设置响应

Spring MVC如何设置响应

《SpringMVC如何设置响应》本文介绍了如何在Spring框架中设置响应,并通过不同的注解返回静态页面、HTML片段和JSON数据,此外,还讲解了如何设置响应的状态码和Header... 目录1. 返回静态页面1.1 Spring 默认扫描路径1.2 @RestController2. 返回 html2
阅读更多...
Python基于火山引擎豆包大模型搭建QQ机器人详细教程(2024年最新)

Python基于火山引擎豆包大模型搭建QQ机器人详细教程(2024年最新)

《Python基于火山引擎豆包大模型搭建QQ机器人详细教程(2024年最新)》：本文主要介绍Python基于火山引擎豆包大模型搭建QQ机器人详细的相关资料,包括开通模型、配置APIKEY鉴权和SD... 目录豆包大模型概述开通模型付费安装 SDK 环境配置 API KEY 鉴权Ark 模型接口Prompt
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2