【ASP.NET基础--MVC】MVC视图基础语法学习

 

初步接触.net MVC的视图语法,很多东西都不太熟悉,感觉跟之前的aspx以及html都有一些区别,最近看别人的代码,一边看一边研究,现把学到的东西在这里记录一下,以便日后翻阅。

第一部分:基础知识

1.视图,英文叫做razor,在.net MVC项目中,它是以.cshtml后缀名来结束的。

2.一个很直观的发现,就是这种文件里面有很多用@开头或者以@{代码体},这种形式的代码是razor特有的一种策略,所有这类代码都会被asp.NET引擎进行处理。

3.在@{代码体}这种形式中的{}里面的各条语句之间需要用;进行分隔,而如果只是单单的一个@后接代码,则不需要用;分割。如

 

[html]  view plain  copy
 
  1. <span style="font-size:14px;">@{  
  2.     ViewBag.Title = "用户注册";  
  3.     Layout = "~/Views/Shared/_Layout.cshtml";  
  4. }</span>  

[html]  view plain  copy
 
  1. <span style="font-size:14px;"> @Html.EditorFor(model => model.UserName)  
  2.  @Html.ValidationMessageFor(model => model.UserName)  
  3.  @Html.DisplayDescriptionFor(model => model.UserName)</span>  

4.定义变量,可采用如下的方法定义变量。

 

 

[html]  view plain  copy
 
  1. <span style="font-size:14px;">@{   
  2.     var greeting = "Welcome to our site!"; </span>  
[html]  view plain  copy
 
  1. <span style="font-size:14px;">    var weekDay = DateTime.Now.DayOfWeek;   
  2.     var greetingMessage = greeting + " Today is: " + weekDay; }</span>  


有点类似于javascript,当然也可以在页面中使用这个变量,但是必须要有@这个符号。

 

 

[html]  view plain  copy
 
  1. <span style="font-size:14px;"><p>hello, @greeting</p></span>  

需要注意的是,@前面需要有空格,asp.net才能够识别。

 

如@var i=10;

<p>text @i text</p>将输出text 10 text有空格,如果我们不想要这个空格怎么办呢,可以这样<p>text@{@i}text</p>,这样将输出text10text。此外

 

[html]  view plain  copy
 
  1. <span style="font-size:14px;"><p>text@i text</p> 将输出 text@i text </span>  
[html]  view plain  copy
 
  1. <span style="font-size:14px;"><p>text@itext</p> 将输出 text@itext </span>  
[html]  view plain  copy
 
  1. <span style="font-size:14px;"><p>text @itext</p> 将报错 </span>  

如果是输出的是变量的方法名则不需要用@{}括住也可生效,但注意在@字符前记得加空格。如: <p>text @i.ToString()text</p> 
使用变量对象可直接写: @var1 @var2 @myObject.xx 

5.在@{}中还可以写逻辑代码如:

 

[html]  view plain  copy
 
  1. <span style="font-size:14px;">@{  
  2.   if(){}  
  3. <span style="white-space:pre">    </span>else{}  
  4. }</span>  

6.还可以在@{}中使用html的元素,如:

 

[html]  view plain  copy
 
  1. <span style="font-size:14px;">@{</span>  
[html]  view plain  copy
 
  1. <span style="font-size:14px;">  <p>text</p>      </span>  
[html]  view plain  copy
 
  1. <span style="font-size:14px;">  <div>div1</div>   
  2. }</span>  

 

 

7.可以再@{}使用@:或者<text></text>标签输出文本。如

 

[html]  view plain  copy
 
  1. <span style="font-size:14px;">@  
  2. {  
  3.    @:this is  a text  
  4.    @:this is another text  
  5. }</span>  

注意,此处不需要用到;来结束一条语句,若加了分号,输出的结果为this is a text; this is another text。我们发现这两条语句是并排的,要换行的话只需要在第一条语句的末尾加上<br/>即可。

 

使用<text></text>在@{}内部输出文本与上面的类似

 

[html]  view plain  copy
 
  1. <span style="font-size:14px;">@{  
  2.   <text>  
  3.    this is a text  
  4.    this is another text  
  5.   </text>  
  6. }</span>  


跟上面的结果是一样的,也是默认没有换行的。

 

8.使用注释

有下面几种方法可以再@{}中使用注释。

单行注释使用// 如:

 

[html]  view plain  copy
 
  1. <span style="font-size:14px;">  @  
  2. {  
  3.   //这是一条注释  
  4. }</span>  


多行注释使用@* *@或者/*  */如:

 

 

[html]  view plain  copy
 
  1. <span style="font-size:14px;">@{  
  2.   @*注释  
  3.        注释  
  4.        注释*@  
  5.   /*注释  
  6.     注释  
  7.     注释*/  
  8.     
  9. }</span>  

若在@{ ... }内部使用<!-- -->注释,则会输出到页面之中,如果在<!-- -->内部使用@变量,则会被处理

 

 

[html]  view plain  copy
 
  1. <span style="font-size:14px;"> @{   
  2. <!-- time now: @DateTime.Now.ToString() --> </span>  
[html]  view plain  copy
 
  1. <span style="font-size:14px;"></span>  

输出: <!-- time now: 4/9/2011 12:01 -->> 

 

也就是说不能使用<!-->来注释。

 

9.类型转换:有以下几种类型转换方法

AsInt(), IsInt() AsBool(),IsBool() AsFloat(),IsFloat() 
AsDecimal(),IsDecimal() AsDateTime(),IsDateTime() ToString()

例子如下:

@{ 
    var i = “10”; }   
<p> i = @i.AsInt() </p> <!-- 输出 i = 10 -->

}

