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

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

第一部分：基础知识

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

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

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

[html] view plain copy

@{
ViewBag.Title = "用户注册";
Layout = "~/Views/Shared/_Layout.cshtml";
}

和

[html] view plain copy

@Html.EditorFor(model => model.UserName)
@Html.ValidationMessageFor(model => model.UserName)
@Html.DisplayDescriptionFor(model => model.UserName)

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

[html] view plain copy

@{
var greeting = "Welcome to our site!";

[html] view plain copy

var weekDay = DateTime.Now.DayOfWeek;
var greetingMessage = greeting + " Today is: " + weekDay; }

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

[html] view plain copy

hello, @greeting

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

如@var i=10;

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

[html] view plain copy

text@i text 将输出 text@i text

[html] view plain copy

text@itext 将输出 text@itext

[html] view plain copy

text @itext 将报错

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

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

[html] view plain copy

@{
if(){}
else{}
}

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

[html] view plain copy

@{

[html] view plain copy

text

[html] view plain copy

<div>div1</div>
}

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

[html] view plain copy

@
{
@：this is a text
@：this is another text
}

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

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

[html] view plain copy

@{
<text>
this is a text
this is another text
</text>
}

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

8.使用注释

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

单行注释使用// 如：

[html] view plain copy

@
{
//这是一条注释
}

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

[html] view plain copy

@{
@*注释
注释
注释*@
/*注释
注释
注释*/
}

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

[html] view plain copy

@{

[html] view plain copy

}

输出: >

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

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

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

例子如下：

@{
var i = “10”; }
 i = @i.AsInt()

}

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

[html] view plain copy

@for(int i=1;i<4;i++)
{
@:@i
}

当然这样也可以：

[html] view plain copy

@
{
for(int i=1;i<4;i++)
{
@:@i
}
}

第二部分：htmlhelper

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

[html] view plain copy

@Html.TextBoxFor(model => model.VerificationCode)
@Html.ValidationMessageFor(model => model.VerificationCode)

这类代码。后面查了查，这类代码均叫做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

@Html.RouteLink("关于","about")

[html] view plain copy

@Html.RouteLink("关于","about",new{page=1})

[html] view plain copy

@Html.RouteLink("关于","about",new{page=1},new{id=1}）

[html] view plain copy

分别生成的是

[html] view plain copy

<a href="当前控制页/about">关于</a>

[html] view plain copy

<a href="当前控制页/about?page=1">关于</a>

[html] view plain copy

<a href="当前控制页/about?page=1" id="link1">关于</a><pre name="code" class="html">="当前控制页/about?page=1">关于</a>

[html] view plain copy

="当前控制页/about?page=1">关于</a><pre name="code" class="html">="当前控制页/about?page=1">关于</a>

2.Form的2种用法

第一种：

[html] view plain copy

@using(Html.BeginForm("Actionname","Controlername",Formmethod)){}

比如

[html] view plain copy

@using(Html.BeingForm("Index","Home",FormMethod.Post)){
}

第二种：

[html] view plain copy

@Html.BeginForm("Index","Home",FormMethod.Post)
/*此处书写代码*/
@Html.EndForm()

这两种方法生成的结果都是一样的，都是：

[html] view plain copy

</pre><pre name="code" class="html"><form action="/home/index" method="post"></form>

秒客网

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

相关文章