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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ASP.Net Core MVC grid dialog edit save to database

Thread ID:

Created:

Updated:

Platform:

Replies:

143256 Mar 12,2019 01:48 AM UTC Mar 14,2019 03:48 AM UTC ASP.NET Core - EJ 2 6
loading
Tags: DataGrid
Derick Loo
Asked On March 12, 2019 02:08 AM UTC

Hi,
    I wish to edit my data using edit dialog and save it back to database.  I can click the edit icon and open up the dialog; when I click the save button in the dialog; it update the data in the grid but not update the database.  Any sample project can I refer how it can update database using the code behind?  I using view page and grid tag helper
                 



Madhu Sudhanan P [Syncfusion]
Replied On March 12, 2019 09:10 AM UTC

Hi Derick, 

Thanks for contacting Syncfusion support. 

From your query, we found that you want to perform the server side CURD actions in Grid Control. So we suggest EJ2DataManager to achieve this requirement. Please refer the following code snippet for further assistance, 

Grid: 
 
<ejs-grid id="Grid" allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })"> 
    <e-data-manager url="/Home/UrlDataSource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" , updateUrl="/Home/Update" removeUrl="/Home/Remove"></e-data-manager> 
 
             ... 
 
</ejs-grid> 
 
Controller:  

using System; 
using System.Collections.Generic; 
using System.Diagnostics; 
using System.Linq; 
using System.Threading.Tasks; 
using Microsoft.AspNetCore.Mvc; 
using EJ2Grid.Models; 
using Syncfusion.EJ2.Base; 
using System.Collections; 
 
namespace EJ2Grid.Controllers 
{ 
    public class HomeController : Controller 
    { 
        public static List<Orders> order = new List<Orders>(); 
        public IActionResult UrlDatasource([FromBody]DataManagerRequest dm) 
        { 
            IEnumerable DataSource = order; 
            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<Orders>().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 }) : Json(DataSource); 
        } 
        public IActionResult Insert([FromBody]CRUDModel<Orders> value) // Insert the new record 
        { 
            order.Insert(0, value.Value); 
            return Json(value.Value); 
        } 
        public IActionResult Update([FromBody]CRUDModel<Orders> value) // Update record 
        { 
            var data = order.Where(or => or.OrderID == value.Value.OrderID).FirstOrDefault(); 
            if(data != null) 
            { 
                data.OrderID = value.Value.OrderID; 
                data.CustomerID = value.Value.CustomerID; 
                data.EmployeeID = value.Value.EmployeeID; 
                data.OrderDate = value.Value.OrderDate; 
               data.ShipCity = value.Value.ShipCity; 
                data.Freight = value.Value.Freight; 
            } 
            return Json(value.Value); 
        } 
        public void Remove([FromBody]CRUDModel<Orders> Value) // Remove record 
        { 
           var data = order.Where(or => or.OrderID.Equals(Value.Key)).FirstOrDefault(); 
           order.Remove(data); 
        }  
    } 
} 

We suggest you to use our CRUDModel class to get the edited values in controller. You need to refer the Syncfusion.EJ2.Base to get this class in your controller. In this code we just used list to show how to perform the CRUD actions. So you need to change this code based on your requirement. Also, we have attached the prepared sample with this update for your reference and that can be download from the below link, 


Regards, 
Madhu Sudhanan P 


Derick Loo
Replied On March 12, 2019 09:27 AM UTC

May I know if I use the data manager, the datasource binding should in data manager instead of the grid itself?  Currently I bind the grid as below

    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" allowPaging="true" allowSorting="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })">


    Controller
     var model = await Service.GetList();
            ViewBag.DataSource = model;
            return View();

Thanks


Derick Loo
Replied On March 12, 2019 02:52 PM UTC

I follow the sample code provided, the grid show me two empty row, all columns not show. My database only got two records.

Madhu Sudhanan P [Syncfusion]
Replied On March 13, 2019 10:04 AM UTC

Hi Derick, 

