There is some example of the grid with Net core 2 Razor Pages, not with MVC View

[Patricio Venegas B]

There is some example of the grid with Net core 2 Razor Pages (CRUD), not with MVC View  

[Dhivya Rajendran]

Hi Patricio, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and created a sample based on you requirement. In the below sample, we have rendered the Essential JS2 Grid component in ASP.NET core with Razor pages and perform CRUD operation in Grid.  

Kindly refer to the below code example and sample for more information.  

[index.cshtml] 

@{  

<ejs-grid  id="cruiseLinesGrid" dataSource=@Model.Datasource toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true"> 

  <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings>   

<e-grid-columns> 

        <e-grid-column field="EmployeeID" headerText="Employee ID" width="125"></e-grid-column> 

        <e-grid-column field="OrderID" headerText="OrderID" width="120"></e-grid-column> 

        . . . .  

    </e-grid-columns> 

</ejs-grid> 

} 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2_Razor_Grid1015525361    

 

Help documentation : https://ej2.syncfusion.com/aspnetcore/documentation/grid/getting-started-core.html  

We have perform CURD operation for local data in the above sample, you can perform both local and remote data as per your requirement. Kindly refer to the below documentation for more information. 

Help documentation :  

https://aspdotnetcore.syncfusion.com/Grid/UrlAdaptor#/material    

https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit.html  

Please get back to us if you need further assistance. 

Regards,
R.Dhivya 

[Patricio Venegas B]

Thanks for the answer, although you can bring the data when editing I can not access the codebehind of the razor page, the example to download does not bring the crud only the Get.

the update method and the insert do not fire.

[Dhivya Rajendran]

Hi Patricio,

In the previously provided sample the editing feature is not configured in Grid. Now we have modified the sample, you can perform the CRUD operation in Grid.

 

Kindly refer to the below updated sample for more information.

 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2_Razor_Grid-339611666

 

Regards,
R.Dhivya

[Patricio Venegas B]

thanks, after pressing the update button, no codebehind method is executed, it is only updated at the grid level but the data does not persist.

I have tried using the documentation but I have not managed to do the crud of a grid in a razor page using the Net core controls.

it's frustrating

[Dhivya Rajendran]

Hi Patricio, 

In the previously provided sample we are bind local data to the Grid so that it update values in grid level .Now we have modified the sample and bind remote data to the Grid also performed CRUD operation in Grid. Kindly refer to the below code example and updated sample for more information. 

[index.cshtml] 

<ejs-grid id="Grid" allowPaging="true" load="onLoad"  toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})"> 

    <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editsettings> 

    <e-data-manager url="/Index?handler=DataSource" insertUrl="/Index?handler=Insert" updateUrl="/Index?handler=Update" removeUrl="/Index?handler=Delete"  adaptor="UrlAdaptor"></e-data-manager> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column> 

 

    </e-grid-columns> 

</ejs-grid> 

[pageModel] 

public class IndexModel : PageModel 

    { 

        public void OnGet() 

        { 

 

        } 

        public JsonResult OnPostDataSource([FromBody]Data dm) 

        { 

            var data = OrdersDetails.GetAllRecords(); 

            int count = data.Cast<OrdersDetails>().Count(); 

            return dm.requiresCounts ? new JsonResult(new { result = data.Skip(dm.skip).Take(dm.take), count = count }) : new JsonResult(data); 

 

 

        } 

 

        public JsonResult OnPostInsert([FromBody]CRUDModel<OrdersDetails> value) 

        { 

 

            OrdersDetails.GetAllRecords().Insert(0, value.value); 

            return new JsonResult(value.value); 

        } 

        public JsonResult OnPostDelete([FromBody]CRUDModel<OrdersDetails> value) 

        { 

            OrdersDetails.GetAllRecords().Remove(OrdersDetails.GetAllRecords().Where(or => or.OrderID == int.Parse(value.key.ToString())).FirstOrDefault()); 

            return new JsonResult(value); 

        } 

 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/Razorpages957409484  

 

Help documentation : https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit.html#persisting-data-in-server  

Regards, 

R.Dhivya  

[Patricio Venegas B]

Thank you very much now if it worked for me

[Dhivya Rajendran]

Hi Patricio,

Thanks for you update.

We are happy to hear that the provided solution was helpful to achieve your requirement.

Regards,
R.Dhivya

[Costa]

Could you make a similar example for <ej-grid /> (JS 1) and UrlAdapter? Of course, not MVC, but Razor Pages.

[Farveen Sulthana Thameeztheen Basha]

Query #:-  Could you make a similar example for <ej-grid /> (JS 1) and UrlAdapter? Of course, not MVC, but Razor Pages. 

We have prepared sample as per your request using URL Adaptor along with Razor pages. Refer to the below code example:- 

Demo.cshtml 

<ej-grid id="FlatGrid" allow-sorting="true" selectiontype="Multiple"allow-paging="true"> 

       <e-datamanager url="/Demo?handler=DataSource" update-url="/Demo?hanlder=Update" insert-url="/Demo?hanlder=Insert" remove-url="/Demo?hanlder=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-columns> 

    </ej-grid> 

     

</div> 

pageModel 

namespace ASPNetRazorPageDemo.Pages 

{ 

    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) 

        { 

            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 JsonResult OnPostUpdate([FromBody]CRUDModel<Orders> value) 

        { 

            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); 

        } 

        //insert the record 

        public JsonResult OnPostInsert([FromBody]CRUDModel<Orders> value) 

        { 

            order.Insert(0, value.value); 

            return new JsonResult(value); 

        } 

        //Delete the record 

        public JsonResult OnPostDelete([FromBody]CRUDModel<Orders> value) 

        { 

            order.Remove(order.Where(or => or.OrderID == int.Parse(value.key.ToString())).FirstOrDefault()); 

            return new JsonResult(value); 

        } 

 

 

    } 

} 

