Asp Update Panel Not Working in Proper with Ajax Modal Popup Extender in visual Studio 2013 But Its Working in Visul Studio 2012

Question

User-1250035202 posted

<asp:UpdatePanel ID="up1" runat="server">
    <ContentTemplate>

<table style="width:60%;border:2px  solid">
    <tr>
        <td colspan="3">
        State:
        </td>
        </tr>
    <tr>
        <td>
            Countery
        </td>
        <td>
            <asp:DropDownList ID="ddlCountry" runat="server" />
        </td>
    </tr>
    <tr>
        <td style="width:20%"> State Name </td>
        <td style="width:25%">
            <asp:TextBox ID="txtSerch" runat="server" Width="200"></asp:TextBox>
        </td>
        <td style="width:15%">
            <asp:Button ID="btnSerch" runat="server" Text="Serch" Width="80" OnClick="btnSerch_Click" />
        </td>
    </tr>
    <tr>
       <td style="text-align:right" colspan="3">
           <asp:Button ID="btnNew" runat="server" Text="Add New" OnClick="btnNew_Click" />
           <asp:Label ID="lbl" runat="server" Text="" Style="display:none"></asp:Label>
       </td> 
    </tr>
    <tr>
        <td colspan="3" style="text-align:center">
       
        </td>
    </tr>
    <tr>
        <td style="width:100%" colspan="3">
            <asp:GridView ID="grv1" runat="server" AutoGenerateColumns="false" AllowPaging="true" AllowSorting="true" Caption="State List" Width="100%" OnPageIndexChanging="grv1_PageIndexChanging" OnSorting="grv1_Sorting" PageSize="7">
                <Columns>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:ImageButton ID="lnkEdit" runat="server" ImageUrl="~/Images/Edit.png" OnClick="lnkEdit_Click"></asp:ImageButton>
                            &nbsp;
                            <asp:ImageButton ID="lnkDelete" runat="server" ImageUrl="~/Images/Delete.png" OnClick="lnkDelete_Click"></asp:ImageButton>
                        
                        </ItemTemplate>
                        
                        
                    </asp:TemplateField>
                    <asp:BoundField HeaderText="StateId" DataField="StateId" SortExpression="StateId" ReadOnly="true" />
                    
                    <asp:BoundField HeaderText="StateName" DataField="StateName" SortExpression="StateName" />
                    <asp:BoundField HeaderText="CountryName" DataField="CountryName" SortExpression="CountryName" />
                    <asp:CheckBoxField HeaderText="IsActive" DataField="IsActive" SortExpression="IsActive" />
                </Columns>
            </asp:GridView>
        </td>
    </tr>
</table>

<asp:Panel ID="PanelAddState" runat="server" Width="80%" BorderColor="Green" BorderStyle="Outset" BorderWidth="5" BackColor="SlateBlue">
    <asp:Panel ID="PanelAddStateTitle" runat="server" Width="100%" HorizontalAlign="Center" style="cursor:move;display:none">

        <b> Add State Details</b>
        </asp:Panel>
        <table style="width:100%;margin:5px;border:2px solid blue">
            <tr>
                <td>
                    Country Name
                </td>
                <td>:</td>
                <td>

                    <asp:DropDownList ID="ddlAddCountry" runat="server"></asp:DropDownList>
                </td>
            </tr>

            <tr>
                <td align="left" width="25%">
                State Name
                </td>
                <td width="2%">
                    :
                </td>
                <td>
        <asp:TextBox ID="txtAddStateName" runat="server" placeHolder="Enter Country Name">

        </asp:TextBox>
        <asp:RequiredFieldValidator ID="rfv1" runat="server" ControlToValidate="txtAddStateName" ErrorMessage="Require State Name"  ValidationGroup="Add" ></asp:RequiredFieldValidator>
                    <ajaxToolkit:ValidatorCalloutExtender ID="vce1" runat="server" TargetControlID="rfv1" Width="300"></ajaxToolkit:ValidatorCalloutExtender> 
                </td>
            </tr>
            <tr>
                <td align="left">
                    Is Active
                </td>
                <td>:</td>
                <td>
                    <asp:CheckBox ID="chkAddIsActive" runat="server" />
                </td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td>
               <asp:Button ID="btnSave" runat="server"  ValidationGroup="Add" Text="Save" OnClick="btnSave_Click" /> 
                    &nbsp;
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel" CausesValidation="false" />
                </td>
            </tr>
        </table>
    

</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="mpe1" runat="server" TargetControlID="btnNew" PopupControlID="PanelAddState" PopupDragHandleControlID="PanelAddStateTitle" DropShadow="true" RepositionMode="RepositionOnWindowResizeAndScroll" CancelControlID="btnCancel" BackgroundCssClass="modelPoupBackground" OnLoad="mpe1_Load"  ></ajaxToolkit:ModalPopupExtender>
 
<asp:Button ID="btndummy" runat="server" Text="btndummy" style="display:none" />

