UpdatePanel-hosted TextBox is not sent via button click

Question

User1993186009 posted

Hi,

I've got a .NET 4.0 WebForms project with 2 UpdatePanels and textbox in one of them. When I enter text in "Group" textbox and then click on "Save ASYNC" button, the proper server function is called but nothing comes to txtGroup. I wonder what's wrong with my project and how to fix the issue. Below is my ASPX page:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/DEF.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>


<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderBodyAreaClass" runat="server">
        <link href="Content/css/jquery-ui.css" rel="stylesheet" type="text/css" />
        <link href="Content/CSS/AdminStyles.css" rel="stylesheet" type="text/css" />
</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">

    <script type="text/javascript" src="Scripts/js/jquery-1.11.2.js"></script>
    <script type="text/javascript" src="Scripts/js/jquery-ui.js"></script>

</asp:Content>


<asp:Content ID="BodyContent" ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <asp:UpdatePanel ID="UpdatePanel4" runat="server"  >
        <ContentTemplate>
            <asp:Label ID="lblError" runat="server"  ForeColor="Red" Text=""></asp:Label>
            <asp:Button ClientIDMode="Static" ID="Button1" runat="server" Text="DIALOG"
                OnClientClick="Dlg();return false;"
                />
        </ContentTemplate>
    </asp:UpdatePanel>

    <div id="dialogQuests" class="dialogQuestsClass">
        <div class="headerDivBlock">QUESTION</div>
        <div class="contentDivBlock">
            <asp:UpdatePanel ID="UpdatePanel6" runat="server" >
                <ContentTemplate>
                    <table id="tableSizePositionQuest">
                        <tr>
                            <td>Group:</td>
                            <td>
                                <asp:TextBox ID="txtGroup" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <asp:Button ID="btnQuestSave" runat="server" UseSubmitBehavior="false" Text="Save ASYNC" OnClick="btnQuestSave_Click"  />
                            </td>
                        </tr>
                    </table>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>


    <script type="text/javascript">

        function Dlg()
        {
            $('#dialogQuests').dialog({ minWidth: 840, resizable: true });
        }

    </script>

</asp:Content>

Answer 1

User1711366110 posted

When I enter text in "Group" textbox and then click on "Save ASYNC" button, the proper server function is called but nothing comes to txtGroup. I wonder what's wrong with my project and how to fix the issue

   As per this case, you can set the property like UpdateMode as conditional in "UpdatePanel6" ,then call AsyncPostBackTrigger for the button (btnQuestSave) click event.

so you can try like below :

<asp:Content ID="BodyContent" ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <asp:UpdatePanel ID="UpdatePanel4" runat="server" >
        <ContentTemplate>
            <asp:Label ID="lblError" runat="server"  ForeColor="Red" Text=""></asp:Label>
            <asp:Button ClientIDMode="Static" ID="Button1" runat="server" Text="DIALOG" 
                OnClientClick="Dlg();return false;" 
                />
        </ContentTemplate>
    </asp:UpdatePanel>

    <div id="dialogQuests" class="dialogQuestsClass">
        <div class="headerDivBlock">QUESTION</div>
        <div class="contentDivBlock">
            <asp:UpdatePanel ID="UpdatePanel6" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <table id="tableSizePositionQuest">
                        <tr>
                            <td>Group:</td>
                            <td>
                                <asp:TextBox ID="txtGroup" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <asp:Button ID="btnQuestSave" runat="server" UseSubmitBehavior="false" Text="Save ASYNC" OnClick="btnQuestSave_Click"  />
                            </td>
                        </tr>
                    </table>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger controlid="btnQuestSave" eventname="Click" />
                </Triggers>
            </asp:UpdatePanel>
        </div>
    </div>


    <script type="text/javascript">

        function Dlg()
        {
            $('#dialogQuests').dialog({ minWidth: 840, resizable: true });
        }

    </script>

</asp:Content>

--
with regards,
Edwin

Answer 2

User1993186009 posted

Hi Edwin,

Tried your idea but expectedly, no luck, and MSDN says that all buttons inside UpdatePanel are triggers itself, so there's no use ofenlisting them in triggers section explicitly. After that I tried http://www.jonathanjungman.com/blog/post/ASPNET-AJAX-UpdatePanel-2b-jQuery-UI-Dialog.aspx, and it worked like a charm!

            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
            function EndRequestHandler(sender, args) {
                var elId = sender._activeElement.id;

                if (elId.indexOf("btnAddTypeQuest") > -1 || elId.indexOf("btnEditQuest") > -1) {
                    $('#dialogQuests').dialog({
                        maxHeight: 600,
                        minWidth: 840,
                        open: function (type, data) {
                            $(this).parent().appendTo("form");
                        }
                    });
                }

                if (args.get_error() != undefined) {
                    args.set_errorHandled(true);
                }
            }

The crucial thing is in bold