This short tutorial will walk though the implementation of DataGrid using ExtJS 3.3.1 and ASP.NET MVC 3. In this tutorial I focus more on the integration of the front-end, so you will not find any database code. Whenever we deal with data we usually create, read/retrieve, update or delete them. ExtJS provides a great data grid component and the ability to perform CRUD operation with very little coding. I used JSON as data format in the example below.



Let’s start with the server-side by developing the data model and controller.

Controller:

public class ContactController : Controller 
{ 
    // 
    // GET: /Contact/ 
    public ActionResult Index() 
    { 
        return View(); 
    } 
    public JsonResult Load() 
    { 
        var contact = new List<Contact> { 
            new Contact("Smith","95746325","[email protected]"), 
            new Contact("Adam","87291034","[email protected]"), 
            new Contact("Eve","98271345","[email protected]"), 
            new Contact("Chun Li","81728312","[email protected]") 
        }; 
        return Json(new
        { 
            total = contact.Count, 
            data = contact, 
        }, JsonRequestBehavior.AllowGet); 
    } 
    [HttpPost] 
    public JsonResult Create(List<Contact> data) 
    { 
        //insert Create code 
        return Json(new
        { 
            data = new Contact(data[0].Name, data[0].Phone, data[0].Email), 
            success = true, 
            message = "Create method called successfully"
        }); 
    } 
    [HttpPost] 
    public JsonResult Update(List<Contact> data) 
    { 
        //insert Update code 
        return Json(new
        { 
            success = true, 
            message = "Update method called successfully"
        }); 
    } 
    [HttpPost] 
    public JsonResult Delete(List<string> data) 
    { 
        //insert Delete code 
        return Json(new
        { 
            success = true, 
            message = "Delete method called successfully"
        }); 
    } 
}

Data Model:

public class Contact 
{ 
    public string Id { get; set; } 
    public string Name { get; set; } 
    public string Phone { get; set; } 
    public string Email { get; set; } 
    public Contact(string pName, string pPhone, string pEmail) 
    { 
        this.Id = System.Guid.NewGuid().ToString(); 
        this.Name = pName; 
        this.Phone = pPhone; 
        this.Email = pEmail; 
    } 
    public Contact() { } 
}

ExtJS:

Now, you move on to the view and work on the ExtJS. First, you define the record type which matches the server-side object.

var Contact = Ext.data.Record.create([ 
    { 
        name: 'Id', 
        type: 'string'
    }, { 
        name: 'Name', 
        type: 'string'
    }, { 
        name: 'Phone', 
        type: 'string'
    }, { 
        name: 'Email', 
        type: 'string'
    } 
]);

Now you need to setup the Writer and Reader

var writer = new Ext.data.JsonWriter({ 
    encode: false, 
    listful: true, 
    writeAllFields: true
}); 
var reader = new Ext.data.JsonReader({ 
    totalProperty: 'total',
    successProperty: 'success', 
    idProperty: 'Id', 
    root: 'data', 
    messageProperty: 'message'  // <-- New "messageProperty" meta-data 
}, Contact);

Then, setup a proxy to define the connection to the controller.

var proxy = new Ext.data.HttpProxy({ 
   api: { 
       read: '/Contact/Load', 
       create: '/Contact/Create', 
       update: '/Contact/Update', 
       destroy: '/Contact/Delete'
   }, 
   headers: { 'Content-Type': 'application/json; charset=UTF-8' } 
});

Hooks the above components (reader, writer, proxy) to the store.

var store = new Ext.data.Store({ 
   id: 'user', 
   proxy: proxy, 
   reader: reader, 
   writer: writer, 
   autoSave: false
});

Add the data grid declaration

var grid = new Ext.grid.GridPanel({ 
    store: store, 
    columns: [ 
        { header: "Name", 
            width: 170, 
            sortable: true, 
            dataIndex: 'Name', 
            editor: { 
                xtype: 'textfield', 
                allowBlank: false
            } 
        }, 
        { header: "Phone No.", 
            width: 160, 
            sortable: true, 
            dataIndex: 'Phone', 
            editor: { 
                xtype: 'textfield', 
                allowBlank: false
            } 
        }, 
        { header: "EMail", 
            width: 170, 
            sortable: true, 
            dataIndex: 'Email', 
            editor: { 
                xtype: 'textfield', 
                allowBlank: false
            } 
        } 
    ], 
    plugins: [editor], 
    title: 'Contacts DataGrid', 
    height: 300, 
    width: 510, 
    tbar: [{ 
        iconCls: 'icon-user-add', 
        text: 'Add Contact', 
        handler: function () { 
            var e = new Contact({ 
                Name: 'New Friend', 
                Phone: '(65) 89182736', 
                Email: '[email protected]'
            }); 
            editor.stopEditing(); 
            store.insert(0, e); 
            grid.getView().refresh(); 
            grid.getSelectionModel().selectRow(0); 
            editor.startEditing(0); 
        } 
    }, { 
        ref: '../removeBtn', 
        iconCls: 'icon-user-delete', 
        text: 'Remove Contact', 
        handler: function () { 
            editor.stopEditing(); 
            var s = grid.getSelectionModel().getSelections(); 
            for (var i = 0, r; r = s[i]; i++) { 
                store.remove(r); 
            } 
        } 
    }, { 
        iconCls: 'icon-user-save', 
        text: 'Save All Modifications', 
        handler: function () { 
            store.save(); 
        } 
    }]
});

Some observations:

- When submitting data as JSON, set the headers “Content-Type” to “application/json” in the proxy object and set the encoding to false in the JsonWriter. If not, it will be treated as form submission.

- Since I set the auto save to false. DataGrid will submit list of contact when there are 2 or more changes, however it will send a single object when there is 1 change. In order to make it consistent to send as list, set list full to true in the JsonWriter.

- ASP.NET MVC 3 able to recognize the JSON without additional coding.