Problem with Ajax.BeginForm within a Bootstrap accordion

0

At the time of adding the Ajax.BeginForm inside the for it stops working the accordion that contains them.

             <div class="panel-group" id="accordion">

                <!---->
                @for (int i = 1; i < 7; i++)
                {

                    <div class="panel  panel-warning" >
                        @*@using (Ajax.BeginForm("SearchMuro", "Produccion", null, new AjaxOptions()
                        {
                            InsertionMode = InsertionMode.Replace,
                            UpdateTargetId = "" + i,
                            OnSuccess = "sortTable",
                            //OnFailure = "FailMessage",
                            LoadingElementId = "loader",
                            HttpMethod = "POST"
                        }))
                        {*@
                        <div class="panel-heading">
                            <h4 class="panel-title pull-left" style="height: 40px;">
                                <a data-toggle="collapse" data-parent="#accordion" href="@("#collapse" + i)" style="line-height: 40px;">
                                    <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>&nbsp;&nbsp;Operador
                                </a>
                            </h4>
                                <div class="col-sm-2 pull-right">
                                    <div class="input-group">
                                        <input type="password" class="form-control" placeholder="Clave">
                                        <span class="input-group-btn">
                                            <button class="btn btn-warning" type="submit"><span class="glyphicon glyphicon-log-in" aria-hidden="true"></span></button>
                                        </span>
                                    </div>
                                </div>
                            <div class="clearfix"></div>
                        </div>
                        <div id="@("collapse" + i)" class="panel-collapse collapse">
                            <div class="panel-body">
                                <div>

                                    @Html.Partial("_PantallaSeleccionPaneles", Model.Panel, new ViewDataDictionary { { "counter", i } })
                                </div>
                                <div style="text-align:right;">
                                    <input id="btnAgregarCuenta" type="button" class="openmodal btn btn-success" value="Agregar" data-toggle="modal" data-target="#ventanaModalLogin" />
                                    <input id="btnAgregarCuenta" type="button" class="openmodal btn btn-danger" value="Cerrar Seccion" />
                                </div>
                            </div>
                        </div>
                        @*}*@
                    </div>
                    }

                </div>

                 <div class="panel-group" id="accordion">

                <!---->
                @for (int i = 1; i < 7; i++)
                {

                    <div class="panel  panel-warning" >
                        @using (Ajax.BeginForm("SearchMuro", "Produccion", null, new AjaxOptions()
                        {
                            InsertionMode = InsertionMode.Replace,
                            UpdateTargetId = "" + i,
                            OnSuccess = "sortTable",
                            //OnFailure = "FailMessage",
                            LoadingElementId = "loader",
                            HttpMethod = "POST"
                        }))
                        {
                        <div class="panel-heading">
                            <h4 class="panel-title pull-left" style="height: 40px;">
                                <a data-toggle="collapse" data-parent="#accordion" href="@("#collapse" + i)" style="line-height: 40px;">
                                    <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>&nbsp;&nbsp;Operador
                                </a>
                            </h4>
                                <div class="col-sm-2 pull-right">
                                    <div class="input-group">
                                        <input type="password" class="form-control" placeholder="Clave">
                                        <span class="input-group-btn">
                                            <button class="btn btn-warning" type="submit"><span class="glyphicon glyphicon-log-in" aria-hidden="true"></span></button>
                                        </span>
                                    </div>
                                </div>
                            <div class="clearfix"></div>
                        </div>
                        <div id="@("collapse" + i)" class="panel-collapse collapse">
                            <div class="panel-body">
                                <div>

                                    @Html.Partial("_PantallaSeleccionPaneles", Model.Panel, new ViewDataDictionary { { "counter", i } })
                                </div>
                                <div style="text-align:right;">
                                    <input id="btnAgregarCuenta" type="button" class="openmodal btn btn-success" value="Agregar" data-toggle="modal" data-target="#ventanaModalLogin" />
                                    <input id="btnAgregarCuenta" type="button" class="openmodal btn btn-danger" value="Cerrar Seccion" />
                                </div>
                            </div>
                        </div>
                        }
                    </div>
                    }

                </div>

    
asked by Ricardo Hernández Fernández 30.10.2017 в 19:48
source

1 answer

0

It's not that you lose the functionality of your panels, what you lose are the styles. Your yellow style comes from cascading style:

.panel-warning > .panel-heading

By putting the form element between them, the inheritance is lost.

You can correct it by moving your form an html element above:

@for (int i = 1; i < 7; i++)
{
    using (Ajax.BeginForm("SearchMuro", "Produccion", null, new AjaxOptions()
    {
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "" + i,
        OnSuccess = "sortTable",
        //OnFailure = "FailMessage",
        LoadingElementId = "loader",
        HttpMethod = "POST"
    }))
    {
        <div class="panel  panel-warning">
            <div class="panel-heading">
                <h4 class="panel-title pull-left" style="height: 40px;">
...
    
answered by 30.10.2017 / 23:10
source