[英]How to get the data from a bootstrap modal?
Let me explain my problem: 让我解释一下我的问题:
I have a web application following the MVC pattern. 我有一个遵循MVC模式的Web应用程序。
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> }
It is better to use AJAX
to send the datas to your controller if you are using a modal 如果您使用的是模态,最好使用AJAX
将数据发送到控制器
$(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
}
});
});
});
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
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.