UpdatePanel and Placeholder Control Problem : AJAX, UpdatePanel, Placeholder, C#, .NET 2.0, Dynamic Controls

May 17, 2008 01:24am pdt

1. TheLearn... 196,575
2. Dhaest 81,930
3. jcoehoorn 67,480
4. jaime_ol... 63,381
5. GreenGhost 62,510
6. Velio 51,640
7. ZachSmith 45,350
8. jpaulino 41,270
9. JimBrandley 33,760
10. avnish_t... 33,650
11. surajguptha 31,750
12. SteveH_UK 31,525
13. angelIII 31,463
14. PaulHews 31,075
14. samtran0331 31,075

1. TheLearn... 562,953
2. samtran0331 210,390
3. surajguptha 199,472
4. Dhaest 167,453
5. Idle_Mind 143,595
6. jaime_ol... 141,466
7. emoreau 100,075
8. JimBrandley 99,622
9. Fernando... 90,534
10. McExp 87,513
11. jcoehoorn 85,780
12. GreenGhost 83,760
13. jpaulino 79,100
14. DarkoLord 76,876
15. Sancler 71,532

02.06.2008 at 01:31PM PST, ID: 23142765

	[x] Attachment Details

[x]

The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

The Grade of the Solution
The Zone Rank of the Expert Providing the Solution
The Number of Author and Expert Comments
The Number of Experts Contributing
The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!

6.8

UpdatePanel and Placeholder Control Problem

Zones: .NET Framework 2.0, Microsoft Visual C#.Net, Microsoft Development

Tags: AJAX, UpdatePanel, Placeholder, C#, .NET 2.0, Dynamic Controls

Hello everyone,

I am having some problems with this page that has a Placeholder control inside an UpdatePanel control. When the updatepanel is triggered, then the page seems to do a full postback and I end up with 2 sets of controls added to the page instead of 1.

Here is where I'm creating the updatepanel and placeholder:
<asp:UpdatePanel ID="upd3" runat="server" UpdateMode="Conditional">
<ContentTemplate>
      <asp:PlaceHolder ID="plhSemesters" Runat="server" />
</ContentTemplate>
<Triggers>
      <asp:AsyncPostBackTrigger ControlID="btnSave1" EventName="Click" />
      <asp:AsyncPostBackTrigger ControlID="btnSave2" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

Here is the code behind:
protected void Page_Load(object sender, EventArgs e)
{
      ...
      if (!IsPostBack)
      {
            //Enable Save Buttons
            btnSave1.Enabled = true;
            btnSave2.Enabled = true;
            //Set Course Title
            lblCourseTitle.Text = crs.courTitle;
      }
      //Display Semesters and each Location
      ArrayList sems = Semester.getSemesterList(DateTime.Now, sqlCon);
      DisplaySemesters(crs, sems, sqlCon);
      ...
}
private void DisplaySemesters(Course crs, ArrayList Semesters, SqlConnection sqlCon)
{
      //Go through each semester, and display all location frequencies
      plhSemesters.Controls.Clear();
      ...
      //TextBox for Course Frequency
      TextBox txtCFLoc = new TextBox();
      txtCFLoc.ID = "txt" + sem.semId + loc.locId;
      txtCFLoc.CssClass = "TextBox";
      txtCFLoc.MaxLength = 2;
      ...
      if (i % 2 == 0) { plhSemesters.Controls.Add(new LiteralControl("<tr class='ItemRow1'>")); }
      else { plhSemesters.Controls.Add(new LiteralControl("<tr class='ItemRow2'>")); }
      plhSemesters.Controls.Add(new LiteralControl("<td vAlign='middle' align='left' width='25%' class='LabelBold'>" + loc.locCity + "</td>"));
      plhSemesters.Controls.Add(new LiteralControl("<td vAlign='middle' align='left' width='10%'>"));
      plhSemesters.Controls.Add(txtCFLoc);
      plhSemesters.Controls.Add(new LiteralControl("</td>"));
      plhSemesters.Controls.Add(new LiteralControl("<td vAlign='middle' align='left' width='65%'></td>"));
      plhSemesters.Controls.Add(new LiteralControl("</tr>"));
      ...
}

When I click on one of the linkbuttons to trigger the updatepanel, I get a full page postback and 2 sets of controls.

Is there a bug with the updatepanel and placeholder controls or am I doing something wrong?

Start your free trial to view this solution

Question Stats

Zone: Microsoft

