码迷,mamicode.com
首页 > Web开发 > 详细

Html辅助方法 之 Form表单标签

时间:2015-05-31 18:21:40      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:

一、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表单标签

标签:

原文地址:http://www.cnblogs.com/feng-NET/p/4542292.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!