AJAX UpdatePanel PostBack Problem

Discussion in 'ASP .Net' started by jobo, Mar 7, 2007.

  1. jobo

    jobo Guest

    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 }
    jobo, Mar 7, 2007
    #1
    1. Advertising

  2. jobo

    bruce barker Guest

    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)

    jobo wrote:
    > 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 }
    >
    bruce barker, Mar 7, 2007
    #2
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    3
    Views:
    473
    Rob Meade
    Aug 8, 2007
  2. Nick Chan

    get related ajax updatePanel on postback

    Nick Chan, Oct 4, 2007, in forum: ASP .Net
    Replies:
    0
    Views:
    389
    Nick Chan
    Oct 4, 2007
  3. Ronald S. Cook
    Replies:
    0
    Views:
    752
    Ronald S. Cook
    Jan 23, 2008
  4. Shawn

    AJAX UpdatePanel on postback.

    Shawn, Jan 28, 2009, in forum: ASP .Net
    Replies:
    2
    Views:
    2,997
    Shawn
    Jan 30, 2009
  5. Monty
    Replies:
    7
    Views:
    635
    baradi hakim
    Jan 29, 2007
Loading...

Share This Page