Query: May I know if I use the data manager, the datasource binding should in data manager instead of the grid itself? 

From this code, we found that you have used local data to Grid and you want to perform the server side CRUD actions for this local data. You can achieve this requirement by using remoteSaveAdaptor of the DataManager. RemoteSaveAdaptor perform all Grid actions in client-side except the CRUD operations. Please refer the following code snippet, 

<ejs-grid id="Grid" allowPaging="true" toolbar="@(new List<string>() {"Add", "Edit", "Update", "Delete" })"> 
    <e-data-manager json="@ViewBag.data" adaptor="RemoteSaveAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Remove"></e-data-manager> 
 
               ... 
 
</ejs-grid> 
 
Controller:  
 
namespace EJ2Grid.Controllers 
{ 
    public class HomeController : Controller 
    { 
        public static List<Orders> order = new List<Orders>(); 
        public IActionResult Index() 
        { 
            if (order.Count == 0) 
                BindDataSource(); 
            ViewBag.data = order.ToArray(); 
            return View(); 
        } 
        public IActionResult Insert([FromBody]CRUDModel<Orders> value) 
        { 
            order.Insert(0, value.Value); 
            return Json(value.Value); 
        } 
        public IActionResult Update([FromBody]CRUDModel<Orders> value) 
        { 
            var data = order.Where(or => or.OrderID == value.Value.OrderID).FirstOrDefault(); 
            if(data != null) 
            { 
                data.OrderID = value.Value.OrderID; 
                data.CustomerID = value.Value.CustomerID; 
                data.EmployeeID = value.Value.EmployeeID; 
                data.OrderDate = value.Value.OrderDate; 
                data.ShipCity = value.Value.ShipCity; 
                data.Freight = value.Value.Freight; 
            } 
            return Json(value.Value); 
        } 
        public void Remove([FromBody]CRUDModel<Orders> Value) 
        { 
           var data = order.Where(or => or.OrderID.Equals(Value.Key)).FirstOrDefault(); 
           order.Remove(data); 
        } 
    } 
} 

Note: You must need to provide the array values to the json property while using the remoteSaveAdaptor.  

Refer the below link to know about remoteSaveAdaptor, 


We have prepared the sample with remoteSaveAdaptor for your reference and you can find that sample in the below link, 


Query: I follow the sample code provided, the grid show me two empty row, all columns not show. My database only got two records. 

We suspect that issue was occurred because of the camelCase problem(serialization problem) in core. Due to this problem, the field name casing changed to the lower case while using remote data. so there will be a mismatch in the column’s field and data source property names, so the Grid may appear blank. 

To overcome this serialization problem, we suggest you to add the JsonOutputFormatter options under the Startup.cs file. JsonOutputFormatter is a TextOutputFormatter for JSON content. We have added this in our sample also. Please refer the code example below, 

public void ConfigureServices(IServiceCollection services) 
        { 
            services.Configure<CookiePolicyOptions>(options => 
            { 
                // This lambda determines whether user consent for non-essential cookies is needed for a given request. 
               Options.CheckConsentNeeded = context => true; 
                options.MinimumSameSitePolicy = SameSiteMode.None; 
            }); 
 
            Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense(“TEST”); 
            services.AddMvc().AddJsonOptions(options => 
            { 
                options.SerializerSettings.ContractResolver 
                    = new Newtonsoft.Json.Serialization.DefaultContractResolver(); 
            }).SetCompatibilityVersion(CompatibilityVersion.Version_2_2); 
        } 

Regards, 
Madhu Sudhanan P 


Derick Loo
Replied On March 14, 2019 01:56 AM UTC

Hi Madhu Sudhanan P,
      Thanks for the help.  It's work now.  I didn't add the json output formatter in the startup.

Best regards,
Derick

Madhu Sudhanan P [Syncfusion]
Replied On March 14, 2019 03:48 AM UTC

Hi Derick, 
  
Thanks for the update. 
  
Regards, 
Madhu 


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

;