ASP.NET MVC4使用Html.DropDownList和Html.BeginForm

要在頁面顯示下拉式清單，可以直接使用Html的<select>元素呈現，如下： 

<select id="selectedArea">       <option value="-1">--請選擇--</option>       <option value="1">北京</option>       <option value="2">上海</option>       <option value="3">廣州</option>       <option value="4">深圳</option>       <option value="5">天津</option></select>

在ASP.NET MVC中，我們可以使用@Html.DropDownList來建立一個下拉式清單。

在Controller中資料準備如下：

//擷取使用者能夠看到的地區資訊List<DeptInfo> deptList = TheAppUtil.GetAreasByLoginName(loginName);//為前台頁面DropDownList準備的資料List<SelectListItem> deptSelectItems = new List<SelectListItem>();deptSelectItems.Add(new SelectListItem() { Text = "請選擇", Value = "-1", Selected = true });foreach (DeptInfo d in deptList){    SelectListItem item = new SelectListItem();    item.Text = d.DeptName;    item.Value = d.DeptID.ToString();    item.Selected = false;    deptSelectItems.Add(item);}ViewData["deptSelectItems"] = deptSelectItems;//-----end-----

在Controller中，建立了一個List<SelectListItem>對象deptSelectItems，在deptSelectItems中填充SelectListItem類型的對象資料。SelectListItem對象的建立可以使用以上示範的兩種方式來進行。資料準備完成之後，就可以將deptSelectItems對象存到ViewData中，供視圖使用。

在前端cshtml頁面中代碼如下：

    var deptSelectItems = (List<SelectListItem>)ViewData["deptSelectItems"];        <ul data-role="listview" data-inset="true">        <li data-role="list-divider">選擇地區</li>        <li data-role="list-divider">            @Html.DropDownList("selectedArea2", deptSelectItems)        </li>    </ul>

如下：

 

Html.BeginForm使用也比較簡單，在cshtml寫如下代碼即可：

@using (Html.BeginForm()){     //Html元素}

將需要提交的控制項放在“{ }”範圍中即可。如下，給BeginForm設定參數：

@using (Html.BeginForm("Index", "Login", FormMethod.Get)){    <ul data-role="listview" data-inset="true">        <li data-role="list-divider">請選擇地區</li>        <li data-role="list-divider">              @Html.Label("使用者名稱")              @Html.TextBox("UserName")        </li>        <li data-role="list-divider">              @Html.Label("密碼")              @Html.TextBox("Password")        </li>        <li data-role="fieldcontain">            <input type="submit" value="登入" />        </li>    </ul>}

在控制端LoginController中定義如下的方法即可：

該方法採用的是最簡單的GET方式處理請求。當然，實際中會使用UserModel類作為POST資料來請求，這裡僅僅為了簡單的實驗一下Html.BeginForm的用法

[HttpGet]public ActionResult Login(String userName, String password){        //執行登入        User user = LoginService.Login(userName, password);        //登入成功        if(user != null)        {               //使用者登入名稱存入Session中               Session["LOGIN_USER"] = user.UserName;               //登入成功，轉到首頁               return View("../Home/Index");        }        //返回登入頁面        return View("Login");}

看看登入介面吧，使用ASP.NET MVC4的預設CSS樣式：