Razor视图引擎

最新推荐文章于 2024-04-11 09:33:47 发布

极客研究者

最新推荐文章于 2024-04-11 09:33:47 发布

阅读量570

点赞数

分类专栏： ASP.NET MVC 文章标签： c# asp.net mvc

本文链接：https://blog.csdn.net/qq_34550459/article/details/106187059

版权

ASP.NET MVC 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

Razor是ASP.NET MVC3.0出现的新的视图引擎,为视图提供精简的语法。
Razor不是编程语言,而是一种服务端标记语言,是一种允许在网页中(cshtml格式的文件)嵌入基于服务器代码(vb、C#)的标记语言。

如:在前台声明和使用C#代码

@{
	string s = "test demo";
	int num = 20;
}


 <p>@s</p>
 <p>Num: @num</p>

说明:
C#变量的声明:必须写在@{…}代码块中
使用已声明的C#变量: @变量名

Razor语法:

	Razor代码封装于@{....}中
	行内表达式(变量和函数)以@开头
	代码语句以分号结尾
	字符串由引号包围
	C#代码对大小写敏感
	文件的扩展名为cshtml

Demo:


@*
    使用@model语句声明通过动作方法传递给该视图模型对象(Model)的类型
    
*@
@model MVC_Project01.Models.User


@{
    Layout = null;
}


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>首页</title>
</head>
<body>
    <div>
        <p>这是首页,欢迎光临!</p>
        
            @*
				使用Razor视图嵌入C#代码
            *@


            @*
        		在前台页面声明c#变量
            *@

            @{
                string s = "test demo";
                int num = 20;
            }

            @*
				在前台页面使用c#变量
            *@

            <p>@s</p>
			<p>Num: @num</p>
           


            @*
			向浏览器输出html源代码
            *@

            @Html.Raw("<li>you are so preety!</li>")

            @*
			@作用域与html标记混合使用
            *@

            @{
                string username = "jack beyant";
                <li>@username</li>
            }

            @*
				在@作用域输出未转义的HTML代码
            *@

            @*
				使用字符串描述输出(当做字符串文本处理)
            *@

            @{
                string strHtml = "<p>你是最优秀的!</p>";
                @strHtml
            }


            @*
				使用HTMLHelper输出
				浏览器会解析输出的html代码
            *@

            @{
                @Html.Raw("<p>必须要有信心!</p>");
            }


            @*
				使用HtHtmlString类输出
            *@

            @{
                HtmlString html = new HtmlString("<p>干就完了,我弟!</p>");
                @html
            }

            @*
				使用MvcHtmlString输出

            *@

            @{
                //str为c#变量
                var str = MvcHtmlString.Create("<p>必须搞起来,人生能有几回搏!</p>");
                @str;
            }
    </div>
</body>
</html>

使用Razor表达式:
1.插入数据值:
将数据插入到html标签中,可以使用@Model引用模型对象的数据,
@ViewBag、@ViewData、@TempData表达式引用动态定义的属性。
2.设置元素的标签属性值

在Model文件夹下,新建一实体类Product：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVC_Project02.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;}

    }
}

新建一个Product控制器:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC_Project02.Models;

namespace MVC_Project02.Controllers
{
    public class ProductController : Controller
    {
        // GET: Product
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Products() {

            ViewBag.ProductCount = 1;
            ViewBag.ExpressShip = true;
            ViewBag.ApplyDiscount = false;
            ViewBag.Supplier = null;
            return View(new Product() { ProductID=10, Name="Kayak", Description="A boat for one person",Category="watersports",price=275M});
        }

    }
}

在Views文件下的子文件夹Product中,添加Products动作方法对应的视图Products.cshtml:

