八：Razor（MVC框架视图引擎）

最新推荐文章于 2025-07-13 13:01:59 发布

weixin_30907523

最新推荐文章于 2025-07-13 13:01:59 发布

阅读量324

点赞数

CC 4.0 BY-SA版权

文章标签：测试 c#

原文链接：http://www.cnblogs.com/yuanhaowen/p/9887969.html

本文深入讲解MVC框架的使用，包括模型对象的创建、控制器代码的修改、视图的渲染及Razor语法的应用。演示了如何通过视图模型传递数据，并展示了布局、条件与循环语句的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模型对象

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 命名空间

这样的语句

转载于:https://www.cnblogs.com/yuanhaowen/p/9887969.html