How to get the data from a bootstrap modal?

Question

Let me explain my problem:

I have a web application following the MVC pattern.

There is a main view showing a schedule. (Content isnt really important for this question). There is a "New meeting" button. This button opens a modal. In fact, it reloads the view with a paramater to show the modal. This all works pretty fine.

In the modal there are some input fields for adding a meeting to the schedule and a button to save the entered data as a new meeting.

The submit button doesnt do anything when hit. Is there another way to get the data of the modal into a controller?

Here is my code: (truncated)

index.view

 @using (Html.BeginForm()) { @Html.AntiForgeryToken() @Html.ValidationSummary(true) <div class="container"> the schedule table <div> **the modal** <div id="dialog-modal" class="ui-dialog modal modal" title="Test" style="overflow-x:hidden"> <div class="container form-group"> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div class="row" style="z-index:15"> <div class="col-md-12"> <h3>Neue Besprechung</h3> <div class="row"> <div class="col-xs-2"> @Html.LabelFor(m => m.CurrentBesprechung.Titel) </div> <div class="col-xs-5"> @Html.TextBoxFor(m => m.CurrentBesprechung.Titel, new { @class = "form-control col-xs-5", width = "100%" }) </div> </div> <div class="row"> <div class="col-xs-2"> @Html.LabelFor(m => m.CurrentBesprechung.Termin) </div> <div class="input-append date col-xs-5" form-control> <input type="text" class="datepicker form-control col-xs-5" data-date-format="dd/mm/yyyy" value=@Model.SelectedDate> </div> </div> <div class="row"> <div class="col-xs-2"> @Html.LabelFor(m => m.CurrentBesprechung.Starttime) </div> <div class="col-xs-5"> <select name="Beginn" class="form-control col-xs-5"> @foreach (var zeit in Model.CurrentBesprechung.Stundenblatt) { if (@zeit.Value == "") { <option>@zeit.Key</option> } else { <option disabled="disabled">@zeit.Key - @zeit.Value</option> } } </select> </div> </div> <div class="row"> <div class="col-xs-2"> @Html.LabelFor(m => m.CurrentBesprechung.Endtime) </div> <div class="col-xs-5"> <select name="Ende" class="form-control col-xs-5"> @foreach (var zeit in Model.CurrentBesprechung.Stundenblatt) { if (@zeit.Value == "") { <option>@zeit.Key</option> } else { <option disabled="disabled">@zeit.Key - @zeit.Value</option> } } </select> </div> </div> <div class="row"> <div class="col-xs-2"> <label>Raum</label> </div> <div class="col-xs-5"> <select name="Raum" class="form-control col-xs-5"> @foreach (var room in Model.RoomList) { if (room.RaumID == Model.SelectedRoom.RaumID) { <option selected="selected">@room.Beschreibung</option> } else { <option>@room.Beschreibung</option> } } </select> </div> </div> <div class="row"> <div class="col-xs-2"> <label>Ersteller</label> </div> <div class="col-xs-5"> @Html.TextBoxFor(m => m.CurrentBesprechung.Ersteller, new { @class = "form-control" }) </div> </div> <div class="row"> <div class="col-xs-2"> <label>Beschreibung</label> </div> <div class="col-xs-5"> @Html.TextAreaFor(m => m.CurrentBesprechung.Beschreibung, new { @class = "form-control", rows = "5" }) </div> </div> </div> </div> </div> **the submit button** <div class="modal-footer"> <input type="submit" value="Close" class="btn" /> <div class="btn btn-default" type="Submit" data-dismiss="modal">Senden!</div> </div> </div> } 

Answer 1

It is better to use AJAX to send the datas to your controller if you are using a modal

$(function(){
    $('#submit').click(function(){
      var formDatas = $('#formId').serialize(); //Gets the form datas
        $.ajax({
          type: 'POST',
          url: "your controler path",
          data: {formDatas:formDatas},
          dataType: 'html',
          success: function(response){
           //Do whatever you want to do
          }
        });
    });
});

Answer 2

In order to pass the data to a controller, you should encapsulate all your form fields in a form and all your input fields should have a name.

<form method="POST" action="Your/Controller/Here">
      <div class="modal-body">
        <input type="text" name="exampleInputField" value="abcd" />

      </div>
      <div class="modal-footer">
        <input type="submit" value="Close" class="btn" />
        <div class="btn btn-default" type="Submit" data-dismiss="modal">Senden!</div>
      </div>
  </form>

As you can see from the above code, both the modal body and modal footer are inside a form.

You can get the data as ( this is different for different languages )

params.exampleInputField

Answer 3

You need to wrap all of your input fields and the submit button in a form element.

The form element should have an action pointing to your controller url.

Eg

<div id="dialog-modal">
    <form action="/path/to/myController" method="post">
        ... input fields ...
        <input type="submit">
    </form>
</div>