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样式：