Pass Html string from view to controller via ajax call

Question

I have a requirement where I need to pass all the HTML of a div tag to the controller. I am able to get the HTML, but code fails when I am passing HTML via ajax.

Here's my code.

View:

function abc() {

  var html = $("#div").html();

  data = {
    Html: html
  };

  $.ajax({
        url: '@Url.Action("DisplayResult", "Default")', //
        data: data,
        type: "POST",
        contentType: "application/json; charset=utf-8",
        success: function(result) {
          //do something
        });
    },
    error: function(xhr) {
      alert("error");
    }
});
}

My controller Action method:

[HttpPost]
public FileResult DisplayResult(string Html)
{
    return null;
}

I searched online and found a couple of related posts, but those were talking about different solutions like using Html.Beginform() and submit buttons - but none of those solutions suit my need.

What error do you get from javascript? (You can open the console to view the error message) — just.another.programmer
– just.another.programmer, Commented Sep 6, 2018 at 19:55
its a 500 internal server error in my console. Breakpoint in my controller is never hit. However, if I dont pass any data in ajax (just pass null) and make the parameter in my controller optional, there's no problem. So, I am assuming something is going wrong when I am passing the html ? — Sri
– Sri, Commented Sep 6, 2018 at 20:00
You need to check the text returned along with the 500. It probably says you sent a potentially dangerous request. See this for more info. — just.another.programmer
– just.another.programmer, Commented Sep 6, 2018 at 20:04

Tyler2P · Accepted Answer · 2023-01-29 13:11:30Z

2

You have javascript errors and your call is wrong you will need to stringify the data.

function abc() {
  var html = $("#div").html();
  var dataToSend = JSON.stringify({ 'Html': html });
    
  $.ajax({
    url: '/Home/DisplayResult', //
    data: dataToSend,
    type: "POST",
    contentType: "application/json; charset=utf-8",
    success: function (result) {
      // Do something
    },
    error: function(xhr) {
      alert("error");
    }
  });
}

And I have this in HomeController:

[HttpPost]
public FileResult DisplayResult(string Html)
{
  return null;
}

edited Jan 29, 2023 at 13:11

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Sep 6, 2018 at 20:16

Sasho Ristovski

1471 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sasho Ristovski Over a year ago

You will need to stringify your html

Lemiarty Over a year ago

in the last 10 years of using JQuery functions, I have never seen such a confident rude and incorrect statement. You most certainly do NOT need to "stringify" objects before posting them via jquery.

Ashkan Mobayen Khiabani · Accepted Answer · 2018-09-06 20:17:38Z

1

Sending Html content is not safe so you will get an error. although you can bypass this error, disabling input validation but it's not recommended:

[ValidateInput(false)]
public class YouController: Controller{

}

answered Sep 6, 2018 at 20:17

Ashkan Mobayen Khiabani

34.3k35 gold badges111 silver badges187 bronze badges

Comments

Tyler2P · Accepted Answer · 2023-01-29 13:09:41Z

1

Just before the ajax call

data = {
    Html: encodeURIComponent(html)
};

Then once back at the controller

[HttpPost]
public FileResult DisplayResult(string Html)
{
   Html = HttpUtility.UrlDecode(Html); 
   return null;
}

This took care of the problem for me

edited Jan 29, 2023 at 13:09

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Jan 27, 2023 at 20:51

Timothy Power

93 bronze badges

Comments

LeviTheOne · Accepted Answer · 2018-09-06 20:19:25Z

0

maybe the Content type is wrong, but you can check the error from inside a browser (using the Network tab and clicking your request, or even with fiddler)

I can't say much without testing the code, but another option would be to check the responseText of the error function like :

error: function(xhr, status, error) {
  alert(err.responseText);
}

answered Sep 6, 2018 at 20:19

LeviTheOne

1059 bronze badges

Comments

Django · Accepted Answer · 2018-09-06 20:21:39Z

0

If you define "application/json" in contentType, you must send it after stringify operation.

$.ajax({
    url: '@Url.Action("DisplayResult", "Default")', //
    data: JSON.stringify(data),
    type: "POST",
    contentType: "application/json; charset=utf-8",
    success: function(result) {
      //do something
    });
},
error: function(xhr) {
  alert("error");
}

If you don't define "application/json", the default contentType is "application/x-www-form-urlencoded", which you can pass the object to data parameter without JSON.stringify.

answered Sep 6, 2018 at 20:21

Django

2221 silver badge5 bronze badges

Comments

Sri · Accepted Answer · 2018-09-10 04:36:14Z

0

Thanks for your responses!

I was able to solve this problem by adding a string property with [AllowHtml] attribute and passing my html via model.

However, since some of the users responded that it's not safe to pass html, I wrote a method in my controller to generate the same html. Thanks for your answers again!

answered Sep 10, 2018 at 4:36

Sri

312 silver badges8 bronze badges

Collectives™ on Stack Overflow

Pass Html string from view to controller via ajax call

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related