asp.net listbox 无刷新

用四个listbox做产品分类，的要实现无刷新的功能，假如选中第一个listbox中的内容，第二个listbox会显示第一个listbox中选中项的内容,这些内容都是从数据库中读取出来的
vs2005+sql2005

解决方案 »

  1.   

     <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
     <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
    ...四个listbox    
      </ContentTemplate>
        </asp:UpdatePanel>
      

  2.   

    asp.net有个自带的updatepanel也可以自己用jquery去写ajax与后台与交互，如
    $.getJSON(url, function(data) {
    //用data 里面的返回值用js去填充listbox，
    });
      

  3.   

    如果是指使用asp.net ajax，我以前贴过一个demo可以参考：<%@ Page Language="C#" Inherits="VPage" %><script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                this.Calendar1.Style["position"] = "absolute";
                this.TextBox1.DataBind();
            }
        }    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            this.DropDownList2.Items.Clear();
            switch (this.DropDownList1.SelectedValue)
            {
                case "北京":
                    this.DropDownList2.Items.Add("天安门广场");
                    this.DropDownList2.Items.Add("颐和园");
                    this.DropDownList2.Items.Add("雍和宫");
                    this.DropDownList2.Items.Add("红螺寺");
                    break;
                case "上海":
                    this.DropDownList2.Items.Add("崇明岛");
                    this.DropDownList2.Items.Add("外滩");
                    this.DropDownList2.Items.Add("万佛阁");
                    break;
                case "香港":
                    this.DropDownList2.Items.Add("海洋公园");
                    this.DropDownList2.Items.Add("半岛酒店");
                    break;
            }
        }
        protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
        {
            ShowResult();
        }    protected void Button1_Click(object sender, EventArgs e)
        {
            if (this.Calendar1.Visible)
                SetupTheDate();
            else
            {
                try
                {
                    this.Calendar1.SelectedDate = DateTime.Parse(this.TextBox1.Text);
                    this.Calendar1.VisibleDate = this.Calendar1.SelectedDate;
                }
                catch
                {
                }
                this.Calendar1.Visible = true;
            }
        }    protected void Calendar1_SelectionChanged(object sender, EventArgs e)
        {
            SetupTheDate();
        }    private void SetupTheDate()
        {
            this.TextBox1.Text = this.Calendar1.SelectedDate.ToShortDateString();
            this.Calendar1.Visible = false;
            ShowResult();
        }    void ShowResult()
        {
            this.Label1.Text = "您选择" + this.TextBox1.Text + "去" + this.DropDownList2.SelectedValue;
            UpdatePanel3.Update();
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>演示使用基本的asp.net ajax功能</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                    <asp:ListItem>北京</asp:ListItem>
                    <asp:ListItem>上海</asp:ListItem>
                    <asp:ListItem>香港</asp:ListItem>
                </asp:DropDownList>
                <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged" />
            </ContentTemplate>
        </asp:UpdatePanel>
        <br />
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    请输入日期：
                </td>
                <td>
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
                        <ContentTemplate>
                            <table cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                        <asp:TextBox ID="TextBox1" runat="server" Width="147px" Text="<%# DateTime.Now.AddDays(20).ToShortDateString() %>" />
                                        <asp:Button ID="Button1" runat="server" Text="..." OnClick="Button1_Click" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Calendar ID="Calendar1" runat="server" Visible="False" OnSelectionChanged="Calendar1_SelectionChanged"
                                            BackColor="#FFFFCC" BorderColor="#FFCC66" BorderWidth="1px" DayNameFormat="Shortest"
                                            Font-Names="Verdana" Font-Size="8pt" ForeColor="#663399" Height="200px" ShowGridLines="True"
                                            Width="220px">
                                            <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />
                                            <SelectorStyle BackColor="#FFCC66" />
                                            <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />
                                            <OtherMonthDayStyle ForeColor="#CC9966" />
                                            <NextPrevStyle Font-Size="9pt" ForeColor="#FFFFCC" />
                                            <DayHeaderStyle BackColor="#FFCC66" Font-Bold="True" Height="1px" />
                                            <TitleStyle BackColor="#990000" Font-Bold="True" Font-Size="9pt" ForeColor="#FFFFCC" />
                                        </asp:Calendar>
                                    </td>
                                </tr>
                            </table>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
            </tr>
        </table>
        <hr />
        <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                result:
                <asp:Label ID="Label1" runat="server" EnableViewState="False" Font-Size="Small"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
        </form>
    </body>
    </html>
      

  4.   

    嗯，第一行改为<%@ Page Language="C#" %>
    吧。
    VPage是一个缩小__ViewState字段的东西，跟这个demo没有关系。
      

  5.   

    用ajaxpro2.0 然后结合7楼的js实现
      

  6.   

    这里的DropdownList使用硬编码来得到数据的。你可以改为从数据库里查询！
      

  7.   

    http://blog.csdn.net/sandy945/article/details/4307710