Как скрыть столбец в таблице начальной загрузки?

Question

В моем приложении ASP.NET MVC Core, использующем Bootstrap (установленном по умолчанию проектом Visual Studio 2015 MVC Core), мне нужно использовать столбец идентификатора в контроллере, но вы хотите скрыть его в представлении. Но следующий 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 в этой колонке. Версия «Хороший стол» имеет первый столбец, полностью скрытый и растягивающий, чтобы заполнить всю доступную ширину.

<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 стилем.