ASP.NET MVC联动下拉框实现：省市区数据绑定示例

"ASP.NET MVC下拉框联动实例解析，通过ADO.NET实现省市区联动效果" 在ASP.NET MVC框架中，开发人员经常需要处理用户界面中的交互功能，例如下拉框的联动。本实例将详细讲解如何创建两个下拉列表（DropDownList），实现选择省份后自动加载对应城市的联动效果。我们将使用ADO.NET来操作数据库，而不是Entity Framework。 首先，我们需要创建一个数据库来存储省份和城市数据。在SQL Server中，可以使用以下SQL语句来创建名为`MyAddressDB`的数据库以及`Province`和`City`两个表： ```sql USE master; GO IF EXISTS (SELECT * FROM sysdatabases WHERE name='MyAddressDB') DROP DATABASE MyAddressDB; GO CREATE DATABASE MyAddressDB; GO USE MyAddressDB; GO IF EXISTS (SELECT * FROM sysobjects WHERE name='Province') DROP TABLE Province; GO CREATE TABLE Province ( ProvinceID INT IDENTITY(1,1) PRIMARY KEY, ProvinceName NVARCHAR(50) NOT NULL ); IF EXISTS (SELECT * FROM sysobjects WHERE name='City') DROP TABLE City; GO CREATE TABLE City ( CityID INT IDENTITY(1,1) PRIMARY KEY, CityName NVARCHAR(50) NOT NULL, ProvinceID INT REFERENCES dbo.Province(ProvinceID) NOT NULL ); ``` 接下来，我们需要插入一些测试数据。在这个例子中，数据是从一个名为`Temp.dbo.S_Province`和`Temp.dbo.S_City`的临时表中获取的，并插入到`Province`和`City`表中： ```sql INSERT INTO dbo.Province SELECT ProvinceName FROM Temp.dbo.S_Province; INSERT INTO dbo.City (CityName, ProvinceID) SELECT CityName, ProvinceID FROM Temp.dbo.S_City; ``` 为了在ASP.NET MVC应用中实现联动效果，我们需完成以下步骤： 1. 模型（Model）：创建对应的模型类，如`Province`和`City`，它们将与数据库表相对应。每个模型类应包含属性，例如`ProvinceID`、`ProvinceName`、`CityID`和`CityName`。 2. 控制器（Controller）：创建一个控制器，比如`AddressController`，其中包含两个动作方法，一个用于获取所有省份（`GetProvinces`），另一个用于根据省份ID获取城市（`GetCitiesByProvinceId`）。这两个方法使用ADO.NET连接数据库并返回数据。 3. 视图（View）：创建两个`DropDownList`，一个用于省份，一个用于城市。使用`@Html.DropDownListFor`辅助方法创建下拉列表，并在JavaScript或jQuery中设置事件监听器。当省份选择项改变时，发送异步请求到`GetCitiesByProvinceId`方法，获取新数据并更新城市下拉列表。 例如，在`Address`视图中，你可以这样设置`DropDownList`： ```html @model YourNamespace.Models.AddressViewModel @using (Html.BeginForm()) { @Html.DropDownListFor(m => m.SelectedProvinceId, Model.Provinces) @Html.DropDownListFor(m => m.SelectedCityId, Model.Cities, "请选择城市") <input type="submit" value="提交" /> } ``` 在JavaScript中，你可以使用jQuery的`change`事件和`$.ajax`来实现联动： ```javascript $(document).ready(function () { $('#SelectedProvinceId').on('change', function () { var provinceId = $(this).val(); if (provinceId) { $.ajax({ url: '@Url.Action("GetCitiesByProvinceId", "Address")', data: { id: provinceId }, success: function (cities) { var ddlCities = $('#SelectedCityId'); ddlCities.empty().append('<option value="">请选择城市</option>'); $.each(cities, function (index, city) { ddlCities.append($('<option></option>').val(city.Value).html(city.Text)); }); } }); } }); }); ``` 以上代码展示了如何使用ASP.NET MVC和ADO.NET实现省市区联动的基本流程。通过这种方式，用户选择省份后，系统会动态地加载并显示对应城市的列表，提供更友好的用户体验。