asp.net-mvc - 如何隐藏 Bootstrap 表中的列？

Question

在我使用 Bootstrap(由 Visual Studio 2015 MVC Core 项目默认安装)的 ASP.NET MVC Core 应用程序中，我需要在 Controller 中使用 ID 列，但希望将其隐藏在 View 中。但以下 View 仍将该列显示为空白。我想隐藏第一列，即 ID 列

查看:

@model List<myProj.Models.StateName>

<form id="target" asp-controller="TestController" asp-action="TestAction" asp-route-returnurl="@ViewData[" ReturnUrl"]" method="post">
    <table class="table">
        <thead>
            <tr>
                <th></th>
                <th>
                    State Name
                </th>
                <th>
                    State Code
                </th>
            </tr>
        </thead>
        <tbody>
            @for (int i = 0; i < Model.Count(); i++)
            {
            <tr>
                <td><input asp-for="@Model[i].StateId" type="hidden" /></td>
                <td>
                    <label asp-for="@Model[i].State"></label>
                </td>
                <td>
                    <input asp-for="@Model[i].StateCode" type="text" readonly style="border:0px;"/>
                </td>
            </tr>
            }
        </tbody>
    </table>
    <button type="submit" class="btn btn-default">Save</button>
</form>

Answer 1

我已经测试了您在 pen 中描述的行为。 “坏表”版本演示了我相信您可能会看到的情况，并且由于忽略添加 display:none 而发生。到一张 th/td在那一栏里。 “Good Table”版本的第一列完全隐藏并拉伸(stretch)以填充整个可用宽度。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<h2>Good Table</h2>

<table class="table">
    <thead>
        <tr>
            <th style="display:none">Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="display:none">Data 1.1</td>
            <td>Data 1.2</td>
            <td>Data 1.3</td>
        </tr>
        <tr>
            <td style="display:none">Data 2.1</td>
            <td>Data 2.2</td>
            <td>Data 2.3</td>
        </tr>
        <tr>
            <td style="display:none">Data 3.1</td>
            <td>Data 3.2</td>
            <td>Data 3.3</td>
        </tr>
    </tbody>
</table>

<h2>Bad Table</h2>

<table class="table">
    <thead>
        <tr>
            <th style="display:none">Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="display:none">Data 1.1</td>
            <td>Data 1.2</td>
            <td>Data 1.3</td>
        </tr>
        <tr>
            <td>Data 2.1</td> <!-- WHOOPS -->
            <td>Data 2.2</td>
            <td>Data 2.3</td>
        </tr>
        <tr>
            <td style="display:none">Data 3.1</td>
            <td>Data 3.2</td>
            <td>Data 3.3</td>
        </tr>
    </tbody>
</table>

长话短说，检查渲染的输出并确保每个 th/td在您隐藏的列中最终显示 display:none风格。