ASP.NET MVC CheckBoxList 实现示例

ASP.NET MVC中,CheckBoxList控件是一种常见的用户界面元素,用于允许用户从一组选项中选择多个值。本文将通过一个具体的例子,展示如何在ASP.NET MVC项目中实现CheckBoxList控件。

创建数据模型

首先,需要创建一个数据模型来从数据库中检索数据。在这个例子中,将使用名为tblCity的表。以下是创建tblCity表及其数据插入的SQL脚本:

CREATE TABLE tblCity ( ID INT IDENTITY PRIMARY KEY, Name NVARCHAR(100) NOT NULL, IsSelected BIT NOT NULL ); INSERT INTO tblCity VALUES ('London', 0); INSERT INTO tblCity VALUES ('New York', 1); INSERT INTO tblCity VALUES ('Sydney', 1); INSERT INTO tblCity VALUES ('Mumbai', 0); INSERT INTO tblCity VALUES ('Cambridge', 0);

目标是生成一个用户界面,允许用户选择一个或多个城市,然后点击提交按钮。如果用户没有选择任何城市,将显示一条消息提示用户。

添加ADO.NET数据模型

按照以下步骤添加ADO.NET数据模型

  1. 右键点击项目中的Models文件夹,选择Add -> Add New Item。
  2. 在Add New Item对话框中,选择ADO.NET Entity Data Model。
  3. 设置Name为SampleDataModel.edmx,然后点击Add。
  4. 在Entity Data Model Wizard中,选择Generate from database,然后点击Next。
  5. 勾选Save entity connection settings in Web.Config as复选框。
  6. 输入SampleDBContext作为连接字符串名称,然后点击Next。
  7. 在下一个屏幕中,展开Tables并选择tblCity表。
  8. 在Model Namespace文本框中输入Models,然后点击Finish。

点击Finish按钮后,将创建一个模型,并且Web.config文件中也会自动添加一个连接字符串。

添加视图和编辑器模板

接下来,需要添加一个视图和编辑器模板。按照以下步骤操作:

  1. 右键点击Views文件夹,添加一个名为Home的文件夹。
  2. 再次右键点击Home文件夹,添加一个名为EditorTemplates的文件夹。
  3. 右键点击EditorTemplates文件夹,选择Add -> View。
  4. 在Add View对话框中,设置View Name为tblCity,View Engine为Razor,Model class为tblCity(MVCDemo.Models),然后点击Add。

在tblCity.cshtml文件中,复制并粘贴以下代码:

@model MVCDemo.Models.tblCity @{ ViewBag.Title = "City"; } @Html.HiddenFor(x => x.ID) @Html.HiddenFor(x => x.Name) @Html.CheckBoxFor(x => x.IsSelected) @Html.DisplayFor(x => x.Name)

这段代码定义了一个编辑器模板,用于显示每个城市的复选框和名称。

编写控制器

现在,需要编写一个控制器来处理用户的请求。按照以下步骤添加HomeController:

  1. 右键点击Controllers文件夹,添加一个名为HomeController的类。
  2. 在HomeController中包含以下命名空间:
using MVCDemo.Models; using System.Text;

在HomeController中复制并粘贴以下代码:

[HttpGet] public ActionResult Index() { SampleDBContext db = new SampleDBContext(); return View(db.Cities); } [HttpPost] public string Index(IEnumerable<tblCity> cities) { if (cities.Count(x => x.IsSelected) == 0) { return "You have not selected any City"; } else { StringBuilder sb = new StringBuilder(); sb.Append("You selected – "); foreach (tblCity city in cities) { if (city.IsSelected) { sb.Append(city.Name + ", "); } } sb.Remove(sb.ToString().LastIndexOf(", "), 1); return sb.ToString(); } }

这段代码定义了两个Index方法,一个用于处理GET请求,显示所有城市;另一个用于处理POST请求,处理用户的选择并显示结果。

添加主视图

最后,需要添加一个主视图来显示所有城市和提交按钮。按照以下步骤操作:

  1. 右键点击HomeController中的Index方法,选择Add View。
  2. 在Add View对话框中,设置View Name为Index,View Engine为Razor,然后点击Add。

在Index.cshtml文件中,复制并粘贴以下代码:

@model IEnumerable<MVCDemo.Models.tblCity> @{ ViewBag.Title = "Index"; } <div style=”font-family:Arial”> <h2> Index </h2> @ using (Html.BeginForm()) { @Html.EditorForModel() <br /> <input type=”submit” value=”Submit” /> } </div>

这段代码定义了一个主视图,用于显示所有城市的复选框和提交按钮。

运行应用程序

现在,可以运行应用程序并看到以下界面:

当选择一些城市,比如New York和Sydney,然后点击提交按钮,将显示以下消息:

You selected – New York, Sydney

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485