MVC，显示依赖于下拉（ajax）的模态内容

Question

我不知道怎么做这样的事。我有一个六元素的下拉列表，还有一个按钮。当我点击按钮时，我想显示bootstrap modalpopup。这是一个简单的问题。但是我想知道tt取决于选择下拉列表。

我的看法是：

<button type="button" class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg-addCompanyRisk">
                <i class="fa fa-plus"></i> Add
            </button>

<div class="modal fade bs-example-modal-lg-addCompanyRisk" tabindex="-1" role="dialog" aria-hidden="true" id="allCustomerModal">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">

                 [... Load index from other view...]
                    <div class="modal-body">                            
                        <button type="submit" class="btn btn-default" data-dismiss="modal">@Resources.Common.Cancel</button>
                    </div>
                </div>
            </div>
        </div>

列表的内容是解决一个模态应该依赖于下拉列表。如果Backet所有的表单和按钮（class="btn btn-默认"）是一个提交，那么我不知道如何从ActionResult（控制器）显示模态

编辑

我部分解决了我的问题。我添加到下拉Ajax。开始表格并提交

    @using (Ajax.BeginForm("GetAllRiskForCompanu", "InsuranceCompanyRisks", null, new AjaxOptions
    {
        HttpMethod = "Post",
    }))
    {
        @Html.AntiForgeryToken()


        @Html.DropDownListFor(model => model.InsuranceCompanyId, ViewBag.InsuranceCompany as SelectList, @Resources.Common.Select, new { @class = "form-control", @required = "required", onchange = "$(this.form).submit();" })
        @Html.ValidationMessageFor(model => model.InsuranceCompanyId, "", new { @class = "text-danger" })
    }

on控制器写入方法：

[HttpPost]
public Void GetAllRiskForCompanu(FormCollection form)
{
    int? companyId = form["InsuranceCompanyId"].GetNullableInt();

    if (companyId.HasValue)
    {
        //set session varible
        InsurancePolicySession.InsuranceCompanyRisks = icrf.GetAll(companyId.Value);
    }

}

通过“添加”按钮，我使用render partialView显示modala

   @Html.Partial("~/Views/InsurancePolicyItem/IndexPolicyCompanyRisk.cshtml", @InsurancePolicySession.InsuranceCompanyRisks)

当我更改下拉选择值时，会话将刷新，但当我显示modal时，仍会查看旧值。

Answer 1

与使用AjaxForm和直接操作引导模式相比，您可能会发现使用类似于引导盒的工具更容易，它将根据需要生成引导模式。

我将使用标准形式：

@using(Html.BeginForm("action", "controller", FormMethod.Post, new { id="some-id", role="form" }))
{
    @Html.DropDownListFor(m => m.SomeId, Model.Somethings, new { @class="form-control" })
    <button type="submit" class="btn btn-default">Submit</button>
}

然后，捕获表单提交并执行Ajax请求以获取您的内容：

$(function(){

    $('#some-id').on('submit', function(e){

        e.preventDefault(); // prevent normal form submit

        var form = $(this);
        var data = form.serialize();

        $.post(form.attr('action'), data)
            .done(function(response, status, jqxhr){
                // handle response...
            })
    })
})

在成功处理程序（.done（））中，建立您的对话框。Bootbox具有用于警报、确认和提示的内置函数（其主要目的是复制这些本机函数），但您可能需要使用dialog（），它允许您完全自定义模式。您可能希望阅读文档以充分利用它，但基本用法可以是（从上面的//handle response…开始）：

var dialog = bootbox.dialog({
    title: 'Some Title',
    message: response,
    buttons: {

        cancel: {
            label: 'Cancel',
            className: 'btn-default',
            callback: function(){
                dialog.modal('hide');
            }
        },

        save: {
            label: 'Submit',
            className: 'btn-primary',
            callback: function(){
                // submit your data from the injected content, somehow...
            }
        }

    }
});

此时我主要使用Bootbox，因为我发现它比在页面上使用模式模板更容易。我还遇到了与您似乎遇到的问题相同的问题，即重用模式似乎不想更新其内容。

免责声明：我目前是Bootbox项目的合作者，尽管我在那里主要是为了使文档保持最新和分类问题。