Using jQuery, CKEditor, AJAX in ASP.NET MVC 2
- by Ray Linder
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
