[英]How to get the data from a bootstrap modal?
让我解释一下我的问题:
我有一个遵循MVC模式的Web应用程序。
有一个显示时间表的主视图。 (内容对于这个问题并不是很重要)。 有一个“新会议”按钮。 此按钮将打开模式。 实际上,它会用参数重新加载视图以显示模态。 这一切都很好。
在模式中,有一些用于将会议添加到日程表的输入字段,还有一个用于将输入的数据另存为新会议的按钮。
命中时,提交按钮不执行任何操作。 是否有另一种方法可以将模态数据输入控制器?
这是我的代码:(被截断)
索引视图
@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> }
如果您使用的是模态,最好使用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
}
});
});
});
为了将数据传递给控制器,您应该将所有表单字段封装在一个表单中,并且所有输入字段都应该有一个名称。
<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>
从上面的代码中可以看到,模式主体和模式页脚都位于表单内。
您可以按以下方式获取数据( 这对于不同的语言而言是不同的 )
params.exampleInputField
您需要将所有输入字段和提交按钮包装在一个表单元素中。
表单元素应具有指向您的控制器网址的操作。
例如
<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.