View数据呈现相关技术

一、了解Razor语法

1、Razor基本语法

a)输出单一变量时不需要加分号做结尾。如：

<p>现在时刻：@DateTime.Now</p>

b)输出一段含有空白字元或运算子的结果时，必须在前后加上一个小括弧。如：

<p>会员名称：@(@User.Identity.Name + Model.MemberLevel)   启用状态：@(@ViewBag.IsEnabled?"启用"：“停用”)</p>

c)在页面中执行多行C#代码时，必须在前后加上一个大括弧。如：

@{
       var name = "Will";
       var message = "你好，我是" + name;
   }

d)在页面多行C#代码的Razor语法中插入HTML或其他文字内容，必须在每一行最前面加上一个“@:”符号，而且加上“@:”符号的这行代码里，也可以再加上其他Razor变量。

@{
      var name = "Will";
      @:你好，我是@name
 }

e)如果要在检视页面中输出“@”符号，可以用两个“@”符号。如：@@Will_Huang 此语法最后会输出：@Will_Huang

2、Razor与HTML混合输出

a)在页面中撰写if判断句，如：

@if(ViewBag.IsEnaled){
    @:启用
 } else {
    @:停用
 }

如果ViewBag参数并不存在，其回传的结果将为null，但是if判断句中必须回传Boolean类型，因此会引发“无法将null转换成‘bool’”异常，因此以上代码可改为：

@if(ViewBag.IsEnabled != null && ViewBag.IsEnabled)
{
     @:启用
 } else {
     @:停用
}

b)如果要在代码区块输出大量文字，只要在代码区块里的前后加上一组HTML标签即可，Razor会智能地判断出这是一段HTML标签文字，如此一来，如果在大范围的代码区段中就不用在每一行前面加上"@:"符号了。如：

@if(ViewBag.IsEnabled)
{
   <span>启用</span>
}
else
{
   <span>停用</span>
}

如果在上述区段中不想输出如何前后的标签该怎么办呢？在Razor页面里，可以使用特殊的<text>标签来代替这个HTML标签，最后输出到浏览器时不会输出<text>这个标签。如：

@if(ViewBag.IsEnabled){
    <text>
        显示启用的HTML段落
      <p>
               @ViewBag.EnabledMessage
        </p>
    </text>
   } else {
     <text>
         显示停用的HTML段落
      <p>
               @ViewBag.DisabledMessage
        </p>
      </text>
}

也可以在多行C#代码段落里使用相同的语法，利用"@:"或<text>作为HTML与Razor语法之间的切换，如

@{
      var is_valid = true;
      if(!is_valid){
          <text>无权限!</text>
     }
   }

3、Razor与HTML混合输出的技巧
            a)属性名称误判

如果想要在Will部分改写成Razor语法输出一个变量：您好，Will先生。如果写成"您好,@ViewBag.Name先生"，Razor语法把"@ViewBag.Name先生"当成了一个C#语法，把"Name先生"当成ViewBag的属性了，因此输出了"您好,"。解决方法：在Razor语法前后加上小括弧就可以明确区分Razor与HTML内容，

上述可改为：“您好,@(ViewBag.Name)先生”。另外两种解决方法：“您好,<span>@ViewBag.Name</span>先生” 或者"您好,@ViewBag.Name<span>先生</span>"。

b)未预期的额外属性