首页 > 代码库 > ASP.NET MVC4 View层_Razor操作Html元素
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=http://www.mamicode.com/"0" /> 男<input id="Sex1" name="Sex" type="radio" value=http://www.mamicode.com/"1" /> 女<input id="Sex2" name="Sex" type="radio" value=http://www.mamicode.com/"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=http://www.mamicode.com/"true" />
Razor语法:
@Html.PasswordFor(m => m.UserPass)
2 链接地址
@Url.Content()
@Url.Action
2.1 引用CSS样式文件
Html 语法 :
<link href=http://www.mamicode.com/"/Content/style.css" />
Razor语法:
<link href=http://www.mamicode.com/"@Url.Content("~/Content/style.css")" />
2.2 引用Javascript文件
Html 语法 :
<script src=http://www.mamicode.com/"/Content/jquery.js"></script>
Razor语法:
<script src=http://www.mamicode.com/"@Url.Content("~/Content/jquery.js")"></script>
2.3 Image引用图片文件
Html 语法 :
<img src=http://www.mamicode.com/"/Content/images/1.jpg" />
Razor语法:
<script src=http://www.mamicode.com/"@Url.Content("~/Content/images/1.jpg")"></script>
2.4 超链接
Html 语法 :
<a href=http://www.mamicode.com/"/Register">注册</a>
Razor语法:
@Html.ActionLink("注册", "Register")
注:@Html.ActionLink有多个重载,具体参照MSDN API文档
3 表单
3.1 正常提交表单
@using( Html .BeginForm()){
//默认提交到本页面
<input type="submit" value="http://www.mamicode.com/Button"/>
}
3.2 Ajax提交表单
@using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId="txtResult" }))
{
<input type="submit" value="http://www.mamicode.com/Button"/>
<span id="txtResult"/>
}
ASP.NET MVC4 View层_Razor操作Html元素