asp.net2.0 UpdatePanel如何实现页面局部刷新

Question

主页中有的一个模块（调用母版页）有：DropDownlist1 ，DropDownlist2，textbox1 三个控件，
要求实现功能：选择DropDownlist1或DropDownlist2中的项时，把数据库中相应的内容显示到textbox1上 而不刷新整个页面。
 
之前没对Ajax有任何了解，不知道如何实现局部刷新。现在听说UpdatePanel能实现局部刷新。安装Ajax包后工具箱里有ScriptManager 和 UpdatePanel控件等四个。 现在求助大家给我个简单但能够实现局部刷新功能的代码 ；也就是 ：选择DropDownlist项时 把数据库中相应的内容显示到textbox1上 而不刷新整个页面？ index.aspx页面该模块的前台代码：<table style="width:950" border="0" cellpadding="0" cellspacing="0" align="center"> 
<tr> 
  <td style="width:950px;" valign="top" > 
      
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"> 
</asp:ScriptManager>  
    
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 
<ContentTemplate> 
<!-- ***************** -->   <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" Width="200px" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged1"> 
    </asp:DropDownList>   <asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True" Width="200px" OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged"> 
    </asp:DropDownList> 
  
<asp:TextBox ID="textbox1" runat="Server" Height="180px" Width="95%" TextMode="MultiLine"  > </asp:TextBox>  
<!-- ***************** --> 
</ContentTemplate> <Triggers> 
<asp:AsyncPostBackTrigger ControlID="DropDownList1"/> 
<asp:AsyncPostBackTrigger ControlID="DropDownList2" /> 
</Triggers> </asp:UpdatePanel> 
          
  </td> 
  </tr> 
</table> 到底哪里写错了？或者哪个点没写？ 请一步一步详细来哦！俺菜菜鸟鸟来的啊 搞了半天都弄得  都是全页面刷新！拜谢！（后台是连接数据库的代码等，不用写出来了吧）

Answer 1

没有用过ajax的控件
象这种情况，我都是在dropdownlist加上一onchange事件，使用ajax调用后台的函数，后台的函数里写上根据传入的值取出相要的值。
不知道说明白了不？

Answer 2

UpdatePanel RenderMode="Inline" 

Answer 3

<Triggers> 
<asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged"/> 
<asp:AsyncPostBackTrigger ControlID="DropDownList2"  EventName="SelectedIndexChanged"/> 
</Triggers> 

Answer 4

    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true"
                onselectedindexchanged="DropDownList1_SelectedIndexChanged">
                <asp:ListItem>test1</asp:ListItem>
                <asp:ListItem>test2</asp:ListItem>
                <asp:ListItem>test3</asp:ListItem>
            </asp:DropDownList>
            <asp:DropDownList ID="DropDownList2" runat="server">
                <asp:ListItem>test21</asp:ListItem>
                <asp:ListItem>test22</asp:ListItem>
                <asp:ListItem>test23</asp:ListItem>
            </asp:DropDownList>
        </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>cs 文件代码:
        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            DropDownList2.SelectedIndex = DropDownList1.SelectedIndex;
        }
=================================================================
以上代码测试成功,未刷新页面

Answer 5

发现你是要把内容显示到textbox里..改了下代码.成功实现..    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true"
                onselectedindexchanged="DropDownList1_SelectedIndexChanged">
                <asp:ListItem>test1</asp:ListItem>
                <asp:ListItem>test2</asp:ListItem>
                <asp:ListItem>test3</asp:ListItem>
            </asp:DropDownList>
            <asp:DropDownList ID="DropDownList2" runat="server"  AutoPostBack="true"
                onselectedindexchanged="DropDownList2_SelectedIndexChanged">
                <asp:ListItem>test21</asp:ListItem>
                <asp:ListItem>test22</asp:ListItem>
                <asp:ListItem>test23</asp:ListItem>
            </asp:DropDownList>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>后台代码:
        protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            TextBox1.Text = DropDownList1.SelectedItem.Text;
        }        protected void DropDownList2_SelectedIndexChanged(object sender, EventArgs e)
        {
            TextBox1.Text = DropDownList2.SelectedItem.Text;
        }

Answer 6

兄弟 ，好人帮到底啊！ 我还是没解决！
我把整个页面所有的组成部分都放在<form id="form1" runat="server"> 
</form>，是这个缘故实现不了局部刷新吧？ 那我现在分出来了，不同模块各自放在一个<form>里了，那就有很多个<form runat=server>,运行起来就提示 “服务器端只允许有一个form了”，因为也页面里有模板还有其他很多控件，所以不可能只有一个<form   runat="server"> 。
给我解决吧。

Answer 7

Quote=引用 6 楼 ljbgeyun 的回复:]
兄弟 ，好人帮到底啊！ 我还是没解决！
我把整个页面所有的组成部分都放在 <form id="form1" 
</form>，是这个缘故实现不了局部刷新吧？ 那我现在分出来了，不同模块各自放在一个 <form>里了，那就有很多个 <form runat=server>,运行起来就提示 “服务器端只允许有一个form了”，因为也页面里有模板还有其他很多控件，所以不可能只有一个 <form  runat="server"> 。
给我解决吧。
[/Quote]
。。form是一个标签而已只能有一个FORM runat="server"。。不同模块为什么各自放呢？ 貌似你还是在用ASP的编程模式一样，.NET是自身提交到后台处理的，并不需要一个模块一个FORM。
 你只要在后台的事件编写相应的方法就可以了[

Answer 8

而且局部刷新也没必要放这么多东西进去呀。只需要把要更新的东西放进去就可以了。<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div><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:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </ContentTemplate>
        <Triggers>
        <asp:AsyncPostBackTrigger ControlID="DropDownList1" />
        </Triggers>
        </asp:UpdatePanel>
        
    </div>
    </form>
  protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            TextBox1.Text = DropDownList1.SelectedValue;
        }

Answer 9

要实现局部刷新，就要用多个UpdatePanel，将多个不同页面部分实现分离。
Main Page Time Now :<%=DateTime.Now%><asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
           UpdatePanel Time Now: <%=DateTime.Now%>              
        </ContentTemplate>
        <Triggers>
           <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
        </Triggers>
</asp:UpdatePanel> 
<asp:Button ID="Button1" runat="server" Text="Button" /><asp:UpdatePanel ID="UpdatePanel2" ......>
....
</asp:UpdatePanel>这时就可实现部分页面刷新，如果点击Button1，你只会看到UpdatePanel里的时间变化，而页面时间不动。
但要注意如果使用多个UpdatePanel，则先要设定其 UpdateMode="Conditional" ，否则一个UpdatePanel1里的内容变化，其他的UpdatePanel2里面的内容会随之变化