Table Row Drag and Drop in ASP.NET MVC (jQuery DataTables and ASP.NET MVC Integration - Part VI)

Jovan Popovic(MSFT)

Rate me:

5.00/5 (25 votes)

23 Apr 2012CPOL6 min read

189K

6.4K

Reordering table rows using drag and drop functionality with jQuery DataTables plug-in in ASP.NET MVC applications

In this article, you will learn how to implement reordering of rows in a table. The plug-in will handle everything for you on the client side and all you need to do is to create a controller action method that will handle AJAX calls sent by the plug-in and update the order on the server side too.

JQueryDataTablesRowReordering.zip
- JQueryDataTablesRowReordering
  - bin
    - JQueryDataTablesRowReordering.dll
  - 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
    - 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.accordion.css
        
        jquery.ui.all.css
        
        jquery.ui.autocomplete.css
        
        jquery.ui.base.css
        
        jquery.ui.button.css
        
        jquery.ui.core.css
        
        jquery.ui.datepicker.css
        
        jquery.ui.dialog.css
        
        jquery.ui.progressbar.css
        
        jquery.ui.resizable.css
        
        jquery.ui.selectable.css
        
        jquery.ui.slider.css
        
        jquery.ui.tabs.css
        
        jquery.ui.theme.css
  - Controllers
    - CompanyController.cs
  - Global.asax
  - Global.asax.cs
  - JQueryDataTablesRowReordering.csproj
  - JQueryDataTablesRowReordering.csproj.user
  - Models
    - Company.cs
    - Repository
      - DataRepository.cs
  - obj
    - Debug
      - TempPE
  - packages.config
  - Properties
    - AssemblyInfo.cs
  - Scripts
  - Views
    - _ViewStart.cshtml
    - Company
      - Index.cshtml
    - Shared
      - _Layout.cshtml
      - Error.cshtml
    - Web.config
  - Web.config
  - Web.Debug.config
  - Web.Release.config

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.

Table Row Drag and Drop in ASP.NET MVC (jQuery DataTables and ASP.NET MVC Integration - Part VI)

License

Comments and Discussions