asked on

Problem in update panel

Hi

I am applying Ajax on an aspx page. Please see the code section. But when I click on submit button, page still got submitted.

Am I missing something?

Regards
Karan Gupta

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CategoryAdmin.aspx.cs" Inherits="Admin_CategoryAdmin" %>
 
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<%--<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxToolKit" %>--%>
<!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>Category Admin</title>
</head>
<body>
    <form id="frmCategoryAdmin" runat="server">
        <asp:ScriptManager EnablePartialRendering="true"  ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <table align="center">
                    <tr>
                        <td align="center" colspan="2">
                            <asp:Label ID="lblHeading" runat="server" Text="Category"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <asp:Label ID="lblMessage" runat="server"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblCategoryName" Text="Category Name" runat="server"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="txtCategoryName" runat="server">
                            </asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <asp:Button ID="btnAddCategories" Text="Add Category" runat="server" OnClick="btnAddCategories_Click" />
                            <asp:Button ID="btnEditCategory" runat="server" OnClick="btnEditCategory_Click" Text="Edit Category" />
                            <asp:Button ID="btnDeleteCategory" runat="server" OnClick="btnDeleteCategory_Click"
                                Text="Delete Category" />
                        </td>
                    </tr>
                </table>
                <table align="center">
                    <tr>
                        <td>
                            <asp:ListBox ID="lstCategory" runat="server"></asp:ListBox>
                        </td>
                    </tr>
                </table>
                <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnAddCategories" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="btnEditCategory" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="btnDeleteCategory" EventName="Click" />
            </Triggers>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

Open in new window

David H.H.Lee

Hi KaranGupta,

Try turn off Update panel's ChildrenAsTriggers property for AsyncPostBackTrigger. It turn on by default for PostBackTrigger.
eg:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers=false>

Check this for further details:
http://www.asp.net/ajax/documentation/live/mref/P_System_Web_UI_UpdatePanel_ChildrenAsTriggers.aspx

David Robitaille

"But when I click on submit button, page still got submitted."
What do you meen, you got a screen flikker or the data is still got submited?

thing you could try is to remove the EventName="Click"
or
Buttons have a UseSubmitBehavior property that you could set to false.
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.button.usesubmitbehavior.aspx

Kelvin McDaniel

What are you actually expecting to update in the UpdatePanel?

If it isn't the entire table then you need to limit AN UpdatePanel to the CELLS of the table that you actually want updated. Unfortunately, if the UpdatePanel encloses a table then the entire table will be re-rendered on update.

KaranGupta

ASKER

Hi

By submitting means, page got submitted i.e. flickers.

Regards
Karan Gupta

KaranGupta

ASKER

Hi x_com

I have tried it but still I am getting the same problem.

Regards
Karan Gupta

ASKER CERTIFIED SOLUTION

David Robitaille

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Kelvin McDaniel

Still going to have the issue of re-renderung the entire table, unless that's not a concern...

KaranGupta

ASKER

Hi

I have tried to bind it to one row only. Then also page flickers. Please see the code section.

Regards
Karan Gupta

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CategoryAdmin.aspx.cs" Inherits="Admin_CategoryAdmin" %>
 
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<%--<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxToolKit" %>--%>
<!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>Category Admin</title>
</head>
<body>
    <form id="frmCategoryAdmin" runat="server">
        <asp:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <table align="center">
            <tr>
                <td align="center" colspan="2">
                    <asp:Label ID="lblHeading" runat="server" Text="Category"></asp:Label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <asp:Label ID="lblMessage" runat="server"></asp:Label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblCategoryName" Text="Category Name" runat="server"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtCategoryName" runat="server">
                    </asp:TextBox>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                        <ContentTemplate>
                            <asp:Button ID="btnAddCategories" UseSubmitBehavior="false" Text="Add Category" runat="server"
                                OnClick="btnAddCategories_Click" />
                            <asp:Button ID="btnEditCategory" UseSubmitBehavior="false" runat="server" OnClick="btnEditCategory_Click"
                                Text="Edit Category" />
                            <asp:Button ID="btnDeleteCategory" UseSubmitBehavior="false" runat="server" OnClick="btnDeleteCategory_Click"
                                Text="Delete Category" />
                            <triggers>
                <asp:AsyncPostBackTrigger ControlID="btnAddCategories" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="btnEditCategory" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="btnDeleteCategory" EventName="Click" />
            </triggers>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
            </tr>
        </table>
        <table align="center">
            <tr>
                <td>
                    <asp:ListBox ID="lstCategory" runat="server"></asp:ListBox>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Open in new window

David Robitaille

again, you put the trigger INSIDE the <ContentTemplate>
put it outside and everything should be fine

Kelvin McDaniel

As davrob60 said in #24475069, you need to move the <Triggers></Triggers> section outside of the <ContentTemplate></ContentTemplate> section.

