先看一段代码(只是为了说明问题用,没任何意义)吧:
代码一:
?1 <div>
?2???? for(int i=0;i<3;i++)Repeater
嵌套repeater输出不规则列表
?3???? {
?4???????? </div>i<div>
?5???????? for(int j=0;j<3;j++)
?6???????? {
?7???????????? if(j==1)
?8???????????? {
?9???????????????? <div>
10???????????????????? for(int k=0;k<5;k++)
11???????????????????? {
12???????????????????????? k++;
13???????????????????????? <span>
14???????????????????????????? k
15???????????????????????? </span>
16???????????????????? }
17???????????????? </div>
18???????????????? break;
19???????????? }
20???????? }
21???? }
22 </div>
这一段代码没添加任何@标记,肯定是有问题的,你能准确地判断出这段代码中哪些地方要添加@标记吗?看到这里,停几分钟,填上你的答案吧:),然后把你的答案跟下面的参考答案做个对比吧,如果你很确定地完成了并且完全正确,那么恭喜你,这个知识点你已经掌握了,下面的内容你可以直接跳过了。
参考答案:
?1 <div>
?2???? @for(int i=0;i<3;i++)
?3???? {
?4???????? @:</div>@i<div>
?5???????? for(int j=0;j<3;j++)
?6???????? {
?7???????????? if(j==1)
?8???????????? {
?9???????????????? <div>
10???????????????????? @for(int k=0;k<5;k++)
11???????????????????? {
12???????????????????????? k++;
13???????????????????????? <span>
14???????????????????????????? @k
15???????????????????????? </span>
16???????????????????? }
17???????????????? </div>
18???????????????? break;
19???????????? }
20???????? }
21???? }
22 </div>
Razor语法中有block(块)的说法,这个大家应该都不陌生了,就是代码段,如我们可以把using(){}包起来的代码叫一个block(段/块),block内部还可以有block,这个是可以嵌套的。比如上面的示例代码中我们可以把最外层的for循环内部的代码(第2行到第21行)是一个block,第4行是一个代码块,第二个for循环内部的代码(第5行到第20行)也可以叫一个block,划分不是固定的,粒度你可以自己定义。
block内部的代码分为两种,一种是HTML代码块,一种是C#(本例中为C#,也可以是其他.NET语言)代码块。有了block的概念后,Razor中@标记的规则就是:
如果同一种代码块(HTML代码块不需要加@,这里排除开)内部跟的是同类代码块,这时不需要加@标记,否则要加@标记
用这个规则逐一解析一下上面的代码,在解析之前我的block划分是这样的:
第1—22行,2—21行,第4行,5—20行,7—19行,9—17行,10—16行,12行,13—15行,14行
我们从里往外看,第14行外层block是HTML代码,所以第14行要加@,12行外层block也是C#代码块,因此不加,以此类推,直到第5行,这一行有点特殊,这个涉及到VS中的标签匹配。
我们知道VS能在编码时对HTML标签进行匹配,这个匹配只是给出警告,并不是强制的,用了Razor后,混在C#(也可以是其他语言)中的HTML标签也要进行匹配,只是这个匹配是在代码块内部进行的,同时也是野蛮的,如果不匹配就会出错,例如下面的代码是通不过的:
1 <div>
2???? <tr>
3???? @if(true)
4???? {
5???????? </tr>
6???? }
7 </div>
改为这样就好了:
1 <div>
2???? <tr>
3???? @if(true)
4???? {
5???????? <tr></tr>
6???? }
7 </div>
那么如果遇到像最开始那段代码</div><div>这样进行拼接的HTML怎么办呢,Razor提供了两种方案,一是在前面加上“@:”,如 @:</div><div>;一是用@Html.Raw,如:@Html.Raw("</div><div>");
了解了这点后代码一第4行就应该这样:@:</div>@i<div>,第4行没问题了,最后只剩第5行了,这时直接把第4行忽略,按规则写就OK了,因为第2行是C#代码块,因此第5行不需要添加@。
好了,写到这里只剩最后一个点了,如果把代码一中第4行改为<div>i</div>,那么第5行应该是什么样的呢?如果Razor内HTML标签是匹配的,Razor可以识别,这时可以忽略匹配的HTML标签对即可。
?