MVC，显示依赖于下拉列表的模态内容（ajax）-Java 学习之路

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

我的看法：

<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-default”）是一个提交，那么我不知道如何从ActionResult（控制器）显示模态

EDIT

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

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

在控制器写入方法：

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

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

}

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

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

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

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，因为我发现它比在页面上使用模态模板更容易 . 我也遇到了你似乎遇到的同样问题，即重用的模式似乎不想更新它的内容 .

Disclaimer: 我目前是Bootbox项目的合作者，尽管我主要是为了使文档保持最新和分类问题 .

回复于 2024-04-29T15:20:04+08:00

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

1 回答

相关问题