Try this block (as provided, then updated)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CategoryAdmin.aspx.cs" Inherits="Admin_CategoryAdmin" %>
 
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<%--<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxToolKit" %>--%>
<!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>Category Admin</title>
</head>
<body>
    <form id="frmCategoryAdmin" runat="server">
        <asp:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <table align="center">
            <tr>
                <td align="center" colspan="2">
                    <asp:Label ID="lblHeading" runat="server" Text="Category"></asp:Label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <asp:Label ID="lblMessage" runat="server"></asp:Label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblCategoryName" Text="Category Name" runat="server"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtCategoryName" runat="server">
                    </asp:TextBox>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                        <ContentTemplate>
                            <asp:Button ID="btnAddCategories" UseSubmitBehavior="false" Text="Add Category" runat="server"
                                OnClick="btnAddCategories_Click" />
                            <asp:Button ID="btnEditCategory" UseSubmitBehavior="false" runat="server" OnClick="btnEditCategory_Click"
                                Text="Edit Category" />
                            <asp:Button ID="btnDeleteCategory" UseSubmitBehavior="false" runat="server" OnClick="btnDeleteCategory_Click"
                                Text="Delete Category" />
                            </ContentTemplate>
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="btnAddCategories" EventName="Click" />
                                <asp:AsyncPostBackTrigger ControlID="btnEditCategory" EventName="Click" />
                                <asp:AsyncPostBackTrigger ControlID="btnDeleteCategory" EventName="Click" />
                            </Triggers>
 
                    </asp:UpdatePanel>
                </td>
            </tr>
        </table>
        <table align="center">
            <tr>
                <td>
                    <asp:ListBox ID="lstCategory" runat="server"></asp:ListBox>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Open in new window

KaranGupta

ASKER

Hi

I have put trigger outside the content template. And I have tried the code given to me by azarc3, but still I am facing same problem. Please look into the code.

Regards
Karan Gupta

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CategoryAdmin.aspx.cs" Inherits="Admin_CategoryAdmin" %>
 
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<%--<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxToolKit" %>--%>
<!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 id="Head1" runat="server">
    <title>Category Admin</title>
</head>
<body>
    <form id="frmCategoryAdmin" runat="server">
        <asp:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <table align="center">
            <tr>
                <td align="center" colspan="2">
                    <asp:Label ID="lblHeading" runat="server" Text="Category"></asp:Label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <asp:Label ID="lblMessage" runat="server"></asp:Label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblCategoryName" Text="Category Name" runat="server"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtCategoryName" runat="server">
                    </asp:TextBox>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    &nbsp;
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                        <ContentTemplate>
                            <asp:Button ID="btnAddCategories" UseSubmitBehavior="false" Text="Add Category" runat="server"
                                OnClick="btnAddCategories_Click" />
                            <asp:Button ID="btnEditCategory" UseSubmitBehavior="false" runat="server" OnClick="btnEditCategory_Click"
                                Text="Edit Category" />
                            <asp:Button ID="btnDeleteCategory" UseSubmitBehavior="false" runat="server" OnClick="btnDeleteCategory_Click"
                                Text="Delete Category" />
                            </ContentTemplate>
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="btnAddCategories" EventName="Click" />
                                <asp:AsyncPostBackTrigger ControlID="btnEditCategory" EventName="Click" />
                                <asp:AsyncPostBackTrigger ControlID="btnDeleteCategory" EventName="Click" />
                            </Triggers>
 
                    </asp:UpdatePanel>
                </td>
            </tr>
        </table>
        <table align="center">
            <tr>
                <td>
                    <asp:ListBox ID="lstCategory" runat="server"></asp:ListBox>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Open in new window

David Robitaille

try this

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CategoryAdmin.aspx.cs" Inherits="Admin_CategoryAdmin" %>
 
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<%--<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxToolKit" %>--%>
<!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>Category Admin</title>
</head>
<body>
    <form id="frmCategoryAdmin" runat="server">
        <asp:ScriptManager EnablePartialRendering="true"  ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <table align="center">
                    <tr>
                        <td align="center" colspan="2">
                            <asp:Label ID="lblHeading" runat="server" Text="Category"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <asp:Label ID="lblMessage" runat="server"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblCategoryName" Text="Category Name" runat="server"></asp:Label>
                        </td>
                        <td>
                            <asp:TextBox ID="txtCategoryName" runat="server">
                            </asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <asp:Button ID="btnAddCategories" Text="Add Category" runat="server" OnClick="btnAddCategories_Click" />
                            <asp:Button ID="btnEditCategory" runat="server" OnClick="btnEditCategory_Click" Text="Edit Category" />
                            <asp:Button ID="btnDeleteCategory" runat="server" OnClick="btnDeleteCategory_Click"
                                Text="Delete Category" />
                        </td>
                    </tr>
                </table>
                <table align="center">
                    <tr>
                        <td>
                            <asp:ListBox ID="lstCategory" runat="server"></asp:ListBox>
                        </td>
                    </tr>
                </table>
 
            </ContentTemplate>
                <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnAddCategories" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="btnEditCategory" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="btnDeleteCategory" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
    </form>
</body>
</html>

Open in new window

KaranGupta

ASKER

Hi davrob60

I am facing same problem. Have you tried this code on your machine? Have you done any change in code behind.

Regards
Karan Gupta

David Robitaille

well updatepanels are pretty straightforward, i use them for a long time.

the only thing you could try is to remove the click event from the triggers:
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAddCategories" />
<asp:AsyncPostBackTrigger ControlID="btnEditCategory" />
<asp:AsyncPostBackTrigger ControlID="btnDeleteCategory" />
</Triggers>
</asp:UpdatePanel>

By the way, you did not provide the code being, could you send the code of one of the buttons you "click" it it still don`t work. I will test it tomorrow, it`s 10pm here and i'm going to bed.

KaranGupta

ASKER

Hi

I tried to open the web page in internet explorer. I have seen the javascript error "Sys is undefined".
May be because of this reason page is flickering.

Is there anything I am missing in .aspx page?

Regards
Karan Gupta