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

  • 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>

    ajax Popup not Working Properly With Update Panel

    Tuesday, January 5, 2016 3:10 PM

Answers

  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 8, 2016 8:47 AM

All replies

  • User61956409 posted

    Hi Shubhamagrawal637,

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

    Best Regards,

    Fei Han

    Wednesday, January 6, 2016 1:59 AM
  • 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.

    Wednesday, January 6, 2016 5:28 AM
  • 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 8, 2016 8:47 AM