在MVC中下拉列表

时间:2010-04-07 20:02:11

标签: asp.net-mvc

我想做以下事情:

1:在register.aspx中添加两个下拉列表[Say ddlRole,ddlGender]

2:填写下拉列表[ddlRole应该从数据库中填充,而ddlRole应该有两个静态字段]

3:在提交时,我想获得两个下拉列表中的选定值。

请帮忙。

提前致谢。

1 个答案:

答案 0 :(得分:7)

嗯,你的问题有点“你能告诉我如何搭建班车吗?”。但我会试着向你展示一个可以帮助你的小例子(我真的很希望)

首先,如果您想在页面上获得下拉菜单,则需要创建它。

就MVC而言,您需要创建一个View。 该视图是MVC样式的aspx页面

下面是一个例子:

    <%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<h2>Register</h2>

这是一个简单的空白页面。

让我们用下拉菜单填写。

<h2>Register</h2>
<%= Html.DropDownList("ddlRole") %>
<%= Html.DropDownList("ddlGender") %>

好。现在,是时候让系统显示我们的View了。 要做到这一点,我们需要一个电机。就MVC而言,它称为Controller。

使用以下方法创建一个类:

public class SetupController : Controller
{
        public ActionResult Register( )
        {
            return View();
        }
}

如果您现在尝试启动该页面,您应该会看到两个下拉列表。 不幸的是,他们将是空的。 显然它们是空的,因为你没有告诉如何填充它们。

控制器的主要用途是连接包含应该处理并在视图侧显示的所有数据的模型。换句话说,控制器从模型(M)获取数据,准备并发送到视图(V)。

因此,首先我们需要调整控制器,因此它会告诉视图有关下拉内容的信息。 最简单的方法是使用ViewData集合:

public ActionResult Register( )
        {
            ViewData["ddlRole"] = new[] {
                                             new SelectListItem() {Text = "Customer", Value = "Customer"},
                                             new SelectListItem() {Text = "Supervisor", Value = "Supervisor"},
                                             new SelectListItem() {Text = "Admin", Value = "Admin"},
                                         };
            ViewData["ddlGender"] = new[]{
                                             new SelectListItem() {Text = "Male", Value = "Male"},
                                             new SelectListItem() {Text = "Female", Value = "Female"}
                                         };
            return View();
        }

从这个例子中可以看出,我动态地为下拉列表创建了内容。 在您的情况下,您可以使用数据库根据需要填写下拉列表。

如果您现在尝试打开页面,您会看到您的下拉菜单现在已经填满了数据!

大!

如果你问,视图如何知道用于下拉列表的内容,我将回答MVC正在使用很多约定。其中一个惯例是当View生成其控件时,它通过等于控件名称的键(即“ddlRole”,“ddlGender”)查找该控件的内容。 由于您将该键的值放入ViewData,因此MVC很容易用文本填充您的下拉列表!

酷!

前进。

现在,我们需要从页面收集数据并将其发送回服务器。

我们需要什么?

当然,首先我们需要一个提交按钮:

<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage" %>


    <h2>Register</h2>
    <%= Html.DropDownList("ddlRole") %>
    <%= Html.DropDownList("ddlGender") %>

    <input type="submit" value="Register Me" />

再次在broser中打开页面。 凉!我们有按钮,但是,如果我们尝试点击它,就不会发生任何事情。

如果您正在考虑使用经典ASP.NET,您将告诉我们忘记在按钮提交上分配一个事件,编写代码隐藏代码并且bla ... bla..bla ...

在MVC中它有点不同。我们只需要将内容发送到服务器。 要做到这一点,通常您的页面上应该有一个“表单”标记:

<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<% using (Html.BeginForm("DoRegister", null)) { %>
<h2>Register</h2>
    <%= Html.DropDownList("ddlRole") %>
    <%= Html.DropDownList("ddlGender") %>
    <input type="submit" value="Register Me" />
<%  } %>

这个使用代码块将使用开始和结束“form”标签包装我们的标签。 这使得浏览器从表单内的所有输入(在我们的例子中是我们的dropdows)中收集信息,并从它们被打开的位置发回。

尝试在浏览器中打开它,然后单击按钮

哎呀,我们得到了一个例外。原因是我们忘记了规则。 我们打算做什么?我们希望将数据发送到我们的业务模型。 谁应该为此负责?当然它应该是一个控制器(C),因为它是Model(M)和View(V)之间唯一的连接器

让我们为同一个控制器添加新动作:

public ActionResult DoRegister(string ddlRole, string ddlGender)
    {
        ////store our ddlRole and ddlGender in the database
        /// ......
        /// .....

        return RedirectToAction("Welcome");
    }

在此示例中,一旦注册完成,它将重定向到“欢迎”操作。

要完成示例并避免错误,我们需要实现欢迎操作并查看:

将其添加到控制器:

public ActionResult Welcome( )
    {
        return View();
    }

为欢迎操作创建新视图(右键单击“欢迎”代码并选择“添加视图...”):

<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<h2>Welcome!</h2>

现在您将看到,单击该按钮后,它将显示欢迎操作执行的结果 - 欢迎页面。

最后一招 - 让我们将选定的下拉值发送到欢迎页面。

要做到这一点,我们首先需要将这些值存储在我们从服务器获取它的那一刻。 在您的情况下,您可以使用数据库,但为了使其更简单,我将使用特殊的TempData集合:

public ActionResult DoRegister(string ddlRole, string ddlGender)
        {
            ////store our ddlRole and ddlGender in the database
            /// ......
            /// .....

            TempData["SelectedRole"] = ddlRole;
            TempData["SelectedGender"] = ddlGender;

            return RedirectToAction("Welcome");
        }

接下来,让我们的欢迎页面显示TempData集合中的值:

<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<h2>Welcome you, the <%= TempData["SelectedRole"]%> of <%= TempData["SelectedGender"] %>!</h2>

运行它! 你看到了价值观吗? 是的,你做到了!

简单易行。

我希望本文能帮助您开始意识到ASP.NET MVC的优秀性。 但上面的代码只是冰山一角。 实际上MVC是非常有趣的。

如果您对获得更多相关知识感兴趣,我建议您阅读Steven Sanderson的APress“ASP.NET MVC框架”。 非常好的书,包含开始在MVC上编写自己的MVC应用程序的所有内容。

祝你好运!