Using jQuery, CKEditor, AJAX in ASP.NET MVC 2

Posted by Ray Linder on Geeks with Blogs See other posts from Geeks with Blogs or by Ray Linder
Published on Fri, 19 Mar 2010 01:54:00 GMT Indexed on 2010/03/19 10:11 UTC
Read the original article Hit count: 1118

Filed under:

After banging my head for days on a “A potentially dangerous Request.Form value was detected" issue when post (ajax-ing) a form in ASP.NET MVC 2 on .NET 4.0 framework using jQuery and CKEditor, I found that when you use the following:

Code Snippet
 $.ajax({
    url: '/TheArea/Root/Add',
    type: 'POST',
    data: $("#form0Add").serialize(),
    dataType: 'json',
    //contentType: 'application/json; charset=utf-8',
    beforeSend: function ()
    {
        pageNotify("NotifyMsgContentDiv", "MsgDefaultDiv", '<img src="/Content/images/content/icons/busy.gif" /> Adding post, please wait...', 300, "", true);
        $("#btnAddSubmit").val("Please wait...").addClass("button-disabled").attr("disabled", "disabled");
    },
    success: function (data)
    {
        $("#btnAddSubmit").val("Add New Post").removeClass("button-disabled").removeAttr('disabled');
        redirectToUrl("/Exhibitions");
    },
    error: function ()
    {
        pageNotify("NotifyMsgContentDiv", "MsgErrorDiv", '<img src="/Content/images/content/icons/cross.png" /> Could not add post. Please try again or contact your web administrator.', 6000, "normal");
        $("#btnAddSubmit").val("Add New Post").removeClass("button-disabled").removeAttr('disabled');
    }
});
 

Notice the following:

Code Snippet
 data: $("#form0Add").serialize(),
 

You may run into the “A potentially dangerous Request.Form value was detected" issue with this. One of the requirements was NOT to disable ValidateRequest (ValidateRequest=”false”). For this project (and any other project) I felt it wasn’t necessary to disable ValidateRequest.

Note: I’ve search for alternatives for the posting issue and everyone and their mothers continually suggested to disable ValidateRequest. That bothers me – a LOT. So, disabling ValidateRequest is totally out of the question (and always will be).

So I thought to modify how the “data: “ gets serialized. the ajax data fix was simple, add a .html(). YES!!! IT WORKS!!! No more “potentially dangerous” issue, ajax form posts (and does it beautifully)! So if you’re using jQuery to $.ajax() a form with CKEditor, remember to do:

Code Snippet
 data: $("#form0Add").serialize().html(),
 

or bad things will happen. Also, don’t forget to set

Code Snippet
 config.htmlEncodeOutput = true;
 

for the CKEditor config.js file (or equivalent). Example:

Code Snippet
 CKEDITOR.editorConfig = function( config )
{
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    config.uiColor = '#ccddff';
    config.width = 640;
    config.ignoreEmptyParagraph = true;
    config.resize_enabled = false;
    config.skin = 'kama';
    config.enterMode = CKEDITOR.ENTER_BR;
 
    config.toolbar = 'MyToolbar';
    config.toolbar_MyToolbar =
    [
        ['Bold', 'Italic', 'Underline'],
        ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', 'Font', 'FontSize', 'TextColor', 'BGColor'],
        ['BulletedList', 'NumberedList', '-', 'Outdent', 'Indent'],
        '/',
        ['Scayt', '-', 'Cut', 'Copy', 'Paste', 'Find'],
        ['Undo', 'Redo'],
        ['Link', 'Unlink', 'Anchor', 'Image', 'Flash', 'HorizontalRule'],
        ['Table'],
        ['Preview', 'Source']
    ];
    config.htmlEncodeOutput = true;
};
 

Happy coding!!!

Tags: jQuery ASP.NET MVC 2 ASP.NET 4.0 AJAX

Developer IT

Using jQuery, CKEditor, AJAX in ASP.NET MVC 2 - Developer IT

Using jQuery, CKEditor, AJAX in ASP.NET MVC 2

Categories cloud