We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Display data with CRUD with SQL Database

Thread ID:

Created:

Updated:

Platform:

Replies:

146944 Aug 26,2019 02:31 PM UTC Aug 29,2019 12:08 PM UTC ASP.NET Core - EJ 2 3
loading
Tags: DataGrid
Yann Jobin
Asked On August 26, 2019 02:31 PM UTC

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 [Syncfusion]
Replied On August 27, 2019 06:07 AM UTC

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); 
        } 
    } 
 
 
                              https://ej2.syncfusion.com/aspnetmvc/documentation/grid/edit/#persisting-data-in-server 
 
 
Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


Yann Jobin
Replied On August 28, 2019 12:31 PM UTC

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 [Syncfusion]
Replied On August 29, 2019 12:08 PM UTC

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. 
 
                              https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#persisting-data-in-server 
 
 
Please get back to  us if you need any further assistance on this. 
 
Regards. 
Pavithra S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon