1、关于在MVC框架下结合AJAX技术设计二级联动的例子

主题：mvc下的下拉列表二级联动

开发环境：visual studio 2010、sql server 2005

框架、技术：.net、mvc2.0、AjAX

一、准备工作

两个页面：

1、第一个页面称为主页面（addContent.aspx），主要用来展示进行二级联动的下拉列表，如图1：

addContent

相应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

该材料中有着比笔者更详细的讲解和教学。

 

posted on 2012-12-30 11:47  斗笠大侠  阅读(467)  评论(2)  编辑  收藏  举报

导航