Twitter bootstrap 在MVC引导程序3中使用用户选择的数据填充模式表单

我一直在尝试使用MVC和BootstrapV3以模态形式填充一些元素，但没有成功。该视图由2个多选下拉列表、一个单选下拉列表和一个用于显示结果的文本区域组成

我遇到过多个问题，但都是从这样一个事实开始的，即如果用户从multiselect下拉列表中没有选择任何内容，那么他们的每个选项似乎都会绑定到该模型变量（即列表）。我绝对不希望默认情况下出现这种情况，因为它会向控制器发送更多的内容，以便最终进行更新。如果我能纠正这种行为，我可能根本不会为模态窗口而烦恼

因此，在发现这一点之后，我想我应该使用一个模式窗口来提示用户在提交之前所做的选择。这比我预期的要困难得多，我似乎根本无法让javascript填充我在模式窗口中创建的字段

我在下面包含了视图和模型的代码片段，控制器工作得很好，实际上就是这个问题，要么防止默认情况下从多个选择绑定到模型，要么在提交之前以某种方式将所有相关信息传递到模式窗口

非常感谢您的帮助，我已经用这个绕了一圈，完全受够了

谢谢， N

模型

public StatusUpdaterVM（）
{
//获取下拉列表的所有值
服务=新列表（）；例如GetInfo、SetInfo、DeleteParty
Services.Sort（）；
域=新列表（）；例如Prod、Dev、prepod
Domains.Sort（）；
resultslt=新列表（）；
结果列表添加（“等待选择…”）；
Status=“DISABLED”；
}
公共列表域{get；set；}
公共列表服务{get；set；}
公共列表resultslt{get；set；}
公共字符串状态{get；set；}

看法

@model FAKEPATH.Web.ViewModels.StatusUpdaterVM
@{
ViewBag.Title=“StatusUpdater”；
}
@使用（Html.BeginForm（“Index”，“StatusUpdater”，FormMethod.Post））
{                 
@对于（int i=0；imodel.Status）
地位

残废
通过

结果
@对于（int i=0；i@Model.status，是否继续？
服务


域


取消
执行
更新
}
$（文档）.ready（函数（）{
$（'#multDomainSelect'）。multiselect({
启用筛选：false，
includeAlloption:true，
非选定文本：“选择域”，
继承类：对，
onChange:function（）{
var selected=this.$select.val（）；
var currTxt=document.getElementById（'results'）.value；
currTxt=currTxt.replace（'等待选择…'，''）；
currTxt=currTxt.replace（currTxt，'所选域：'+selected+'\n'）；
document.getElementById（'results'）。value=currTxt；
}
});
$（“#multServiceSelect”）.multiselect({
启用筛选：正确，
includeAlloption:true，
非选定文本：“选择服务”，
继承类：对，
onChange:function（）{
var selected=this.$select.val（）；
var currTxt=document.getElementById（'results'）.value；
currTxt=currTxt.replace（'等待选择…'，''）；
currTxt=currTxt.replace（currTxt，'选择的服务：'+selected+'\n'）；
document.getElementById（'results'）。value=currTxt；
}
});
$（'#selStatusDD a'）。单击（函数（）{
$（'#UpdStatus'）.text（$（this.text（））；
document.getElementById（'Status'）。值=$（this.text（）；
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">&times;</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">
                        &nbsp;
                    </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>