Question Asked By: quanmac

Solution Provided By: AngryBinary

Participating Experts: 2

Solution Grade: A

Translate:

Loading Advertisement...

Microsoft

Internet Protocols
Applications

Development
OS

Hardware
Windows Security

Apple

Operating Systems
Hardware

Programming
Networking

Software

Internet

Search Engines
File Sharing
WebTrends / Stats
Spy / Ad Blockers

Web Browsers
New Net Users
Web Development
Chat / IM

Anti Spam
Web Servers
Anti-Virus
Email Clients

Gamers

Tips
Online / MMORPG
Puzzle
Emulators

Action / Adventure
Role Playing
Consoles
Game Programming

Strategy
Sports
Misc
Computer Games

Digital Living

Hardware
New Net Users
New Users

Software
Digital Music
Gaming World

Home Security
Apple
Networking Hardware

Virus & Spyware

Vulnerabilities
IDS
Encryption
Anti-Virus

Operating Systems Security
Software Firewalls
WebApplications
Cell Phones

Operating Systems
Internet
Hardware Firewalls

Hardware

Handhelds / PDAs
Displays / Monitors
Components
Networking Hardware

Peripherals
Laptops/Notebooks
Storage
Servers

Desktops
New Users
Misc
Apple

Software

System Utilities
Industry Specific
Network Management
Photos / Graphics
Page Layout
VMWare
Misc
Web Development

OS
CYGWIN
Voice Recognition
Message Queue
Quality Assurance
Security
Firewalls
MultiMedia Applications

Development
Database
Office / Productivity
Business Management
OS/2 Apps
Server Software
Internet / Email

ITPro

OS
Storage
Encryption
Operating Systems Security
Apple Hardware
Laptops & Notebooks
Servers
Networking Hardware
Peripherals

Devices
Displays / Monitors
WebTrends / Stats
Search Engines
Firewalls
WebApplications
IDS
Vulnerabilities
Email Clients

File Sharing
Spy / Ad Blockers
Web Browsers
Web Servers
Networking
Anti-Virus
Chat / IM
Anti Spam

Developer

Web Servers
Web Browsers
Game Programming
Dev Tools
Industry Specific
Office / Productivity

Database
CYGWIN
Web Development
Search Engines
File Sharing
WebTrends / Stats

Programming
Content Management
Application Servers
Protocols

Storage

Removable Backup Media
Storage Technology
Servers

Grid
Remote Access
Backup / Restore

Misc
Hard Drives

Miscellaneous
Security
Development
Linux
VMWare

MainFrame OS
Unix
Apple
OS / 2
AS / 400

BeOS
Microsoft
VMS / OpenVMS

Database

Oracle
Miscellaneous
MySQL
Software
Sybase
Contact Management
PostgreSQL
Data Manipulation
Clarion
InterSystems Cache

Siebel
MUMPS
OLAP
SQLBase
SAS
GIS & GPS
4GL
Berkeley DB
DB2
Informix

Interbase / Firebird
FoxPro
Reporting
LDAP
Filemaker Pro
MS SQL Server
dBase
MS Access

Security

Misc
Web Browsers
Software Firewalls
Operating Systems Security
File Sharing

Spy / Ad Blockers
Vulnerabilities
WebApplications
IDS
Anti-Virus

Encryption
Anti Spam
Email Clients
VPN
Chat / IM

Programming

Editors IDEs
Installation
Handhelds / PDAs
Multimedia Programming
System / Kernel

Algorithms
Game
Signal Processing
Project Management
Open Source

Database
Misc
Languages
Processor Platforms
Theory

Web Development

Scripting
Blogs
Web Servers
Software
Search Engines
Web Graphics
Images

Internet Marketing
Images and Photos
Components
Document Imaging
Web Languages/Standards
Illustration
WebApplications

Fonts
WebTrends / Stats
Authoring
Digital Camera Software
Miscellaneous

Networking

Protocols
Apple Networking
Network Management
Message Queue
Application Servers
Content Management
File Servers
Email Servers
Misc
Java Editors & IDEs

Wireless
Networking Hardware
Backup / Restore
System Utilities
ISPs & Hosting
Web Servers
Storage Technology
Removable Backup Media
Servers
Broadband

Grid
OS / 2
Novell Netware
Unix Networking
Windows Networking
Security
Telecommunications
Operating Systems
Linux Networking

Other

Community Advisor
Lounge
Community Support
New Net Users

Philosophy / Religion
Math / Science
Miscellaneous
URLs

Expert Lounge
Politics
Puzzles / Riddles

Community Support

Suggestions
New to EE
New Topics
Community Advisor

CleanUp
Announcements
General

Feedback
Input
EE Bugs

02.06.2008 at 02:03PM PST, ID: 20836217

Rank: Sage

TheLearnedOne:

I am confused why you don't just define an HtmlTable, and add that to the UpdatePanels controls:

HtmlTable table = new HtmlTable();
HtmlTableRow row = new HtmlTableRow();
HtmlTableCell cell = new HtmlTableCell();
cell.InnerText = "Bob";

row.Cells.Add(cell);
table.Rows.Add(row);

upd3.Controls.Add(table);

Bob

02.06.2008 at 02:14PM PST, ID: 20836305

quanmac:

I don't add the table programatically, I'm just adding the rows dynamically:

                       
                          
                             
                             
                                <tr>
	<td vAlign="top" align="center" width="100%" class="Label" height="5" colspan="3"></td>
</tr>
<asp:UpdatePanel ID="upd3" runat="server" UpdateMode="Conditional">
<ContentTemplate>
	<asp:PlaceHolder ID="plhSemesters" Runat="server" />
</ContentTemplate>
<Triggers>
	<asp:AsyncPostBackTrigger ControlID="btnSave1" EventName="Click" />
	<asp:AsyncPostBackTrigger ControlID="btnSave2" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<tr>
	<td align="right" valign="top" width="100%" colspan="3">
    		<asp:UpdatePanel ID="upd4" runat="server">
		<ContentTemplate>
			<asp:LinkButton ID="btnSave2" Font-Underline="True" CssClass="LabelButton" Enabled="False" Text="Save"
		    		Width="30" Runat="server" OnClick="btnSave_Click" ToolTip="Save Course Semester Frequencies" />
		</ContentTemplate>
		</asp:UpdatePanel>
	</td>
</tr>
</table>

                             
                          

                    

Open in New Window

02.06.2008 at 02:18PM PST, ID: 20836334

Rank: Sage

TheLearnedOne:

Well, then, where is the table defined?

Bob

02.06.2008 at 02:20PM PST, ID: 20836343

quanmac:

in the aspx page

02.06.2008 at 02:22PM PST, ID: 20836356

Rank: Sage

TheLearnedOne:

Nope, I don't see that anywhere.

Bob

02.06.2008 at 02:26PM PST, ID: 20836381

quanmac:

That's because I didn't post the whole aspx page. I only posted a snippet where I declared the updatepanel and placeholder control

02.06.2008 at 02:29PM PST, ID: 20836407

Rank: Sage

TheLearnedOne:

1) I don't see why you are getting multiple controls.

2) I don't understand the need for the placeholder.

3) Dynamically altering an HTML table can be done in a different way.

Bob

02.06.2008 at 02:54PM PST, ID: 20836610

quanmac:

I will attach my complete aspx page and screenshots of what is happening. I'm aware that there are other ways to dynamically add controls to a table, but the way I do it has been working great for me.

                       
                          
                             
                                1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:

                             
                             
                                <form runat="server">
<AJAXToolKit:ToolkitScriptManager ID="scriptManager" runat="server" />
<table class="Content" cellSpacing="0" cellPadding="0" width="540" border="0">
    <tr>
	    <td vAlign="top" align="left" width="100%" colspan="3">
		    <table cellSpacing="0" cellPadding="0" background="graphics/border_c_2.jpg" border="0">
			    <tr>
				    <td><IMG height="15" src="graphics/border_c_1.jpg" width="303" border="0"></td>
			    </tr>
			    <tr>
				    <td>
					    <table class="Content3" cellSpacing="0" cellPadding="0" border="0">
						    <tr>
							    <td>Please assign the minimum course frequency for each location,
								in each of the semesters.
							    </td>
						    </tr>
					    </table>
				    </td>
			    </tr>
			    <tr>
				    <td><IMG height="8" src="graphics/border_c_3.jpg" width="303" border="0"></td>
			    </tr>
		    </table>
	    </td>
    </tr>
    <tr>
	    <td vAlign="top" align="center" width="100%" class="Label" height="10" colspan="3"></td>
    </tr>
    <tr>
	    <td vAlign="top" align="left" width="100%" colspan="3">
		<asp:UpdatePanel ID="upd1" runat="server">
		<ContentTemplate>
		    <asp:label id="lblStatus" Runat="server" CssClass="Error"></asp:label>
		</ContentTemplate>
    <Triggers>
	<asp:AsyncPostBackTrigger ControlID="btnSave1" EventName="Click" />
	<asp:AsyncPostBackTrigger ControlID="btnSave2" EventName="Click" />
    </Triggers>
    </asp:UpdatePanel>
	    </td>
    </tr>
    <tr>
	    <td vAlign="top" align="center" width="100%" class="Label" height="5" colspan="3"></td>
    </tr>
    <tr>
	    <td vAlign="top" align="left" width="100%" colspan="3">
		<asp:Label ID="lblCourseTitle" CssClass="LabelBold" runat="server" />
	    </td>
    </tr>
    <tr>
	    <td vAlign="top" align="center" width="100%" class="Label" height="10" colspan="3"></td>
    </tr>
    <tr>
		<td align="right" valign="top" width="100%" colspan="3">
		    <asp:UpdatePanel ID="upd2" runat="server">
		<ContentTemplate>
	<asp:LinkButton ID="btnSave1" Font-Underline="True" CssClass="LabelButton" Enabled="False" Text="Save"
				    Width="30" Runat="server" OnClick="btnSave_Click" ToolTip="Save Course Semester Frequencies" />
			</ContentTemplate>
			</asp:UpdatePanel>
		</td>
	</tr>
	<tr>
	    <td vAlign="top" align="center" width="100%" class="Label" height="5" colspan="3"></td>
    </tr>
    <asp:UpdatePanel ID="upd3" runat="server" UpdateMode="Conditional">
	<ContentTemplate>
		<asp:PlaceHolder ID="plhSemesters" Runat="server" />
	    </ContentTemplate>
	    <Triggers>
	<asp:AsyncPostBackTrigger ControlID="btnSave1" EventName="Click" />
	<asp:AsyncPostBackTrigger ControlID="btnSave2" EventName="Click" />
	</Triggers>
    </asp:UpdatePanel>
    <tr>
		<td align="right" valign="top" width="100%" colspan="3">
		    <asp:UpdatePanel ID="upd4" runat="server">
		<ContentTemplate>
	<asp:LinkButton ID="btnSave2" Font-Underline="True" CssClass="LabelButton" Enabled="False" Text="Save"
				    Width="30" Runat="server" OnClick="btnSave_Click" ToolTip="Save Course Semester Frequencies" />
			</ContentTemplate>
			</asp:UpdatePanel>
		</td>
	</tr>
</table>
</form>

                             
                          

                    

Open in New Window

02.06.2008 at 02:55PM PST, ID: 20836620

quanmac:

Attached is a screenshot of the page when it first loads and a screenshot of the top of the page where I'm getting multiple controls after I click on the linkbutton.

FirstLoad.JPG (22 KB) (File Type Details)

First Load

AfterButtonClick.JPG (16 KB) (File Type Details)

After a button click

02.06.2008 at 11:29PM PST, ID: 20838877

AngryBinary:

First, try setting EnableViewState="false" in the UpdatePanel and PlaceHolder controls.

When that (probably) doesn't work, then the problem is you're attempting to add 'tr' rows inside of a 'div' (which is how an 'UpdatePanel' renders) inside of a 'td' table cell. This makes broken HTML. When the client side update occurs, and your browser attempts to cram a div full of rows into the DOM, the DOM silently dies. On the second refresh, it cannot make sense out of the HTML and gets lost attempting to replace the contents of the UpdatePanel div.

An alternative that may minimize the impact on your methodology is to put the entire table inside a single UpdatePanel and store all the static HTML in string constants in the code-behind. When the page loads, piece the strings together and insert the dynamic rows on the fly. From the looks of things, there is no performance benefit gained by doing the async postbacks, since all the dynamic pieces update together anyway. The only reason to use AJAX here is to get that 'no flicker' refresh, which you will still get if you do it in a single panel

Randall

Accepted Solution

02.06.2008 at 11:35PM PST, ID: 20838898

AngryBinary:

BTW, breaking up the tables per that last thing I said will also probably mean you will have to write plain ol' HTML links into the table that call __doPostBack and target another conrol's ID (that is specified as a trigger for the UpdatePanel) to get the UpdatePanel to refresh - which also means you have to disable event validation for the page - unless you can place the LinkButtons outside the UpdatePanel.

20080236-EE-VQP-29 / EE_QW_EXPERT_20070906