Question

我正在开发一个新的asp.net mvc-5 Web应用程序，我搜索了一个可以提供这些主要功能的网格： -

排序。
过滤
搜索。
在搜索了大约2周之后，我没有找到任何100％设计用于asp.net mvc 5的网格，因为大多数网格都会阻止我从asp.net mvc main中受益功能如： -
使用Html.DisplayNameFor等html帮助器，就像在大多数网格中一样，我需要手动编写表头标签。
使用数据注释。因为大多数网格都可以直接使用从动作方法返回的json，所以任何数据注释都将被忽略。

今天我找到了asp.net MVC网格http://msdn.microsoft.com/en-us/library/system.web.helpers.webgrid%28v=vs.111%29.aspx

但我有这两个问题： -

任何人都可以尝试使用asp.net MVC网格吗？我可以从中受益的主要特征是什么？
是否有任何关于如何在以下内容中使用WebGrid的文档; asp.net mvc5 + Razor视图+使用服务器端（非客户端）实现过滤，排序和搜索？

有人可以这样做吗？感谢。

Answer 1

Datatables.net在其网站上有文档。您可以从References页面开始。

在VS中使用nuget包管理器并从那里下载或从它自己的站点获取它。在项目中包含以下内容：

~/Scripts/DataTables-x.x.x/jquery.dataTables.js

~/Content/DataTables-x.x.x/css/jquery.datatables.css

基本配置：

$(document).ready(function() {
    $('#myTable').DataTable();
});

现在，您可以根据数据构建基本的html表格：

@* Do we have data to show? *@
        @if (Model.Count > 1)
        {
            int resultCount = 0;

            <table id="inventoryResultsTable" class="table table-striped table-bordered table-responsive" cellspacing="0">
                <thead>
                    <tr>
                        <th><i class="fa fa-tag"></i>&nbsp;Asset #</th>
                        <th><i class="fa fa-desktop"></i>&nbsp;Type</th>
                        <th><i class="fa fa-cube"></i>&nbsp;Asset Name</th>
                        <th><i class="fa fa-building-o"></i>&nbsp;Manufacturer</th>
                        <th><i class="fa fa-asterisk"></i>&nbsp;Model</th>
                        <th><i class="fa fa-barcode"></i>&nbsp;Serial #</th>
                        <th><i class="fa fa-ellipsis-h"></i>&nbsp;Add. Info</th>
                        <th><i class="fa fa-check-square-o"></i>&nbsp;In Use</th>
                        <th><i class="fa fa-cog"></i>&nbsp;Purpose</th>
                        <th><i class="fa fa-location-arrow"></i>&nbsp;Location</th>
                        <th><i class="fa fa-bolt"></i>&nbsp;Options</th>
                    </tr>
                </thead>
                <tfoot>
                </tfoot>
                <tbody>

                     @* Iterate and build data rows with avalible data *@
                     @foreach (var Asset in Model)
                     {
                        resultCount++;
                        string assetNumberDisplay = Asset.AssetNumber.ToString() == "0" ? "Unknown" : Asset.AssetNumber.ToString("D4");
                        string assetInUseDisplay = Asset.InUse == true ? "Yes" : "No";

                        <tr>
                            <td>@assetNumberDisplay</td>
                            <td>@Asset.AssetType</td>
                            <td>@Asset.AssetName</td>
                            <td>@Asset.Manufacturer</td>
                            <td>@Asset.Model</td>
                            <td>@Asset.SerialNumber</td>
                            <td>@Asset.AdditionalInfo</td>
                            <td>@assetInUseDisplay</td>
                            <td>@Asset.Purpose</td>
                            <td>@Asset.Location</td>
                            <td>
                                <div class="row">
                                    <div class="col-sm-6">
                                        @Html.Raw("<a data-modal='' href='/Inventory/AssetDetails/" + Asset.Id + "' id='" + Asset.Id + "' title='Edit'> <span class='glyphicon glyphicon-edit'> </span> </a>")
                                    </div>
                                    <div class="col-sm-6">
                                        @Html.Raw("<a data-modal='' href='/Inventory/DeleteAsset/" + Asset.Id + "' id='" + Asset.Id + "' title='Delete'> <span class='glyphicon glyphicon-trash'> </span> </a>")
                                    </div>
                                </div>
                           </td>
                        </tr>
                           }

                 </tbody>

             </table>
         }
         else
         {
             @* Alert User that there was no data found to display based on constraints set  *@
             <h4><i class="fa fa-info-circle"></i>&nbsp;<b>0</b>&nbsp;Results Found</h4>
             <hr />
             <p>Your search did not return any results. You can try searching again using differant constraints.</p>
         }

让它响应：

现在，您可以使用精彩的“响应式”功能使您的表格快速响应。他们已经包含在包中的插件：

~/Scripts/DataTables-x.x.x/dataTables.responsive.min.js

    $(document).ready(function() {
        $('#myTable').DataTable({
          responsive: true
        });
    });

还有许多其他选项，例如自定义排序选项和自定义每页的记录数。尝试使用其网站内置的Google搜索。

也许比datatables.mvc更好的解决方案是使用像MVC Jquery Datatables这样的东西，因为它允许你使用来自IQueryables的数据。后者缺乏文档，但该项目有更多的例子。

Answer 2

WebGrid grid = new WebGrid(Model, canPage: true, canSort: true,rowsPerPage:1);
grid.Pager(WebGridPagerModes.NextPrevious,nextText:"Next",previousText:"Prev",numericLinksCount:1);
@grid.GetHtml(tableStyle: "webgrid",headerStyle:"header", columns: grid.Columns(grid.Column("name", "Name", canSort: true),
grid.Column("address", "Address"), grid.Column("gender", "Gender"), grid.Column("age", "Age"),
grid.Column("mob", "Mobile"), grid.Column(format: @<text><a id="link" href='@Url.Action("Details", "Admin", new { @email = item.email })'>@item.email</a></text>)));

WebCrid在MVC 5中与服务器端处理

2 个答案: