八：Razor（MVC框架视图引擎）
模型对象
1：新建一个示例的MVC项目
2：在Models文件夹下新建类Product
namespace TestDemoMVC.Models { public class Product { public int ProductID { get; set; } public string Name { get; set; } public string Description { get; set; } public string Category { get; set; } public decimal Price { get; set; } } }
3：修改控制器HomeController中代码如下
using System.Web.Mvc; using TestDemoMVC.Models; namespace TestDemoMVC.Controllers { public class HomeController : Controller { Product product = new Product() { ProductID = 1, Name = "C#", Category = ".NET", Description = "Program Language", Price = 102M }; public ActionResult Index() { return View(product); } } }
4：修改视图Index.cshtml
@model TestDemoMVC.Models.Product @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Razor Example</title> </head> <body> <div>@Model.Name</div> </body> </html>
说明
- Razor语句是以@字符开头
- @model语句声明了通过动作方法传递给视图模型对象的类型。通过@Model就可以引用视图模型对象
- Razor代码块是以@开头大括号{}包含的内容。
布局
1：创建布局
在Views文件夹下新建View，命名为_TestLayout.cshtml。注意这里第一个字符是半角下划线
修改内容如下
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title></title> </head> <body> <h1>布局前</h1> <div> @RenderBody() </div> <h2>布局后</h2> </body> </html>
2：再修改Views/Home文件夹下的文件Index.cshtml中的Layout部分
@{
Layout = "~/Views/_TestLayout.cshtml";
}
3：运行可以看到结果如下
布局相当于一个模板，这样对于多个页面来说，不需要给每个页面都单独设计布局，只需要统一引用布局页面。整个应用就会是统一的样式。
视图起始文件
如果我们把Index.cshtml的Layout指定删除，及不指定为null。那么运行结果可以发现会有示例的默认布局。
这是MVC框架默认会查找Views下一个文件_ViewStart.cshtml文件。也就是说如果不想指定布局，页面必须显式的指定布局为空，即null
Razor表达式
动作方法和视图
动作方法：向视图传递视图模型，但是不会格式化数据（格式化的含义是如何显示）
视图：用视图模型对象向用户表现内容，但是不会修改视图模型对象的任何内容
插入数据值方法一：使用视图模型。方法二：使用ViewBag表达式
1：在HomeController中修改Index方法
public ActionResult Index() { ViewBag.Test = "TestString"; ViewBag.MyNumber = 10000; return View(product); }:
2：修改Index.cshtml文件中的body部分
<body> <div>@Model.Name</div> <div>@ViewBag.Test</div> <div>@ViewBag.MyNumber</div> <div>@ViewBag.NoExist</div> </body>
这里故意引用一个不存在的数据NoExist。运行后页面可以正常显示
3：在Index.cshtml的Layout定义部分修改内容如下
@{ ViewBag.NoExist="Test NoExist String"; Layout = "~/Views/_TestLayout.cshtml"; }
运行后得到结果如下
4：使用条件语句
修改Index.cshtml中body的内容
<body> <div>@Model.Name</div> <div>@ViewBag.Test</div> <div>@ViewBag.MyNumber</div> <div>@ViewBag.NoExist</div> @if(Model.Price>100) { @:太贵了 } else { @:挺便宜，买了 } </body>
可以看到@包含的内容几乎和正常的书写代码一致
5：使用循环语句
在body中新增下面内容
@{int total = 0; for(int i=0;i<=100;i++) { total += i; } @:Total:@total }
运行结果
6：处理命名空间
如果需要引用某个命名空间，可以在页面的开始部分使用
@using 命名空间
这样的语句
