textboxes are empty on postback with bootstrap modal asp.net

Question

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

   


        
                      

              相关标签:
       
      

Answer 1

I just had similar problem. I resolved this by moving the modal element inside the form element using jquery.

   function init() {
        var element = $('#myModal').detach();
        $($("form")[0]).append(element);        
    }

    window.addEventListener('DOMContentLoaded', init, false);

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

Answer 3

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 4

Use the dotnet text box, or add an id and a runat server tag to the input field.