Bootstrap modal how to execute remote modal button to fire codehind

Question

I am new to jquery and bootstrap C#, What I am trying to do is this I have two pages default.aspx, and popup.aspx, I am using a bootstrap modal to remotely call popup.aspx as a modal. I am trying to take what ever is selected from the asp controls I have on the popup.aspx page and manipulate it and want to return a value to a hidden field. Then the default.aspx can display the result based on the value in the hidden field.

I have an asp button on the modal with an onclick event, but that event is not firing off the code behind.

I can get the event to fire as long as I do not put data-dismiss="modal" or UseSubmitBehavior="false" but it will redirect the default.aspx to popup.aspx

If I put either one or both attributes in it will not fire off the event in the popup.cs code behind

code from default.aspx

<form id="form1" runat="server">
    <asp:TextBox ID="txtText" runat="server"></asp:TextBox>
    <asp:TextBox ID="txtText2" runat="server"></asp:TextBox>
    <a data-toggle="modal" class="btn btn-info" href="popup.aspx" data-target="#myModal">Click me !</a>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
    </div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->

</form>

jquery that is on default.aspx

<script>
     $('#myModal').on('hidden.bs.modal', function (event) {
         $('#txtText').val($("#lblLabel").val());
         $(this).find('#popup')[0].reset();
     });
   </script>

code from popup.aspx

<form id="popup" runat="server">
<div>

        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h4 class="modal-title">Modal title</h4>
        </div>          <!-- /modal-header -->
        <div class="modal-body">
            <asp:TextBox ID="txtBox" runat="server"></asp:TextBox>



        <p>Excitavit hic ardor milites per municipia plurima, quae isdem conterminant, dispositos et castella, sed quisque serpentes latius pro viribus repellere moliens, nunc globis confertos, aliquotiens et dispersos multitudine superabatur ingenti.</p>
        </div>          <!-- /modal-body -->
        <div class="modal-footer">

            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <asp:Button ID="btnButton" runat="server"  Text="Button" OnClick="btnButton_Click" data-dismiss="modal" CssClass="btn btn-primary"/>

        </div>          <!-- /modal-footer -->


</div>
</form>

So is there a way that this can work ?

Answer 1

After much research, I have solved the issue. Through many hours of research I found out in order to call the method from a remote page modal there is four things that are needed.

1. Any methods that are needed must be static.
2. Any values from the controls on the remote page that is needed must be passed as a parameter to that method.
3. The static method must declared as a [System.Web.UI.WebMethod].
4. To use ajax method to call the method.

I am not sure if this is the proper method or not but it works for what I needed to do. I hope that this might help someone else if they need this type of requirements for their site/application.