• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

Pro ASP.NET MVC –第五章 使用Razor

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

Razor是微软在MVC3中引入的视图引擎的名字，在MVC4中对其进行了改进（尽管改动非常小）。视图引擎处理ASP.NET内容、寻找指令，典型地用于插入动态数据并输出到浏览器中。微软维持了两个视图引擎——ASPX视图引擎工作与<%%>标签，ASP.NET已经依赖它多年；RAZOR引擎工作与@字符后的内容块上。

总的来说，如果你熟悉<%%>语法，那么你就不会在使用Razor时有太多问题，尽管Razor中有一些新的规则。在本章，我们将为你介绍Razor语法，以使你可以在看到它们的时候能认出这些新元素。在本章，我们并不会提供大量的Razor参考，因为这么做会破坏课程结构。但我们在本书后续章节中深入介绍Razor

为了演示Razor的特性和语法，我们需要创建一个新的MVC4工程。

定义模型

publicclassProduct

{

publicint ProductID { get; set; }

publicstring Name { get; set; }

publicstring Description { get; set; }

publicdecimal Price { get; set; }

publicstring Category { get; set; }

}

 

定义控制器

publicclassHomeController : Controller

{

Product product = newProduct {

ProductID = 1,

Name = "Kayak",

Description = "A boat for one person",

Category = "Watersports",

Price = 275M

};

 

publicActionResult Index()

{

return View(product);

}

 

}

 

创建视图

@model MvcRazor.Models.Product

 

@{

Layout = null;

}

 

<!DOCTYPEhtml>

 

<html>

<head>

<metaname="viewport"content="width=device-width"/>

<title>Index</title>

</head>

<body>

<div>

 

</div>

</body>

</html>

 

 

2使用模型对象

我们在视图中添加如下的一行(粗体代码)

@model MvcRazor.Models.Product

 

@{

Layout = null;

}

 

<!DOCTYPEhtml>

 

<html>

<head>

<metaname="viewport"content="width=device-width"/>

<title>Index</title>

</head>

<body>

<div>

@Model.Name

</div>

</body>

</html>

Razor语句以@字符开始。在我们的例子中，@model语句声明将传递给视图使用的来自于行为方法的模型对象。然后通过@Model，我们就可以调用模型对象的方法，字段和属性。此时你运行工程，那么将会得到如下的结果：

通过使用@model表达式，我们告诉MVC使用什么类型的对象，同时Visual Studio也可从中获益。首先，当你在编写视图中，一旦你在Visual Studio中输入@model后，Visual Studio将自动列出该对象的属性、字段以及方法

此外，如果你输入一个该对象不存在的成员，那么Visual Studio将提示错误

 

3 使用布局

当前，在Index.cshtml中，有如下一句话

……

@{

Layout = null;

}

……

这是一个Razor代码块，它允许我们在视图中使用C#语句。代码块以@{开始，以}结束。当呈现视图的时候，视图中的代码块被执行。在我们的例子中，代码设置Layout属性的值为null。在MVC程序中Razor视图被编译成C#类，而其基类（RazorView）定义了一个Layout属性，我们在18章中我们将介绍更详细的内容。在这里，我们只需要知道当该属性设为null表明，当前视图是自我包含的，并且将呈现我们所需的所有内容到客户端。

自我包含的视图对于简单的应用已经足够，但是一个真正的项目会包含大量的视图。布局是一种有效的模板，这些模板包含的标记内容可以使你的多个网页保持一致性——这就可以确保正确JavaScript库被使用，或者创建通用的模块供你的项目使用。

创建布局

为了创建布局，你可以在视图文件夹上点击右键，然后选择添加，然后选择MVC4布局页面（Razor）模板

在出现的对话框中，把布局文件命名为_BasicLayout.cshtml

然后点击确认按钮。下面的代码列出布局文件的基本内容

<!DOCTYPEhtml>

 

<html>

<head>

<metaname="viewport"content="width=device-width"/>

<title>@ViewBag.Title</title>

</head>

<body>

<div>

@RenderBody()

</div>

</body>

</html>

布局是一种特定类型的视图，你可以发现它也包含@表达式。调用@RenderBody方法将把由行为方法指定的视图的内容插入到布局文件中的对应的标记中。另外一个Razor表达式用于查找Viewbag中的Title属性，然后把其值设置到页面的title元素中。

布局文件中的所有元素都将应用到使用该布局文件的视图中，这也就是为什么说视图就是模板。在下面的代码中，我们添加了一些标记以演示它们是如何工作的

<!DOCTYPEhtml>

 

<html>

<head>

<metaname="viewport"content="width=device-width"/>

<title>@ViewBag.Title</title>

</head>

<body>

<div>

<h1>Product Information</h1>

<divstyle="border:1pxsolidred; line-height:30px;">

@RenderBody()

</div>

<h2>Visit <ahref="http://apress.com">Apress</a></h2>

</div>

</body>

</html>

我们向布局文件中添加了两个标题元素，和一个DIV，然后把@renderbody方法放在DIV中。这样我们可以区分哪些内容来自布局文件，哪些内容来自视图。

应用布局

为了应用视图，我们需要设置Index.cshtml的layout属性，此外我们还应该删除HTML标记语言，因为现在由布局文件提供。你可以参考下面的代码应用布局文件到视图

@model MvcRazor.Models.Product

 

@{

ViewBag.Title = "Product Name";

Layout = "~/Views/_BasicLayout.cshtml";

}

 

