Menu icon Foundation
Ajax and Reveal modal, version 3

Hey Everybody,

David has a question about modals and Ajax. Anybody have experience with this?

I have a question for you that I was unable to find an answer for in the google forums. I am using asp.net c# and am trying to load data from the c# end into a modal on the page. I can get the modal to fire, however, none of the data from the C# shows up, presumably because the modal is firing before the onclick event from the button can set the labels on the form to what they should be. I know that without the modal, the server response is correct and shows the right data (but of course at that point there’s nowhere to put it without that modal).

Here’s a few snippits to illustrate where I am right now.

From the .aspx

<asp:Button CssClass="postfix" id="searchbtnx" Text="Search" OnClick="searchbtnx_Click" runat="server" data-reveal-id="LookupModal"/>

<asp:UpdatePanel runat="server" id="UpdatePanel2" updatemode="Conditional">

<Triggers>

<asp:AsyncPostBackTrigger controlid="searchbtnx" eventname="Click" />

</Triggers>

<ContentTemplate>

<div id="LookupModal" class="reveal-modal">

<a class="close-reveal-modal">&#215;</a>

<br />

<!-- DATA GOES HERE -- >

</fieldset>

</div>

</div>

</div>

</ContentTemplate>

</asp:UpdatePanel>



            

         

From the .aspx.cs



 protected void searchbtnx_Click(object sender, EventArgs e)

{

//DATA GOES HERE

}




            

         

In the .aspx.cs part, it’s mainly initializing variables, defining those by our SQL database query results, and then assigning those to labels that are inside of the modal. The headers of those labels, which are pre-set, do show in the modal.

Do you think y’all could give a guy a hand?

Thank you,

David

AJAX.net. revealmodal#casp.net

Hey Everybody,

David has a question about modals and Ajax. Anybody have experience with this?

I have a question for you that I was unable to find an answer for in the google forums. I am using asp.net c# and am trying to load data from the c# end into a modal on the page. I can get the modal to fire, however, none of the data from the C# shows up, presumably because the modal is firing before the onclick event from the button can set the labels on the form to what they should be. I know that without the modal, the server response is correct and shows the right data (but of course at that point there’s nowhere to put it without that modal).

Here’s a few snippits to illustrate where I am right now.

From the .aspx

<asp:Button CssClass="postfix" id="searchbtnx" Text="Search" OnClick="searchbtnx_Click" runat="server" data-reveal-id="LookupModal"/>

<asp:UpdatePanel runat="server" id="UpdatePanel2" updatemode="Conditional">

<Triggers>

<asp:AsyncPostBackTrigger controlid="searchbtnx" eventname="Click" />

</Triggers>

<ContentTemplate>

<div id="LookupModal" class="reveal-modal">

<a class="close-reveal-modal">&#215;</a>

<br />

<!-- DATA GOES HERE -- >

</fieldset>

</div>

</div>

</div>

</ContentTemplate>

</asp:UpdatePanel>



            

         

From the .aspx.cs



 protected void searchbtnx_Click(object sender, EventArgs e)

{

//DATA GOES HERE

}




            

         

In the .aspx.cs part, it’s mainly initializing variables, defining those by our SQL database query results, and then assigning those to labels that are inside of the modal. The headers of those labels, which are pre-set, do show in the modal.

Do you think y’all could give a guy a hand?

Thank you,

David

Paul about 5 years ago

Hi David, ive posted a script to Async Postback and return value. It should get you started! You will need to replace Ajax Modal popup with the Foundation reveal, and create the button action from your page, shouldn't be to difficult.

<form id="form1" runat="server">
    <div>
     <asp:ScriptManager ID="ScriptManager1" runat="server" />
      <asp:Button runat="server" ID="btnShowPopup" Text="Show Popup" />
       <asp:Panel runat="server" ID="pnlPopup" CssClass="modalPopup">
           <asp:UpdatePanel runat="server" ID="updPopup" ChildrenAsTriggers="true" UpdateMode="Conditional">
               <ContentTemplate>
                   <asp:Label runat="server" ID="lblPopupTest" Text="No Post Back Yet!" />
               </ContentTemplate>
               <Triggers>
                   <asp:AsyncPostBackTrigger ControlID="btnUpdate" EventName="Click" />
               </Triggers>
           </asp:UpdatePanel>
           <!-- Buttons Not In UpdatePanel and so not recreated -->
           <asp:Button runat="server" ID="btnUpdate" OnClick="btnUpdate_Click" Text="Update" />
           <asp:Button runat="server" ID="btnCancel" Text="Close" />
       </asp:Panel>
      <ajaxToolkit:ModalPopupExtender runat="server" ID="mpePopup" TargetControlID="btnShowPopup" PopupControlID="pnlPopup" CancelControlID="btnCancel" />





Code Behind:

 protected void btnUpdate_Click(object sender, EventArgs e)
    {
        this.lblPopupTest.Text = DateTime.Now.ToShortDateString();
        this.mpePopup.Show();

    }