Please refer to the Sample Link:- 

http://www.syncfusion.com/downloads/support/forum/138598/ze/ASPNETCoreRazorPageDemoApp-ASPNETCoreRazorAjax1861578413.zip 

 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 

[Costa]

Many thanks that answered my question and prepared an example. The grid is filled with data as expected. But, unfortunately, it is not clear why, OnPostUpdate, OnPostInsert, OnPostDelete functions are not fired. Nevertheless, given that Syncfusion components are very high-quality and user-friendly, I hope to learn how to use them in Razor Pages. I ask to help to understand this problem. Software parameters: Windows 10 v.1803 build 17134.165, .NET Core 2.1 SDK (v2.1.302), Visual Studio 15.7.5.

[Costa]

Ok, this code: 

@page "{handler?}"

<e-datamanager url="Demo/DataSource" update-url="Demo/Update" ...

is worked

[Farveen Sulthana Thameeztheen Basha]

Hi Costa, 

  

Thanks for your update. We are glad to inform that your reported problem has been resolved. Please get back to us if you need any further assistance. 

  

Regards, 

Farveen sulthana T 

[Rubén Valentín]

Hi Patricio, 

In the previously provided sample we are bind local data to the Grid so that it update values in grid level .Now we have modified the sample and bind remote data to the Grid also performed CRUD operation in Grid. Kindly refer to the below code example and updated sample for more information. 

[index.cshtml] 

<ejs-grid id="Grid" allowPaging="true" load="onLoad"  toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})"> 

    <e-grid-editsettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editsettings> 

    <e-data-manager url="/Index?handler=DataSource" insertUrl="/Index?handler=Insert" updateUrl="/Index?handler=Update" removeUrl="/Index?handler=Delete"  adaptor="UrlAdaptor"></e-data-manager> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column> 

 

    </e-grid-columns> 

</ejs-grid> 

[pageModel] 

public class IndexModel : PageModel 

    { 

        public void OnGet() 

        { 

 

        } 

        public JsonResult OnPostDataSource([FromBody]Data dm) 

        { 

            var data = OrdersDetails.GetAllRecords(); 

            int count = data.Cast<OrdersDetails>().Count(); 

            return dm.requiresCounts ? new JsonResult(new { result = data.Skip(dm.skip).Take(dm.take), count = count }) : new JsonResult(data); 

 

 

        } 

 

        public JsonResult OnPostInsert([FromBody]CRUDModel<OrdersDetails> value) 

        { 

 

            OrdersDetails.GetAllRecords().Insert(0, value.value); 

            return new JsonResult(value.value); 

        } 

        public JsonResult OnPostDelete([FromBody]CRUDModel<OrdersDetails> value) 

        { 

            OrdersDetails.GetAllRecords().Remove(OrdersDetails.GetAllRecords().Where(or => or.OrderID == int.Parse(value.key.ToString())).FirstOrDefault()); 

            return new JsonResult(value); 

        } 

 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/Razorpages957409484  

 

Help documentation : https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit.html#persisting-data-in-server  

Regards, 

R.Dhivya  

Is there any sample Net core 2 Razor Pages (CRUD) with Partial View ? All samples are MVC. 

[Balaji Sekar]

Hi Patricio, 

 

Before proceeding further, we need to confirm whether you want to bind the edit form on the partial view or we have misunderstood your requirement please share more details to us that will help to validate further. 

 

We suspect that you want to bind the edit form in partial view, we have achieve the dialog editing in the partial view using DialogTemplate feature. We have shared the sample as given, it is bind the Dialog edit form using partial view in razor application. 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/253309/ze/Grid_Razor_31429153331 

 

Regards, 

Balaji Sekar. 

[Paulo P]

Hi.

Would you please provide me with the sample  of the grid with Net core 3 Razor Pages (CRUD), not with MVC View in this post but with data coming from a dynamic query to a database?

Thank you.

[Balaji Sekar]

Hi Patricio, 

Based on your query we suspect that you have facing camel case problem after upgrade the .Net framework from 2.0 to 3.0. we already discussed about this problem in our Documentation so please refer the below documentation for more information. 

 

Help Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/#troubleshoot-grid-render-rows-without-data 

 

For your reference we have shared a sample with 3.0 framework of ASP .Net Core as given below. 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/152844/ze/RazorPages_3.0-1498978826.zip  

 

Please get back to us, if you need further assistance. 

 

Regards, 

Balaji Sekar