Html辅助方法 之 Form表单标签
一、Html.BeginForm <form>标签

//视图代码
@using (Html.BeginForm("search", "home", FormMethod.Get),new { target="_black",@class="form1" })
{
<input type="text" value="" />
}
//生成的HTML代码
<form action="/home/search" class="form1" method="get" target="_black">
<input type="text" value="" />
</form>

new里面的叫做htmlAttributes,能够设置本控件的HTML属性,至于class前面加个@是因为class在C#里是关键字。
二、Html.TextBox <input type="text" /> 标签
//视图代码
@Html.TextBox("Age", "23", new { @class="text1" })
//生成的HTML代码
<input class="text1" id="Age" name="Age" type="text" value="23" />
三、Html.TextArea <textarea>标签
//视图代码
@Html.TextArea("textarea1", "我是一个textarea", new { @class="text_style" })
//生成的HTML代码
<textarea class="text_style" cols="20" id="textarea1" name="textarea1" rows="2">
我是一个textarea
</textarea>
四、Html.Label <label>标签
//视图代码
@Html.Label("label1","你好")
//生成的HTML代码
<label for="label1">你好</label>
五、Html.DropDownList 仅允许单选<select>

//视图代码
@{
List<SelectListItem> list = new List<SelectListItem> { new SelectListItem { Text = "启用", Value = "0",Selected = true}, new SelectListItem { Text = "禁用", Value = "1" }
};
}
@Html.DropDownList("state",list,null,new{})
//生成的Html代码
<select id="state" name="state">
<option selected="selected" value="0">启用</option>
<option value="1">禁用</option>
</select>

六、Html.ListBox 允许多选的<select>

//视图代码为
@{
List<SelectListItem> list = new List<SelectListItem> {
new SelectListItem { Text = "启用", Value = "0",Selected = true},
new SelectListItem { Text = "禁用", Value = "1" }
};
}
@Html.ListBox("state",list)
//生成的HTML代码为
<select id="state" multiple="multiple" name="state">
<option selected="selected" value="0">启用</option>
<option value="1">禁用</option>
</select>

七、Html.Hidden <input type="hidden" />
//视图代码
@Html.Hidden("hidden1","我是一个隐藏域",new{});
//输出到浏览器的HTML代码
<input id="hidden1" name="hidden1" type="hidden" value="我是一个隐藏域" />;
八、Html.Password <input type="password" />
//视图代码
@Html.Password("password1", 123321, new { @class="class1" })
//生成的HTML代码为
<input class="class1" id="password1" name="password1" type="password" value="123321" />
九、Html.RadioButton <input type="radio" />

//视图代码
@Html.RadioButton("radio1",1,false)
@Html.RadioButton("radio1",2,false)
@Html.RadioButton("radio1",3,true)
//生成的HTML代码为
<input id="radio1" name="radio1" type="radio" value="1" />
<input id="radio1" name="radio1" type="radio" value="2" />
<input checked="checked" id="radio1" name="radio1" type="radio" value="3" />

十、Html.CheckBox <input type="checkbox" />

//视图代码
男人:@Html.CheckBox("check1", true, new { });
女人:@Html.CheckBox("check1", false, new { });
其它:@Html.CheckBox("check1", false, new { });
//生成的HTML代码为:
男人:<input checked="checked" id="check1" name="check1" type="checkbox" value="true" /><input name="check1" type="hidden" value="false" />;
女人:<input id="check1" name="check1" type="checkbox" value="true" /><input name="check1" type="hidden" value="false" />;
其它:<input id="check1" name="check1" type="checkbox" value="true" /><input name="check1" type="hidden" value="false" />;

十一、ActionLink <a>
@Html.ActionLink("列表页", "list")
//生成的HTML代码
<a href="/Home/list">列表页</a>
十二、自动绑定
N、辅助方法在构建UI的同时会帮助绑定到控件
例如:

//这是一个controller
public ActionResult Index()
{
ViewBag.Name = "张三";
return View();
}
//在视图里面有一个
@Html.TextBox("Name");
//浏览器中生成
<input id="Name" name="Name" type="text" value="张三" />

我们看到,在构建UI的时候,我们设置了一个ViewBag.Name,而同时视图里面又有一个TextBox("Name");在相同名称的情况下,MVC自动为我们绑定了数据。再来看一个:

//后端代码
public class Man
{
public string Name
{
get;
set;
}
}
public ActionResult Index()
{
ViewBag.man = new Man { Name = "张三" };
return View();
}
//视图代码
@Html.TextBox("man.Name")
//生成的HTML代码
<input id="man_Name" name="man.Name" type="text" value="" />

