AJAX event cascading?

[Jakob Lithner]

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>
<aspropDownList ID="cboSystem" runat="server" AutoPostBack="True" />
<aspropDownList ID="cboTextType" runat="server"
AutoPostBack="True" />
<aspropDownList 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>

 

[Walter Wang [MSFT]]

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>
<aspropDownList ID="ddl1" runat="server">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
</aspropDownList>
<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 ([email protected], 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.

 

[Jakob Lithner]

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