@model MVC_Project02.Models.Product


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>产品信息页</title>
</head>
<body>
    @*
        使用Razor表达式插入数据值
    *@
    <div>
        <table border="1">
            <thread>
                <tr>
                    <td>Property</td>
                    <td>Value</td>
                </tr>
            </thread>
            <tbody>
                <tr>
                    <td>Name:</td>
                    <td>@Model.Name</td>
                </tr>

                <tr>
                    <td>Price:</td>
                    <td>@Model.price</td>
                </tr>

                <tr>
                    <td>Stock Level:</td>
                    <td>@ViewBag.ProductCount</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div>
        @*
        使用Razor表达式设置标签属性值
        *@

        <div data-discount="@ViewBag.ApplyDiscount" data-express="@ViewBag.ExpressShip" data-supplier="@ViewBag.Supplier">
            The containing element has data attribute
        </div>

        ApplyDiscount:<input type="checkbox" checked="@ViewBag.ApplyDiscount" /><br />
        Express:<input type="checkbox" checked="@ViewBag.ExpressShip" /><br />
        Supplier: <input type="checkbox" checked="@ViewBag.Supplier" />

    </div>
</body>
</html>

属性已被填充:
在这里插入图片描述
注意:对于那些为null的属性值,Rasor会将值为null的视图属性或模型属性渲染成空字符串。

对于checked属性,Razor在值为False或null时,会完全删除该标签属性,不勾选

使用条件语句:
Razor能处理条件语句,可以根据视图数据的值,对视图的输出进行选择性的处理。

 	@*
        使用条件语句
    *@

    <div>
        @switch ((int)ViewBag.ProductCount)
        {

            case 0:
                @: Out of Stock
                break;

            case 1:
                <b>Low Stock(@ViewBag.ProductCount)</b>
                break;
            default:
                @ViewBag.ProductCount
                break;

        }

    </div>
        @if (ViewBag.ProductCount == 0)
        {
            @: Out of Stock
        }
        else if (ViewBag.ProductCount == 1)
        {
            <b>Low Stock(@ViewBag.ProductCount)</b>
        }
        else
        {
            @ViewBag.ProductCount
        }
    <div>

注意:要使用条件语句,必须要在C#的条件关键字前放一个@字符。
在Rasor代码内部,只要通过定义html以及Rasor表达式,就可以将HTML元素和数据值插入到视图中输出。
@:字符阻止Rasor将此行解释为一条C#语句
条件语句在Rasor视图中是重要的,它们能够让页面的内容随着视图从动作方法接收的数据值的变化而变化。

枚举数组和集合:

在ProductController.cs控制器文件中添加一个动作方法

 public ActionResult DemoArray() {
    Product[]  products = {
        new Product(){ ProductID=1, Name="宝马320", Category="轿车", price=300000},
        new Product(){ ProductID=2, Name="联想ThinkPad", Category="电脑", price=3500},
        new Product(){ ProductID=3, Name="西城移动硬盘", Category="硬盘", price=265},
        new Product(){ ProductID=4, Name="小米10", Category="手机", price=4200}
       };
       return View(products);
        }

在View文件下子目录中,添加此Action对应的视图DemoArray.cshtml:

@*

    使用@model语句声明从Action传入的模型对象的类型为Product类型的数组对象

*@

@model MVC_Project02.Models.Product[]


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>产品详情页面</title>
</head>
<body>
    <div>
        @if (Model.Length > 0)
        {

            <table>
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>Price</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (MVC_Project02.Models.Product p in Model)
                    {
                        <tr>
                            <td>@p.Name</td>
                            <td>@p.price</td>
                        </tr>
                    }
                </tbody>
            </table>
        }
        else
        {
            <h2>No Product Data</h2>
        }
    </div>
</body>
</html>

处理命名空间:
在foreach循环中,循环取出每一个Product对象,我们使用了全限定类的局部变量P来进行接收,如果一个视图中多次需要使用到Product类型,这种操作会显得很繁琐,我们可以使用@using表达式,引入命名空间,类似C#中引入命名空间那样

引入Product所在命名空间:

@using MVC_Project02.Models

 @foreach (Product p in Model)//Model为传入的Product数组对象
  {
 	.............................      
  }

极客研究者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录