ASP.NET MVC Razor视图引擎攻略

2024-02-29 02:38

本文主要是介绍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命名空间下,有NamePrice两个属性,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

相关文章

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

电脑桌面文件删除了怎么找回来?别急,快速恢复攻略在此

在日常使用电脑的过程中,我们经常会遇到这样的情况:一不小心,桌面上的某个重要文件被删除了。这时,大多数人可能会感到惊慌失措,不知所措。 其实,不必过于担心,因为有很多方法可以帮助我们找回被删除的桌面文件。下面,就让我们一起来了解一下这些恢复桌面文件的方法吧。 一、使用撤销操作 如果我们刚刚删除了桌面上的文件,并且还没有进行其他操作,那么可以尝试使用撤销操作来恢复文件。在键盘上同时按下“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模型的思想来进行补全,在图片补全中,将部分像素点删除并且标记,然后卷积特征提取预测、判别器判别,来训练模型,生成的像

数据视图(AngularJS)

<!DOCTYPE html><html ng-app="home.controller"><head><meta charset="utf-8"><title>数据视图</title><link href="page/common/css/bootstrap.min.css" rel="stylesheet"><script src="page/common/js/angular.js"></

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的功能,即该应用程序

速了解MySQL 数据库不同存储引擎

快速了解MySQL 数据库不同存储引擎 MySQL 提供了多种存储引擎,每种存储引擎都有其特定的特性和适用场景。了解这些存储引擎的特性,有助于在设计数据库时做出合理的选择。以下是 MySQL 中几种常用存储引擎的详细介绍。 1. InnoDB 特点: 事务支持:InnoDB 是一个支持 ACID(原子性、一致性、隔离性、持久性)事务的存储引擎。行级锁:使用行级锁来提高并发性,减少锁竞争

MVC(Model-View-Controller)和MVVM(Model-View-ViewModel)

1、MVC MVC(Model-View-Controller) 是一种常用的架构模式,用于分离应用程序的逻辑、数据和展示。它通过三个核心组件(模型、视图和控制器)将应用程序的业务逻辑与用户界面隔离,促进代码的可维护性、可扩展性和模块化。在 MVC 模式中,各组件可以与多种设计模式结合使用,以增强灵活性和可维护性。以下是 MVC 各组件与常见设计模式的关系和作用: 1. Model(模型)