ASP.NET + MVC5 入门完整教程六 --- 使用 Razor 表达式

说明:盖茨练习在ASP.NET + MVC5 入门完整教程五的基础上进行,示例创建过程详见点击打开链接

1、Razor表达式

在第五部分,已经演示了视图与布局的基础,接下来,我们将熟悉如何使用Razor表达式。

在“Controller”中添加 NameAndPrice 的动作方法中:

 public ActionResult NameAndPrice()
        {
            return View(myProduct);
        }

可以看到视图在使用 Razor 的@Model 表达式,得到要插入属性的值,如下所示:

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

插入数据值

Razor 表达式能做的最简单的事就是插入数据,可以用@Model 表达式来引用视图模型对象所定义的属性方法。或使用@ViewBag表达式。为了演示,在 Controller 中添加 DemoExpression 新动作方法。按照下图:

点击该动作,添加强类型视图;按照下图编辑:

右键,在浏览器中查看。

设置标签属性值

到此为止,所有例子都是设置元素内容的,但同样可以时用 Razor 表达式设置元素的标签属性,DemoExpression.cshtml编辑如下:


右键,浏览器中查看。


数据一致的效果。

使用条件语句

Razor 能够处理条件语句,就是根据试图数据的值,对试图输出进行剪辑,这种技术就是 Razor 的核心功能。

对 DemoExpression.cshtml 视图进行修改如下所示:

...
@: Out of Stock
...

@: 字符阻止了Razor 将此行解释为一条 C#语句。这是Razor 默认行为,如果未以 @:开头,则认为是C#语句。

在 DemoExpression.cshtml 中使用 if 语句:

@model Razor.Models.Product

@{
    ViewBag.Title = "DemoExpression";
}

<table>
    <thead>
        <tr>
            <th>Property</th>
            <th>Value</th>
        </tr>
    </thead>
    <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>
                @switch ((int)ViewBag.ProductCount)
            {
                case 0:
                        @:Out of Stock
                    break;
                case 1:
                        <b>Low Stock(@ViewBag.ProductCount)</b>
                        break;
                    default:
                        @ViewBag.ProductCount
                        break;
                }
            </td>
        </tr>
        <tr>
            <td>Stock Level</td>
            <td>
                @if (ViewBag.ProductCount == 0)
                {
                    @:Out of Stock
                }
                else if (ViewBag.ProductCount == 1)
                {
                    <b>Low Stock(@ViewBag.ProductCount)</b>
                }
                else
                {
                    @ViewBag.ProductCount
                }
            </td>
        </tr>
    </tbody>
</table>
<div data-discount="@ViewBag.ApplyDiscount" data-expression="@ViewBag.Expression" data-supplier="@ViewBag.Supplier">
    包含元素具有数据属性
</div>
discount:<input type="checkbox" checked="@ViewBag.ApplyDiscount" />
expression:<input type="checkbox" checked="@ViewBag.Expression" />
supplier:<input type="checkbox" checked="@ViewBag.Supplier" />

可以产生与Switch 语句同样的效果:

枚举数组和集合

在编写 MVC 应用程序时,会经常希望枚举一个数组或一些其他形式对象集合的内容,并生成一种细节的内容,为了演示如何实现,在“Controller”控制器中添加 DemoArray 新的动作方法,如下:

    public ActionResult DemoArray()
        {
            Product[] array =
            {
                new Product { ProductId = 1,Name = "MVC",Description = "One Demo",Category = "Watersport",Price = 122M },
                new Product { ProductId = 2,Name = "MVCMVC",Description = "Two Demo",Category = "Apple",Price = 162M },
                new Product { ProductId = 3,Name = "MVCMVC",Description = "Three Demo",Category = "Pair",Price = 172M }
            };
            return View(array);
        }

该动作方法创建了 Product[] 对象,它含有示例数据值,并将他传递给View方法;一边默认视图来渲染这些数据。在DemoArray方法上右键,添加强类型视图。编辑如下:

@model Razor.Models.Product[]

@{
    ViewBag.Title = "DemoArray";
    Layout = "~/Views/_BasicLayout.cshtml";
}

<h2>DemoArray</h2>
@if (@Model.Length > 0)
{
    <table>
        <thead>
            <tr><th>ProductId</th><th>Product</th><th>Description</th><th>Category</th><th>Price</th></tr>
        </thead>
        <tbody>
            @foreach (Razor.Models.Product p in Model)
            {
                <tr>
                    <td>@p.ProductId</td>
                    <td>@p.Name</td>
                    <td>@p.Description</td>
                    <td>@p.Category</td>
                    <td>@p.Price</td>
                </tr>
            }         
        </tbody>
    </table>
}
else
{
    <h2>无产品数据</h2>
}
右键,在浏览器中查看:


这里使用了一个@if 语句,以便根据从视图模型获取数组长度来切换其中的内容:用一个@freach 表达式来枚举数组的内容,并且为每一条数据生成一个HTML 表格行。如果数组为空,会生成一个h2 元素。

处理命名空间

如果仔细观察我们可以看到,在最后一个foreach 循环中使用了全限定名的 Product 类,如下所示:

 ...
@foreach (Razor.Models.Product p in Model)
...

在一个对视图模型和其他类要做许多引用的复杂视图中,这让人感到厌烦,这时候,我们可以对视图进行整理,对一个视图运用 @using 表达式,以引入命名空间。如下对 DemoArray.sc.html:




猜你喜欢

转载自blog.csdn.net/qq_21419015/article/details/80453120