在剃刀视图中将表格转换为数据网格答案

【问题标题】：Convert table to datagrid within razor view在剃刀视图中将表格转换为数据网格
【发布时间】：2013-10-29 14:16:43
【问题描述】：

我有一个带有 Razor 的 Asp.net mvc4 应用程序。在视图中index.cshtml

<table>
<tr>
            <td>Propriétés correspondantes à l'élément</td>
            <td>
                <table class="table_form">
           <tr>
               <th>Nom</th>
               <th>Valeur</th>
               <th></th>
          </tr>
                  @{
                  Features_Management.Models.Chef chef = new Features_Management.Models.Chef();
                    List<Features_Management.Models.Property> list_prop = chef.Get_List_Property();

                    }
                  @for (int item = 0; item < list_prop.Count; item++)
                    {
          <tr>
                    <td>@list_prop[item].PName</td>
                    <td>@list_prop[item].Value</td>
                    <td><input type="checkbox" name="proper@(item)" /></td>
         </tr>
                     }
               </table>
            </td>
</tr>
</table>

我想将此表格转换为DataGrid 以查看可以滚动的表格。

我该如何完成这项任务？有什么建议吗？

【问题讨论】：

您不能在 MVC 应用程序中使用 DataGrid，在 MVC 中没有像 ASP.NET 应用程序中那样的默认控件。您可以使用一些第三方扩展，如 jQueryUI 或 JTable 来模拟一些功能

标签： jquery asp.net asp.net-mvc asp.net-mvc-4 razor

【解决方案1】：

您可以使用WebGrid。

您可以通过阅读以下内容了解它的工作原理并改进它：

Get the Most out of WebGrid in ASP.NET MVC

一旦你生成了你的表，你就可以使用这样的 jQuery 插件：jQuery Scrollable Table Plugin。有示例代码可以查看它是如何工作的。

此脚本在页面的$(document).ready(...) 上触发（或在 ajax 回调中，如果您使用 jQuery 加载它）。

还有更多与此类似的插件具有相同的功能。谷歌“可滚动表 jquery 插件”。

（自然地，如果您还没有使用 jQuery，您还需要在项目中包含 jQuery）。

【讨论】：

【解决方案2】：

这是一篇旧帖子，但也许有人觉得这个答案很有用。

使用 jQuery Bootgrid 将表格转换为数据网格非常简单，尤其是当您只想显示数据时。

就我而言，我所要做的就是将其添加到我的脚本部分：

$("#my-grid").bootgrid();

并将 ID 添加到我的列标题。开箱即用，它为您提供分页、搜索、页面大小、排序...... 此外，文档相当不错，并且有合理数量的清晰示例。可以用nuget轻松安装：

Install-Package jQuery.Bootgrid

【讨论】：