Question

我不知道如何做这样的事情。我有一个带有六个元素和按钮的下拉列表。当我点击按钮时，我想显示bootstrap modalpopup。这很简单。但我想要取决于选择下拉。

我的观点：

.ui-widget .ui-widget {
font-size: 12px;
width: 100%;

要结算模式的列表内容应取决于下拉列表。如果backet所有表单和按钮（class =＆＃34; btn btn-default＆＃34;）是提交，那么我不知道如何从ActionResult（控制器）显示模态

修改

部分我解决了我的问题。我添加到下拉列表Ajax.BeginForm并提交

<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>

控制器写入方法

：

    @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" })
    }

按钮添加我用渲染partialView显示模态

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

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

}

当我更改下拉选择值时会话刷新，但是当我显示模态时仍然查看旧值。

Answer 1

不是乱用AjaxForm并直接操作Bootstrap模式，你可能会发现更容易使用像Bootbox这样的东西，它会根据需要生成你的Bootstrap模态。

我会使用普通表格：

@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()，它可以让您完全自定义模态。您希望read the documentation能够充分利用它，但基本用法可能是（从上面的// 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项目的合作者，尽管我主要是为了使文档保持最新和分类问题。

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

1 个答案: