Solved

updatepanel with multiple asp:repeaters

Posted on 2014-11-27
2
249 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
2 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
Comment Utility
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
Comment Utility
excellent.

Thanks Robert Schutt. Much appreciated.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

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…
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…
Get a first impression of how PRTG looks and learn how it works.   This video is a short introduction to PRTG, as an initial overview or as a quick start for new PRTG users.

772 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now