How to Render Grid in ASP.NET Core Razor Page?
You can create a razor sample application with the EJ2 Grid for which the data is bound using the URL adaptor by following the below steps,
Initially, create a razor page application by following the steps provided in this documentation link.
Then, define the Grid initialization code in the index page (or required page) of the application.
<ejs-grid id="Grid" load="onLoad" allowPaging="true" allowFiltering="true" allowSorting="true" toolbar="@(new List<string>() { "Search" })">
<e-data-manager url="/Index?handler=DataSource" adaptor="UrlAdaptor" crossDomain="true"></e-data-manager>
<e-grid-filterSettings type="Excel"></e-grid-filterSettings>
<e-grid-pagesettings pageSize="4"></e-grid-pagesettings>
<e-grid-columns>
<e-grid-column field="OrderID" isPrimaryKey="true" headerText="Order ID" width="130"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" width="140"></e-grid-column>
<e-grid-column field="ShipCity" headerText="Ship City" width="130"></e-grid-column>
</e-grid-columns>
</ejs-grid>
Now, define the URL method for the Grid’s URL adaptor in the .cs file of the Grid rendered page.
public JsonResult OnPostDataSource([FromBody]DataManagerRequest dm)
{
IEnumerable<OrdersDetails> DataSource = OrdersDetails.GetAllRecords().ToList();
DataOperations operation = new DataOperations();
if (dm.Search != null && dm.Search.Count > 0)
{
DataSource = operation.PerformSearching(DataSource, dm.Search); //Search
}
if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting
{
DataSource = operation.PerformSorting(DataSource, dm.Sorted);
}
if (dm.Where != null && dm.Where.Count > 0) //Filtering
{
DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator);
}
int count = DataSource.Cast<OrdersDetails>().Count();
if (dm.Skip != 0)
{
DataSource = operation.PerformSkip(DataSource, dm.Skip); //Paging
}
if (dm.Take != 0)
{
DataSource = operation.PerformTake(DataSource, dm.Take);
}
return dm.RequiresCounts ? new JsonResult(new { result = DataSource, count = count }) : new JsonResult(DataSource);
}
More details on the URL adaptor binding in Grid can be checked in the following help documentation link,
Since the POST request is used for calling the URL method in the index.cs page, we need to configure ‘XSRF-TOKEN’ in the startup.cs page like given below,
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddMvc().AddJsonOptions(o =>
{
o.JsonSerializerOptions.PropertyNamingPolicy = null;
o.JsonSerializerOptions.DictionaryKeyPolicy = null;
});
services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
}
Then, add the verification token to the Grid data source’s header property in its load event as explained in the following code snippet,
<script>
// Grid’s load event handler
function onLoad() {
this.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }];
}
</script>
Output
Conclusion
I hope you enjoyed learning about how to Render Grid in ASP.NET Core Razor Page.
You can refer to our ASP.NET Core Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET Core Grid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