留意到,id的名称中的.已经变为下划线,这是以为"."在Id里面是不合法的,也是要留给javascript用的。
Html辅助方法 之 Form表单标签的更多相关文章
- 【HTML】--- 列表、表格、form表单标签
Html常用标签(2) 上篇博客讲了些常用的html标签 :[HTML]---常用标签(1) 这里主要讲 列表.表格标签和 form表单标签. 一.列表.表格标签 1.列表标签 概念 把内容以列表的形 ...
- 使用ajax方法实现form表单的提交(附源码)
写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...
- Unit 2.前端之html--table(表格),form(表单)标签
一.table标签 作用:定义html表格.一个table标签元素至少包含 thead(表头),tbody(表主题),还可以有tfoot(表底部) html表格游table元素及一个或者多个tr,th ...
- 使用ajax方法实现form表单的提交
作者:13 GitHub:https://github.com/ZHENFENG13 版权声明:本文为原创文章,未经允许不得转载. 写在前面的话 在使用form表单的时候,一旦点击提交触发submit ...
- HTML之form表单标签的学习
from表单 表示 <form>form表单域</form> 作用 收集并替提交用户数据给指定服务器 属性 action:收集的数据的提交地址(也就是URL) method:收 ...
- java:JavaScript2:(setTimeout定时器,history.go()前进/后退,navigator.userAgent判断浏览器,location.href,五种方法获取标签属性,setAttribute,innerHTML,三种方法获取form表单信息,JS表单验证,DOM对象,form表单操作)
1.open,setTimeout,setInterval,clearInterval,clearTimeout <!DOCTYPE> <html> <head> ...
- [转]SpringMVC<from:form>表单标签和<input>表单标签简介
原文地址:https://blog.csdn.net/hp_yangpeng/article/details/51906654 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标 ...
- HTML的<form>表单标签
表单 HTML 表单用于搜集不同类型的用户输入. ㈠Form标签 ⑴form标签简介 在HTML中,如果创建一个表单,就把各种表单标签放在<form></form>标签内部.我 ...
- HTML table、form表单标签的介绍
1. <table>标签 1.1说明: 在HTML 中定义表格布局. 1.2格式: <table> <caption></caption> <tr ...
随机推荐
- mysql Event、存储过程、表命令
Mysql事件调度器(Event Scheduler)类似于定时器,可以在某一个时间点执行一个SQL语句或一个语句块(BEGIN ... END):或者每隔固定间隔重复执行.类似于Linux下的cro ...
- 系统监控的工具tsar
近期一直在折腾着elasticsearch,需要对硬件进行评估 大概几方面 内存 cpu 硬盘 网络. iostat vmstat top 几个命令用了一堆,其实需要关注的几个点只要都列出来就可以了 ...
- opencart修改后台文件夹名
在使用opencart进行二次开发时,若需要修改后台目录的文件夹名是可以操作的.具体步骤如下: 1.将网站后台文件夹名字改成opencartadmin 2.在该文件夹下找到config.php文件如图 ...
- 技术小白:Hadoop 到底是啥?
原文地址:http://os.51cto.com/art/201305/396145.htm 大数据是个铺天盖地的词,而谈论大数据又不可避免地要提到Hadoop,遗憾的是今天大多数大数据鼓吹者,甚至专 ...
- Asp.net MVC 3 防止 Cross-Site Request Forgery (CSRF)原理及扩展 安全 注入
原理:http://blog.csdn.net/cpytiger/article/details/8781457 原文地址:http://www.cnblogs.com/wintersun/archi ...
- PHP批量审核后台
/*批量审核方法*/ function setOn_all() { if($_POST) { $p=M('news'); $data=array(); $i=0; foreach ($_POST as ...
- MySql 中的常见问题解决方法
一.关键字做字段 ,mssql的做法是[关键字],mysql的做法是 `关键字` ;ps:(` 是 tab键上面的一个按键) 二.mssql数据导入到mysql: 1.mssql导出insert语句( ...
- cStringIO模块例子
# Vorbis comment support for Mutagen # Copyright 2005-2006 Joe Wreschnig # # This program is free so ...
- 概率dp ZOJ 3640
Help Me Escape Time Limit:2000MS Memory Limit:32768KB 64bit IO Format:%lld & %llu Submit ...
- json返回数据拼接HTML
<div class="box-lists"> </div> $.ajax({ url: 'AjaxPage/AjaxHandler.ashx', typ ...