textboxes are empty on postback with bootstrap modal asp.net

Question

I am using bootstrap modal in my asp.net page like this:

   <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
<asp:UpdatePanel ID="ModalUpdatePanel" runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnRegister" EventName="Click" />
    </Triggers>
    <ContentTemplate>
        <p>

textboxes here


 <div class="popup-footer-wrapper">
                <div class="popup-footer-left">
                    <%-- <input type="submit" class="login-button" name="login-button" value="Sign Up">--%>
                    <asp:Button ID="btnRegister" runat="server" CssClass="login-button" OnClick="btnRegister_Click"
                        UseSubmitBehavior="false" Text="<%$ Resources: HRGELoggedOutMaster, Signup %>" />

                </div>
            </div>

        </p>
    </ContentTemplate>
</asp:UpdatePanel>
</div>

i see that inside

  protected void btnRegister_Click(object sender, EventArgs e)

all the texboxes show empty value. whatever user type in textbox. Please suggest how to fix it. It may be because of UseSubmitBehavior="false" but if i dont use it then control doesnt go to onclick event.

Answer 1

The reason why the you are not seeing your posted values, is because your values are not being posted. The bootstrap modal manager uses the 'body' element as the root element to which it appends your modals. As a result your modals are now outside the 'form' element and the values are not being posted back to the server.

To fix this, change the default value of the 'manager' property as follows:

// Note the manager is passed to the root form element. 
// Otherwise, the modals are taken out of the form and 
// values not posted back to the server
$.fn.modal.defaults.manager = $.fn.modalmanager.defaults.manager = 'body form:first';

EDIT: This is assuming you are using the Bootstrap-Modal Extension

Answer 2

Steven Anderson is right, values are not posted because modal inputs are outside the form.

I was able to workaround this problem using javascript to copy the value of the modal inputs to hidden asp.net controls.

I create a hidden asp.net control outside of the modal:

<asp:HiddenField ID="MyHiddenControl" value="name" runat="server" />

The modal textbox I want to submit:

<asp:TextBox ID="FormYourName" CssClass="form-control" runat="server"/>`

My modal submit button looks like this;

<asp:Button ID="BtnSubmit" runat="server" Text="Submit" CssClass="btn btn-primary" OnClientClick="Javascript:DoCustomPost();" UseSubmitBehavior="false" />

My JavaScript function looks like:

function DoCustomPost()
{
var ModalTextBox = document.getElementById("FormAmenity");
var HiddenTextBox = document.getElementById("MyHiddenControl");
// This is the value I want to Post
MyHiddenControl.value = ModalTextBox.value
}

So when I click "submit" in my modal window a postback kicks, the value of the textbox is copied to the hidden control and I can read the value from the hidden control in code-behind:

Protected Sub BtnSubmit_Click(sender As Object, e As EventArgs) Handles BtnSubmit.Click
Dim Something As String = MyHiddenControl.Value
End Sub