asp.net mvc5学习之旅之初识mvc5的辅助方法
写在前面
最近在研究asp.net,和html不同,asp.net在前端页面上提供了一套自己的辅助方法,本文就介绍一下常用的辅助方法基本使用,希望可以帮助那些还没有入门的同学,同时就当做个笔记吧。
ps:本文重点是讲的基本的使用,所以讲解的不是很深,后面文章会详细讲解的,比较适合有html基础但没有asp.net基础的同学
辅助方法列表
好吧,废话不多说,直接上代码。
Html.BeginForm
BeginForm就是我们html中的form表单。这里只讲一下基本用法,下一篇文章会详细讲解用法和细节等。
看一下重载:
常用的属性:
参数名 | 说明 |
---|---|
htmlHelper | 用this修饰,表示是HtmlHelper扩展方法,后面就不解释了,和本文关系不大 |
actionName | 方法名,通常是控制器中的具体方法的名称,例 HomeController中的Contact |
controllerNmae | 控制器名称,通常是你定义的控制器的名称,例 HomeController中的Home |
FormMethed | 用于处理窗体的 HTTP 方法(GET 或 POST) |
htmlAttributes | 一个对象,其中包含要为该元素设置的 HTML 特性,就是说我们设置这个控件的样式、行为等属性 |
ok,放一个例子,BeginForm定位到的是HomeController控制器下的Contact方法,并使用get方式请求
@using (Html.BeginForm("Contact", "Home", FormMethod.Get))
{
<input type="submit" value="submit" />
}
输出结果:
<form action="/Home/Contact" method="get" >
<input type="submit" value="登陆" />
</form>
Html.Label
Html.Label就是html中的标签。
重载:
常用属性:
参数名 | 说明 |
---|---|
expression | 一个表达式,用于标识要显示的属性 |
labelText | 要显示的文本内容 |
htmlAttributes | 一个对象,其中包含要为该元素设置的 HTML 特性,就是说我们设置这个控件的样式、行为等属性 |
例子:
@Html.Label("lbl", "请输入:")
输出结果:
<label for="lbl">请输入:</label>
Html.TextBox
Html.TextBox就是html中的textbox。
重载:
常用属性:
参数名 | 说明 |
---|---|
name | 名称,参考html中id和name |
value | 输入的值 |
format | 设置格式 |
htmlAttributes | 一个对象,其中包含要为该元素设置的 HTML 特性,就是说我们设置这个控件的样式、行为等属性 |
例子:
@Html.TextBox("username", "")
输出结果:
<input id="username" name="username" type="text" value="" />
Html.Password
Html.Password就是用于输入密码。
重载:
常用属性:
参数名 | 说明 |
---|---|
name | 名称,参考html中id和name |
value | 输入的值 |
format | 设置格式 |
htmlAttributes | 一个对象,其中包含要为该元素设置的 HTML 特性,就是说我们设置这个控件的样式、行为等属性 |
基本上和textbox相似,看个例子:
@Html.Password("password", "")
输出结果:
<input id="password" name="password" type="password" value="" />
Html.RadioButton
选择按钮,重载:
常用属性:
参数名 | 说明 |
---|---|
name | 名称,参考html中id和name |
value | 输入的值 |
format | 设置格式 |
ischeck | 是否选中 |
htmlAttributes | 一个对象,其中包含要为该元素设置的 HTML 特性,就是说我们设置这个控件的样式、行为等属性 |
例子:
@Html.Label("lb3", "学校")
@Html.RadioButton("rb1", "1") 男 //解释一下“1”是value值,就是传到后台的值,“男”是显示的值
@Html.RadioButton("rb1", "0") 女
输出结果:
<label for="lb3">学校</label>
<input id="rb1" name="rb1" type="radio" value="1" /> 男
<input id="rb1" name="rb1" type="radio" value="0" /> 女
Html.CheckBox
复选框,重载和radioButton差不多:
常用属性:
参数名 | 说明 |
---|---|
name | 名称,参考html中id和name |
value | 输入的值 |
ischeck | 是否选中 |
htmlAttributes | 一个对象,其中包含要为该元素设置的 HTML 特性,就是说我们设置这个控件的样式、行为等属性 |
例子:
@Html.Label("lb3", "爱好:")
@Html.CheckBox("cb1", false) 篮球
@Html.CheckBox("cb2", false) 跑步
@Html.CheckBox("cb3", false) 读书
输出结果:
<label for="lb3">爱好:</label>
<input id="cb1" name="cb1" type="checkbox" value="true" /><input name="cb1" type="hidden" value="false" /> 篮球
<input id="cb2" name="cb2" type="checkbox" value="true" /><input name="cb2" type="hidden" value="false" /> 跑步
<input id="cb3" name="cb3" type="checkbox" value="true" /><input name="cb3" type="hidden" value="false" /> 读书
Html.ListBox和Html.DropDownList
一个是列表 一个是下拉列表 就放在一起说了,看重载:
看一下属性:
参数名 | 说明 |
---|---|
name | 名称,参考html中id和name |
selectList | 就是数据源,一个集合 |
optionLabel | 下拉框默认值,不写的情况下为null |
htmlAttributes | 一个对象,其中包含要为该元素设置的 HTML 特性,就是说我们设置这个控件的样式、行为等属性 |
例子:
@Html.ListBox("lst1", ViewData["items"] as List<SelectListItem>, "请选择") //ViewData是框架提供的全局字典
@Html.DropDownList("ddl1", ViewData["items"] as List<SelectListItem>, "请选择")
输出结果:
<select Length="3" id="lst1" multiple="multiple" name="lst1">
<option value="1">男</option>
<option value="0">女</option>
</select>
<select id="ddl1" name="ddl1">
<option value="">请选择</option>
<option value="1">男</option>
<option value="0">女</option>
</select>
Html.ActionLink和Html.RouteLink
看到link,就可以联想到,这两个方法是链接,在使用上这两个方法类似,参考html中的a标签,直接上例子:
@Html.ActionLink("查看内容页", "Contact", "Home")
@Html.RouteLink("返回主页", new { Action = "../Home/Index" })
输出结果:
<a href="/Home/Contact">查看内容页</a>
<a href="/Home/Index">返回主页</a>
Html.Action
action是直接调用指定(控制器)的方法,并返回html形式的字符串。
例子:
//页面
<div >
@Html.Action("Contact", "Home", new { name = "小明" })
</div>
//控制器方法
//为了不产生干扰项,Contact中什么都不做
public ActionResult Contact(string name)
{
return View();//返回的是View/Home/Contact.cshtml视图
}
在浏览器中运行后,直接会在div中显示Contact.cshtml视图,其实就是发起了一个请求
Html.Partial
Partial方法是返回一个字符串形式的html,用来显示分部视图的,可以理解为一个用户控件的概念。
直接用例子说明:
///index.cshtml
<div>
@Html.Partial("_partialPage1", new ViewDataDictionary() { { "姓名", "小明" }, { "年龄", "18" } })
</div>
///新建一个_partialPage1视图,写入如下代码
@{
ViewBag.Title = "_partialPage1";
}
<h2>_partialPage1</h2>
<div>
@ViewData["姓名"];
@ViewData["年龄"];
</div>
//当运行index后 输出的结果如下:
<div>
<h2>_partialPage1</h2>
<div>
小明;
18;
</div>
</div>
可以发现,就是把_partialPage1的内容复制到了div中