SAMPLE CRUD WITH DATABASE

Hi,

I was searching for a sample with CRUD & DataBase but I didnt find any who was completed or working.

Here's what i have in mind : 
<ej-grid id="FlatGrid" allow-paging="true" >
    <e-datamanager json="(IEnumerable<object>)ViewBag.datasource" insert-url="/Home/NormalInsert" adaptor="remoteSaveAdaptor" ..../>


Regards,
Kalai Sirajeddine.

3 Replies

VA Venkatesh Ayothi Raman Syncfusion Team January 3, 2018 07:06 AM UTC

Hi Kalai, 

Thanks for using Syncfusion products. 

We have prepared a sample based on your requirement which can be download from following link, 

In this sample, we have rendered the Grid data from Database context. We have created a Database using Package manager console. Please refer to the following online forum to step by step procedure for create a database in ASP.NET core application, 
We have also performed the CRUD operation in that sample as per your requirement. Please refer to the following code example, 
[Grid] 
 
ej-grid id="FlatGrid"  allow-paging="true"> 
      
    <e-datamanager json="(IEnumerable<object>)ViewBag.data" insert-url="/Home/Insert" update-url="/Home/Update" remove-url="/Home/Delete" adaptor="remoteSaveAdaptor" /> 
. .  . 
    
    <e-columns> 
        <e-column field="OrderId" header-text="Order ID"  is-primary-key="true" text-align="Right" width="75"></e-column> 
        . .  . 
        
    </e-columns> 
</ej-grid> 
[Controller] 
//update the record 
        public ActionResult Update([FromBody]CRUDModel<Order> value) 
        { 
 
             
            var ord = value.Value; 
            Order val = _dataContext.Order.Single(A => A.OrderId == ord.OrderId); 
            . .  . 
            _dataContext.SaveChanges(); 
            return Json(value.Value); 
        } 
        //insert the record 
        public ActionResult Insert([FromBody]CRUDModel<Order> value) 
        { 
 
            _dataContext.Order.Add(value.Value); 
 
            _dataContext.SaveChanges(); 
            return Json(value); 
        } 
        //Delete the record 
        public ActionResult Delete([FromBody]CRUDModel<Order> value) 
 
        { 
            Order app = _dataContext.Order.Where(c => c.OrderId == Convert.ToInt32(value.Key)).FirstOrDefault(); 
            _dataContext.Order.Remove(app); 
            _dataContext.SaveChanges(); 
            return Json(value); 
        } 

Help Documentation

Regards, 
Venkatesh Ayothiraman. 



KS Kalai Sirajeddine January 3, 2018 11:20 AM UTC

Hi Venkatech,

Thanks for the sample, there's some part of the project that I didn't understand:

- Didn' get what function contextClick() do in Index and there is no about() in home controller.

- Since we have the ViewBag.data are the functions Data and Datasource necessary? Same for class orders and function BindDataSource().

- Didn' get why using OrdersController.

-What is and Why there's no NORTHWND_log in the project?

Regards,
Kalai Sirajeddine.


VA Venkatesh Ayothi Raman Syncfusion Team January 4, 2018 12:12 PM UTC

Hi Kalai, 

Sorry for the Inconvenience caused. 

OrdersController can be removed, because we didn’t perform any action from that controller. And we have defined the contextclick function code in client side as well as BindDataSource function in controller side mistakenly. It also can be removed. 
Please refer to the following Sample which is removed the all irrelevant codes and controller, 

We have used the MSSQL server database for bound the Grid data source and perform the CRUD operation. So, only NORTHWND_log files not included in the project. Please refer to the following online forum for more about MS-SQL server database creation, 
 
Please refer to the following code example, 
[Grid] 
 
<ej-grid id="FlatGrid"  allow-paging="true" > 
      
    <e-datamanager json="(IEnumerable<object>)ViewBag.data" insert-url="/Home/Insert" update-url="/Home/Update" remove-url="/Home/Delete" adaptor="remoteSaveAdaptor" /> 
    <e-edit-settings allow-editing="true" allow-deleting="true" allow-adding="true" ></e-edit-settings> 
    <e-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() {"add","edit","delete","update","cancel" })"></e-toolbar-settings> 
    
    <e-columns> 
        . . . 
    </e-columns> 
</ej-grid> 
 
 
[Home controller] 
public class HomeController : Controller 
    { 
 
         
       public  EmployeeContext _dataContext = new EmployeeContext(); 
        
        public IActionResult Index() 
        {             
            
            ViewBag.data = new EmployeeContext().Order.Take(10).ToList(); 
            return View(); 
        } 
 
        
 
       
        //update the record 
        public ActionResult Update([FromBody]CRUDModel<Order> value) 
        { 
 
             
            var ord = value.Value; 
            Order val = _dataContext.Order.Single(A => A.OrderId == ord.OrderId); 
. .  . 
            _dataContext.SaveChanges(); 
            return Json(value.Value); 
        } 
        //insert the record 
        public ActionResult Insert([FromBody]CRUDModel<Order> value) 
        { 
            _dataContext.Order.Add(value.Value); 
            _dataContext.SaveChanges(); 
            return Json(value); 
        } 
        //Delete the record 
        public ActionResult Delete([FromBody]CRUDModel<Order> value) 
 
        { 
            Order app = _dataContext.Order.Where(c => c.OrderId == Convert.ToInt32(value.Key)).FirstOrDefault(); 
            _dataContext.Order.Remove(app); 
            _dataContext.SaveChanges(); 
            return Json(value); 
        } 
         
    } 
} 

Note: There is not Data or DataSource functions for ViewBag.Data. There are irrelevant codes. It is also excluded the attached sample. 

Regards, 
Venkatesh Ayothiraman. 


Loader.
Up arrow icon