<asp:Panel ID="PanelEditState" runat="server" Width="80%" BorderColor="Green" BorderStyle="Outset" BorderWidth="5" BackColor="SlateBlue">
    <asp:Panel ID="PanelEditStateTitle" runat="server" Width="100%" HorizontalAlign="Center" style="cursor:move;display:none">

        <b> Update State Details</b>
        </asp:Panel>
        <table style="width:100%;margin:5px;border:2px solid blue">
            <tr>
                <td>
                    Country Name
                </td>
                <td>:</td>
                <td>
                    <asp:TextBox ID="txtCountry" runat="server" ReadOnly="true"></asp:TextBox>
                                    </td>
            </tr>

            <tr>
                <td align="left" width="25%">
                State Name
                </td>
                <td width="2%">
                    :
                </td>
                <td>
        <asp:TextBox ID="txtState" runat="server" placeHolder="Enter State Name">

        </asp:TextBox>
        <asp:RequiredFieldValidator ID="rfv2" runat="server" ControlToValidate="txtState" ErrorMessage="Require State Name"  ValidationGroup="Edit" Display="None" ></asp:RequiredFieldValidator>
                    <ajaxToolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" TargetControlID="rfv2" Width="300"></ajaxToolkit:ValidatorCalloutExtender> 
                </td>
            </tr>
            <tr>
                <td align="left">
                    Is Active
                </td>
                <td>:</td>
                <td>
                    <asp:CheckBox ID="chk1Edit" runat="server" />
                </td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td>
               <asp:Button ID="btnUpdate" runat="server"  ValidationGroup="Edit" Text="Save" OnClick="btnUpdate_Click" /> 
                    &nbsp;
                    <asp:Button ID="btnEditCancle" runat="server" Text="Cancel" CausesValidation="false" />
                </td>
            </tr>
        </table>
    

</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="mpe2" runat="server" TargetControlID="btndummy" PopupControlID="PanelEditState" PopupDragHandleControlID="PanelEditStateTitle" DropShadow="true" RepositionMode="RepositionOnWindowResizeAndScroll" CancelControlID="btnCancel" BackgroundCssClass="modelPoupBackground"></ajaxToolkit:ModalPopupExtender>




<asp:Button ID="btnDummyDelete" runat="server" Text="btndummy" style="display:none" />

<asp:Panel ID="PanelDeleteState" runat="server" Width="60%" BorderColor="Green" BorderStyle="Outset" BorderWidth="5" BackColor="GreenYellow" style="border-radius:10px 10px">
    <asp:Panel ID="PanelDeleteStateTitle" runat="server" Width="100%" HorizontalAlign="Center" style="cursor:move;display:none">

        <b> Panel Delete Country</b>
        </asp:Panel>
        <table style="width:100%;margin:5px;border:2px solid blue">
            <tr>
                <td align="left" width="25%">
              
                <b style="color:red;font-family:Tahoma;font-size:15px;text-align:center">
                    Are You Sure You Want To Delete State Details
                </b>
        
                </td>
          
            <tr>
               
                <td style="text-align:center">
               <asp:Button ID="btnYes" runat="server"  Text="Delete" OnClick="btnYes_Click"  Width="65"/> 
                    &nbsp;
                    <asp:Button ID="btnNo" Width="65" runat="server" Text="No"/>
                </td>
            </tr>
        </table>
    

</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="mpe3" runat="server" TargetControlID="btnDummyDelete" PopupControlID="PanelDeleteState" PopupDragHandleControlID="PanelDeleteStateTitle" DropShadow="true" RepositionMode="RepositionOnWindowResizeAndScroll" CancelControlID="btnNo" BackgroundCssClass="modelPoupBackground"></ajaxToolkit:ModalPopupExtender>

        
    </ContentTemplate>
</asp:UpdatePanel>

Answer 1

User61956409 posted

Hi Shubhamagrawal637,

Could you explain more about your problem? What is wrong with UpdatePanel?

Best Regards,

Fei Han

Answer 2

User-1250035202 posted

I Posted Image In That when I am Using Update Panel &  Ajax Popup Window Is not Accessible The Popup Window Getting  Stuck After Executing Popup Window 3 times. In Visual Studio 2013

when I am Using Update Panel & Ajax Popup Window Is   not   Stuck After Executing Popup Window any number of Times in Visual studio 2012.

Answer 3

User61956409 posted

Hi Shubhamagrawal637,

when I am Using Update Panel &  Ajax Popup Window Is not Accessible The Popup Window Getting  Stuck After Executing Popup Window 3 times. In Visual Studio 2013

I create a simple sample to reproduce your problem, the code works fine on my side. You could create a new page to test it and check whether you will get same problem.

<div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="btnNew" runat="server" Text="Add New" OnClick="btnNew_Click" />

            <asp:Panel ID="PanelAddState" runat="server">
                Content
                <br />
                <asp:Button ID="btnCancel" runat="server" Text="Cancel" CausesValidation="false" />
            </asp:Panel>
            <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnNew" PopupControlID="PanelAddState" CancelControlID="btnCancel"></asp:ModalPopupExtender>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

Besides, you could also try to use Bootstrap Modal plugin or jQuery modal.

http://www.w3schools.com/bootstrap/bootstrap_modal.asp

https://plugins.jquery.com/tag/modal/

Best Regards,

Fei Han