Отображение данных в таблице с двумя столбцами

Question

Я новичок в asp.net mvc.Я отображаю данные из запроса linq to sql, но не знаю, как отобразить список данных в таблице с двумя столбцами.

например.Список продуктов.Я видел этот пример, но задаюсь вопросом, есть ли другие предложения - http://haacked.com/archive/2010/05/05/asp-net-mvc-tabular-display-template.aspx.

Следовательно, если у меня есть 6 возвращенных продуктов, я хочу, чтобы они отображались в таблице в этом формате, см. Ниже.

С уважением

Answer 1

Вы могли бы также использовать div вместо таблицы (это то, что я бы сделал, если честно), что сделало бы его намного более чистым:

<style type="text/css">
    .products { width:600px; }
    .product { width:280px; margin-right:20px; float:left; height:150px; }
</style>

<div class="products">
    <% foreach (var item in Model) { %>    
    <div class="product">
        <%: item.SomeProperty %>
        <%: item.AnotherProperty %>
    </div>
    <% } %>
    <div style="clear:left;"></div>
</div>

Answer 2

Это не самый чистый (безусловно, некрасивый на вид) ... но вы можете добавить логическое значение, которое вы переключаете, чтобы вы могли чередовать рендеринг левого и правого столбца при рендеринге каждого продукта.IE:

<table>
<% bool left = true;
foreach (var item in Model) { %>
  <%: left ? "<tr>" : "" %>
  <td>
    <%: item.SomeProperty %>
  </td>
  <%: !left ? "</tr>" : "" %>
<% left = !left; } %>
<% if (!left) { //need to end the lastrow if we had an odd number of items %>
  <td></td>
</tr>
<% } %>
</table>

Возможно, есть лучший способ сделать это, но это первое, что приходит на ум.

Answer 3

это то, что я придумал, это не самый чистый код, но, кажется, нет четкого способа сделать это.

<table>
<%
        int productCount = 0;

        foreach (var x in Model)
        {
            productCount++;

            if (productCount % 2 == 1)
            {
            %>
               <tr>
                    <td>                          
                        <%=Html.Encode(x.ProductId)%>              
                    </td>
            <%
            }
            else
            {
             %>
               <td>
                     <%=Html.Encode(x.ProductId)%>  
                </td>
              </tr>
           <% }
        }

        if (productCount % 2 == 1)
        {%>
            <td>&nbsp;</td></tr>
        <%}%>

</table>

Answer 4

Я предполагаю, что вы спрашиваете, как написать таблицу без необходимости писать / использовать шаблон, как в блоге haacked.com.Это просто.Просто введите определение в само представление.Помните, что, в некотором смысле, представление - это просто шаблон, который берет вашу модель и выплевывает html.

Используя статью haacked.com, и предполагая, что у вас есть строго типизированное представление с использованием Model, которая содержитрезультаты вашего запроса, скажем, IEnumerable MyData, просто введите в ваше представление:

<table>
  <tr>       
    <th>
      Column Name 1
    </th>
    <th>
      Column Name 2
    </th>
  </tr>
    <% foreach (var x in Model.MyData) { %>
    <tr>
      <td>
        <%: x.Column1 %>
      </td>
      <td>
        <%: x.Column2 %>
      </td>
      <% } %>
    </tr>
</table>

В приведенном выше предположении предполагается, что каждый объект в MyData имеет два свойства, Column1 и Column2.Адаптируйся, наслаждайся стилем и наслаждайся.