Show hidden rows of a table with data-toggle="collapse" in Asp.Net Mvc

Question

Show hidden rows of a table with data-toggle="collapse" in Asp.Net Mvc

Navigation

#1 by (0 votes)

1

Hello good day I am using data-toggle="collapse" in Asp.Net Mvc to hide some columns of each row and that when clicking on a row those columns are displayed and it does so but I would like it to click only the data of the row that I am selecting will be displayed and not those of the whole table

Razor view

<table class="table table-condensed table-responsive  table-hover">

    <tr>
        <th>
            @Html.DisplayNameFor(model => model.nombre)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.apellidopaterno)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.apellidomaterno)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.sexo)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.edad)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.telefono)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model)
{

        <tr class="clickable" data-toggle="collapse" id="row1" data-target=".row1">

            <td>
                @Html.DisplayFor(modelItem => item.nombre)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.apellidopaterno)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.apellidomaterno)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.sexo)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.edad)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.telefono)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.matricula }) |
                @Html.ActionLink("Details", "Details", new { id = item.matricula }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.matricula })
            </td>
        </tr>

            <tr class="collapse row1">
                <th>
                    carrera
                </th>
                <th>
                  semestre
                </th>
            </tr>
        <tr class="collapse row1">
            <td>
                @Html.DisplayFor(modelItem => item.carrera)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Semestre)
            </td>
        </tr>  


}
</table>

Bootstrap

table .collapse.in {
    display: table-row;
}

bootstrap asp.net-mvc asp.net-mvc-5 razor

asked by Yukito San 24.01.2018 в 16:38

source

1 answer

How to consume from Java a Web Service made in PHP How to call a function between angular components?

score 0 · Accepted Answer

The problem is because in each row you are considering id="row1" data-target=".row1" and the destination would be <tr class="collapse row1"> .

What you could do is define a variable that would be the index, for example:

@{
    var indice = 0;
    foreach (var item in Model)
    {
        indice++;
        <tr class="clickable" data-toggle="collapse" id="row@(indice)" data-target=".row@(indice)">

            <td>
                @Html.DisplayFor(modelItem => item.nombre)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.apellidopaterno)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.apellidomaterno)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.sexo)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.edad)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.telefono)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.matricula }) |
                @Html.ActionLink("Details", "Details", new { id = item.matricula }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.matricula })
            </td>
        </tr>

            <tr class="collapse row@(indice)">
                <th>
                    carrera
                </th>
                <th>
                  semestre
                </th>
            </tr>

            <tr class="collapse row@(indice)">
            <td>
                @Html.DisplayFor(modelItem => item.carrera)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Semestre)
            </td>
        </tr>       
    }
}