MVC基礎知識整理（三）HTML輔助方法的反填

文本框的反填

• 前臺代碼，輔助方法實現文本框

@model UI.Models.HtmlViewModel
@using (Html.BeginForm("Index","Html",FormMethod.Post))
{
    @Html.TextBoxFor(m=>m.Name) 
}
複製代碼

• 後臺代碼，實例化一個視圖模型，給其賦值，返回視圖

public ActionResult Index() {
    HtmlViewModel mod = new HtmlViewModel();
    mod.Name = "張三";
    return View(mod)
} 
複製代碼

• 網頁樣式

單選按鈕的反填

• 前臺代碼，輔助方法實現單選按鈕

@model UI.Models.HtmlViewModel
@using (Html.BeginForm("Index","Html",FormMethod.Post))
{
   @Html.RadioButtonFor(m=>m.Sex ,true)   
   @Html.RadioButtonFor(m=>m.Sex ,false) 
}
複製代碼

• 後臺代碼，實例化一個視圖模型，給其賦值，返回視圖

public ActionResult Index() {
    HtmlViewModel mod = new HtmlViewModel();
    mod.Sex = true;
    return View(mod)
} 
複製代碼

• 網頁樣式

複選框和下拉框比較發雜，得在控制器建立 List<SelectListItem> 集，給其添加value和text值，在ViewBan.list傳遞到視圖頁面

複選框的反填

建一個SelectListItem的集合，根據其具備的Value,Text,Selected的屬性，來建立複選框，和給複選框賦值

• 前臺代碼，輔助方法實現複選框

@model UI.Models.HtmlViewModel
@using (Html.BeginForm("Index","Html",FormMethod.Post))
{
 @foreach (var item in @ViewBag.chexklist)
{
    <input name="Hobby" type="checkbox" value="@item.Value" checked="@item.Selected" />@item.Text
}
}
複製代碼

• 後臺代碼,實例化一個視圖模型，給其賦值，返回視圖

public ActionResult Index() {
   hobby = "1,2";
   string[] hobbyArry = hobby.Split(',');
   List<SelectListItem> chexk = new List<SelectListItem>()
   {
       new SelectListItem{Value="0" ,Text="登山",Selected=hobbyArry.Contains("0")},
       new SelectListItem{Value="1" ,Text="游泳",Selected=hobbyArry.Contains("1")},
       new SelectListItem{Value="2" ,Text="學習",Selected=hobbyArry.Contains("2")}
   };
   ViewBag.chexklist = chexk;
    return View(mod)
} 

複製代碼

• 網頁樣式

下拉框的反填

建一個SelectListItem的集合，根據其具備的Value,Text的屬性，來建立下拉框

• 前臺代碼，輔助方法實現複選框

@model UI.Models.HtmlViewModel
@using (Html.BeginForm("Index","Html",FormMethod.Post))
{
 @Html.DropDownListFor(m => m.country, @ViewBag.country as SelectList)
}
複製代碼

• 後臺代碼,實例化一個視圖模型，給其賦值，返回視圖

public ActionResult Index() {
   HtmlViewModel mod = new HtmlViewModel();
   List<SelectListItem> country = new List<SelectListItem>()
{
   new SelectListItem{ Value="",Text="請選擇"},
   new SelectListItem{ Value="1",Text="中國"},
   new SelectListItem{ Value="2",Text="美國"},
   new SelectListItem{ Value="3",Text="韓國"},
};
    ViewBag.country = country;
    mod.country = "1";
    return View(mod)
} 

複製代碼

• 網頁樣式

複選框和下拉框比較發雜，得在控制器建立 List<SelectListItem> 集，給其添加value和text值，在ViewBan.list傳遞到視圖頁面