ASPNET MVC下拉框联动实例解析.docx
《ASPNET MVC下拉框联动实例解析.docx》由会员分享，可在线阅读，更多相关《ASPNET MVC下拉框联动实例解析.docx（10页珍藏版）》请在冰豆网上搜索。
ASPNETMVC下拉框联动实例解析
ASP.NETMVC下拉框联动实例解析_
两个DropDownList的联动，选择其中一个DropDownList，然后加载数据到另外的一个DropDownList上
这里，我准备实现的需求是：
有两个DropDownList，一个默认加载全部的省份数据，然后，当我选择省份的时候，把对应的市的数据，绑定到另外一个DropDownList上面，即实现了联动。
好了，这里不准备用法EF了，换用ADO.NET。
首先新建好数据库，表：
USEmaster
GO
IFEXISTS（SELECT*FROMsysdatabasesWHEREname='MyAddressDB'）
DROPDATABASEMyAddressDB
GO
CREATEDATABASEMyAddressDB
GO
USEMyAddressDB
GO
IFEXISTS（SELECT*FROMsysobjectsWHEREname='Province'）
DROPTABLEProvince
GO
--省份表
CREATETABLEProvince
（
ProvinceIDINTIDENTITY（1,1）PRIMARYKEY,
ProvinceNameNVARCHAR（50）NOTNULL
）
IFEXISTS（SELECT*FROMsysobjectsWHEREname='City'）
DROPTABLECity
GO
--省份表
CREATETABLECity
（
CityIDINTIDENTITY（1,1）PRIMARYKEY,
CityNameNVARCHAR（50）NOTNULL,
ProvinceIDINTREFERENCESdbo.Province（ProvinceID）NOTNULL
）
--插入测试语句：
【在网上找了一个省市数据库，把里面的数据导入我当前数据库中】
--开头
INSERTINTOdbo.Province
SELECTProvinceNameFROMTemp.dbo.S_Province
INSERTINTOdbo.City
（CityName,ProvinceID）
SELECTCityName,ProvinceIDFROMTemp.dbo.S_City
--结束
--测试插入胜利与否
--SELECT*FROMdbo.Province
--SELECT*FROMdbo.City
然后新建一个空白的MVC项目，在Model文件夹下，添加两个实体：
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
namespaceJsonDataInMVC.Models
{
publicclassProvince
{
publicintProvinceID{get;set;}
publicstringProvinceName{get;set;}
}
}
--------------------------------------------------------
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
namespaceJsonDataInMVC.Models
{
publicclassCity
{
publicintCityID{get;set;}
publicstringCityName{get;set;}
publicintProvinceID{get;set;}
}
}
然后在根名目下，新建一个文件夹DBOperator，在里面新建一个AddressHelper类
AddRessHelper类中的代码：
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Configuration;
usingJsonDataInMVC.Models;
usingSystem.Data;
usingSystem.Data.SqlClient;
namespaceJsonDataInMVC.DBOperator
{
publicclassAddressHelper
{
///summary
///连接字符串
////summary
publicstringConnectionString
{
get
{
returnConfigurationManager.ConnectionStrings["DBConnectionString"].ConnectionString;
}
}
///summary
///猎取全部的省份
////summary
///returns/returns
publicListProvinceGetAllProvince（）
{
ListProvincelstProvince=newListProvince（）;
stringsql=@"SELECT*FROMdbo.Province";
//ADO.NET连接方式访问数据库
//1.创建连接对象[连接字符串]
SqlConnectionconn=newSqlConnection（ConnectionString）;
//2.创建指令对象
SqlCommandcmd=newSqlCommand（）;
cmd.CommandText=sql;
cmd.CommandType=CommandType.Text;
cmd.Connection=conn;
//3.打开连接
conn.Open（）;
//4.发送指令
SqlDataReaderreader=cmd.ExecuteReader（）;
//5.处理数据
while（reader.Read（））
{
lstProvince.Add（newProvince（）
{
ProvinceID=Convert.ToInt32（reader["ProvinceID"]）,
ProvinceName=reader["ProvinceName"].ToString（）
}）;
}
//6.关闭连接
conn.Close（）;
reader.Close（）;
returnlstProvince;
}
///summary
///通过ProvinceID猎取市的数据
////summary
///paramname="id"/param
///returns/returns
publicListCityGetCityListByProvinceID（intid）
{
DataSetds=newDataSet（）;
stringsql=@"SELECTCityID,CityNameFROMdbo.CityWHEREProvinceID=@ProvinceID";
//ADO.NET非连接方式访问数据库
//1.创建连接对象
SqlConnectionconn=newSqlConnection（ConnectionString）;
//2.创建数据适配器对象
SqlDataAdaptersda=newSqlDataAdapter（sql,conn）;//这里还真必需这样写。
不能像下面的两条说明语句那样写。
//sda.SelectCommand.Connection=conn;
//sda.SelectCommand.CommandText=sql;
sda.SelectCommand.CommandType=CommandType.Text;
sda.SelectCommand.Parameters.AddWithValue（"@ProvinceID",id）;//参数设置别忘了
//3.打开连接【留意，非链接模式下，连接的打开关闭，无所谓，不过还是打开好点。
规范化】
conn.Open（）;
//4.发送指令
sda.Fill（ds）;
//5.处理数据
//6关闭连接【【留意，非链接模式下，连接的打开关闭，无所谓，不过还是打开好点。
规范化】】
conn.Close（）;
returnDataTableToListCity.ConvertToModel（ds.Tables[0]）.ToListCity（）;
}
}
}
DataTable转List,我在网上找了一个关心类：
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Data;
usingSystem.Linq;
usingSystem.Reflection;
usingSystem.Web;
namespaceJsonDataInMVC.DBOperator
{
publicstaticclassDataTableToListTwhereT:
new（）
{
publicstaticIListTConvertToModel（DataTabledt）
{
//定义集合
IListTts=newListT（）;
Tt=newT（）;
stringtempName="";
//猎取此模型的公共属性
PropertyInfo[]propertys=t.GetType（）.GetProperties（）;
foreach（DataRowrowindt.Rows）
{
t=newT（）;
foreach（PropertyInfopiinpropertys）
{
tempName=pi.Name;
//检查DataTable是否包含此列
if（dt.Columns.Contains（tempName））
{
//推断此属性是否有set
if（!
pi.CanWrite）
continue;
objectvalue=row[tempName];
if（value!
=DBNull.Value）
pi.SetValue（t,value,null）;
}
}
ts.Add（t）;
}
returnts;
}
}
}
创建Province掌握器：
usingJsonDataInMVC.DBOperator;
usingJsonDataInMVC.Models;
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Mvc;
namespaceJsonDataInMVC.Controllers
{
publicclassProvinceController:
Controller
{
privateAddressHelperdb;
publicProvinceController（）
{
db=newAddressHelper（）;
}
//GET:
Province
publicActionResultIndex（）
{
ListProvincelstProvince=db.GetAllProvince（）;
ViewBag.ListProvince=lstProvince;
returnView（）;
}
}
}
对应的Index视图：
@usingJsonDataInMVC.Models
@{
ViewBag.Title="Index";
ListProvincelstProvince=ViewBag.ListProvinceasListProvince;
}
h2ProvinceIndex/h2
label省份:
/label
selectid="myProvince"
@foreach（variteminlstProvince）
{
optionvalue="@item.ProvinceID"@item.ProvinceName/option
}
/select
修改一下，默认的路由，
publicstaticvoidRegisterRoutes（RouteCollectionroutes）
{
routes.IgnoreRoute（"{resource}.axd/{*pathInfo}"）;
routes.MapRoute（
name:
"Default",
url:
"{controller}/{action}/{id}",
defaults:
new{controller="Province",action="Index",id=UrlParameter.Optional}
）;
}
先来看下阶段性的成果：
运行程序：
看，这样就加载了全部的省份数据，现在我们要进一步实现，选择一个省份的时候，加载数据到另外一个下拉框中。
修改掌握器，添加一个方法：
usingJsonDataInMVC.DBOperator;
usingJsonDataInMVC.Models;
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Mvc;
namespaceJsonDataInMVC.Controllers
{
publicclassProvinceController:
Controller
{
privateAddressHelperdb;
publicProvinceController（）
{
db=newAddressHelper（）;
}
//GET:
Province
publicActionResultIndex（）
{
ListProvincelstProvince=db.GetAllProvince（）;
ViewBag.ListProvince=lstProvince;
returnView（）;
}
publicJsonResultGetAllCityByProvinceID（intid）
{
ListCitylstCity=db.GetCityListByProvinceID（id）;
returnJson（lstCity,JsonRequestBehavior.AllowGet）;
}
}
}
Index视图中：
@usingJsonDataInMVC.Models
@{
ViewBag.Title="Index";
ListProvincelstProvince=ViewBag.ListProvinceasListProvince;
}
h2ProvinceIndex/h2
label省份:
/label
selectid="myProvince"
@foreach（variteminlstProvince）
{
optionvalue="@item.ProvinceID"@item.ProvinceName/option
}
/select
br/
hr/
label城市:
/label
selectid="myCity"
/select
scriptsrc="~/Scripts/jquery-1.10.2.js"/script
scripttype="text/javascript"
$（document）.ready（function（）{
$（"#myProvince"）.change（function（）{
//猎取省份的ID
varprovinceID=$（"#myProvince"）.val（）;
//猎取城市
varmyCity=$（"#myCity"）;
//加入测试代码
debugger;
$.ajax（{
url:
"/Province/GetAllCityByProvinceID/"+provinceID,
type:
"post",
dataType:
"json",
contentType:
"application/json",
success:
function（result）{
varmyHTML="";
myCity.html（""）;//赋值之前先清空
$.each（result,function（i,data）{
myHTML+="optionvalue="+data.CityID+""+data.CityName+"/option";
}）;
myCity.append（myHTML）;
},
error:
function（result）{
alert（result.responseText）;
}
}）;
}）
}）
/script
好了，弄好之后，运行程序：
选择一个省份，对应的市的信息就被我们查出来了，绑定到另外的市的下拉框中了。
总结：
这篇文章，虽然基础，但是很重要，平常开发中，遇到许多这样的场景。
还有就是EF用多了，ADO.NET也不能遗忘。
连接模式和非链接模式查询数据库6个步骤，___心中。
以上就是本文的全部内容，盼望对大家的学习有所关心
...
升级会员 