要在页面显示下拉列表,可以直接使用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样式: