AJAX UpdatePanel PostBack Problem

J

jobo

I have a news section of the website contained within the updatepanel.
What I want is that when a news summary is clicked, the news item
opens up in that same box. I thought I wired everything up correctly
so that it did not do a postback. But when I walked through the
execution process, it in fact does cause a postback when the "expand"
event is raised. Why does this happen? Can someone help me? Thanks.



Here is the .aspx part

1 <%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <atlas:ScriptManager ID="scriptManager" runat="server"></
atlas:ScriptManager>
5 <head>
6 <meta name="author" content="Wink Hosting
(www.winkhosting.com)" />
7 <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
8 <link rel="stylesheet" href="images/style.css" type="text/
css" />
9 <title>Northpoint Data Inc.</title>
10 </head>
11 <body>
12 <form id="form1" runat="server">
13 <div id="page" align="center">
14 <div id="content" style="width:800px">
15 <div id="logo">
16 </div>
17 <div id="topheader">
18 <div align="left" class="bodytext">
19 <br />
20 </div>
21 <div id="toplinks" class="smallgraytext">
22 <a href="#">Home</a> | <a
href="#">Sitemap</a> | <a href="#">Contact Us</a>
23 </div>
24 </div>
25 <div id="menu">
26 <div align="right" class="smallwhitetext"
style="padding:9px;">
27 <a href="#">Home</a> | <a href="#">About
Us</a> | <a href="#">Products</a> | <a href="#">Our Services</a> | <a
href="#">Contact Us</a>
28 </div>
29 </div>
30
31 <div id="contenttext">
32 <div style="padding:10px">
33 <span class="titletext">Welcome to
Northpoint Data!</span>
34 </div>
35 <div class="bodytext" style="padding:
12px;" align="justify">
36 <strong>Hi! This is my third design for
OSWD, with CSS and XHTML 1.0 Transitional Validation. You can do
whatever you want with this template, just keep the Hosting Colombia
link at the bottom. Enjoy! </strong><br />
37 <br />
38 Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Curabitur id est tincidunt nisl pellentesque
tincidunt. Donec in mauris. Mauris neque magna, consectetuer id,
malesuada vitae, tincidunt sit amet, mi. Aliquam lacinia.
Suspendisse potenti. Proin justo lorem, rutrum ac, facilisis in,
malesuada sed, ligula. Mauris lobortis lacus at nibh. Aenean vitae
odio vel odio placerat hendrerit. Suspendisse lacus lacus, tempor
id, pharetra eget, ornare sit amet, pede. Sed aliquet, justo ac
elementum pretium, arcu leo placerat est, a luctus purus diam eget
arcu. Nam augue diam, mollis a, scelerisque eget, aliquet
condimentum, pede. Vestibulum tristique lectus sed augue.<br /><br />
39 Aenean ut mauris luctus mauris interdum
convallis. Nunc vestibulum sodales nulla. Nulla vitae massa. Maecenas
vel tellus vitae elit mattis adipiscing. In pulvinar felis sed est.
Mauris non mi. Duis ultrices dolor ut orci. Quisque lacinia arcu et
purus. Sed euismod metus nec augue. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Nunc dolor leo,
aliquam a, placerat sit amet, accumsan eget, dolor. Sed lacinia augue
in magna. Fusce sed enim. Vestibulum et mauris. Phasellus in lectus.
Pellentesque eu elit in dolor ullamcorper sodales. Vestibulum interdum
ornare ligula. Mauris felis odio, rhoncus sed, adipiscing fermentum,
tincidunt eu, metus. Suspendisse viverra rhoncus purus.
40 </div>
41 </div>
42 <atlas:UpdatePanel ID="newsUP" runat="server"
Mode="Conditional">
43 <ContentTemplate>
44
45 <div id="leftpanel">
46 <div align="justify"
class="graypanel">
47
48 <asp:Label ID="newz"
runat="server" Visible="false" CssClass="bodytext"></asp:Label>
49 <asp:panel
ID="defaultPanel" runat="server">
50 <span
class="smalltitle">News</span><br /><br />
51 <span
class="smallredtext">September 27, 2006</span><br />
52 <span
class="bodytext">Curabitur arcu tellus, suscipit in, aliquam eget,
ultricies id, sapien. Nam est.</span><br />
53 <asp:LinkButton
ID="news1" runat="server" CssClass="smallgraytext" OnCommand="expand"
CommandArgument="1" Text="More..."></asp:LinkButton><br /><br />
54 <span
class="smallredtext">September 27, 2006</span><br />
55 <span
class="bodytext">Curabitur arcu tellus, suscipit in, aliquam eget,
ultricies id, sapien. Nam est.</span><br />
56 <asp:LinkButton
ID="news2" runat="server" CssClass="smallgraytext" OnCommand="expand"
CommandArgument="2" Text="More..."></asp:LinkButton><br /><br />
57 <span
class="smallredtext">September 27, 2006</span><br />
58 <span
class="bodytext">Curabitur arcu tellus, suscipit in, aliquam eget,
ultricies id, sapien. Nam est.</span><br />
59 <asp:LinkButton
ID="news3" runat="server" CssClass="smallgraytext" OnCommand="expand"
CommandArgument="3" Text="More..."></asp:LinkButton><br /><br />
60 </asp:panel>
61 <asp:placeHolder
ID="newsP" runat="server">
62 <br />
63 <asp:LinkButton
ID="back" runat="server" CommandArgument="back"
CssClass="smallgraytext" OnCommand="expand" Text="back"
Visible="true"></asp:LinkButton>
64 </asp:placeHolder>
65 </div>
66 </div>
67
68 </ContentTemplate>
69 <Triggers>
70 <atlas:ControlEventTrigger
ControlID="news1" EventName="Command" />
71 <atlas:ControlEventTrigger
ControlID="back" EventName="Command" />
72 </Triggers>
73 </atlas:UpdatePanel>
74 <div id="footer" class="smallgraytext">
75 <a href="#">Home</a> | <a href="#">About Us</
a> | <a href="#">Products</a> | <a href="#">Our Services</a> | <a
href="#">Contact Us</a>
76 | Northpoint Data Inc.
77 © 2007 | <a href="http://www.winkhosting.com"
target="_blank">Hosting Colombia</a>
78 </div>
79 </div>
80 </div>
81 </form>
82 </body>
83 </html>



Here is the .cs portion



1 using System;
2 using System.Data;
3 using System.Configuration;
4 using System.Web;
5 using System.Web.Security;
6 using System.Web.UI;
7 using System.Web.UI.WebControls;
8 using System.Web.UI.WebControls.WebParts;
9 using System.Web.UI.HtmlControls;
10
11 public partial class _Default : System.Web.UI.Page
12 {
13 string test = "Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Curabitur id est tincidunt nisl pellentesque
tincidunt. Donec in mauris. Mauris neque magna, consectetuer id,
malesuada vitae, tincidunt sit amet, mi. Aliquam lacinia.
Suspendisse potenti. Proin justo lorem, rutrum ac, facilisis in,
malesuada sed, ligula. Mauris lobortis lacus at nibh. Aenean vitae
odio vel odio placerat hendrerit. Suspendisse lacus lacus, tempor
id, pharetra eget, ornare sit amet, pede. Sed aliquet, justo ac
elementum pretium, arcu leo placerat est, a luctus purus diam eget
arcu. Nam augue diam, mollis a, scelerisque eget, aliquet
condimentum, pede. Vestibulum tristique lectus sed augue.";
14 protected void Page_Load(object sender, EventArgs e)
15 {
16 }
17
18 protected void expand(object sender, CommandEventArgs e)
19 {
20 if (e.CommandArgument == "1")
21 {
22 newz.Text = test;
23 newz.Visible = true;
24 newsP.Visible = true;
25 defaultPanel.Visible = false;
26 }
27 if (e.CommandArgument == "back")
28 {
29 newz.Visible = false;
30 defaultPanel.Visible = true;
31 newsP.Visible = false;
32 }
33
34 }
35 }
 
B

bruce barker

the update panel works as follows:

client script

1) read all controls on page a build a standard post name/value pair string
2) send the post data to page via an iframe or XMLHttpRequest

server code
1) do standard page process
2) fire panel event
3) collect the update panel render html only
4) send the html back to the client script

client script
1) receive postback html
2) replace panels innerHTML with postback html


-- bruce (sqlwork.com)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top