Question

在我使用Bootstrap的ASP.NET MVC Core应用程序中（默认情况下由Visual Studio 2015 MVC Core项目安装），我需要在控制器中使用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中描述的行为。 “Bad Table”版本通过忽略将display:none添加到该列中的单个th / td来演示我认为您可能会看到的内容。 “Good Table”版本的第一列完全隐藏并伸展以填充整个可用宽度。

<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样式。

如何隐藏引导表中的列？

1 个答案: