Sending Data from jQuery Ajax to MVC COntroller

Question

I am trying to send an SVG string from my index page to my controller. But it's getting a null value.

var str = "<svg height=\"350\" version=\"1.1\" ... svg properties ..."
console.log(str);

$.ajax({
    type: "POST",
    //contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    //dataType: "text",
    url: window.location.origin + '/NavigationExport/GetSvgData',
    //data: '{"value":"' + str + '"}',
    data: {value :str},
}).done(function (data) {
    debugger
});

Here is my controller code.

[HttpPost]
public void GetSvgData(string value)
{
    return;
}

but this code is giving me a 500 internal server error.

A potentially dangerous Request.Form value was detected from the client ( value="<svg height="350" ve..." ).

Description: ASP.NET has detected data in the request that is potentially dangerous because it might include HTML markup or script. The data might represent an attempt to compromise the security of your application, such as a cross-site scripting attack. If this type of input is appropriate in your application, you can include code in a web page to explicitly allow it. For more information, see http://go.microsoft.com/fwlink/?LinkID=212874 .

If I use

data: '{"value":"' + str + '"}'

it sends null value to the controller

Answer 1

The issue is because MVC thinks you're trying to send HTML in the request, and prevents it to stop any XSS attacks. You can allow HTML/XML by adding the ValidateInput annotation to Action. In your case, try this:

[HttpPost]
[ValidateInput(false)]
public void GetSvgData(string value)
{
    return;
}

Answer 2

You can use [ValidateInput(false)] as action attribute in the controller to allow HTML string passing to action.

    [ValidateInput(false)] 
    public ActionResult ActionName()
    {

    }