Question

I am writing an MVC3 site, which uses tinymce as a WYSIWYG text editor. I save that text via an AJAX call using jQuery. I’ve found the query is not sent, if my data includes HTML, so I need to do this:

 var postData = {
                  couponId: couponId,
                  coupon: escape(coupon),
                  imagePath: image,
                  imageAlignment: imageAlignment
                };

             $.post('@(Url.Action("SaveCoupon"))', postData, function (data) {

in order to get my data passed through to the server. This turns

<p>this is a test</p>

in to

%3Cp%3Ethis%20is%20a%20test%3C/p%3E

I’ve been trying to work out how to convert it back. The HtmlString, HtmlHelper and HttpUtility classes just return it verbatim, I thought HttpUtility.HtmlDecode was what I needed for sure, but it just plain does not do what I need. I need to store this as decoded HTML in my database, so I can’t just re-encode it on the client side ( although I am concerned that I won’t be able to send it back using AJAX either, I’ve not even got that far, yet ). What’s the best way to transmit HTML through an AJAX call, store it in the form it was entered, and return it back to the client for display ?

Answer 1

I’ve found the query is not sent, if my data includes HTML

No, you found wrong. The query is sent but the server rejects it because it contains dangerous characters. Basically it throws an exception before it reaches your controller action. In ASP.NET MVC 3 there are a couple of possibilities to avoid this.

The first one is to decorate your view model property that will receive the HTML with the [AllowHtml] attribute (recommended):

public class CouponViewModel
{
    public int CouponId { get; set; }
    [AllowHtml]
    public string Coupon { get; set; }
    public string ImagePath { get; set; }
    public string ImageAlignementh { get; set; }
}

which is what your controller action will take as parameter:

[HttpPost]
public ActionResult SaveCoupon(CouponViewModel model)
{
    ...
}

Now when sending your AJAX request don’t do any escaping or stuff. jQuery will take care of properly url encoding your parameters:

var postData = {
    couponId: couponId,
    coupon: coupon,
    imagePath: image,
    imageAlignment: imageAlignment
};

$.post('@Url.Action("SaveCoupon")', postData, function (data) {
    ...
});

Another possibility is to decorate the entire action with the [ValidateInput] attribute which will disable request verification for the entire request (not recommended):

[HttpPost]
[ValidateInput(false)]
public ActionResult SaveCoupon(CouponViewModel model)
{
    ...
}