1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. There is some example of the grid with Net core 2 Razor Pages, not with MVC View

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

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

16 Replies
DR Dhivya Rajendran Syncfusion Team June 27, 2018 01:21 PM UTC

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> 
} 

 

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 :  



Please get back to us if you need further assistance. 

Regards,
R.Dhivya 


PV Patricio Venegas B June 28, 2018 04:57 AM UTC

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.




DR Dhivya Rajendran Syncfusion Team June 28, 2018 12:32 PM UTC

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.
 
 
Regards,
R.Dhivya


PV Patricio Venegas B June 28, 2018 12:58 PM UTC

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

DR Dhivya Rajendran Syncfusion Team June 29, 2018 12:45 PM UTC

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

 

Regards, 
R.Dhivya  


PV Patricio Venegas B June 29, 2018 07:03 PM UTC

Thank you very much now if it worked for me

DR Dhivya Rajendran Syncfusion Team July 2, 2018 12:03 PM UTC

Hi Patricio,
Thanks for you update.
We are happy to hear that the provided solution was helpful to achieve your requirement.
Regards,
R.Dhivya


CO Costa July 8, 2018 02:59 PM UTC

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

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team July 9, 2018 04:09 PM UTC

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:- 
 
Please get back to us if you need any further assistance. 

Regards, 
Farveen sulthana T 


CO Costa July 12, 2018 12:01 PM UTC

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.

CO Costa July 13, 2018 12:26 AM UTC

Ok, this code: 


@page "{handler?}"

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

is worked

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team July 13, 2018 09:40 AM UTC

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 


RV Rubén Valentín replied to Dhivya Rajendran March 27, 2020 11:56 AM UTC

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

 

Regards, 
R.Dhivya  


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

BS Balaji Sekar Syncfusion Team March 30, 2020 06:47 AM UTC

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. 
 
 
Regards, 
Balaji Sekar. 


PP Paulo P February 21, 2021 10:28 PM UTC

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.

BS Balaji Sekar Syncfusion Team February 22, 2021 12:33 PM UTC

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. 
 
 
For your reference we have shared a sample with 3.0 framework of ASP .Net Core as given below. 
 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Balaji Sekar 


Loader.
Up arrow icon