vici mvc开发第三篇——视图和布局_视图层布局层-优快云博客

本文链接：https://blog.youkuaiyun.com/malimalihun/article/details/6340371

本文是Vici MVC开发系列的第三篇，主要讲解了视图和布局的概念。视图由框架模板和视图模板组成，框架模板充当母板，视图模板替换框架模板中的{{@View}}标签。内容涵盖模板基础、变量、条件语句、循环、格式化、包含其他模板、内置变量、.NET对象和方法的使用，以及相对路径引用等。

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

一、模版的基础

通过上面的教程，我们已经知道，每一个控制器（Controller）都会呈现一个视图。一个视图实际上有俩个模版组成：框架模版和视图模版。框架模版相当于母板。

下面是一个框架模版：

{{@View}}标签作为主体内容将会被视图模版替换，主体就是指<body></body>这一块内容。

下面是一个视图模版：

<html> <head><title>View Title</title></head> <body> Hello everyone! </body>

最后呈现的网页是下面这个样子：

模版可以包括如下几项：

1、 Variables (expressions)

2 、Conditionals (if ... else ... endif)

3、Control placeholders (discussed in the section about Forms)

4、Includes

5、Components

6、Translations

7、Macros

二、Variables (expressions)

模版可以由Controller中的方法ViewData()返回的数据来填充。在ViewData[]中定义的变量可以这样在模版中调用：{{Expression}},其中Expression是变量名。

下面是一个例子， ViewData包括下列这些变量：

ViewData["Age"] = 37; ViewData["Today"] = new DateTime(2007,8,29);

下面是一些有效的变量：

{Age}} renders as 37
{{Age+1}} renders as 38
{{Today.Month}} renders as 8
{{Today.AddYears(-Age).ToString("MM/dd/yyyy")}} renders as 08/29/1970

正如上面所见，它还容许调用方法，但是它不能调用静态对象的方法，下面的写法是不对的：

{{Math.Min(Age,40)}}将会抛出异常，因为Math没有定义

三、 Formatting

如果你想格式化Contents中的变量，你可以在标签中具体指定一些格式化标准表达式，中间以（`）分开，如{{Expresssion`FormatString}}

例如：

四、Loops (foreach)

foreach()的用法类是C#里的foreach()

...

CollectionExpression 应返回一个集合，实现一个字符串序列接口的变量或表达式,包括 arrays, ArrayList, List<> collections。

“variableName"可用于此循环引用集合中的当前项：

<tr><td>{{ employee.Name }}</td><td>{{ employee.Age }}</td></tr>

For Loop：

您可以模拟 For 循环使用下面的语法：

// A for loop in C# (for i = 0; i <= SomeValue; i++) { ... }

在视图中可以这样实现：

...

Pseudo-variables inside loops：

在 foreach 循环中，您可以访问几个有用的 pseudo-variables：

variable name Replaced by iteratorName@row The current row number (starting from 1) iteratorName@odd True for odd rows iteratorName@even True for even rows iteratorName@oddeven "odd" for odd rows, "even" for even rows iteratorName@OddEven "Odd" for odd rows, "Even" for even rows iteratorName@ODDEVEN "ODD" for odd rows, "EVEN" for evan rows

例如：

<tr class="{{ employee@OddEven }}"> <td>{{ employee@row }}</td><td>{{ employee.Name }}</td><td>{{ employee.Age }}</td> </tr>

或者：

<tr class="{{employee@odd ? "Odd":"Even"}}"> <td>{{employee@row}}</td><td>{{employee.Name}}</td><td>{{employee.Age}}</td> </tr>

五、 Conditionals (if ... elseif ... else ... endif)

可以在在HTML中使用（if ....elseif ...else....endif）,这些标记必须就像被包裹在 HTML 注释循环指令：

...  ...  ...

条件可以是任何表达式，这些表达式不一定全部返回布尔值，其他的数据类型是按如下方法认定的：

string:如果字符串的Length>0或者不为null，则返回真，其他情况为假；

numeric：计算结果为 TRUE 值并且不等于 0 为零；

collections (enumerable objects)：如果集合中包含元素，则为真，否则为假；

objects：如果对象应用为空，则为假，否则为真；

{{else}}和{{elseif}}指令都是可选的。

六、Including other templates

