اضافه کردن دو خاصیت جدید به کلاس PagedQueryModel سمت کلاینت جهت مشخص سازی ستونی که قرار است بر روی آن جستجو انجام شود و همچنین مقدار آن:
export class PagedQueryModel { constructor( // ... public filterByColumn: string, public filterByValue: string, ) { } }
doFilter() { this.queryModel.page = 1; this.getPagedProductsList(); } resetFilter() { this.queryModel.page = 1; this.queryModel.filterByColumn = ""; this.queryModel.filterByValue = ""; this.getPagedProductsList(); }
پس از آن، قالب این گرید (products-list.component.html) جهت افزودن جستجو، به صورت زیر تغییر میکند:
<div class="panel panel-default"> <div class="panel-body"> <div class="form-group"> <input type="text" [(ngModel)]="queryModel.filterByValue" placeholder="Search For ..." class="form-control" /> </div> <div class="form-group"> <select class="form-control" name="filterColumn" [(ngModel)]="queryModel.filterByColumn"> <option value="">Filter by ...</option> <option *ngFor="let column of columns" [value]="column.propertyName"> {{ column.title }} </option> </select> </div> <button class="btn btn-primary" type="button" (click)="doFilter()">Search</button> <button class="btn btn-default" type="button" (click)="resetFilter()">Reset</button> </div> </div>
با این شکل:
تغییرات سمت سرور آن نیز به صورت ذیل است:
ابتدا IPagedQueryModel را با همان دو خاصیت جدید ستون فیلتر شونده و مقدار آن، تکمیل میکنیم:
public interface IPagedQueryModel { // .... string FilterByColumn { get; set; } string FilterByValue { get; set; } } public class ProductQueryViewModel : IPagedQueryModel { // ... other properties ... // ... public string FilterByColumn { get; set; } public string FilterByValue { get; set; } }
public static class IQueryableExtensions { public static IQueryable<T> ApplyFiltering<T>( this IQueryable<T> query, IPagedQueryModel model, IDictionary<string, Expression<Func<T, object>>> columnsMap) { if (string.IsNullOrWhiteSpace(model.FilterByValue) || !columnsMap.ContainsKey(model.FilterByColumn)) { return query; } var func = columnsMap[model.FilterByColumn].Compile(); return query.Where(x => func(x).ToString() == model.FilterByValue); }
در آخر، به کنترلر ProductController و اکشن متد GetPagedProducts آن مراجعه کرده و پیش از ApplyOrdering، متد جدید ApplyFiltering فوق را اضافه میکنیم:
var columnsMap = new Dictionary<string, Expression<Func<Product, object>>>() { ["productId"] = p => p.ProductId, ["productName"] = p => p.ProductName, ["isAvailable"] = p => p.IsAvailable, ["price"] = p => p.Price }; query = query.ApplyFiltering(queryModel, columnsMap); query = query.ApplyOrdering(queryModel, columnsMap);
کدهای کامل این تغییرات را از اینجا میتوانید دریافت کنید.