10.还可以用循环,如下例子

 

[html]  view plain  copy
 
  1. <span style="font-size:14px;">@for(int i=1;i<4;i++)  
  2. {  
  3.   @:@i  
  4. }</span>  

当然这样也可以:

 

 

[html]  view plain  copy
 
  1. <span style="font-size:14px;">@  
  2. {  
  3.   for(int i=1;i<4;i++)  
  4.   {  
  5.     @:@i  
  6.   }  
  7. }</span>  


第二部分:htmlhelper

 

第二个从MVC视图代码中发现的是这类标记,以@html开头的,如

 

[html]  view plain  copy
 
  1. @Html.TextBoxFor(model => model.VerificationCode)  
  2. @Html.ValidationMessageFor(model => model.VerificationCode)</span>  


这类代码。后面查了查,这类代码均叫做htmlhelper,是MVC中的视图中为了呈现HTML控件。以下介绍一些常用的htmlhelper。

 

ActionLink - 链接到操作方法。 
BeginForm * - 标记窗体的开头并链接到呈现该窗体的操作方法。 

CheckBox * - 呈现复选框。

 DropDownList * - 呈现下拉列表。 
Hidden - 在窗体中嵌入未呈现的信息以供用户查看。 

ListBox * - 呈现列表框。 
Password - 呈现用于输入密码的文本框。 

RadioButton * - 呈现单选按钮。 
TextArea - 呈现文本区域(多行文本框)。 

 TextBox * - 呈现文本框
此外,还有如@Html.LabelFor,@Html.ValidationMessageFor,@Html.EditorFor,@Html.PasswordFor,@Html.DisplayDescriptionFor等等,主要针对强类型的html控件来使用的。

1.ActionLink,介绍几种写法以及其所生成的源码。

 

一 Html.ActionLink("linkText","actionName")

该重载的第一个参数是该链接要显示的文字,第二个参数是对应的控制器的方法,

默认控制器为当前页面的控制器,如果当前页面的控制器为Products,则 Html.ActionLink("detail","Detail")

则会生成 <a href="/Products/Detail">detail</a>

 

二 Html.ActionLink("linkText","actionName","controlName")

该重载比第一个重载多了一个参数,他指定了控制器的名称,

如Html.ActionLink("detail","Detail","Products")则会生成

<a href="Products/Detail">detail</a>

 

三 Html.ActionLik("linkText","actionName",routeValues)

routeValue可以向action传递参数,如Html.ActionLink("detail","Detail",new { id=1})

会生成 <a href="Products/Detail/1">detail</a>,

此处假设当前的控制器是Products.

四 Html.ActionLink("linkText","actionName",routeValues,htmlAttributes)

htmlAttribute可以设置<a>标签的属性,

如 Html.ActionLink("detail","Detail",new{id=1},new{ target="_blank"})

会生成 <a href="Products/Detail/1" target="_blank">detail</a>,

需要注意的是如果写成 new{ target="_blank",class="className"}则会报错,

因为class是关键字,此处应该写成 @class="className"。

 

五 Html.ActionLink("linkText","actionName","controlName",routeValues,htmlAttributes)

该重载包含了上面提到的所有参数类型

 

RouteLink和ActionLink类似,此处稍作说明。

 

[html]  view plain  copy
 
  1. <span style="font-size:14px;">@Html.RouteLink("关于","about")</span>  
[html]  view plain  copy
 
  1. <span style="font-size:14px;">@Html.RouteLink("关于","about",new{page=1})</span>  
[html]  view plain  copy
 
  1. <span style="font-size:14px;">@Html.RouteLink("关于","about",new{page=1},new{id=1})</span>  
[html]  view plain  copy
 
  1. <span style="font-size:14px;">分别生成的是</span>  
[html]  view plain  copy
 
  1. <span style="font-size:14px;"><a href="当前控制页/about">关于</a></span>  
[html]  view plain  copy
 
  1. <span style="font-size:14px;"><a href="当前控制页/about?page=1">关于</a></span>  
[html]  view plain  copy
 
  1. <span style="font-size:14px;"><a href="当前控制页/about?page=1" id="link1">关于</a></span><pre name="code" class="html">="当前控制页/about?page=1">关于</a>  
[html]  view plain  copy
 
  1. ="当前控制页/about?page=1">关于</a><pre name="code" class="html">="当前控制页/about?page=1">关于</a>  
 
 
 
 

 

2.Form的2种用法

第一种:

 

[html]  view plain  copy
 
  1. @using(Html.BeginForm("Actionname","Controlername",Formmethod)){}  

比如

[html]  view plain  copy
 
  1. @using(Html.BeingForm("Index","Home",FormMethod.Post)){  
  2. }  

 

 

第二种:

 

[html]  view plain  copy
 
  1. @Html.BeginForm("Index","Home",FormMethod.Post)  
  2. /*此处书写代码*/  
  3. @Html.EndForm()  

这两种方法生成的结果都是一样的,都是:

 

 

[html]  view plain  copy
 
  1. </pre><pre name="code" class="html"><form action="/home/index" method="post"></form>  

转载于:https://www.cnblogs.com/888888CN/p/7147092.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值