你可以通过下面俩种方法来加载模版：

1、Rendered

{{ render templateName , @LocalVar1=..., @LocalVar2=... }} 或者

这样可以加载其他模版并且呈现它只用普通的模版解析器，所以 ViewData中定义的变量都可以在模版中调用，但是是临时变量。如果您要将这些变量传递给 sub-template，您应在调用模板时添加本地变量。

2、或者

你也可以在没有运行的模版呈现的情况下加载模版，模版将会呈现”as is“，并且只有在body标签里添加。

{{ INCLUDE templateName }} 或者

3、Template name

模版名字可以是一个返回字符串的c#表达式，常用字或者你喜欢的。

例如：

    {{ render "subTemplate.inc" }}
    {{ render "group/" + UserGroup + "/index.htm" }}
    {{ render "breadCrumb.htm", @Crumbs = crumbList }}

模版名字可以包含详细路径信息，但最好是相对于当前模版。不可以是绝对路径。支持父目录”..“的使用。该文件名应包括扩展名，这使您可以选择一个不同的扩展名为 sub-templates

七、 Using temporary variables

你可以将值分配给模板内的临时变量。您只需创建一个赋值表达式用它来创建一个变量。从这一点上的变量将提供您的模板中。

例如：

<table>   <tr><td>{{item.Name}}</td><td>{{item.Price}}</td><td>{{runningTotal}}</td></tr>  </table>

请注意注释的标记。因为在 C# 中，赋值运算符返回该工作分配的结果，这样可以防止分配正在呈现的结果。

八、 Built-in variables

你可以在模版中使用下列build_in变量

{{@url}}指向当前url，它可以用于FORM 中POST返回数据（可以通过定义它在方法的属性上）

{{@title}}指视图模版的标题，它只可以用在框架中。

{{@ Url}} 变量是实际上一个对象，表示当前 URL，可由一大批" chainable"方法操作。

Add(parameterName,value): adds a parameter to the URL Replace(parameterName,value): replaces the specified parameter with the new value. If the parameter does not yet exist, it will be added Remove(parameterName): removes the specified parameter from the URL RemoveAll(): removes all parameters from the URL

例如：如果 if {{@Url}} 包括 "http://www.vicimvcdemo.com/test.aspx?id=5&action=navigate" 你可以按下列操作：

{{ @Url.Replace("id","4").Remove("action").Add("name","test") }}，最后的结果是：”http://www.vicimvcdemo.com/test.aspx?id=4&name=test“

九、 Using .NET objects, classes and methods in view templates

你可以在视图模版中调用.net 定义的类和对象。当然，首先这些类是可用的。你可以在ViewData[]方法中添加Classes和object。

1、Adding objects

在ViewData中添加objects非常简单，只需将它像任何变量定义即可：

ViewData["Context"] = currentContext; // currentContext is an instance of an application specific class

模版：

The current user is {{Context.User.Name}}

2、Adding classes/types

为了添加classes，你可以使用ContextFactory factory class（它是Vici Parser的一部分，包含在Vici MVC中）

ViewData.AddType("DateTime", typeof(DateTime));

模版：

Current time is {{ DateTime.Now.ToString("dd/MM/yyyy") }}  You're too late, you missed valentine's day...

请注意datatime构造函数的调用。如果一个Type在模版中可以使用，你可以在表达只中创建一个新的该类型的对象。

3、Adding methods

你也可以创建在任何视图模版中都可以调用的属于你自己的全局方法。

下面是俩种创建方法：

ViewData["square"] = delegate(double x) { return x*x; }; ViewData["max"] = ContextFactory.CreateFunction(typeof(Math), "Max");

模版：

The square of 6 is {{ square(6.0) }} <br/> The highest of the numbers 5 and 9 is {{ max(5,9) }}

十、Relative path references

为了正确支持 HTML 设计软件，都允许你使用相对引用图像和其他文件。vici mvc 会自动翻译路径解释。

首先，假定你的模版文件位于 "/templates"，图像文件位于"/images"，在你的模版文件里，你可以按照下面引用image:

如果url这样调用模版 "http://www.vicimvcdemo.com/public/products/list", image 引用将会被vici mvc自动编译成:

如果你按照下面调用模版"http://www.vicimvcdemo.com/welcome", image 引用会是：