第006课:ASP.NET MVC4 View层_Razor操作Html元素

1 常用Html标签

 

1.1 Label

Html语法:<label for="UserName">用户名</label>

Razor语法:@Html.LabelFor(m => m.UserName)
 

1.2 <input type="text" />

Html语法

<input  id="UserName" name="UserName" type="text" value="" />

Razor语法: 
@Html.TextBoxFor(m => m.UserName)

1.3 <input type="hidden" />

Html语法

<input id="UserName" name="UserName" type="hidden" value="" />

Razor语法: 
@Html.TextBoxFor(m => m.UserName)
 

1.4 <input type="password" />标签

Html语法

<input id="UserPass" name="UserPass" type="PasswordFor" value="" />

Razor语法: 
@Html.PasswordFor(m => m.UserPass)
 

1.5 <input type="radio" />标签

Html语法

<input id="Sex0" name="Sex" type="radio" value="0" /> 男
<input id="Sex1" name="Sex" type="radio" value="1" /> 女
<input id="Sex2" name="Sex" type="radio" value="2" /> 保密
Razor语法: 

@Html.RadioButtonFor(m=> m.Sex, 0, new { @id = "Sex0"}) 男

@Html.RadioButtonFor(m=> m.Sex, 1, new { @id = "Sex1"}) 女

@Html.RadioButtonFor(m=> m.Sex, 2, new { @id = "Sex2"}) 保密

 

1.6 <input type="checkbox" />标签

Html语法

<input id="RememberMe" name="RememberMe" type="checkbox" value="true" />
Razor语法: 
@Html.PasswordFor(m => m.UserPass)
 

2 链接地址

@Url.Content()

@Url.Action

 

2.1 引用CSS样式文件

Html语法

<link href="/Content/style.css" />
Razor语法: 
<link href="@Url.Content("~/Content/style.css")" />
 

2.2 引用Javascript文件

Html语法

<script src="/Content/jquery.js"></script>
Razor语法: 
<script src="@Url.Content("~/Content/jquery.js")"></script>
 

2.3 Image引用图片文件

Html语法

<img src="/Content/images/1.jpg" />
Razor语法: 
<script src="@Url.Content("~/Content/images/1.jpg")"></script>
 

2.4 超链接

Html语法

<a href="/Register">注册</a>
Razor语法: 
@Html.ActionLink("注册", "Register")
注:@Html.ActionLink有多个重载,具体参照MSDN API文档

 

3 表单

3.1 正常提交表单

@using(Html.BeginForm()){

//默认提交到本页面

<input type="submit" value="Button"/>

}

3.2 Ajax提交表单

@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId="txtResult" }))
{
        <input type="submit" value="Button"/>            
        <span id="txtResult"/>

第006课:ASP.NET MVC4 View层_Razor操作Html元素,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。