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


 

 

 

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值