@Model.Name

你可以发现，即使是一个简单的视图，改动也是巨大的。我们现在只留下我们最关心的并且要呈现给用户的数据。所有的html标记都已经删除。使用布局文件有许多好处，它允许我们简化数图；允许我们创建通用的HTML供多个视图使用；它还使维护变得简单因为我们可以值在一个共用的地方更改HTML，更改后的结果就会应用到所有使用该布局文件的视图。下图展示了使用布局文件的效果

使用视图开始文件

还有一个小疑惑我们需要指出，那就是我们需要在每个视图文件中指出我们需要使用的布局文件。这就意味着如果我们需要重命名布局文件，那么我们就需要查找每个使用了该布局文件的视图然后做出相应的更改，在这个过程中很容易发生错误，这也违背了MVC框架的易维护性。

我们可以通过使用视图开始文件来解决这个问题。当呈现一个视图时，MVC框架将查找名为_ViewStart.cshtml的文件。该文件的内容被当作它好像包含在视图文件自身中，我们可以使用这个特性来自动地设置layout属性的值。

为了创建一个视图开始文件，添加一个新视图到Views文件夹下，然后将其命名为_ViewStart.cshtml，然后设置其内容

@{

Layout = "~/Views/_BasicLayout.cshtml";

}

然后我们更改Index.cshtml的内容

@model MvcRazor.Models.Product

 

@{

ViewBag.Title = "Product Name";

}

 

@Model.Name

我们不必指定我们想使用的视图开始文件。MVC框架将自动找到该文件并自动地使用视图开始文件的内容。请注意，视图文件中的layout的优先级更高。因此，当在视图文件中指定了Layout之后，会自动覆盖视图开始文件中的layout属性。

演示共享布局

为了演示共享布局，我们添加一个新的行为方法NameAndPrice到Home控制器中。

publicActionResult NameAndPrice()

{

return View(product);

}

然后，在NameAndPrice上点击右键，选择创建视图，执行视图所使用的模型类为Product，并选择_BasicLayout.cshtml为该视图的布局文件。生产视图后，添加下面加粗的代码

@model MvcRazor.Models.Product

 

@{

ViewBag.Title = "NameAndPrice";

Layout = "~/Views/_BasicLayout.cshtml";

}

 

<h2>NameAndPrice</h2>

The product name is @Model.Name and its costs $@Model.Price

启动应用层序，然后得到如下的结果

4使用Razor表达式

现在，我们已经展示了视图和布局的基本使用方法，接下来我们将把注意力集中到Razor所支持的各种表达式上并了解如何使用这些表达式。

在一个优秀的MVC程序中，在不同的行为方法和视图的执行之间有清楚的界限。在本章，规则很简单，我们把它总结成下表所示的内容

组件

应该赋予的角色

不应该赋予的角色

行为方法

传递视图模型对象到视图

传递格式化的数据到视图

视图

使用视图模型对象，把其内容呈现给用户

更改视图模型对象的任何方法

 

在本书后续的章节中，我们将不断的回顾上表所述的规则。为了最大化地利用MVC框架，你应该在程序中的各个部分重视并强制实现隔离。因为你将看到，你可以使用Razor做很多事情，包括在Razor中使用C#语句，但是你绝对不应该使用Razor去执行业务逻辑，或者使用任何方式更改域模型对象。

同样地，你不应该在行为方法中格式化数据，然后将其传递给视图。相反地，应该让视图按照所需的方式呈现数据。回顾本章之前的小节，你会发现我们定义的行为方法NameAndPrice，它用于显示Product对象的Name属性和Price属性。即使我们知道将在页面上显示哪些属性。我们也应传递一个完整的Product对象到视图模型。正如这样：

publicActionResult NameAndPrice()

{

return View(product);

}

当我们在视图中使用Razor @Model表达式去获取属性的时候，采用了下面的方式

The product name is @Model.Name and its costs $@Model.Price

我们可以通过在视图方法中创建一个字符串显示我们需要的结果，并将其作为视图模型对象传递给视图。它也可以实现同样的结果，但是这种实现方式破坏了MVC模式，并且减少了随需变化的能力。正如我们说过的，我们需要回顾行为方法和视图之前的准则。你应当记住，虽然MVC框架并没有要求正确使用MVC模式，但是我们还是应该在设计和编码时遵循MVC模式。

插入数据值

使用Razor表达能做的最简单的事情就是向标记语言中插入数据。你可以使用@Model表达式引用视图模型对象的属性和方法，或使用@ViewBag表达式引用所定义的动态属性。

你已经见过上面两种情形的例子。但为了完整性，我们在Home控制器中，添加一个名为DemoExpressions的行为方法，它向视图传递模型对象和viewbag。

publicActionResult DemoExpressions()

{

ViewBag.ProductCount = 1;

ViewBag.ExpressShip = true;

ViewBag.ApplyDiscount = false;

ViewBag.Supplier = null;

 

return View(product);

}

然后，我们创建强类型的视图DemoExpression.cshtml

@model MvcRazor.Models.Product

 

@{

ViewBag.Title = "DemoExpressions";

}

 

<table>

<thead>

<tr>

<th>Property</th>

<th>Value</th>

</tr>

</thead>

<tbody>

<tr>

<td>Name</td>

<


鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
ASP.NET发送邮件发布时间：2022-07-10
下一篇：
asp.net首页设置发布时间：2022-07-10
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap