Category / Section
How to use UrlAdaptor in Asp.Net Core Razor Page?
1 min read
This knowledge base document explains you how to perform CRUD operation in Grid using UrlaAdaptor within the ASP.NET Core Razor page.
Solution
In ASP.NET Core, we have support to bind dataSource and perform CRUD operation without using controller class. Kindly follow the below steps to perform CRUD operation in Grid within the Razor page.
- Create the ASP.NET Core application with razor using below help documentations
- https://docs.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start?view=aspnetcore-2.1
- https://help.syncfusion.com/aspnet-core/gettingstarted/getting-started-2-x
- Render the Grid inside the cshtml page
Since this razor page does not have specific controller page. Grid Datasource and CRUD actions mapping urls can be set by using the @page “{handler?}” in razor page. Refer the below code example.
Below line helps to map the CRUD operation method to handler*@
@page "{handler?}"
@model ASPNetRazorPageDemo.Pages.DemoModel
@{
ViewData["Title"] = "Demo";
}
@Html.AntiForgeryToken()
<ej-grid id="FlatGrid" allow-sorting="true" load="onLoad" allow-paging="true">
<e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="@(EditMode.Normal)" row-position="Top"></e-edit-settings>
<e-toolbar-settings show-toolbar="true" toolbar-items=@(new List<string>() { "add", "edit", "delete","update","cancel" })>
</e-toolbar-settings>
<e-datamanager url="Demo/DataSource" update-url="Demo/Update" insert-url="Demo/Insert" remove-url="Demo/Delete" adaptor="UrlAdaptor"></e-datamanager>
<e-columns>
<e-column field="OrderID" header-text="Order ID" text-align="Right" width="75" is-primary-key="true"></e-column>
<e-column field="CustomerID" header-text="Customer ID" width="80"></e-column>
<e-column field="EmployeeID" header-text="Employee ID" text-align="Left" width="75"></e-column>
<e-column field="Freight" header-text="Customer ID" format="{0:N2}" width="80"></e-column>
<e-column field="OrderDate" header-text="Employee ID" text-align="Left" format="{0:MM/dd/yyyy}" width="75"></e-column>
</e-columns>
</ej-grid>
- In the load event of ejGrid, we suggest you to pass the antiforgery token along with the datamanager headers to retrieve data from the model class and bind it to grid.
<script>
function onLoad() {
this.model.dataSource.dataSource.headers = [{ 'XSRF-TOKEN': $("input:hidden[name='__RequestVerificationToken']").val() }];
}
</script>
C# [ModelPage]
public class DemoModel : PageModel
{
public static List<Orders> order = new List<Orders>();
public void BindDataSource()
{
int code = 10000;
for (int i = 1; i < 10; i++)
{
order.Add(new Orders(code + 1, "ALFKI", i + 0, 2.3 * i, new DateTime(1991, 05, 15), "Berlin"));
order.Add(new Orders(code + 2, "ANATR", i + 2, 3.3 * i, new DateTime(1990, 04, 04), "Madrid"));
order.Add(new Orders(code + 3, "ANTON", i + 1, 4.3 * i, new DateTime(1957, 11, 30), "Cholchester"));
order.Add(new Orders(code + 4, "BLONP", i + 3, 5.3 * i, new DateTime(1930, 10, 22), "Marseille"));
order.Add(new Orders(code + 5, "BOLID", i + 4, 6.3 * i, new DateTime(1953, 02, 18), "Tsawassen"));
code += 5;
}
}
public JsonResult OnPostDataSource([FromBody]DataManager dm) // bind dataSource with server side operations
{
if (order.Count == 0)
BindDataSource();
IEnumerable data = order;
DataOperations operation = new DataOperations();
if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting
{
data = operation.PerformSorting(data, dm.Sorted);
}
if (dm.Where != null && dm.Where.Count > 0) //Filtering
{
data = operation.PerformWhereFilter(data, dm.Where, dm.Where[0].Operator);
}
if (dm.Search != null && dm.Search.Count > 0) //Searching
{
data = operation.PerformSearching(data, dm.Search);
}
var count = data.AsQueryable().Count();
if (dm.Skip != 0)
{
data = operation.PerformSkip(data, dm.Skip);
}
if (dm.Take != 0)
{
data = operation.PerformTake(data, dm.Take);
}
return new JsonResult(new { result = data, count = count });
}
public class Orders
{
public Orders()
{
}
public Orders(long OrderId, string CustomerId, int EmployeeId, double Freight, DateTime OrderDate, string ShipCity)
{
this.OrderID = OrderId;
this.CustomerID = CustomerId;
this.EmployeeID = EmployeeId;
this.Freight = Freight;
this.OrderDate = OrderDate;
this.ShipCity = ShipCity;
}
[Range(0, int.MaxValue, ErrorMessage = "OrderID must be greater than 0.")]
public long OrderID { get; set; }
[StringLength(5, ErrorMessage = "CustomerID must be 5 characters.")]
public string CustomerID { get; set; }
[Range(1, 9, ErrorMessage = "EmployeeID must be between 0 and 9.")]
public int EmployeeID { get; set; }
[Display(Name = "Freight column")]
public double Freight { get; set; }
public DateTime OrderDate { get; set; }
public string ShipCity { get; set; }
}
- To update a record
public JsonResult OnPostUpdate([FromBody]CRUDModel<Orders> value) // triggers when editing action is done
{
var ord = value.Value;
Orders val = order.Where(or => or.OrderID == ord.OrderID).FirstOrDefault();
val.OrderID = ord.OrderID;
val.EmployeeID = ord.EmployeeID;
val.CustomerID = ord.CustomerID;
val.Freight = ord.Freight;
val.OrderDate = ord.OrderDate;
val.ShipCity = ord.ShipCity;
return new JsonResult(value.Value);
}
- To insert a record
//insert the record
public JsonResult OnPostInsert([FromBody]CRUDModel<Orders> value) // triggers when insert action is done
{
order.Insert(0, value.Value);
return new JsonResult(value);
}
- To delete a record
//Delete the record
public JsonResult OnPostDelete([FromBody]CRUDModel<Orders> value) // triggers when delete action is done
{
order.Remove(order.Where(or => or.OrderID == int.Parse(value.Key.ToString())).FirstOrDefault());
return new JsonResult(value);
}
}
Refer the below screenshot as the output of above code example
|
