EditableMvc

The package provides persistent inline page editing using CKEditor.

For a quick overview of the library installation and use check the youtube video.

###How it works: The EditableMvc helper will render the specified selected html element and enable the inline editing functionality of CKEditor. Once edited, the content is posted via ajax to a controller action and the data get saved through a repository layer, which can be easily swapped (default storage is xml serialization on filesystem).

###Setup: Firstly download the package using NuGet

PM> Install-Package EditableMvc

The default configuration deployed with the package enable the edit functionality when editablemvc=true is present in the querystring and setup the repository to use files.

public static class EditableMvcBootstrap
{
    public static void Start()
    {
        //Register a custom repository by implementing IEditableRepository 
        EditableMvcConfig.RegisterRepository = () => new SimpleFileRepository("~/App_Data");

        //Register the authorization method used to enable/disable editing on the html element
        EditableMvcConfig.RegisterAuthorization = () =>
        {
            var editable = !string.IsNullOrEmpty(HttpContext.Current.Request.QueryString["editablemvc"]);
            if (editable)
            {
                return Convert.ToBoolean(HttpContext.Current.Request.QueryString["editablemvc"]);
            }
            return false;
        };
    }
    
    //After App_Start is executed register the bundles
    public static void PostStart()
    {
        BundleTable.Bundles.Add(new ScriptBundle("~/bundles/editableMvc").Include(
        "~/Scripts/jquery-ui-{version}.js",
        "~/Scripts/ckeditor/ckeditor.js",
        "~/Scripts/ckeditor/plugins/editablemvcsave/editablemvcsave.js",
        "~/Scripts/editablemvc.js"));
    }
}

###Use it: Ensure all the required js (and optional style) are registered

@Scripts.Render("~/bundles/editablemvc")
@Styles.Render("~/Content/editablemvcstyle.css")

Now that everything is in place, let's try the helper and generate an editable paragraph with some default text

<div id="content">
    @Html.EditableMvc("p", "idParagraph", new {@class = "mycssclass", "<strong>Lorem ipsum...</strong>")
</div>