Using JEditable Plugin as ASP.NET MVC3 jQuery Inline Editor

Jovan Popovic(MSFT)

Rate me:

4.86/5 (48 votes)

24 Jun 2012CPOL17 min read

162K

3.5K

132

This article describes how you can implement inline editing in an ASP.NET MVC application using the jQuery Jeditable plug-in.

In this article, I will show you a jQuery alternative for content editable - the Jeditable plug-in. I will also explain how you can implement inline editing functionality in an ASP.NET MVC3 application using jQuery.

JQueryEditableMVC.zip
- JQueryEditableMVC
  - bin
    - JQueryEditableMVC.dll
  - Content
    - 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
  - Controllers
    - CompanyController.cs
  - Global.asax
  - Global.asax.cs
  - JQueryEditableMVC.csproj
  - JQueryEditableMVC.csproj.user
  - Models
    - Company.cs
  - obj
    - Debug
      - TempPE
  - Properties
    - AssemblyInfo.cs
  - Scripts
  - Views
    - _ViewStart.cshtml
    - Company
      - Details.cshtml
    - Shared
      - _Layout.cshtml
      - Error.cshtml
    - Web.config
  - Web.config
  - Web.Debug.config
  - Web.Release.config

@model JQueryEditableMVC.Models.Company
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <title>Details</title>
    <script src="/Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.jeditable.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $(".display-label").editable("/Company/UpdateLabel");

            $(".text").editable("/Company/UpdateField",
                        {
                            submitdata: {
                                CompanyId: function () {
                                    return $("#CompanyId").val();
                                },
                                RecordType: "COMPANY"
                            }
                        });

            $(".textarea").editable("/Company/UpdateField",
                                    {
                                        type: 'textarea',
                                        rows: 4,
                                        columns: 10,
                                        cancel: 'Cancel',
                                        submit: 'OK',
                                        submitdata: {
                                            CompanyId: function () {
                                                return $("#CompanyId").val();
                                            },
                                            RecordType: "COMPANY"
                                        }
                                    });

            $(".select").editable("/Company/UpdateField",
                                    {
                                        type: 'select',
                                        data: "{ 'Belgrade': 'Belgrade', 'Paris': 'Paris', 'London': 'London', 'Madrid': 'Madrid' }",
                                        submit : 'OK',
                                        submitdata: {
                                            CompanyId: function () {
                                                return $("#CompanyId").val();
                                            },
                                            RecordType: "COMPANY"
                                        }
                                    });
        });
    </script>
</head>
<body>
    <div>
        <h2>Details</h2>
        <fieldset>
            <legend>Company</legend>
            <input type="hidden" id="CompanyId" value="@Model.ID" />
            <div class="field">
                <div class="display-label" id="lblName">Name</div>
                <div class="display-field text" id="Name">@Model.Name</div>
            </div>

            <div class="field">
                <div class="display-label" id="lblAddress">Address</div>
                <div class="display-field textarea" id="Address">@Model.Address</div>
            </div>
            <div class="field">
                <div class="display-label" id="lblTown">Town</div>
                <div class="display-field select" id="Country">@Model.Town</div>
            </div>
        </fieldset>
    </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.

Using JEditable Plugin as ASP.NET MVC3 jQuery Inline Editor

License

Comments and Discussions