這一篇,簡單記錄下利用Html輔助器生成的常用Web控件。
一.TextBox控件
1.Html.TextBox()
先介紹使用該方法生成文本框,從定義上看,默認有4種方法供我們重載,下面每種我都試一下:
@using HtmlSampleApp.MyManagers;
@model HtmlSampleApp.Models.Sheep
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
@{
@Html.TextBox("text1");
<br />
@Html.TextBox("text2", "Hello~");
<br />
@Html.TextBox("text3", "world", new { id = "mytext1", maxlength = "15", size = "20", background = "Red" });
<br />
var dic = new Dictionary<string, object>();
dic.Add("key1", new { id = "mytext2", maxlength = "15", size = "20", style = "background-color:#FFCCFF", onfocus = "this.value=\"\"" });
@Html.TextBox("text4", "Merry", dic["key1"]);
}
生成的網頁如下:
源碼:
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
</head>
<body>
<h2>Index</h2>
<input id="text1" name="text1" type="text" value="" /> <br />
<input id="text2" name="text2" type="text" value="Hello~" /> <br />
<input background="Red" id="mytext1" maxlength="15" name="text3" size="20" type="text" value="world" /> <br />
<input id="mytext2" maxlength="15" name="text4" οnfοcus="this.value=""" size="20" style="background-color:#FFCCFF" type="text" value="Merry" />
</body>
</html>
2.Html.TextBoxFor<TModel,TProperty>
同樣 ,該方法也有三個重載,這裏都試驗一下:
@using HtmlSampleApp.MyManagers;
@model HtmlSampleApp.Models.Sheep
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
@{
@Html.TextBoxFor(m => m.name);
<br />
@Html.TextBoxFor(m => m.name, new { style = "background-color:blue" });
<br />
var dic = new Dictionary<string, object>();
dic.Add("key1", new { id = "mytext2", maxlength = "15", size = "20", style = "background-color:#FFCCFF", onfocus = "this.value=\"\"" });
@Html.TextBoxFor(m => m.name, dic["key1"]);
}
運行結果:
查看源碼:
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
</head>
<body>
<h2>Index</h2>
<input id="name" name="name" type="text" value="Tom" /> <br />
<input id="name" name="name" style="background-color:blue" type="text" value="Tom" /> <br />
<input id="mytext2" maxlength="15" name="name" οnfοcus="this.value=""" size="20" style="background-color:#FFCCFF" type="text" value="Tom" />
</body>
</html>
總結:
1)Html.TextBox方法可以自動生成textBox的id,name屬性,屬性值爲首參數值。或生成value屬性,屬性值爲第二參數值,或生成其它屬性及值,對應第三參數;
2)Html.TextBoxFor方法可以自動生成textBox的id,name屬性,屬性值爲首參數返回的屬性名,而不是屬性值(如上面的是Sheep的name屬性,而不是name的屬性值Tom).
生成value屬性,屬性值爲首參數返回的屬性的值(如上面的Tom).其它屬性及值,對應第二參數。
注意兩種方法的其它屬性裏如果包含了id或name,value參數,會覆蓋首參數定義的值。即如果首參數定義了id=“id1”,而object attribute定義了id=“id2”,那麼id2會覆蓋id1.
二.DropDownList控件
其實,網頁中的dropdownlist也就是<select>標籤,如:
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"/>
</head>
<body>
<h2>Index</h2>
<select id="dropdownlist1" name="dropdownlist1">
<option>item---------1</option>
<option>item---------2</option>
<option selected="selected">item---------3</option>
</select>
</body>
</html>
它的實際效果是一個下拉框裏有3個選項,默認是選中第三個:
同樣,可以使用Html.DropDownList及HtmlDropDownList<>方法實現:
1)Html.DropDownList方法
從定義上看,目前默認有8中重載方式,下面取其中具有代表性的方法試驗一下,其它大同小異:
@using HtmlSampleApp.MyManagers;
@model HtmlSampleApp.Models.Sheep
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
@{
@Html.DropDownList("dropdownlist3",
new List<SelectListItem>()
{
new SelectListItem { Text="item---------1"},
new SelectListItem { Text="item---------2"},
new SelectListItem { Text="item---------3",Selected=true},
});
@Html.DropDownList("dropdownlist4",
new List<SelectListItem>()
{
new SelectListItem { Text="item---------1"},
new SelectListItem { Text="item---------2"},
new SelectListItem { Text="item---------3",Selected=true}
},
new { style = "background-color:#FFB5C5" });
@Html.DropDownList("dropdownlist5",
new List<SelectListItem>()
{
new SelectListItem { Text="item---------1"},
new SelectListItem { Text="item---------2"},
new SelectListItem { Text="item---------3",Selected=true}
},
"Hello,World~",new { style = "background-color:#7B68EE" });
}
運行:
對應生成的網頁源碼:
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"/>
</head>
<body>
<h2>Index</h2>
<select id="dropdownlist3" name="dropdownlist3">
<option>item---------1</option>
<option>item---------2</option>
<option selected="selected">item---------3</option>
</select>
<select id="dropdownlist4" name="dropdownlist4" style="background-color:#FFB5C5">
<option>item---------1</option>
<option>item---------2</option>
<option selected="selected">item---------3</option>
</select>
<select id="dropdownlist5" name="dropdownlist5" style="background-color:#7B68EE">
<option value="">Hello,World~</option>
<option>item---------1</option>
<option>item---------2</option>
<option selected="selected">item---------3</option>
</select>
</body>
</html>
將View代碼對比一下網頁源碼,即可知id,name的屬性值是由該方法首參數而來,其中下拉框中的項目值是由集合參數而來。
2)Html.DropDownList<TModel,TProperty>方法
該方法跟上面的差不多,只不過支持強類型,首參數變成了Func<>,參考上面的TextBoxFor用法。
關於其它的控件如:CheckBox,RadiuButton等用法和上面的基本類似,都可以參考以上用法。詳見MSDN中HtmlHelper擴展方法:點擊打開鏈接