Display data with CRUD with SQL Database

[Yann Jobin]

Hello,

You have some complex samples with mock database use, that's cool for view the potential for you components.

But, it's very harder to adapt you samples for really use, with a SQL Database.

That's my situation:

• I have a project with ASP.NET Core MVC (Create new project, select Webapp .NET Core, then select MVC based on .NET Core)
• I use Entity Framework Core for the code generation of controllers based on my models, and for manage migrations on my database
• And i want implement the Grid for displaying a Model with CRUD operations

My model is a simple model with an Id and a Name.

Why implement you Grid component with CRUD operations?

Thank you for you help.

Best regards,

[Pavithra Subramaniyam]

Hi Yann, 

 

Greetings from Syncfusion. 

 

You can perform the Grid Actions such as paging, filtering , CRUD etc. with SQL database by using the “UrlAdaptor”. We have prepared a simple sample based on your requirement. Please refer to the below code example, documentation link and sample link for more information. 

 

[index.cshtml] 

@(Html.EJS().Grid<mvc_ej2.Models.Order>("Grid").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor").InsertUrl("Home/Insert").UpdateUrl("/Home/Update").RemoveUrl("Home/Remove"); }).Width("auto").Columns(col => 

{  

col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    .  .  . 

 

}).AllowPaging().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()) 

 

[Controller.cs] 

public class HomeController : Controller 

    {        

 

        public NORTHWNDEntities1 db = new NORTHWNDEntities1(); 

        .  .  . 

        public ActionResult UrlDatasource(DataManagerRequest dm) 

        { 

 

            IEnumerable DataSource = OrderRepository.GetAllRecords(); 

            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<Order>().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 ? Json(new { result = DataSource, count = count }, JsonRequestBehavior.AllowGet) : Json(DataSource); 

 

        } 

        public ActionResult Insert(Order value) 

        { 

            // here you can do your Insert Action 

            OrderRepository.Add(value);             

            return Json(value); 

        } 

        public ActionResult Remove(int key) 

        { 

            // here you can do your Delete Action 

            OrderRepository.Delete(key);             

            var data = OrderRepository.GetAllRecords(); 

            var count = data.Cast<Order>().Count(); 

            return Json(new { result = data, count = count }); 

        } 

 

        public ActionResult Update(Order value) 

        { 

            var ord = value; 

            // here you can do your Update Action 

            Order val = OrderRepository.GetAllRecords().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; 

            return Json(value); 

        } 

    } 

 

 

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/data-binding/#handling-on-demand-grid-actions 

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

 

Sample               : https://www.syncfusion.com/downloads/support/directtrac/general/ze/db_Crud-975840424  

 

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

 

Regards, 

Pavithra S. 

[Yann Jobin]

That's work yet, but with the ASP.NET Core UI control, my project is a Web app based on ASP.NET Core Framework, but with MVC design pattern.

Thank you for your sample!

Best regards

[Pavithra Subramaniyam]

Hi Yann, 

 

Thanks for your update. 

 

For Essential JavaScript 2 ASP.NET CORE Grid UI, please refer to the below documentation and online demo links. 

 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/#handling-on-demand-grid-actions 

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

 

Sample               : https://ej2.syncfusion.com/aspnetcore/Grid/UrlAdaptor#/material 

 

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

 

Regards. 

Pavithra S.