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

http://blog.csdn.net/zht666/article/details/8529646

要在页面显示下拉列表，可以直接使用Html的<select>元素呈现，如下： 

[html] view plain copy

1. <select id="selectedArea">  
2.        <option value="-1">--请选择--</option>  
3.        <option value="1">北京</option>  
4.        <option value="2">上海</option>  
5.        <option value="3">广州</option>  
6.        <option value="4">深圳</option>  
7.        <option value="5">天津</option>  
8. </select>  

在ASP.NET MVC中，我们可以使用@Html.DropDownList来创建一个下拉列表。

在Controller中数据准备如下：

[csharp] view plain copy

1. //获取用户能够看到的地区信息  
2. List<DeptInfo> deptList = TheAppUtil.GetAreasByLoginName(loginName);  
3.   
4. //为前台页面DropDownList准备的数据  
5. List<SelectListItem> deptSelectItems = new List<SelectListItem>();  
6. deptSelectItems.Add(new SelectListItem() { Text = "请选择", Value = "-1", Selected = true });  
7.   
8. foreach (DeptInfo d in deptList)  
9. {  
10.     SelectListItem item = new SelectListItem();  
11.     item.Text = d.DeptName;  
12.     item.Value = d.DeptID.ToString();  
13.     item.Selected = false;  
14.     deptSelectItems.Add(item);  
15. }  
16. ViewData["deptSelectItems"] = deptSelectItems;  
17. //-----end-----  

在Controller中，创建了一个List<SelectListItem>对象deptSelectItems，在deptSelectItems中填充SelectListItem类型的对象数据。SelectListItem对象的创建可以使用以上演示的两种方式来进行。数据准备完成之后，就可以将deptSelectItems对象存到ViewData中，供视图使用。

在前端cshtml页面中代码如下：

[html] view plain copy

1. var deptSelectItems = (List<SelectListItem>)ViewData["deptSelectItems"];  
2.   
3. <ul data-role="listview" data-inset="true">  
4.     <li data-role="list-divider">选择地区</li>  
5.     <li data-role="list-divider">  
6.         @Html.DropDownList("selectedArea2", deptSelectItems)  
7.     </li>  
8. </ul>  

效果图如下：

 

Html.BeginForm使用也比较简单，在cshtml写如下代码即可：

[html] view plain copy

1. @using (Html.BeginForm())  
2. {  
3.      //Html元素  
4. }  

将需要提交的控件放在“{ }”范围中即可。如下，给BeginForm设置参数：

[html] view plain copy

1. @using (Html.BeginForm("Index", "Login", FormMethod.Get))  
2. {  
3.     <ul data-role="listview" data-inset="true">  
4.         <li data-role="list-divider">请选择地区</li>  
5.         <li data-role="list-divider">  
6.               @Html.Label("用户名")  
7.               @Html.TextBox("UserName")  
8.         </li>  
9.         <li data-role="list-divider">  
10.               @Html.Label("密码")  
11.               @Html.TextBox("Password")  
12.         </li>  
13.         <li data-role="fieldcontain">  
14.             <input type="submit" value="登录" />  
15.         </li>  
16.     </ul>  
17. }  

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

该方法采用的是最简单的GET方式处理请求。当然，实际中会使用UserModel类作为POST数据来请求，这里仅仅为了简单的实验一下Html.BeginForm的用法

[csharp] view plain copy

1. [HttpGet]  
2. public ActionResult Login(String userName, String password)  
3. {  
4.         //执行登录  
5.         User user = LoginService.Login(userName, password);  
6.         //登录成功  
7.         if(user != null)  
8.         {  
9.                //用户登录名存入Session中  
10.                Session["LOGIN_USER"] = user.UserName;  
11.                //登录成功，转到主页  
12.                return View("../Home/Index");  
13.         }  
14.   
15.         //返回登录页面  
16.         return View("Login");  
17. }  

看看登录界面吧，使用ASP.NET MVC4的默认CSS样式：