Solved

updatepanel with multiple asp:repeaters

Posted on 2014-11-27
2
268 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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…
This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled

739 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