ASP.NET MVC Editable Table (jQuery DataTables and ASP.NET MVC integration - Part II)

Jovan Popovic(MSFT)

Rate me:

4.90/5 (70 votes)

6 Nov 2011CPOL26 min read

734.9K

26.7K

214

Create datatable with standard CRUD functionalites in ASP.NET MVC using the jQuery DataTables Editable plug-in

This article shows how a datatable with standard CRUD functionalites (select/delete data, update single cell, and add new record) can be created in ASP.NET MVC using the jQuery DataTables Editable plug-in.

DataTableEditableProject.zip
- DataTableEditable
  - bin
  - Content
    - dataTables
    - images
      - back_disabled.jpg
      - back_enabled.jpg
      - favicon.ico
      - forward_disabled.jpg
      - forward_enabled.jpg
      - sort_asc.png
      - sort_asc_disabled.png
      - sort_both.png
      - sort_desc.png
      - sort_desc_disabled.png
      - Sorting icons.psd
    - jAlert
      - jquery.alerts.css
      - jquery.alerts.js
    - Site.css
    - themes
      - base
        
        images
        
        ui-bg_flat_0_aaaaaa_40x100.png
        
        ui-bg_flat_75_ffffff_40x100.png
        
        ui-bg_glass_55_fbf9ee_1x400.png
        
        ui-bg_glass_65_ffffff_1x400.png
        
        ui-bg_glass_75_dadada_1x400.png
        
        ui-bg_glass_75_e6e6e6_1x400.png
        
        ui-bg_glass_95_fef1ec_1x400.png
        
        ui-bg_highlight-soft_75_cccccc_1x100.png
        
        ui-icons_222222_256x240.png
        
        ui-icons_2e83ff_256x240.png
        
        ui-icons_454545_256x240.png
        
        ui-icons_888888_256x240.png
        
        ui-icons_cd0a0a_256x240.png
        
        jquery-ui.css
      - smoothness
        
        images
        
        ui-bg_flat_0_aaaaaa_40x100.png
        
        ui-bg_flat_75_ffffff_40x100.png
        
        ui-bg_glass_55_fbf9ee_1x400.png
        
        ui-bg_glass_65_ffffff_1x400.png
        
        ui-bg_glass_75_dadada_1x400.png
        
        ui-bg_glass_75_e6e6e6_1x400.png
        
        ui-bg_glass_95_fef1ec_1x400.png
        
        ui-bg_highlight-soft_75_cccccc_1x100.png
        
        ui-icons_222222_256x240.png
        
        ui-icons_2e83ff_256x240.png
        
        ui-icons_454545_256x240.png
        
        ui-icons_888888_256x240.png
        
        ui-icons_cd0a0a_256x240.png
        
        jquery-ui-1.7.2.custom.css
  - Controllers
    - CompanyController.cs
  - DataTableEditable.csproj
  - DataTableEditable.csproj.user
  - Global.asax
  - Global.asax.cs
  - Models
    - Company.cs
    - DataRepository.cs
  - obj
    - Debug
      - DataTableEditable.dll
      - TempPE
  - Properties
    - AssemblyInfo.cs
  - Scripts
  - Views
    - _ViewStart.cshtml
    - Company
    - Shared
    - Web.config
  - Web.config
  - Web.Debug.config
  - Web.Release.config

<!DOCTYPE html>
<html>
    <head>
        <title>Customization of ASP.NET MVC DataTable using DataTable Editable plugin</title>
        <link href="@Url.Content("~/Content/dataTables/demo_table.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/dataTables/demo_table_jui.css")" rel="stylesheet" type="text/css" />
        <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" media="all" />
        <link href="@Url.Content("~/Content/themes/smoothness/jquery-ui-1.7.2.custom.css")"rel="stylesheet" type="text/css" media="all" />
        <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.dataTables.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.jeditable.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery.dataTables.editable.js")" type="text/javascript"></script>
        @RenderSection("head", required: false)
    </head>
    <body>
        <div id="container">
            <a href="/Company/Index">Basic Example</a>
            <a href="/Company/Ajax">Getting data with Ajax</a>
            <a href="/Company/Customization">Customization</a>
            <a href="/Company/IndividualColumnEditing">Individual Column Editing</a>
            @RenderBody()
        </div>
    </body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Jovan Popovic(MSFT)

Program Manager Microsoft

Serbia

Graduated from Faculty of Electrical Engineering, Department of Computer Techniques and Informatics, University of Belgrade, Serbia.
Currently working in Microsoft as Program Manager on SQL Server product.
Member of JQuery community - created few popular plugins (four popular JQuery DataTables add-ins and loadJSON template engine).
Interests: Web and databases, Software engineering process(estimation and standardization), mobile and business intelligence platforms.

ASP.NET MVC Editable Table (jQuery DataTables and ASP.NET MVC integration - Part II)

License

Comments and Discussions