[ASP.NET MVC Mavericks Road] 03 - Syntaxe Razor

[ASP.NET
MVC Mavericks Road] 03 - Syntaxe Razor

Razor est un nouveau moteur d'affichage uniquement dans MVC3. Nous savons que dans ASP.NET, le moteur d'affichage ASPX s'appuie sur pour appeler les instructions C#. Après MVC3, il existe un nouvel ensemble de syntaxe Razor utilisant la marque @, qui est plus flexible et plus concise à utiliser. Voici quelques exemples simples pour vous aider à maîtriser rapidement l’utilisation de la syntaxe Razor.

Contenu de cet article

Travail de préparation

Avant de démontrer l'utilisation de la syntaxe Razor, nous devons effectuer un travail de préparation.

1. Ouvrez VS et créez un projet vide ASP.NET MVC C'est très simple et ne sera pas démontré en détail.

2. Ajouter un modèle. Ajoutez une classe nommée Product dans le dossier Models du projet. Ici, nous passons en revue la classe Product utilisée dans le résumé précédent des points de connaissances C#. Le code est le suivant :

namespace MvcApplication1.Models {
    public class Product {
        public int ProductID { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public decimal Price { get; set; }
        public string Category { set; get; }
    }
}

3. Ajoutez un contrôleur. Cliquez avec le bouton droit sur le dossier Controllers dans le projet, sélectionnez Ajouter un contrôleur et nommez-le comme indiqué ci-dessous :

Après avoir cliqué sur Ajouter, modifiez le code dans ProdcutController comme suit :

using System.Web.Mvc;
using MvcApplication1.Models; 

namespace MvcApplication1.Controllers
{
    public class ProductController : Controller
    {
        public ActionResult Index()
        {
            Product myProduct = new Product {
                ProductID = 1,
                Name = "苹果",
                Description = "又大又红的苹果",
                Category = "水果",
                Price = 5.9M
            };
            return View(myProduct); 
        }
    }
}

4. Ajouter une vue. Cliquez avec le bouton droit sur la méthode Index, sélectionnez Ajouter une vue et configurez les éléments suivants dans la fenêtre contextuelle :

Après avoir cliqué sur Ajouter, le système crée automatiquement un dossier Produit et un Index.cshtml pour nous. Fichier, le contenu d'Index.cshtml est le suivant :

@model MvcApplication1.Models.Product

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

5. Modifiez la route par défaut. Pour plus de commodité, nous devons diriger le démarrage de l'application vers le traitement de la demande dont nous avons besoin (dans ce cas Produit/Index). Ouvrez le fichier Global.asax, recherchez la méthode routes.MapRoute sous la méthode RegisterRoutes et modifiez la valeur du contrôleur en "Product", comme indiqué ci-dessous :

routes.MapRoute(
    "Default", // 路由名称
    "{controller}/{action}/{id}", // 带有参数的 URL
    new { controller = "Product", action = "Index", id = UrlParameter.Optional } // 参数默认值
);

Indépendamment de ce que cela signifie, je le ferai Le routage sera présenté spécifiquement dans un article ultérieur. À ce stade, nous pouvons appuyer sur F5, le programme peut fonctionner normalement et les préparatifs sont terminés.

À l'aide de l'objet Model

Présentation de la syntaxe Razor, commençons par la première ligne du fichier Index.cshtml :

@model MvcApplication1.Models.Product

Les instructions Razor commencent toutes par le @ symbole . Chaque vue possède sa propre propriété Model (appelée via @Model). Le code ci-dessus signifie faire pointer le type de l'attribut Model de cette vue vers le type MvcApplication1.Models.Product, qui implémente un typage fort. L'un des avantages du typage fort est la sécurité du type. Si vous écrivez un mauvais nom de membre de l'objet Model, le compilateur signalera une erreur ; un autre avantage est que vous pouvez utiliser les invites intelligentes du code dans VS pour terminer automatiquement l'écriture du code de. tapez les appels des membres dans VS . Bien sûr, ce code peut s'exécuter normalement sans programme, mais cela crée simplement certaines difficultés dans l'écriture du code.

L'attribut Model dans la vue est utilisé pour stocker l'objet d'instance de modèle passé par le contrôleur (dans cet exemple, le ProductController est passé à la vue Index via "return View(myProduct)"), le code suivant montre comment appeler l'objet modèle :

@model MvcApplication1.Models.Product

@{
    ViewBag.Title = "Index";
}
<!-- 调用Product实例的Name属性 -->
<h2>名称：@Model.Name</h2>

Notez que la première ligne de code utilisée pour déclarer le type d'attribut Model utilise @model (m minuscule) et l'objet Model transmis par le contrôleur appelant utilise @Model. L'effet d'appuyer sur F5 est le suivant :

Utilisez l'expression

上面讲的使用Model对象是很常用的一种Razor代码。其实上面示例中的@Model.Name就是一个简单的表达式，表示向Web页面呈现Model.Name的文本值。Razor语法中的表达式除了可以使用Model对象，也可以使用几乎任何一个其他可访问权限范围内的对象，来向Web面面输出该对象成员的文本值。如下代码所示：

@model MvcApplication1.Models.Product

@{
    ViewBag.Title = "Index";
}

现在的时间是: @DateTime.Now.ToShortTimeString()

运行效果如下：

这种使用对象的简单表达式（@DateTime.Now.ToShortTimeString()和@Model.Name），在这我们不防称之为对象表达式。

除了对象表达式，还可以是其他任意的有返回值的表达式，如条件表达式。如下面代码所示：

@model MvcApplication1.Models.Product

@{
    ViewBag.Title = "Index";
}

现在的时间是: @DateTime.Now.ToShortTimeString()


@(DateTime.Now.Hour>22 ? "还早，再写一会吧！" : "该睡觉咯！")

运行效果如下：

注意，一般使用非对象表达式时都需要用小括号括起来。

使用代码块

和表达式的使用方式一样，Razor语法中也可以使用由{}括起来的单个C#过程控制代码块（如if、switch、for等）。使用方式如下：

@model MvcApplication1.Models.Product

@{
    ViewBag.Title = "Index";
}

@if (Model.Price > 5M) {
    string test = "买不起！";
    <p>@Model.Name <b>太贵了！</b> @test </p>
}

效果如下：

由{}括起来的代码块内可以写任何C#代码，也可以使用任何HTML标签。但需注意的是，当控制语句内只有一句代码时不能像写C#后台代码一样省略大括号。

还有一种更常用的使用代码块的方式。你也可以通过以@{开始，以}闭合的方式来使用代码块，它可以把多个代码块放在一起，开成一个更大的代码块。如下代码所示：

@model MvcApplication1.Models.Product

@{
    ViewBag.Title = "Index";
}
@{
    if(Model.Category=="水果"){
        string test="是一种水果。";
        @Model.Name @test
    }
    if (Model.Price > 5M) {
        string test = "买不起！";
        <p>@Model.Name <b>太贵了！</b> @test </p>
    } 
}

运行结果如下：

使用@:和text标签

我们注意到，在代码块中，要么是C#代码，要么是HTML标签，不能直接写纯文字，纯文字须包裹在HTML标签内。但如果需要在代码块中直接输出纯文字而不带HTML标签，则可以使用@:标签，在代码块中输出纯文本文字非常有用。如下代码所示：

...

@if (Model.Price > 5M) {
    @Model.Name@:太贵了 。
    <br />
    @: @@:后面可以是一行除@字符以外的任意文本,包括<、>和空格，怎么写的就怎么输出。
    <br />
    @: 如果要输出@符号，当@符号前后都有非敏感字符（如<、｛、和空格等）时，可以直接使用@符号，否则需要使用两个@符号。
}

注意@符号的使用。上面代码运行效果如下：

使用@:标签在代码块中输出一行不带html标签的文本非常方便，但如果需要在代码块中输出续或不连续的多行纯文本，则使用text标签较为方便，如下代码所示：

...

@if (Model.Price > 5M) {
    <text>

    名称：<b>@Model.Name</b><br />
    分类：<b>@Model.Description</b><br />
    价钱：<b>@Model.Price</b><br />
    
    <pre class="brush:php;toolbar:false">
        测试行一: <a>aaaa</a>
        测试行二: @@ fda@aaa
    

     }

运行结果：

使用ViewBag

上面讲了通过Model对象来从Controller传递数据到View。和Model对象一样，ViewBag对象也可以用来从Controller传递数据到View。下面代码演示了如何在ProductController中使用ViewBag：

public ActionResult Index()
{
    Product myProduct = new Product {
        ProductID = 1,
        Name = "苹果",
        Description = "又大又红的苹果",
        Category = "水果",
        Price = 5.9M
    };
    ViewBag.TestString = "这是一行测试文字！";
    return View(myProduct); 
}

不一样的是，ViewBag是动态类型，其中TestString是自己定义的。ViewBag在View中的使用方式是和Model一样，如下：

...

动态表达式解析的时间是：@ViewBag.TestString

运行结果就不贴图了。

使用Layuot

前面我们创建一个视图的时候，我们勾选了使用布局和母版页，但没有告诉VS使用哪一个。请仔细看下图：

这个对话框告诉我们“如果在Razor _viewstart中设置了此选项，则留空”。在项目的Views文件夹中，我们可以看到一个_ViewStart.cshtml文件，里面的内容是：

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

MVC呈现视图的时候，默认情况下会自动查找_ViewStart.cshtml文件，以它作为母版来呈现用户请求的视图。母版的呈现是MVC内部处理的，这种以下划线（_）开头的视图文件，一般是不能直接返回给用户。

使用布局或母版页的好处是，我们不需要在每个视图中都设置一份相同的内容。按照_ViewStart.cshtml文件内容指示的路径，我们找到_Layout.cshtml文件，打开它会发现我们在Index视图中定义的 ViewBag.Title = "Index" 就是在这里调用的：

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
</head>

<body>
    @RenderBody()
</body>
</html>

类似于ASP.NET母版页中的ContentPlaceHolder服务器控件，在MVC中使用@RenderBody()来呈现子Web页面的内容，它可以省去我们在每个视图文件中写相同的html元素、JS和样式等的工作。

如果创建一个视图不想使用Layout，则可以在创建视图的对话框取消“使用布局和母版页”选项，创建后会生成如下代码：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>About</title>
</head>
<body>
    <div>
        
    </div>
</body>
</html>

由于没有使用Layout，视图中必须包含用于呈现HTML页面每个基本元素，而且必须指定Layout=null。

 以上就是[ASP.NET MVC 小牛之路]03 - Razor语法的内容，更多相关内容请关注PHP中文网（www.php.cn）！