jQuery Datatable generic implementation on .Net/dotnet Core for any entity server filtering or sorting through EF/EF Core
jQuery Datatable is one of the popular freely available grid for the developers. It works really great on the client side but there is always need to write a lot of codes on the server side for filtering and sorting for each individual entities.
In this article, we would address this by creating a generic implementation of server code which can work on any entity without writing any further piece of code for filtering and sorting. Just by calling a generic extension method it would resolve sorting and filtering.
The key points to achieve it are as follows:
- Model binding and provider to transform client side request to strongly typed item on the server.
- Once we get strongly typed items to read values, we can apply a dynamic approach to generate queries and filters through LINQ expression.
- At final part, just consumption of created mechanism by creating endpoints for each entity. Also, we can easily select required columns through LINQ projection.
1. Model to hold passed values.
2. Model Binder.
3. Model Provider
4. Registration of model Provider on startup.cs.
Since it has a huge number of parameters, I am not going to go into details for each section but based on codes it would make sense and anyway that's an abstraction 😊.
The main entry class over here is GridDataRequest model which would collect all information from client AJAX request.
We need one more model to return values once we are done with query filter. So, I have created a generic class which can contain IQuerable of data. We would see how it is being used later.
These were all POCO items needed. Now, we can have a look on implementation.
Expression builders
The whole credits go to this post or any other originator of this.
https://stackoverflow.com/questions/35784736/linq-expression-building-get-property-and-convert-to-type#35785038. I have modified the source based on my need.
This is just expression model on which expression would be created.
The expression builder helper function.
It contains expressions for filters also order by expressions. We would see the query composition in next part.
There aren't any codes written here, also it can work on any entities without writing codes to do filters and sorting.
NOTE: This is been created as a concept, need to see how it progress with various requirements. It may have issues with certain data types on filters but this gives an idea to extend and fulfill requirements. I would try to release as a nuget package later.
In this article, we would address this by creating a generic implementation of server code which can work on any entity without writing any further piece of code for filtering and sorting. Just by calling a generic extension method it would resolve sorting and filtering.
The key points to achieve it are as follows:
- Model binding and provider to transform client side request to strongly typed item on the server.
- Once we get strongly typed items to read values, we can apply a dynamic approach to generate queries and filters through LINQ expression.
- At final part, just consumption of created mechanism by creating endpoints for each entity. Also, we can easily select required columns through LINQ projection.
Model Binding
As per DataTable server request, it passes a lot of information to the server to filter out things which are really difficult to parse on the server to get exact value and the do filter on the server. The image was generated through https://datatables.net/examples/server_side/post.html post request. To simplify things we need a model binder to get structured data. On .net code, we need to do four things for same.1. Model to hold passed values.
2. Model Binder.
3. Model Provider
4. Registration of model Provider on startup.cs.
Since it has a huge number of parameters, I am not going to go into details for each section but based on codes it would make sense and anyway that's an abstraction 😊.
Request Models
This section contains all the request models that are required. /// <summary>
/// Grid data request.
/// </summary>
public sealed class GridDataRequest
{
/// <summary>
/// Gets or sets the draw.
/// </summary>
/// <value>
/// The draw.
/// </value>
public int Draw { get; set; }
/// <summary>
/// Gets or sets the start index.
/// </summary>
/// <value>
/// The start index.
/// </value>
public int Start { get; set; }
/// <summary>
/// Gets or sets the length of page size.
/// </summary>
/// <value>
/// The length of page size.
/// </value>
public int Length { get; set; }
/// <summary>
/// Gets or sets the search.
/// </summary>
/// <value>
/// The search.
/// </value>
public DataTableSearch Search { get; set; }
/// <summary>
/// Gets or sets the order for columns.
/// </summary>
/// <value>
/// The order for columns.
/// </value>
public IEnumerable<DataTableOrder> Order { get; set; }
/// <summary>
/// Gets or sets the data table columns.
/// </summary>
/// <value>
/// The data table columns.
/// </value>
public IEnumerable<DataTableColumn> Columns { get; set; }
}
/// <summary>
/// The data table column search.
/// </summary>
public sealed class DataTableSearch
{
/// <summary>
/// Gets or sets the value.
/// </summary>
/// <value>
/// The value.
/// </value>
public string Value { get; set; }
/// <summary>
/// Gets or sets a value indicating whether this <see cref="DataTableSearch"/> is regex.
/// </summary>
/// <value>
/// <c>true</c> if regex; otherwise, <c>false</c>.
/// </value>
public bool Regex { get; set; }
}
/// <summary>
/// The data table order of columns.
/// </summary>
public sealed class DataTableOrder
{
/// <summary>
/// Gets or sets the column.
/// </summary>
/// <value>
/// The column.
/// </value>
public string Column { get; set; }
/// <summary>
/// Gets or sets the direction of order.
/// </summary>
/// <value>
/// The direction of order.
/// </value>
public string Dir { get; set; }
}
/// <summary>
/// DataTable column
/// </summary>
public sealed class DataTableColumn
{
/// <summary>
/// Gets or sets the data.
/// </summary>
/// <value>
/// The data.
/// </value>
public string Data { get; set; }
/// <summary>
/// Gets or sets the name.
/// </summary>
/// <value>
/// The name.
/// </value>
public string Name { get; set; }
/// <summary>
/// Gets or sets a value indicating whether this <see cref="DataTableColumn"/> is orderable.
/// </summary>
/// <value>
/// <c>true</c> if orderable; otherwise, <c>false</c>.
/// </value>
public bool Orderable { get; set; }
/// <summary>
/// Gets or sets a value indicating whether this <see cref="DataTableColumn"/> is searchable.
/// </summary>
/// <value>
/// <c>true</c> if searchable; otherwise, <c>false</c>.
/// </value>
public bool Searchable { get; set; }
/// <summary>
/// Gets or sets the search request.
/// </summary>
/// <value>
/// The search request.
/// </value>
public DataTableSearch Search { get; set; }
}
The main entry class over here is GridDataRequest model which would collect all information from client AJAX request.
We need one more model to return values once we are done with query filter. So, I have created a generic class which can contain IQuerable of data. We would see how it is being used later.
/// <summary>
/// Grid data result.
/// </summary>
/// <typeparam name="T">The type of grid result.</typeparam>
public class GridDataResult<T>
{
/// <summary>
/// Gets or sets the draw.
/// </summary>
/// <value>
/// The draw.
/// </value>
[JsonProperty(PropertyName = "draw")]
public int Draw { get; set; }
/// <summary>
/// Gets or sets the records total.
/// </summary>
/// <value>
/// The records total.
/// </value>
[JsonProperty(PropertyName = "recordsTotal")]
public int RecordsTotal { get; set; }
/// <summary>
/// Gets or sets the records filtered.
/// </summary>
/// <value>
/// The records filtered.
/// </value>
[JsonProperty(PropertyName = "recordsFiltered")]
public int RecordsFiltered { get; set; }
/// <summary>
/// Gets or sets the data from result.
/// </summary>
/// <value>
/// The result data.
/// </value>
[JsonProperty(PropertyName = "data")]
public IQueryable<T> Data { get; set; }
}
These were all POCO items needed. Now, we can have a look on implementation.
Model Binder
This would be having main logic to collect information from client request and transform into above classes. /// <summary>
/// <see cref="GridDataRequest"/> model binder.
/// </summary>
/// <seealso cref="IModelBinder" />
public sealed class GridDataRequestBinder
: IModelBinder
{
public Task BindModelAsync(ModelBindingContext bindingContext)
{
if (bindingContext == null)
{
throw new ArgumentNullException(nameof(bindingContext));
}
var request = bindingContext.HttpContext.Request;
var search = new DataTableSearch
{
Value = request.Form["search[value]"],
Regex = Convert.ToBoolean(request.Form["search[regex]"])
};
var ordByColCounter = 0;
var order = new List<DataTableOrder>();
while (!string.IsNullOrEmpty(request.Form["order[" + ordByColCounter + "][column]"]))
{
var column = request.Form["order[" + ordByColCounter + "][column]"];
order.Add(new DataTableOrder
{
Column = request.Form["columns[" + column + "][data]"],
Dir = request.Form["order[" + ordByColCounter + "][dir]"]
});
ordByColCounter++;
}
var colCounter = 0;
var columns = new List<DataTableColumn>();
while (!string.IsNullOrEmpty(request.Form["columns[" + colCounter + "][name]"]))
{
columns.Add(new DataTableColumn
{
Data = request.Form["columns[" + colCounter + "][data]"],
Name = request.Form["columns[" + colCounter + "][name]"],
Orderable = Convert.ToBoolean(request.Form["columns[" + colCounter + "][orderable]"]),
Searchable = Convert.ToBoolean(request.Form["columns[" + colCounter + "][searchable]"]),
Search = new DataTableSearch
{
Value = request.Form["columns[" + colCounter + "][search][value]"],
Regex = Convert.ToBoolean(request.Form["columns[" + colCounter + "][search][regex]"])
}
});
colCounter++;
}
var model = new GridDataRequest
{
Draw = Convert.ToInt32(request.Form["draw"]),
Start = Convert.ToInt32(request.Form["start"]),
Length = Convert.ToInt32(request.Form["length"]),
Search = search,
Order = order,
Columns = columns
};
model.Length = model.Length == 0 ? 10 : model.Length;
bindingContext.Result = ModelBindingResult.Success(model);
return TaskCache.CompletedTask;
}
}
Model binder Provider
It has just simple logic to identify model and initiate the Grid binder /// <summary>
/// <see cref="Gems.Model.Dto.Grid.GridDataRequest"/> model binder provider.
/// </summary>
/// <seealso cref="Microsoft.AspNetCore.Mvc.ModelBinding.IModelBinderProvider" />
public sealed class GridDataBinderProvider
: IModelBinderProvider
{
/// <summary>
/// Creates a <see cref="T:Microsoft.AspNetCore.Mvc.ModelBinding.IModelBinder" /> based on <see cref="T:Microsoft.AspNetCore.Mvc.ModelBinding.ModelBinderProviderContext" />.
/// </summary>
/// <param name="context">The <see cref="T:Microsoft.AspNetCore.Mvc.ModelBinding.ModelBinderProviderContext" />.</param>
/// <returns>
/// An <see cref="T:Microsoft.AspNetCore.Mvc.ModelBinding.IModelBinder" />.
/// </returns>
/// <exception cref="ArgumentNullException">context</exception>
public IModelBinder GetBinder(ModelBinderProviderContext context)
{
if (context == null)
{
throw new ArgumentNullException(nameof(context));
}
if (context.Metadata.ModelType == typeof(GridDataRequest))
{
return new BinderTypeModelBinder(typeof(GridDataRequestBinder));
}
return null;
}
}
Register Model Provider and setting JSON serializer
The final thing that needs to be done for this section is to register binder on MVC also register JSON serializer to return values in PascalCase to avoid parsing errors on the client while data binding. service.AddMvc(option =>
{
option.ModelBinderProviders.Insert(0, new GridDataBinderProvider());
})
.AddJsonOptions(options =>
options.SerializerSettings.ContractResolver = new DefaultContractResolver());
LINQ query with expression
Now, we are done with the first section related to the model creation and binder. Next task is to compose the query by passing dynamic expression based on GridDataRequest.Expression builders
The whole credits go to this post or any other originator of this.
https://stackoverflow.com/questions/35784736/linq-expression-building-get-property-and-convert-to-type#35785038. I have modified the source based on my need.
This is just expression model on which expression would be created.
/// <summary>
/// Expression operators for creating expressions from enum.
/// </summary>
public enum ExpressionOperators
{
Equals,
GreaterThan,
LessThan,
GreaterThanOrEqual,
LessThanOrEqual,
Contains,
StartsWith,
EndsWith
}
/// <summary>
/// Expression model to apply expressions.
/// </summary>
public class ExpressionModel
{
/// <summary>
/// Gets or sets the name of the property.
/// </summary>
/// <value>
/// The name of the property.
/// </value>
public string PropertyName { get; set; }
/// <summary>
/// Gets or sets the expression operator.
/// </summary>
/// <value>
/// The expression operator.
/// </value>
public ExpressionOperators Operator { get; set; }
/// <summary>
/// Gets or sets the parameter value.
/// </summary>
/// <value>
/// The parameter value for the expression.
/// </value>
public object Value { get; set; }
}
The expression builder helper function.
/// <summary>
/// Expression builder helper class.
/// </summary>
public static class ExpressionBuilder
{
private static MethodInfo containsMethod = typeof(string).GetMethod("Contains");
private static MethodInfo endsWithMethod = typeof(string).GetMethod("EndsWith", new Type[] { typeof(string) });
private static MethodInfo startsWithMethod = typeof(string).GetMethod("StartsWith", new Type[] { typeof(string) });
/// <summary>
/// Makes the predicate as per expression model.
/// </summary>
/// <typeparam name="T">The type on which expression would be built.</typeparam>
/// <param name="filters">The filters that need to be applied.</param>
/// <returns>The expression based on passed filters.</returns>
public static Expression<Func<T, bool>> MakePredicate<T>(IEnumerable<ExpressionModel> filters)
{
if (filters == null)
{
return (model) => true;
}
filters = filters.Where(filter => filter != null);
if (!filters.Any())
{
return (model) => true;
}
var item = Expression.Parameter(typeof(T), "item");
var body = filters.Select(filter => MakePredicate(item, filter)).Aggregate(Expression.AndAlso);
var predicate = Expression.Lambda<Func<T, bool>>(body, item);
return predicate;
}
/// <summary>
/// Applies order by expression based on nested type.
/// </summary>
/// <typeparam name="T">The type of model on which order by would be applied.</typeparam>
/// <param name="source">The query source.</param>
/// <param name="ordering">The ordering column.</param>
/// <param name="ascending">if set to <c>true</c> ascending.</param>
/// <returns>Query composition after applying order by predicate.</returns>
public static IQueryable<T> OrderBy<T>(
this IQueryable<T> source,
string ordering,
bool ascending)
{
if (string.IsNullOrEmpty(ordering))
{
return source;
}
var type = typeof(T);
var parameter = Expression.Parameter(type, "p");
PropertyInfo property;
Expression propertyAccess;
if (ordering.Contains('.'))
{
// support to be sorted on child fields.
var childProperties = ordering.Split('.');
property = type.GetProperty(childProperties[0]);
propertyAccess = Expression.MakeMemberAccess(parameter, property);
for (int i = 1; i < childProperties.Length; i++)
{
property = property.PropertyType.GetProperty(childProperties[i]);
propertyAccess = Expression.MakeMemberAccess(propertyAccess, property);
}
}
else
{
property = typeof(T).GetProperty(ordering);
propertyAccess = Expression.MakeMemberAccess(parameter, property);
}
var orderByExp = Expression.Lambda(propertyAccess, parameter);
var resultExp = Expression.Call(
typeof(Queryable),
ascending ? "OrderBy" : "OrderByDescending",
new[] { type, property.PropertyType },
source.Expression,
Expression.Quote(orderByExp));
return source.Provider.CreateQuery<T>(resultExp);
}
/// <summary>
/// Makes the predicate.
/// </summary>
/// <param name="item">The parameter expression item.</param>
/// <param name="filter">The filter model.</param>
/// <returns>Predicate for the filter.</returns>
private static Expression MakePredicate(ParameterExpression item, ExpressionModel filter)
{
var member = Expression.Property(item, filter.PropertyName);
var constant = Expression.Constant(filter.Value);
switch (filter.Operator)
{
case ExpressionOperators.Equals:
return Expression.Equal(member, constant);
case ExpressionOperators.GreaterThan:
return Expression.GreaterThan(member, constant);
case ExpressionOperators.LessThan:
return Expression.LessThan(member, constant);
case ExpressionOperators.GreaterThanOrEqual:
return Expression.GreaterThanOrEqual(member, constant);
case ExpressionOperators.LessThanOrEqual:
return Expression.LessThanOrEqual(member, constant);
case ExpressionOperators.Contains:
return Expression.Call(member, containsMethod, constant);
case ExpressionOperators.StartsWith:
return Expression.Call(member, startsWithMethod, constant);
case ExpressionOperators.EndsWith:
return Expression.Call(member, endsWithMethod, constant);
}
return null;
}
}
It contains expressions for filters also order by expressions. We would see the query composition in next part.
Query composing through simplified extension methods
This is kind of entry point to create LINQ query. There are two overloaded functions one is to get a direct source of the data model and another one is to do through projection to select specific columns only. /// <summary>
/// Data source extension for querying Dynamic LINQ.
/// </summary>
public static class DataSourceQueryExtension
{
/// <summary>
/// To the data source.
/// </summary>
/// <typeparam name="T">Type of the request.</typeparam>
/// <param name="querySource">The query source.</param>
/// <param name="request">The request.</param>
/// <returns>The filtered result based on grid data request.</returns>
public static GridDataResult<T> ToDataSource<T>(
this IQueryable<T> querySource,
GridDataRequest request)
{
return new GridDataResult<T>
{
Draw = request.Draw,
RecordsTotal = querySource.Count(),
RecordsFiltered = 1,
Data = querySource.GetFilteredQuery(request)
.Skip(request.Start)
.Take(request.Length)
};
}
/// <summary>
/// To the data source.
/// </summary>
/// <typeparam name="T">The type of the model for query.</typeparam>
/// <typeparam name="TResult">The type of the result.</typeparam>
/// <param name="querySource">The query source.</param>
/// <param name="request">The request.</param>
/// <param name="expression">The expression.</param>
/// <returns>The filtered result based on grid data request.</returns>
/// <exception cref="ArgumentNullException">expression</exception>
public static GridDataResult<TResult> ToDataSource<T, TResult>(
this IQueryable<T> querySource,
GridDataRequest request,
Expression<Func<T, TResult>> expression)
{
if (expression == null)
{
throw new ArgumentNullException(nameof(expression));
}
return new GridDataResult<TResult>
{
Draw = request.Draw,
RecordsTotal = querySource.Count(),
RecordsFiltered = 1,
Data = querySource.GetFilteredQuery(request)
.Select(expression)
.Skip(request.Start)
.Take(request.Length)
};
}
/// <summary>
/// Gets the filtered query.
/// </summary>
/// <typeparam name="T">The type of the model for query.</typeparam>
/// <param name="querySource">The query source.</param>
/// <param name="request">The request.</param>
/// <returns>Filtered query based on <paramref name="request"/>.</returns>
private static IQueryable<T> GetFilteredQuery<T>(
this IQueryable<T> querySource,
GridDataRequest request)
{
var obj = new List<ExpressionModel>();
request.Columns.Where(col => !string.IsNullOrEmpty(col.Search.Value))
.ToList().ForEach((col) =>
{
obj.Add(new ExpressionModel
{
Operator = ExpressionOperators.Equals,
PropertyName = col.Data,
Value = col.Search.Value
});
});
querySource = querySource.Where(ExpressionBuilder.MakePredicate<T>(obj));
var column = request.Order.Select(v => v.Column).FirstOrDefault();
var direction = request.Order.Select(v => v.Dir).FirstOrDefault();
querySource = querySource.OrderBy(column, direction != "desc");
return querySource;
}
}
Endpoints to consume above mechanism
Now, the easiest part is to use the whole implementation in a cleaner manner. This support any kind of sorting and filtering based on a string. Filtering plugin can be used for same https://datatables.net/examples/api/multi_filter.html.There aren't any codes written here, also it can work on any entities without writing codes to do filters and sorting.
[HttpPost]
public JsonResult List(GridDataRequest request)
{
return Json(UnitOfWork.EmployeeRepository.All()
.ToDataSource(request, model => new { model.Id, model.Name }));
}
[HttpPost]
public JsonResult List(GridDataRequest request)
{
return Json(UnitOfWork.EmployeeRepository.All()
.ToDataSource(request);
}
NOTE: This is been created as a concept, need to see how it progress with various requirements. It may have issues with certain data types on filters but this gives an idea to extend and fulfill requirements. I would try to release as a nuget package later.
I've been using this code a lot in last years, do you impproved it somehow? I need to make some adjustments to use the global filter and columns filter at the same time, I can show t you but I believe you have fix this and if you publish your impprovements will be a pleasure to see.
ReplyDelete