asp.net+jQuery应用JSON实现无刷新…

最新推荐文章于 2017-05-11 20:20:46 发布

原创最新推荐文章于 2017-05-11 20:20:46 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何使用jquery、json和asp.net实现无刷新的三级联动效果。通过动态加载数据更新下拉菜单选项，提升用户体验。

本文应用到jquery、json、asp.net结合来实现无刷新三级联动效果，使用asp.net实现二级联动、三级联动效果很简单，不过不是无刷新就不爽了，所以收集一个无刷新联动的实现例子。

asp.net+jQuery应用JSON实现无刷新三级联动实例（转）

三个下拉控件：
<asp:DropDownList ID="ddl1" runat="server" Width="100px" ></asp:DropDownList>
<asp:DropDownList ID="ddl2" runat="server" Width="100px" ></asp:DropDownList>
<asp:DropDownList ID="ddl3" runat="server" Width="100px" ></asp:DropDownList>
JS代码：

Code

LoadClass.ashx
Code

using System;
using System.Web;

using System.Text;
using System.Data;

public class LoadClass : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        // 数组   [{"ID":"275","Cname":"A1"},{"ID":"319","Cname":"A2"},{"ID":"322","Cname":"A3"}]
        int strId = Convert.ToInt32(context.Request["ddlId"]);
        string strSQL = "select * from Class where parent_Ptr="   strId   " order by classOrder asc ";
        db d = new db();
        DataTable dt = d.getDT(strSQL);
        StringBuilder strClass = new StringBuilder();
        if (dt != null)
        {
            strClass.Append("[");
            for (int i = 0; i < dt.Rows.Count; i )
            {
                strClass.Append("{");
                strClass.Append("\"ID\":\""   dt.Rows[i]["id"].ToString()   "\",");
                strClass.Append("\"Cname\":\""   dt.Rows[i]["classCname"].ToString()   "\"");

                if (i != dt.Rows.Count - 1)
                {
                    strClass.Append("},");
                }
            }

        }
        strClass.Append("}");
        strClass.Append("]");
        context.Response.ContentType = "application/json";
        context.Response.ContentEncoding = Encoding.UTF8;
        context.Response.Write(strClass.ToString());
        context.Response.End();
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}注意：
//后台只能获取value值，不能直接获取text，需要通过js、控件中转
//结果：275 276 277
Label1.Text = Request.Form[ddl1.UniqueID] + " "                    + Request.Form["ddl2"] + " "                    + Request.Form[ddl3.ClientID.Replace("_", "$")] ;遇到的问题：下拉框text的值通过HiddenField控件中转 <asp:HiddenField ID="HiddenField1" runat="server" />
<asp:HiddenField ID="HiddenField2" runat="server" />
<asp:HiddenField ID="HiddenField3" runat="server" />
把选中下拉框的值赋予隐藏控件中：
<script type="text/javascript">
var Key1 = $("#ddl1>option:selected").val();
$('#HiddenField1').val(Key1);
var Key2 = $("#ddl2>option:selected").val();
$('#HiddenField2').val(Key2);
var Key3 = $("#ddl3>option:selected").val();
$('#HiddenField3').val(Key3);
</script>
选择下拉框后动态赋值到HiddenField 控件中的值无法与下拉框选中的值相对应