Solved

updatepanel with multiple asp:repeaters

Posted on 2014-11-27
2
271 Views
Last Modified: 2014-11-28
experts:

I have a repeater that loads data from a database. one column of the repeater contains a linkbutton. I'd like the linkbutton to load other repeaters within the same page. I currently have this working with the page doing a postback and passing a parameter in the url. I want to avoid this and populate the other repeaters without the postback using the AJAX update panel.

Can anyone point me in the right direction please?

Thanks
0
Comment
Question by:telliot79
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 40470470
The UpdatePanel does a partial postback so your code may need to be adjusted to handle that, how much depends a lot on your current code. It may not require much special, like in the simple example below. As long as you're aware of the ASP.NET page life-cycle it should be possible to resolve any problems that may arise.

Couple of notes in advance:
* I used UpdateMode="Conditional" on the UpdatePanel, this is actually only relevant if you have more than 1 UpdatePanel on your page;
* I use the OnLoad Event of the UpdatePanel since I found that simpler than other examples I found on the web using an invisible button;
* the LinkButton shows a postback call when you hover over it but that is negated by the OnClientClick. You could just as well just use an <a href>, the LinkButton as I use it is of no real use.

Default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EE_Q_28570879_WEB.Default" %>

<!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 runat="server">
    <title> EE Q_28570879 </title>
    <style type="text/css">
        .tophalf
        {
            height: 300px;
            overflow: auto;
        }
        .item
        {
            float: left;
            width: 18%;
            border: 1px solid green;
            margin: 2px;
            padding: 3px 6px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div class="tophalf">
            <asp:Repeater ID="Repeater1" runat="server">
                <ItemTemplate>
                    <div class="item">
                        <asp:LinkButton ID="lbDetail" runat="server" OnClientClick='<%# Eval("ID", "return refreshChildData(&#39;{0}&#39;)") %>'>show details below</asp:LinkButton><br />
                        item id: <%# Eval("ID") %><br />
                        name: <%# Eval("Name") %>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
        <hr />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" OnLoad="UpdatePanel1_Load">
            <ContentTemplate>
                <asp:Repeater ID="Repeater2" runat="server">
                    <ItemTemplate>
                        <div class="item">
                            child id: <%# Eval("ID") %><br />
                            name: <%# Eval("Name") %>
                        </div>
                    </ItemTemplate>
                </asp:Repeater>
            </ContentTemplate>
        </asp:UpdatePanel>
        <script type="text/javascript">
            function refreshChildData(id) {
                __doPostBack('<%=UpdatePanel1.UniqueID%>', id);
                return false;
            }
        </script>
    </div>
    </form>
</body>
</html>

Open in new window


Default.aspx.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using System.Data;

namespace EE_Q_28570879_WEB {
    public partial class Default : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {
            if (!IsPostBack) {
                DataTable dt = new DataTable();
                dt.Columns.AddRange(new DataColumn[] { new DataColumn("ID", typeof(int)), new DataColumn("Name", typeof(string)) });
                for (int i = 0; i < 100; i++) {
                    dt.Rows.Add(new object[] { i, "Parent " + i });
                }
                Repeater1.DataSource = dt;
                Repeater1.DataBind();
            }
        }

        protected void UpdatePanel1_Load(object sender, EventArgs e) {
            if (IsPostBack && Request.Form["__EVENTTARGET"].ToString() == UpdatePanel1.UniqueID) {
                Repeater2.DataSource = GetChildData(Request.Form["__EVENTARGUMENT"].ToString());
                Repeater2.DataBind();
            }
        }

        private DataTable GetChildData(string p) {
            DataTable dt = new DataTable();
            dt.Columns.AddRange(new DataColumn[] { new DataColumn("ID", typeof(int)), new DataColumn("Name", typeof(string)) });
            for (int i = 0; i < 10; i++) {
                dt.Rows.Add(new object[] { i, "Child " + p + "." + (i + 1) });
            }
            return dt;
        }
    }
}

Open in new window

0
 

Author Closing Comment

by:telliot79
ID: 40470608
excellent.

Thanks Robert Schutt. Much appreciated.
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Michael from AdRem Software explains how to view the most utilized and worst performing nodes in your network, by accessing the Top Charts view in NetCrunch network monitor (https://www.adremsoft.com/). Top Charts is a view in which you can set seve…
In this brief tutorial Pawel from AdRem Software explains how you can quickly find out which services are running on your network, or what are the IP addresses of servers responsible for each service. Software used is freeware NetCrunch Tools (https…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question