服务端控件DropDownList无刷新级联 .

最新推荐文章于 2018-10-05 12:10:59 发布

ZXFC88

最新推荐文章于 2018-10-05 12:10:59 发布

阅读量1.3k

点赞数

文章标签： function server asp string class html

本文链接：https://blog.csdn.net/ZXFC88/article/details/6989705

版权

1.两联级：当下拉列表选择一个后，另一个下拉列表就会无刷新加载数据

2.在HTML中添加两个DropDownList 具体如下

<asp:DropDownList ID="ddlCa" runat="server" Height="20px" Width="100px" CssClass="ddlist">
   <asp:ListItem>--请选择大类--</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="ddlSca" runat="server" Height="20px" Width="100px" CssClass="ddlist">
     <asp:ListItem>--请选择小类--</asp:ListItem>
 </asp:DropDownList>

3.在页面Page_Load的时候给ID="ddlCa"和ID="ddlSca"添加两个属性

if (!IsPostBack)
            {
          
                ddlCa.Attributes.Add("onchange", "addSca()");
                ddlSca.Attributes.Add("onchange","getSca()");
            }

addSca()向ID="ddlSca"中添加数据，getSca()读取ID="ddlSca"的当前值

4.在html页面的<head></head>中写脚本语句，我是用的JQuery的AJAX方法,读取的Json格式文件

<script type="text/javascript">
        function addSca() {

            var caName = $("#" + "<%=ddlCa.ClientID %>").val();
            $("#" + "<%=ddlSca.ClientID %>").empty();
            $.get("getSca.ashx", { "caName": caName }, function (data, status) {
                if (status != "success") {
                    alert("错误");
                    return false;
                }
                var scategorys = $.parseJSON(data);
                var defaultOption = $("<option value='--请选择小类--'>--请选择小类--</option>");
                $("#" + "<%=ddlSca.ClientID %>").append(defaultOption);
                for (var i = 0; i < scategorys.length; i++) {
                    var scategory = scategorys[i];
                    var option = $("<option value='" + scategory.Id + "'>" + scategory.Name + "</option>");
                    $("#" + "<%=ddlSca.ClientID %>").append(option);

                }
            });


        }
        function getSca() {
            var scaId = $("#" + "<%=ddlSca.ClientID %>").val();
            $("#" + "<%=hiddSca.ClientID %>").val(scaId);
        }
    </script>

5..默认情况下是无法取得ddlSca中当前选中的值，所以需要通过添加一个隐藏控件，把ddlSca中选择的值赋给隐藏控件，最后后台cs代码通过隐藏控件的Value属性间接地获得ddlSca的值。
隐藏控件如下：

01.<asp:HiddenField ID="hiddSca" runat="server" />

6.通过一般处理程序向后台去数据 getSca.ashx.cs内容如下：public class getSca : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string caName = context.Request["caName"].ToString();
            ScategoryManager sm = new ScategoryManager();
            var dt = sm.SelectScaByCaName(caName);
            List<Scategory> list = new List<Scategory>();

            for (int i = 0; i < dt.Rows.Count; i++)
            {
                list.Add(new Scategory() { Name = dt.Rows[i]["name"].ToString(), Id = Convert.ToInt32(dt.Rows[i]["id"]) });
            }
        context.Response.Write(JsonConvert.SerializeObject(list));
            
            
           
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
        public class Scategory
        {

            public string Name { get; set; }
            public int Id { get; set; }
        }
    }



补充：
我用的.net2.0,所以通过Json.net来序列化数据的，很简单，只要添加引用Newtonsoft.Json.dll  命名空间添加using Newtonsoft.Json，然后调用JsonConvert.SerializeObject()序列化数据 即可
本人刚刚接触这些，所以有很多不足，我是参考别人的和自己的一些想法写的，希望大家提意见！！
参考：http://blog.csdn.net/tianxingzhe37/article/details/6025906

ZXFC88

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
服务端控件DropDownList无刷新级联 .

1.两联级：当下拉列表选择一个后，另一个下拉列表就会无刷新加载数据2.在HTML中添加两个DropDownList 具体如下 --请选择大类-- --请选择小类-- 3.在页面Page_Load的时候给ID="ddlCa"和ID="ddlSca"添加两个属性if (!IsPostBack) {
复制链接

扫一扫