选项卡式Bootstrap模式不会提交表单

时间:2016-10-06 15:29:28

标签: asp.net-mvc twitter-bootstrap

我有一个带有标签的bootstrap模式,它完全包裹在表单中。当我在第一个选项卡中有表单的项目时,表单成功运行,但如果我在其他选项卡中放置任何MVC帮助程序对象,则提交按钮不再有效。

以下是有效的代码:

<div id="dialogDiv" class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Counterparty Request Details</h3>
    </div>

@using (Ajax.BeginForm("EditNewFullCounterpartyRequestDetails", "Counterparty",new AjaxOptions
    {
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "dialogDiv",
        HttpMethod = "POST",
        OnSuccess = "ShowSuccess"
    }))
{
        @Html.ValidationSummary()
        @Html.HiddenFor(x => x.RequestDetails.CounterpartyRequestId)
        <div class="modal-body">
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#tab1" data-toggle="tab">Request Details</a></li>
                    <li><a href="#tab2" data-toggle="tab">KYC Matrix</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab1">
                        <div class="row">
                            <div class="col-sm-4">
                                <div>
                                    @Html.LabelFor(x => x.RequestDetails.ContactEmail)
                                    @Html.EditorFor(x => x.RequestDetails.ContactEmail)
                                    @Html.ValidationMessageFor(x => x.RequestDetails.ContactEmail, "*Required", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-4">
                                <div>
                                    @Html.LabelFor(x => x.RequestDetails.ContactNumber)
                                    @Html.EditorFor(x => x.RequestDetails.ContactNumber)
                                    @Html.ValidationMessageFor(x => x.RequestDetails.ContactNumber, "*Required", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab2">
                        Coming Soon!
                    </div>
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary" type="submit">Save</button>
        </div>
}
</div>

以下代码不起作用:

<div id="dialogDiv" class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Counterparty Request Details</h3>
    </div>

@using (Ajax.BeginForm("EditNewFullCounterpartyRequestDetails", "Counterparty",new AjaxOptions
    {
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "dialogDiv",
        HttpMethod = "POST",
        OnSuccess = "ShowSuccess"
    }))
{
        @Html.ValidationSummary()
        @Html.HiddenFor(x => x.RequestDetails.CounterpartyRequestId)
        <div class="modal-body">
            <div class="tabbable">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#tab1" data-toggle="tab">Request Details</a></li>
                    <li><a href="#tab2" data-toggle="tab">KYC Matrix</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab1">
                        <div class="row">
                            <div class="col-sm-4">
                                <div>
                                    @Html.LabelFor(x => x.RequestDetails.ContactEmail)
                                    @Html.EditorFor(x => x.RequestDetails.ContactEmail)
                                    @Html.ValidationMessageFor(x => x.RequestDetails.ContactEmail, "*Required", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-4">
                                <div>
                                    @Html.LabelFor(x => x.RequestDetails.ContactNumber)
                                    @Html.EditorFor(x => x.RequestDetails.ContactNumber)
                                    @Html.ValidationMessageFor(x => x.RequestDetails.ContactNumber, "*Required", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab2">
                            <div class="row">
                                <div>
                                    @Html.LabelFor(x => x.KycDetails.IsEscalated)
                                    @Html.CheckBoxFor(x => x.KycDetails.IsEscalated)
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary" type="submit">Save</button>
        </div>
}
</div>

1 个答案:

答案 0 :(得分:0)

想出来了,事实证明它与模态标签没有任何关系。我会解释,因为这可能对其他人有用。我的模型类有一个没有默认(无args)构造函数的组件。此组件在另一个选项卡中被操作,因此当单击“提交”按钮时,框架正在调用一个不存在的无参数构造函数。结果是沉默的失败。