AJAX event cascading?

Discussion in 'ASP .Net Building Controls' started by Jakob Lithner, Jun 18, 2007.

  1. I have a web page where I search some information.
    I tried to AJAX enable the page to avoid postbacks.
    I tried to use 3 UpdatePanels: updateSearch, updateList and updateDetail.

    In updateSearch I use several controls to decide what to search.
    Some of the DropDownLists will have dynamic content based on other
    DropDownLists, thats why I need to enclose this in one UpdatePanel.

    In updateList I list the main result in a user control. It basically holds a
    repeater where one column has a LinkButton. The LinkButton triggers a custom
    Event named TextID_Clicked. The repeater is put in a DIV tag with "overflow:
    auto" to ensure a long result is scrolled.

    The last panel is updateList where I display the detailed information of the
    clicked Text record in a second user control. The reason I put these controls
    in one UpdatePanel each is that I would like the left record list NOT to
    scroll when I click a record to display the details.

    Everything works excellent except that the record list will move to the top
    every time a record is clicked, which means the clicked record might
    disappear out of sight. In my understanding AJAX should not allow this list
    to be updated.

    Did I misunderstand something? Should the panels be nested?
    Is there a possible workaround to get the wished "freezing" of the list when
    it is clicked?

    Note: I have put breakpoints to ensure the list is not regenerated from
    code. It is not. It looks more like a browser problem.

    Code included below. All formatting is deleted to make it easier to read.


    <asp:UpdatePanel ID="updateSearch" runat="server">
    <ContentTemplate>
    <asp:DropDownList ID="cboSystem" runat="server" AutoPostBack="True" />
    <asp:DropDownList ID="cboTextType" runat="server"
    AutoPostBack="True" />
    <asp:DropDownList ID="cboAttribute" runat="server" />
    <asp:Button ID="btnSearch" runat="server" Text="Search" />
    </ContentTemplate>
    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="cboSystem"
    EventName="SelectedIndexChanged" />
    <asp:AsyncPostBackTrigger ControlID="cboTextType"
    EventName="SelectedIndexChanged" />
    </Triggers>
    </asp:UpdatePanel>


    <asp:UpdatePanel ID="updateList" runat="server">
    <ContentTemplate>
    <uc1:ucTextList ID="myTextList" Visible="false" runat="server" />
    </ContentTemplate>
    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
    </Triggers>
    </asp:UpdatePanel>


    <asp:UpdatePanel ID="updateDetail" runat="server">
    <ContentTemplate>
    <uc2:ucTextDetail ID="myTextDetail" Visible="false" runat="server" />
    </ContentTemplate>
    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="myTextList"
    EventName="TextID_Clicked" />
    </Triggers>
    </asp:UpdatePanel>
    Jakob Lithner, Jun 18, 2007
    #1
    1. Advertising

  2. Hi,

    I'm not very clear about your following statement:

    > Everything works excellent except that the record list will move to the

    top
    every time a record is clicked, which means the clicked record might
    disappear out of sight.


    Do you mean that when one of the LinkButtons is clicked, all the list is
    refreshed too?


    I think you may need to turn off "ChildrenAsTriggers". I've created a
    simple test project to do similar things you required.


    uctextlist.ascx:
    ==========

    <%@ Control Language="C#" ClassName="uctextlist" %>

    <script runat="server">

    public event EventHandler TextID_Clicked;

    protected void Page_Load(object sender, EventArgs e)
    {
    repeater1.DataSource = GetDataSource();
    repeater1.DataBind();
    }

    System.Data.DataTable GetDataSource()
    {
    System.Data.DataTable dt = new System.Data.DataTable();
    dt.Columns.Add("ID");
    dt.Rows.Add("Code 1");
    dt.Rows.Add("Code 2");
    return dt;
    }

    protected void LinkButton_Clicked(object sender, EventArgs e)
    {
    if (TextID_Clicked != null)
    {
    TextID_Clicked(sender, e);
    }
    }

    </script>

    <asp:Repeater ID="repeater1" runat="server">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate>
    <li><asp:LinkButton ID="link1" runat="server" Text=<%# Eval("ID")
    %> OnClick="LinkButton_Clicked"></asp:LinkButton></li>
    </ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
    </asp:Repeater>


    uctextdetail.ascx:
    ============

    <%@ Control Language="C#" ClassName="uctextdetail" %>

    <script runat="server">
    public String TextBox1Text
    {
    get
    {
    return TextBox1.Text;
    }
    set
    {
    TextBox1.Text = value;
    }
    }
    </script>

    <asp:Label ID="Label1" runat="server" Text="Detail:"></asp:Label><br />
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>


    Default.aspx:
    =========

    <%@ Page Language="C#" %>

    <%@ Register Src="uctextlist.ascx" TagName="uctextlist" TagPrefix="uc1" %>
    <%@ Register Src="uctextdetail.ascx" TagName="uctextdetail" TagPrefix="uc2"
    %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <script runat="server">

    protected void btnSearch_Click(object sender, EventArgs e)
    {
    myTextList.Visible = true;
    }

    protected void myTextList_TextID_Clicked(object sender, EventArgs e)
    {
    myTextDetail.Visible = true;
    myTextDetail.TextBox1Text = DateTime.Now.ToString();
    }

    protected void Page_Load(object sender, EventArgs e)
    {
    myTextList.TextID_Clicked +=new
    EventHandler(myTextList_TextID_Clicked);
    }
    </script>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    <title>Untitled Page</title>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
    <asp:UpdatePanel ID="updateSearch" ChildrenAsTriggers="false"
    UpdateMode="Conditional"
    runat="server">
    <ContentTemplate>
    <asp:DropDownList ID="ddl1" runat="server">
    <asp:ListItem>1</asp:ListItem>
    <asp:ListItem>2</asp:ListItem>
    </asp:DropDownList>
    <asp:Button ID="btnSearch" runat="server" Text="Search"
    OnClick="btnSearch_Click" />
    </ContentTemplate>
    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="ddl1"
    EventName="SelectedIndexChanged" />
    </Triggers>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="updateList" ChildrenAsTriggers="false"
    UpdateMode="Conditional"
    runat="server">
    <ContentTemplate>
    <uc1:uctextlist ID="myTextList" Visible="false"
    runat="server" />
    </ContentTemplate>
    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="btnSearch"
    EventName="Click" />
    </Triggers>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="updateDetail" UpdateMode="Conditional"
    runat="server">
    <ContentTemplate>
    <uc2:uctextdetail ID="myTextDetail" Visible="false"
    runat="server" />
    </ContentTemplate>
    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="myTextList"
    EventName="TextID_Clicked" />
    </Triggers>
    </asp:UpdatePanel>
    </div>
    </form>
    </body>
    </html>



    Let me know if this helps or not. Thanks.



    Regards,
    Walter Wang (, remove 'online.')
    Microsoft Online Community Support

    ==================================================
    When responding to posts, please "Reply to Group" via your newsreader so
    that others may learn and benefit from your issue.
    ==================================================

    This posting is provided "AS IS" with no warranties, and confers no rights.
    Walter Wang [MSFT], Jun 19, 2007
    #2
    1. Advertising

  3. Excellent!!!
    This solved the problem.

    In fact it was only necessary to add the attributes
    (UpdateMode="Conditional" and ChildrenAsTriggers="false") to the second
    UpdatePanel.

    For future readers of the forum ....
    I found some more documentation on these attributes here:
    http://ajax.asp.net/docs/mref/N_System_Web_UI.aspx
    Jakob Lithner, Jun 19, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    0
    Views:
    412
  2. acadam
    Replies:
    0
    Views:
    747
    acadam
    Dec 27, 2006
  3. Don Miller
    Replies:
    0
    Views:
    381
    Don Miller
    Jan 23, 2007
  4. Replies:
    0
    Views:
    464
  5. Raymond Chiu

    Ajax Cascading Dropdown List

    Raymond Chiu, Apr 8, 2008, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    168
    Raymond Chiu
    Apr 8, 2008
Loading...

Share This Page