C# Ajax updatepanel doesn't work

Question

Hi,

I have an updatepanel which doesn't work. My whole code:

<%@ Page Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true" CodeBehind="AlgemeenDocument.aspx.cs" Inherits="PCK_Web_new.WebForm7" Title="Untitled Page" %>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<script language="javascript" type="text/javascript">

    function showOverlay(panel)
    {
        var pageHeight;

        // Get viewport height
        if (typeof window.innerWidth != 'undefined')
            // Get viewport height - FF
            vpHeight = window.innerHeight;
        else
            // Get viewport height - IE
            vpHeight = document.documentElement.clientHeight;

        // Get site height (div)

        var treeview = document.getElementById("Treeview");
        var siteHeight = 0;

        if(treeview != null)
        {
            siteHeight = document.getElementById("Treeview").offsetHeight;
        }
        siteHeight += document.getElementById("HeaderContainer").offsetHeight;
        siteHeight += document.getElementById("divMainMenu").offsetHeight;



        // Compare heights and set the overlay height
        if(vpHeight < siteHeight)
            pageHeight = siteHeight + "px";
        else
            pageHeight = vpHeight + "px";


        var div = document.getElementById(panel);

        div.className = "DocOverlayShow";
        div.style.height = pageHeight;

        document.getElementById('<%= pnlAddComment.ClientID %>').className="DocAddCommentBox";
    }

    function hideOverlay()
    {
        //document.getElementById(commentID).style.visibility = "hidden";
        //document.getElementById(titelID).style.visibility = "hidden";

        var inputs = new Array();
        inputs = document.getElementsByTagName('input'); 

        for ( i = 0; i < inputs.length; i++ )
        { 
            if ( inputs[i].type == 'text' )
            {
                inputs[i].value = '';
            }
        }     

        document.getElementById('<%= txtTitel.ClientID %>').value = "";
        document.getElementById('<%= txtComment.ClientID %>').value = "";

        document.getElementById('<%= pnlOverlay.ClientID %>').className = "DocOverlayHide";
    }

</script>


    <asp:Panel ID="pnlOverlay" runat="server" CssClass="DocOverlayHide">

        <!-- <div id="DocAddCommentBox"> -->
        <asp:Panel ID="pnlAddComment" runat="server" CssClass="DocAddCommentBox">

            <div id="DocACTitleBox">
                Opmerking plaatsen
            </div>

            <div id="DocACContentBox">
                <div class="DocACLabel">
                    Titel:
                </div>
                <div class="DocACInput">
                    <asp:TextBox ID="txtTitel" runat="server"></asp:TextBox>
                </div>
                <div class="ClearFloat">



                </div>
                <div class="DocACLabel">
                    Opmerking:
                </div>
                <div class="DocACInput">
                    <asp:TextBox ID="txtComment" runat="server" TextMode="MultiLine" Rows="15" 
                        Columns="40">
                    </asp:TextBox>
                </div>
                <div class="ClearFloat">



                </div>
                <div id="DocBtnBox">
                    <input id="btnCancel" type="button" onclick="hideOverlay()" value="Annuleren"/>


                    <asp:UpdatePanel ID="UpdatePanel2" runat="server" EnableViewState="False" UpdateMode="Always" RenderMode="Block">
                    <ContentTemplate>
                        <asp:Button ID="btnSave" runat="server" CssClass="btnSave" onclick="btnSave_Click" Text="Opslaan" />
                        <asp:Label ID="lblTitleError" runat="server" Text="ertroro"></asp:Label>
                    </ContentTemplate>
                    </asp:UpdatePanel>


                </div>
                <div class="ClearFloat">&nbsp;</div>
            </div>

        </asp:Panel>
        <!-- </div> -->


        <asp:Panel ID="pnlResult" runat="server" CssClass="DocOverlayHide">

            <div id="DocResultBox">
                <div id="Div1">
                    Opmerking plaatsen
                </div>

                <div id="Div2">
                    <div class="DocACLabel">
                        <asp:Label ID="lblResult" runat="server" Text="Label"></asp:Label>
                    </div>

                    <div id="Div1">
                        <input id="btnClose" type="button" onclick="hideOverlay()" value="Sluiten"/> 
                    </div>
                    <div class="ClearFloat">&nbsp;</div>
                </div>
            </div>

        </asp:Panel>

</asp:Panel>



<div class="DocContainer">

    <div class="DocTitleBox">

        <div class="DocLogo">
            Het logo
        </div>

        <div class="DocTitle">
            <asp:Label ID="lblTitle" runat="server"></asp:Label>
        </div>

        <div class="DocType">
            Document soort
            <asp:Label ID="lblDocType" runat="server"></asp:Label>    
        </div>

        <div class="DocBtn">
            <input type="button" value="Opmerking" onclick="showOverlay('<%=pnlOverlay.ClientID %>')" />
        </div>
    </div>

    <div class="DocContentBox">

        <asp:Label ID="lblID" runat="server"></asp:Label>

        <p>Algemeen Document Geen vaste opmaak.</p>

    </div>

</div>

I have tried triggers, but they didn't work..

When i press btnSave this is the code that's executed:

    protected void btnSave_Click(object sender, EventArgs e)
    {

        lblTitleError.Text = "BUTTON PRESSED";

    }

When i set a breakpoint, it runs the code. But the label text isn't set :S

Hope someone can help?

Thnx!

EDIT:

I also tried this:

<div id="DocBtnBox">
                    <input id="btnCancel" type="button" onclick="hideOverlay()" value="Annuleren"/>

                    <asp:Button ID="btnSave" runat="server" CssClass="btnSave" onclick="btnSave_Click" Text="Opslaan" />

                    <asp:UpdatePanel ID="UpdatePanel2" runat="server" EnableViewState="False" UpdateMode="Always">
                    <ContentTemplate>
                        <asp:Label ID="lblTitleError" runat="server" Text="ertroro"></asp:Label>
                    </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
                        </Triggers>
                    </asp:UpdatePanel>

                </div>

Answer 1

The label you want its text to be set and the btnSave button elements should both be inside the Update Panel element.

Answer 2

I think the best tutor on the web is Joe Stagner. His material for .NET is awesome.

Here is a link where he shows you exactly, step-by-step how to do what you are trying.

Addendum:

If I were you I'd create a clean page from the sample code Joe has provided. Go to http://www.asp.net/LEARN/ajax-videos/ and figure out which tutorial you want to base your solution on. After you get the tutorial working on a sample page, I'd slowly, piece-by-piece add in the logic you need for your application.

Answer 3

Try removing EnableViewState="False" from the UpdatePanel.