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. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. ASP.Net Core MVC grid dialog edit save to database

ASP.Net Core MVC grid dialog edit save to database

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
                 



6 Replies
MS Madhu Sudhanan P Syncfusion Team 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 


DL Derick Loo 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


DL Derick Loo 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.

MS Madhu Sudhanan P Syncfusion Team 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 


DL Derick Loo 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

MS Madhu Sudhanan P Syncfusion Team March 14, 2019 03:48 AM UTC

Hi Derick, 
  
Thanks for the update. 
  
Regards, 
Madhu 


Loader.
Up arrow icon