.NET MVC Core 5及以上：求支持AngularJS排序筛选的类WebGrid表格组件

.NET Core MVC中没有内置和传统ASP.NET MVC WebGrid完全一致的组件，但可以通过以下几种方案实现类似功能，同时支持AngularJS的排序与筛选：

1. 自定义Razor表格 + AngularJS前端增强 #

这种方案最贴近你原来的WebGrid用法，先在Razor视图中生成基础表格结构，再通过AngularJS接管排序、筛选逻辑：

步骤示例： #

• 后端准备数据：在Controller中把数据传递到视图，同时转成JSON供AngularJS使用

public IActionResult Index()
{
    var grnData = _grnService.GetAll();
    ViewBag.GrnDataJson = JsonSerializer.Serialize(grnData);
    return View(grnData);
}

• Razor视图实现：保留类似WebGrid的列格式化和操作按钮，同时引入AngularJS绑定

<div ng-app="grnApp" ng-controller="grnController">
    <!-- 筛选输入框 -->
    <input type="text" ng-model="searchText" placeholder="搜索..." />

    <table class="webgrid-table">
        <thead class="webgrid-header">
            <tr>
                <!-- 可排序表头 -->
                <th ng-click="sort('GRNNo')">
                    GRNNo <span ng-show="sortKey == 'GRNNo' && !reverse">↑</span><span ng-show="sortKey == 'GRNNo' && reverse">↓</span>
                </th>
                <th ng-click="sort('InvoiceNo')">
                    InvoiceNo <span ng-show="sortKey == 'InvoiceNo' && !reverse">↑</span><span ng-show="sortKey == 'InvoiceNo' && reverse">↓</span>
                </th>
                <th ng-click="sort('Total')">
                    Total <span ng-show="sortKey == 'Total' && !reverse">↑</span><span ng-show="sortKey == 'Total' && reverse">↓</span>
                </th>
                <th ng-click="sort('InvoiceDate')">
                    InvoiceDate <span ng-show="sortKey == 'InvoiceDate' && !reverse">↑</span><span ng-show="sortKey == 'InvoiceDate' && reverse">↓</span>
                </th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in grnData | filter:searchText | orderBy:sortKey:reverse" 
                ng-class="{'webgrid-alternating-row': $index%2 == 1, 'webgrid-row-style': $index%2 == 0}">
                <td>{{item.GRNNo}}</td>
                <td>{{item.InvoiceNo}}</td>
                <td>{{item.Total | currency}}</td>
                <td>{{item.InvoiceDate | date:'shortDate'}}</td>
                <td>
                    <a asp-action="Details" asp-controller="GRNs" asp-route-id="{{item.ID}}" class="glyphicon glyphicon-eye-open"></a> |
                    <a asp-action="Delete" asp-controller="GRNs" asp-route-id="{{item.ID}}" 
                       ng-class="item.IsDeleted ? 'glyphicon glyphicon-open colorspringgreen' : 'glyphicon glyphicon-trash colorred'">
                        {{item.IsDeleted ? 'Activate' : 'Delete'}}
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>
    var app = angular.module('grnApp', []);
    app.controller('grnController', function($scope) {
        // 初始化数据
        $scope.grnData = @Html.Raw(ViewBag.GrnDataJson);
        // 排序配置
        $scope.sortKey = 'GRNNo';
        $scope.reverse = false;
        $scope.sort = function(key) {
            $scope.sortKey = key;
            $scope.reverse = !$scope.reverse;
        };
    });
</script>

2. 使用AngularJS专用表格组件（ng-table） #

ng-table是AngularJS生态中成熟的表格组件，内置排序、筛选、分页功能，配合Core后端API使用更高效：

核心实现示例： #

• 后端API：提供返回数据的接口

[HttpGet]
public IActionResult GetGrns()
{
    var grnData = _grnService.GetAll();
    return Ok(grnData);
}

• 前端AngularJS + ng-table代码

<div ng-app="grnApp" ng-controller="grnController">
    <table ng-table="tableParams" class="table webgrid-table">
        <tr ng-repeat="item in $data">
            <td data-title="'GRNNo'" sortable="'GRNNo'">{{item.GRNNo}}</td>
            <td data-title="'InvoiceNo'" sortable="'InvoiceNo'">{{item.InvoiceNo}}</td>
            <td data-title="'Total'" sortable="'Total'">{{item.Total | currency}}</td>
            <td data-title="'InvoiceDate'" sortable="'InvoiceDate'">{{item.InvoiceDate | date:'shortDate'}}</td>
            <td data-title="'操作'">
                <a asp-action="Details" asp-controller="GRNs" asp-route-id="{{item.ID}}" class="glyphicon glyphicon-eye-open"></a> |
                <a asp-action="Delete" asp-controller="GRNs" asp-route-id="{{item.ID}}" 
                   ng-class="item.IsDeleted ? 'glyphicon glyphicon-open colorspringgreen' : 'glyphicon glyphicon-trash colorred'">
                    {{item.IsDeleted ? 'Activate' : 'Delete'}}
                </a>
            </td>
        </tr>
    </table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.1/ng-table.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.1/ng-table.min.css">
<script>
    var app = angular.module('grnApp', ['ngTable']);
    app.controller('grnController', function($scope, $http, NgTableParams) {
        $http.get('/GRNs/GetGrns').then(function(response) {
            $scope.tableParams = new NgTableParams({
                sorting: { GRNNo: 'asc' } // 默认排序
            }, {
                dataset: response.data
            });
        });
    });
</script>

3. 服务器端+前端混合处理（大数据场景） #

如果数据量较大，前端全量加载性能不佳，可以让Core后端处理分页、排序、筛选逻辑，AngularJS负责传递参数并渲染结果：

• AngularJS根据用户操作（排序、筛选）向后端API传递参数（如sortBy、filterText、pageIndex）
• 后端接收参数后查询数据库，返回分页后的结果
• AngularJS渲染返回的数据

内容的提问来源于stack exchange，提问作者JagathNalin