我尝试使用MVC和Bootstrap v3填充Modal表单中的某些元素是不成功的。该视图由2个多选下拉列表，一个选择下拉列表和一个用于显示结果的文本区域组成。
我遇到了多个问题，但这一切都始于这样一个事实，即如果用户从多选下拉菜单中选择任何内容，那么它们的每个选项似乎都绑定到该模型变量，这是一个列表。我绝对不希望这样，因为它向控制器发送了更多东西，最终得到更新。如果我可以纠正这种行为，我可能不会费心去模态窗口！
所以在发现之后，我想我会使用一个模态窗口来提示用户在提交之前做出的选择。事实证明这比我预想的要困难得多，我似乎无法使用javascript来填充我在模态窗口中创建的字段。
我已经为下面的视图和模型提供了代码片段，控制器工作得很好，实际上只是这个问题要么阻止选择all默认绑定到多选的模型，要么以某种方式将所有相关信息传递给在提交之前的模态窗口。
任何帮助都非常感谢，我已经用这个来围绕这些房子，完全厌倦了它！
谢谢， Ñ
模型
public StatusUpdaterVM()
{
//Get all the values for the drop downs
Services = new List<String>(); e.g. GetInfo, SetInfo, DeleteParty
Services.Sort();
Domains = new List<String>(); e.g. Prod, Dev, Preprod
Domains.Sort();
resultsLst = new List<string>();
resultsLst.Add("Awaiting selections...");
Status = "DISABLED";
}
public List<string> Domains { get; set; }
public List<string> Services { get; set; }
public List<string> resultsLst { get; set; }
public string Status { get; set; }
查看
@model FAKEPATH.Web.ViewModels.StatusUpdaterVM
@{
ViewBag.Title = "StatusUpdater";
}
@using (Html.BeginForm("Index", "StatusUpdater", FormMethod.Post))
{
<div class="container">
<div class="well">
<div class="row">
<div class="col-md-4 col-lg-4 text-left">
<select id="multDomainSelect" multiple="multiple" name="Domains">
@for (int i = 0; i < Model.Domains.Count(); i++)
{
<option value="@Model.Domains[i]">@Model.Domains[i]</option>
}
</select>
</div>
<div class="col-md-4 col-lg-4 text-center">
<select id="multServiceSelect" multiple="multiple" name="Services">
@for (int i = 0; i < Model.Services.Count(); i++)
{
<option value="@Model.Services[i]">@Model.Services[i]</option>
}
</select>
</div>
<div class="col-md-4 col-lg-4 text-right">
@Html.HiddenFor(model => model.Status)
<div class="btn-group">
<button type="button" class="btn btn-default" id="UpdStatus">Status</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul id='selStatusDD' class="dropdown-menu">
<li><a>DISABLED</a></li>
<li><a>PASS</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="well">
<form>
<label for="results">Results</label>
<textarea class="form-control noresize" rows="25" id="results">
@for (int i = 0; i < Model.resultsLst.Count(); i++)
{
@Model.resultsLst[i]
@MvcHtmlString.Create("\n");
}
</textarea>
</form>
</div>
</div>
<!-- Modal Windows-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Confirm action?</h4>
</div>
<div class="modal-body">
You are about to update the following services in the specified Domains to a status of <strong>@Model.Status</strong>, do you wish to continue?
<div class="row text-left top-buffer">
<div class="col-xs-6">
</div>
</div>
<div class="row text-left top-buffer">
<div class="col-xs-6">
<strong>Services</strong><br /><br />
<input type="hidden" name="hiddenServices" id="hiddenServices" value="" />
</div>
<div class="col-xs-6">
<strong>Domains</strong><br /><br />
<input type="hidden" name="hiddenDomains" id="hiddenDomains" value="" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Cancel
</button>
<button type="submit" name="submitButton" class="btn btn-success">
<span class="glyphicon glyphicon-flash"></span> Execute
</button>
</div>
</div>
</div>
</div>
<div class="row top-buffer">
<div class="col-xs-12 text-center">
<button type="button" id="execute" class="btn btn-success btn-lg" >
<span class="glyphicon glyphicon-flash"></span> Update
</button>
</div>
</div>
</div> }
<script type="text/javascript">
$(document).ready(function () {
$('#multDomainSelect').multiselect({
enableFiltering: false,
includeSelectAllOption: true,
nonSelectedText: 'Select Domain',
inheritClass: true,
onChange: function () {
var selected = this.$select.val();
var currTxt = document.getElementById('results').value;
currTxt = currTxt.replace('Awaiting selections...', '');
currTxt = currTxt.replace(currTxt, 'Domain(s) chosen: ' + selected + '\n');
document.getElementById('results').value = currTxt;
}
});
$('#multServiceSelect').multiselect({
enableFiltering: true,
includeSelectAllOption: true,
nonSelectedText: 'Select Service',
inheritClass: true,
onChange: function () {
var selected = this.$select.val();
var currTxt = document.getElementById('results').value;
currTxt = currTxt.replace('Awaiting selections...', '');
currTxt = currTxt.replace(currTxt, 'Services(s) chosen: ' + selected + '\n');
document.getElementById('results').value = currTxt;
}
});
$('#selStatusDD a').click(function () {
$('#UpdStatus').text($(this).text());
document.getElementById('Status').value = $(this).text();
});
$("#execute").click(function () {
var domains = document.getElementById('multDomainSelect').value;
var services = document.getElementById('multServiceSelect').value;
$(".modal-body #hiddenDomains").val(domains);
$(".modal-body #hiddenServices").val(services);
$("#myModal").modal({ show: true });
});
});
</script>