Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Inline Grid CRUD in ASP.NET MVC

0.00/5 (No votes)
20 Dec 2014 1  
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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here