server side event for the button having modal pop up extender

Question

I have a button on which I am calling a modal pop up extender which is showing a panel. Below is the code:

<asp:Button ID="btnOne" runat="server" Text="View " 
                                onclick=" btnOne_Click" />


<asp:Panel ID="test" CssClass="ModalWindow"  Width="100%"  ScrollBars="Both" runat="server">
          <table id="tblgv" width="100%">
            <tr>
                <td>
                    <asp:GridView ID="gvTwo" runat="server">
                    </asp:GridView>
                </td>
            </tr>
             <tr>
                <td>
                <asp:Button ID="btnPopUpCancel" runat="server" Text="Close" />
                </td>
            </tr>
          </table>
        </asp:Panel>

<asp:ModalPopupExtender ID="ModalPopupExtender1"  OkControlID="btnPopUpCancel" 
  TargetControlID=" btnOne " PopupControlID="test" runat="server">
</asp:ModalPopupExtender>

In the panel, I have a gridview. I want that when I click the button gridview will be loaded. But it is not happening, when I clicked on the button it is not going server side.

help me how to resolve it.

Answer 1

You Can Use Asynchronous PostBack Trigger Or PostBackTrigger as per your need. Id want this Grid View In update panel you need to use Asynchronous PostBack Trigger. and if you want that page to be reload at button click you need to have post back trigger and make sure that control button to be inside that update panel. Here is an Example

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

                <asp:LinkButton ID="lnkfaketree" runat="server"></asp:LinkButton>
                <asp:ModalPopupExtender ID="mpeTree" runat="server" BackgroundCssClass="modalBackground recharge" CancelControlID="btntreeclose" PopupControlID="paneltree" TargetControlID="lnkfaketree"></asp:ModalPopupExtender>
        <asp:Panel ID="paneltree" runat="server" Style="display: none">
            <div class="btn-group pull-right">
            </div>
            <div class="box box-primary">
                <div class="box-header with-border" style="padding: 3px; background-color: #14181a; font-weight: bolder">
                    <h3 class="box-title" style="color: white">Tree View</h3>
                    <div class="btn-group pull-right">
                        <asp:LinkButton ID="btntreeclose" runat="server" CssClass="fa fa-close" OnClick="btntreeclose_Click"></asp:LinkButton>
                    </div>
                </div>

                <div class="form-horizontal">
                    <div class="box-body">
                        <div id="chart_div" style="width: 1000px; height: 500px; overflow: auto">
                        </div>
                        <asp:Button id="BtnNext" runat="server" OnClick="selectHandler()" />
<asp:Button id="btn_Submit" runat="server" OnClick="selectHandler2()" />
                    </div>
                </div>
            </div>
        </asp:Panel>
            </ContentTemplate><Triggers>
                <asp:AsyncPostBackTrigger ControlID="BtnNext" EventName="Click" />
                <asp:PostBackTrigger ControlID="btn_Submit" />
            </Triggers>
        </asp:UpdatePanel>

Answer 2

Your problem is that the ModalPopup is showing Client side.

If you what to do stuff (bind the gridview) you need do trigger a postback to the server.

1. add a dummy target for the ModalPopup

   < asp:Button runat="server" ID="HiddenTargetControlForModalPopup" style="display:none" />

2. set TargetControlID="HiddenTargetControlForModalPopup"

3. call ModalPopupExtender1.show() inside the btnOne_Click event.

btnOne will now trigger a serverside event. You should also put the Gridview inside a update panel and set btnOne at as asyncpostback trigger.

Hope this will help.