Inline Grid CRUD in ASP.NET MVC

Introduction

There are a lot of plugin based grid CRUDs available online. In my free time, I spent a little time in making of custom inline editing with the help of jQuery and Ajax for CRUDs.

This short article of CRUDs with the help of inline actions will help you have your own.

I wouldn't mind if you contribute a little in improving it ;)

Using the Code

First of all, let me start the structure that is for now "Necessary".

<form id="form">
    <table class="table">
        <tr>
            <th>S.NO.
            </th>
            <th>header1
            </th>
            <th>header2
            </th>
            <th>Actions</th>
        </tr>
        <tbody>
                <tr>
                    <td>column1</td>
                    <td data-target="samename1">
                        <label for="samename1">some html</label>
                    </td>
                    <td data-target="samename2">
                        <label for="samename2">some html</label>
                    </td>
                    <td>
                        <a href="javacript:;" 
                        onclick="Edit(this,'idofthisrow')">
                        Edit</a>
                        <a href="javacript:;"  
                        style="display:none" 
                        onclick="Cancel(this,'idofthisrow')">
                       Cancel</a>
                        <a href="javacript:;"  
                        style="display:none" 
                        onclick="Update(this,'idofthisrow')">
                        Update</a>
                        <a href="javacript:;"  
                        onclick="Delete(this,'idofthisrow')">
                        Delete</a>
                    </td>
                </tr>
        </tbody>
    </table>
</form>

If you note, here the data-target of column is the same name as of label under it.

 <td data-target="samename1">
   <label for="samename1">some html</label>
 </td>

Now it comes to Action buttons:

1. Edit
2. Update
3. Cancel
4. Delete

On every button element, I have passed this element and id of current row:

  <a href="javacript:;" onclick="Edit
(this,'idofthisrow')">
<i class="fa fa-pencil"></i></a>

Page Specific Scripts

<script type="text/javascript">
    function siblingsEditor(ele) {
        $(ele).parent().parent('tr').siblings().children('td').not
        (':first-child').not(':last-child').each(function () {
            var values;
            if ($(this).children().is('input[type="text"]')) {
                values = $(this).children('input').val();
            }
            else {
                values = $(this).children('label').text();
            }
            var nameofthiselement = $(this).attr('data-target');
            $(this).html('<label for="' + 
            nameofthiselement + '">' + values + '</label>');
        });
    }

    function Edit(element, id) {
        siblingsEditor(element);
        $(element).hide();
        $(element).next().show();
        $(element).next().next().show();
        $(element).parent().parent('tr').children('td').not
        (':first-child').not(':last-child').each(function () {
            var nameofthiselement = $(this).children().attr('for');
            $(this).html('<input type="text" 
            class="form-control" name="' + nameofthiselement + 
            '" value="' + $(this).children('label').html() + '"></input>');
        });
    }
    function Cancel(element, id) {
        $(element).hide();
        $(element).prev().show();
        $(element).next().hide();
        $(element).prev().prev().show();
        $(element).parent().parent('tr').children('td').not
        (':first-child').not(':last-child').each(function () {
            var values;
            if ($(this).children().is('input[type="text"]')) {
                values = $(this).children('input').val();
            }
            else {
                values = $(this).children('label').text();
            }
            var nameofthiselement = $(this).attr('data-target');
            $(this).html('<label for="' + 
            nameofthiselement + '">' + values + '</label>');
        });
    }
    function Update(element, id) {
        $.ajax({
            url: '/Controller/Action?ID=' + id,
            type: 'POST',
            data: $('#form').serialize(),
            success: function (data) {
                $(element).hide();
                $(element).prev().hide();
                $(element).prev().prev().show();
                $(element).parent().parent('tr').children('td').not
                (':first-child').not(':last-child').each(function () {
                    var values;
                    if ($(this).children().is('input[type="text"]')) {
                        values = $(this).children('input').val();
                    }
                    else {
                        values = $(this).children('label').text();
                    }
                    var nameofthiselement = $(this).attr('data-target');
                    $(this).html('<label for="' + 
                    nameofthiselement + '">' + values + '</label>');
                });
            }
        });
    }
    function Delete(element, id) {
        $.post({'/controller/Actiion?ID=' + id,function (data) {
            $(element).parent().parent().fadeOut();
        }
        });
    }
</script>

Additionally

If you don't want some columns to be editable, you can define them in jQuery .not.

Just plug it on your page to see results.