主题:mvc下的下拉列表二级联动
开发环境:visual studio 2010、sql server 2005
框架、技术:.net、mvc2.0、AjAX
一、准备工作
两个页面:
1、第一个页面称为主页面(addContent.aspx),主要用来展示进行二级联动的下拉列表,如图1:
相应html代码:
<tr> <th>路由</th> <td style="text-align:left"> <select name="route" onchange="showRoute(this.value)"> <option value="">选择路由</option> <% int i; for (i = 0; i < Convert.ToInt32(ViewData["count"]); i++) { %><option value="<%=ViewData["value"+i] %>"><%=ViewData["text" + i]%></option><% } %> </select> </td> </tr> <tr><th>指令</th><td style="text-align:left; height:23px;"><div id="txtHint">请先选择路由..</div></td></tr>
要求:通过点击【路由】内的下拉列表获得【指令】下拉列表的数据,如图2:
2、为了通过点击【路由】下拉列表能够获得相关数据,我们要创建一个新的页面(getSecondCommand.aspx)
相应html代码:
<body> <div> <div> <%=Html.DropDownList("commandId") %> </div> </div> </body>
二、编写相关逻辑代码:
1、getSecondCommand.aspx的对应action:
public ActionResult getSecondCommand(string id) //获得二级命令 { string sql = null; if (id != null) { sql = "from TbCommand where RouteId = " + Convert.ToInt32(id.ToString()); } serhelper = new serviceClass(); crud = new NHibernateCRUD(); ViewData["commandId"] = serhelper.bindDropList(crud.FromCommand(sql), -1); return View(); }
其中的逻辑思想为:通过查询数据库,获得【指令】的相关数据,然后通过bindDropList()方法将数据绑定到服务器控件(在mvc中,只要viewdata["commandId"]中的“commandId”和下拉列表同名,程序就能够自动将数据过季给下拉列表)
bingdDropList的参考方法:
public List<SelectListItem> bindDropList(IList<TbCommand> name, int i)//绑定command类型的下拉列表 { crud = new NHibernateCRUD(); List<SelectListItem> droplist = new List<SelectListItem>(); IList<TbCommand> command = name; droplist.Add(new SelectListItem { Text = "选择指令", Value = "-1" }); foreach (TbCommand tb in command) { if (Convert.ToInt32(tb.CmdId) == i) { droplist.Add(new SelectListItem { Text = tb.CmdName + "(" + tb.CmdId + ")", Value = tb.CmdId.ToString(), Selected = true }); } else { droplist.Add(new SelectListItem { Text = tb.CmdName + "(" + tb.CmdId + ")", Value = tb.CmdId.ToString() }); } } return droplist; }
2、addContent.aspx的相应action
public ActionResult addContent(string respId, string route, string commandId, string retcode, string retdesc, string respcontent, string respRate)//添加模拟响应内容 { serhelper = new serviceClass(); crud = new NHibernateCRUD(); int i = 0; foreach (TbRoute r in crud.FromRoute(null))//初始化routedropdownlist { ViewData["text" + i] = r.RouteName; ViewData["value" + i] = r.RouteId; i++; } ViewData["count"] = i; ViewData["respId"] = crud.selectMax(null) + 1; return View(); }
相关的逻辑思想:通过函数FromRoute()获得下拉列表【路由】的数据,通过遍历,将数据转移给Viewdata,然后在网页展示。(可能在这里读者需要自己多加考虑,做出自己的方法。如果复制黏贴的话,是行不通的。serhelper和crud是笔者自己做的两个辅助类,此处没有太大关系。)
3、第三步是最重要也是最简单的,在addcontent.aspx中添加AJAx事件:
相关代码:
<script type="text/javascript"><%--二级联动--%> var virtualPath = '<%=System.Web.HttpContext.Current.Request.ApplicationPath %>' if (VirtualPath == '/') VirtualPath = ""; function showRoute(str) { var xmlhttp; if (str == "") { document.getElementById("txtHint").innerHTML = ""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("txtHint").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET","/Simulation/getSecondCommand?id="+str, true); xmlhttp.send(); } </script><%--二级联动--%>
到此,该设计基本完成。
建议阅读相关材料:http://www.w3school.com.cn/ajax/ajax_database.asp
该材料中有着比笔者更详细的讲解和教学。