使用html扩展需要在webconfig中加
<pages>
<namespaces>
<add namespace="System.Web.Helpers" />
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Optimization" />
<add namespace="System.Web.Routing" />
<add namespace="System.Web.WebPages" />
</namespaces>
</pages>
常用html控件内容
a,lable,checkbox,dropdownlist,text,radio
这些用原始的html写法也是可以的,为什么还要扩展?
htmlhelper扩展是为了提高效率 从服务器生成代替了手动生成,而且维护性是很好,比如a标签href属性是根据路由来的。如果手写的a标签内容,那么路由一旦改变,所有手写的a标签要去改href内容,而html扩展是服务器生成会根据路由建立a标签
为什么可以用html.xxx 是因为htmlhelper是静态类 可以类.属性出来
1:链接扩展
@Html.ActionLink("显示文字", "方法, "控制器",new{参数},htmlAttributes:new{@class样式以及别的属性})
@Html.ActionLink("连接", "Index", "Home")
带参数的写法
@Html.ActionLink("连接", "Index", "Home", new { page=1 },null)
@Html.ActionLink("连接", "Index", new { page=1 })
带其它Html属性的写法
@Html.ActionLink("连接", "Index", "Home", new { id="link1" })
@Html.ActionLink("连接", "Index",null, new { id="link1" })
参数与Html属性同时存在
@Html.ActionLink("连接", "Index", "Home", new { page = 1 }, new { id = "link1" })
@Html.ActionLink("连接", "Index" , new { page = 1 }, new { id = "link1" })
对应:<a href='home/index?page=1' id='link1'>
2:checkbox扩展
@Html.CheckBox("id和name的名字",new{属性})
@Html.CheckBox("chk1", new { @class="checkBox"})
@Html.CheckBoxFor(a =>a.IsVaild, new { @class = "checkBox" })
对应:<input checked="checked" class="checkBox" id="IsVaild" name="IsVaild" type="checkbox" value="true" />
3:dropdownlist扩展
var data= bll.Getdata(); 下拉数据
data.Insert (0, new 类 { 列1= "-1", 列2= "select" }); 如果没有0行数据的 添加一个
ViewBag.data= new SelectList(data, "列1", "列2", "-1"); 第二个参数 是以哪个列作为value 三个参数为 哪个列当name 显示 第四个参数是表明默认以哪个value 默认加载时显示他的name
页面接收
@{
IEnumerable<SelectListItem> list=ViewBag.data;
}
赋值控件第二个参数
@Html.DropDownList("id和name", list, new { @class = "bs-select form-control input-small input-inline" })
@Html.DropDownList(data, null, new { @class = "bs-select form-control input-small input-inline" })
如果页面接收就采用第一种 命名id和name,数据集合,属性
如果页面不想接收可以直接第一个参数使用viewbag.名字的这个属性,第二个参数直接为null 这样data直接就是id和名字以及数据绑定viewbag.data
对应:<select class = "bs-select form-control input-small input-inline">
<option value="-1">select</option>
</select>
4:text扩展
@Html.TextBox("input2",Model.CategoryName,new{ @style = "width:300px;" })
@Html.TextBoxFor(a => a.CategoryName, new { @style = "width:300px;" })
@Html.TextArea("input5", Model.CategoryName, 3, 9,null)
@Html.TextAreaFor(a => a.CategoryName, 3, 3, null)
对应:<input id="CategoryName" name="CategoryName" style="width:300px;" type="text" value="123" />
<textarea cols="3" id="CategoryName" name="CategoryName" rows="3">123</textarea>
5:hidden扩展
@Html.HiddenFor(model => model.Id)
6:radio扩展
@Html.RadioButton("Gender","2",false)
@Html.RadioButton("Gender","1",true)
@Html.RadioButtonFor(model=>model.Gender,"1",true)
对应:
男<input checked="checked" id="Gender" name="Gender" type="radio" value="1" />
女<input id="Gender" name="Gender" type="radio" value="2" />
7:编码解码
@html.raw @html.Encode
8:其他
@Html.BeginForm()
9:dispalyfor 可以避免为空的情况
@Html.DisPlayFor(model=>model.newsName)可以避免 直接model.newsName 为空的判断错误情况
另外一般用于日期格式
日期格式
首先可以在model注解加格式
[DisplayFormat(DataFormatString = "{0:yyyy/MM/dd}")]
public DateTime dGrantDate { get; set; }
然后在页面上调用
@Html.DisplayFor(n => n.dGrantDate ) 就会出现对应的格式
或者日期格式用
@Html.TextBoxFor(model => model.dBirthDate, new { Value = String.Format("{0:yyyy/MM/dd}", Model.dBirthDate), @onclick = "WdatePicker()" })