---
title: "How to use crud operation in mvc Using ExtJs"
description: "How to use crud operation in mvc Using ExtJs"
author: "Anonymous User"
published: 2016-06-15
updated: 2016-06-16
canonical: https://www.mindstick.com/forum/34139/how-to-use-crud-operation-in-mvc-using-extjs
category: "web development"
tags: ["jquery", "mvc", "sencha"]
reading_time: 4 minutes
---
# How to use crud operation in mvc Using ExtJs
we want to [add](https://www.mindstick.com/forum/12983/add-address-in-textbox-when-page-is-load-and-if-i-search-address-in-textbox-show-in-map-by-javascript), [update](https://www.mindstick.com/forum/156353/what-is-hummingbird-update), [delete data](https://www.mindstick.com/forum/34184/how-to-insert-update-delete-data-from-database-using-c-sharp) in [mvc](https://www.mindstick.com/forum/155803/define-cache-profile-in-mvc) using extjs. please help me how will do this.
## Replies
### Reply by Anonymous User
we are going to complete curd opration using extjs. follow step by step.
```
Users.js
```
```
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: ['UserId','UserName', 'UserEmail', 'PhoneNumber', 'Address', 'Password']
});
Ext.define('MyApp.store.Users', {
extend: 'Ext.data.Store',
model: 'MyApp.model.User',
proxy: {
type: 'ajax',
url: '/api/dashboard',
reader: {
type: 'json'
}
},
autoLoad: true
});
Ext.define('MyApp.controller.Users', {
extend: 'Ext.app.Controller',
refs: [
{
ref: 'UserGrid',
selector: 'UserGrid'
},
{
ref: 'DelUserBtn',
selector: 'UserGrid button[action=deleteUser]'
}
],
init: function () {
this.control({
'UserGrid': {
itemdblclick: this.onUserGridItemDblClick,
selectionchange: this.onUserGridSelectionChange
},
'UserGrid button[action=addUser]': {
click: this.onAddUserClick
},
'UserGrid button[action=deleteUser]': {
click: this.onDelUserClick
},
'UserForm button[action=saveUser]': {
click: this.onSaveUserClick
}
});
},
onDelUserClick: function (button) {
var grid = button.up('grid'),
selection = grid.getSelectionModel().getSelection();
Ext.Array.each(selection, function (model, index) {
Ext.Ajax.request({
url: '/api/dashboard/'+ model.data.UserId,
method: 'DELETE',
success: function () {
model.destroy();
},
failure: function () {
}
});
});
grid.store.load();
},
onUserGridSelectionChange: function (grid, selected) {
this.getDelUserBtn().setDisabled(selected.length === 0);
},
onUserGridItemDblClick: function (grid, record, item) {
this.showUserForm(record);
},
onAddUserClick: function () {
var newUser = Ext.create(MyApp.model.User);
this.showUserForm(newUser);
},
showUserForm: function (model) {
var userWin = Ext.create('MyApp.view.UserForm'),
form = userWin.down('form');
form.loadRecord(model);
userWin.show();
},
onSaveUserClick: function (button) {
var self = this;
var form = button.up('form'),
win = form.up('window'),
data = form.getValues(),
user = form.getRecord();
Ext.Ajax.request({
url: '/api/dashboard',
method: 'POST',
jsonData:form.getValues(),
success: function () {
self.getUserGrid().store.load();
},
failure: function() {
}
});
//user.set(data);
//user.save();
// this.getUserGrid().store.load();
win.destroy();
}
});
Ext.define('MyApp.view.UserForm', {
extend: 'Ext.window.Window',
xtype: 'UserForm',
modal: true,
layout: 'fit',
height: 300,
width: 400,
title: 'UserForm',
items: [
{
xtype: 'form',
bodyPadding: 5,
items: [
{
xtype: 'fieldset',
title: 'User Info',
defaults: {
xtype: 'textfield',
labelWidth: 100,
width: 300
},
items: [
{
name: 'UserId',
hidden: true
},
{
fieldLabel: 'Name',
name: 'UserName'
},
{
fieldLabel: 'Email',
name: 'UserEmail'
},
{
fieldLabel: 'Phone',
name: 'PhoneNumber'
},
{
fieldLabel: 'Address',
name: 'Address'
},
{
fieldLabel: 'Password',
name: 'Password'
}
]
}
],
buttons: [
{
text: 'Save',
action: 'saveUser'
}
]
}
]
});
Ext.define('MyApp.view.UserGrid', {
extend: 'Ext.grid.Panel',
xtype: 'UserGrid',
title: 'Users',
store: 'Users',
multiSelect: true,
columns: [
{ text: 'Name', dataIndex: 'UserName', flex: 1 },
{ text: 'Email', dataIndex: 'UserEmail', flex: 1 },
{ text: 'Phone', dataIndex: 'PhoneNumber', flex: 1 },
{ text: 'Address', dataIndex: 'Address', flex: 1 },
{ text: 'Password', dataIndex: 'Password', flex: 1 }
],
tbar: [
{
text: 'Add',
iconCls: 'add',
action: 'addUser'
},
{
text: 'Delete',
iconCls: 'delete',
action: 'deleteUser',
disabled: true
}
],
bbar: [{
xtype: 'pagingtoolbar',
store: 'Users',
displayInfo: true
}],
height:'auto',
width: 400,
renderTo: Ext.getBody()
});
Ext.onReady(function () {
Ext.get('UserProfile').on('click', function (e, t) {
if (MyApp.alreadyInitiated) {
return;
}
Ext.application({
name: 'MyApp',
height: 900,
width: '100%',
controllers: [
'Users'
],
stores: [
'Users'
],
launch: function () {
Ext.create('Ext.panel.Panel', {
layout: 'fit',
renderTo: 'container-1010-innerCt',
items: [
{
xtype: 'UserGrid'
}
]
});
}
});
});
});
```
```
dashboard.js
```
```
Ext.define('PagePanel', {
extend: 'Ext.panel.Panel',
height: '100%',
renderTo: Ext.getBody(),
title: 'Dashboard',
layout: {
type: 'table',
columns: 1,
tableAttrs: {
style: {
width: '100%', height: '100%'
}
},
tdAttrs: {
style: { border: '1px solid black' }
}
},
listeners : {
afterrender : function(panel) {
var header = panel.header;
header.setHeight(51);
}
},
initComponent: function () {
this.callParent(arguments);
this.add({
xtype: 'container',
style: { height: '100%' }
});
}
});
Ext.onReady(function () {
Ext.create('PagePanel');
});
```
```
dashboard.cshtml
```
```
@{
ViewBag.Title = "dashboard";
Layout = "~/Views/Shared/_Layout.cshtml";
}
```
```
Api
```
```
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
namespace SenchaApi.Controllers
{
public class DashboardController : ApiController
{
forumEntities db = new forumEntities();
// GET api/dashboard
public IEnumerable Get()
{
var result=db.UserLogin.ToList();
return result;
}
// GET api/dashboard/5
public string Get(int id)
{
return "value";
}
// POST api/dashboard
public void Post(UserLogin obj)
{
var original = db.UserLogin.Find(obj.UserId);
if (original != null)
{
original.UserName = obj.UserName;
original.UserEmail = obj.UserEmail;
original.PhoneNumber = obj.PhoneNumber;
original.Password = obj.Password;
original.Address = obj.Address;
}
else
{
db.UserLogin.Add(obj);
}
db.SaveChanges();
}
// PUT api/dashboard/5
public void Put(int id, [FromBody]string value)
{
}
// DELETE api/dashboard/5
public void Delete(int id)
{
var original = db.UserLogin.Find(id);
if (original != null)
{
db.UserLogin.Remove(original);
}
db.SaveChanges();
}
}
}
```
```
DataBase UserLogin Table
```
```
Create Table [UserLogin]
(
[UserId] int primary key identity(1,1),
[UserName] varchar(100),
[UserEmail] varchar(100),
[PhoneNumber] varchar(100),
[Address] varchar(100),
[Password] varchar(100)
)
```
```
OutPut
```
```
```
```
```
I hope it will helpful for you.
---
Original Source: https://www.mindstick.com/forum/34139/how-to-use-crud-operation-in-mvc-using-extjs
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.