ASP.NET MVC 4.0 Hosting :: Inline Editing With the WebGrid in ASP.NET MVC 4

This article will demonstrate to you best practices to make editable webgrid which will give you a facility of inline editing utilizing jquery in ASP.NET MVC 4.0.

Methodology: Create an editable grid for client table.

The way to this methodology is to populate the grid with both read-only and editable versions of the information, then to utilize the jquery

switch to swap between the two presentations on a line-by-line basis.

Get the userdata and pass into webgrid. Here is the code for the grid:

Inline Editing With the WebGrid in ASP.NET MVC 4

The principle thing to observe is that there are two things in each of the cells, one is to display mode and one is for edit mode.

All things designed for showcase are given the CSS class “display-mode”. The structure fields have the CSS class of “edit-mode” applied to them.

The following part is the jquery code that oversees exchanging between the two modes:

The primary thing is hide all editable things, onclick of edit button flip the edit mode and display mode class. An occasion handler

is snared to the click occasion of the Edit button which will deal with passing the record to controller and upgrade same in

webgrid display mode. Additionally it will give back where its due message once record is updated in DB.

You need to work on style according to your prerequisite.

Here is style.

 Finish,, easy right?

Leave a Reply

Your email address will not be published.