CODEWITHSUNDEEP
javascriptc#jqueryajaxasp.net-mvc-4
Vladimir Potapov
Vladimir Potapov

Reputation: 2437

How to pass content of html with ajax (MVC)

I need to get HTML from the specific form and save it in HTML file that in my project.

So I have builder ajax function that is sending this HTML to the server and then I saving it.

I have a problem with send HTML to the server, if I send string "Hello word" , all working but with "<p>Hello</p>" it is not working.

What is the right way to send HTML content with ajax?

I know about [ValidateInput(false)] but it is not working

This my controller:

 [HttpGet]
 [ValidateInput(false)]
 public void UpdateHtml(string html)
     {
        try
         {
             string path1 = @"D:\test\my.html";
             System.IO.File.WriteAllText(path1, html);

                }
                catch (Exception ex)
                {
                }

            }

This is my ajax:

function btn_Upload_Click() {

    var html = tinyMCE.activeEditor.getContent();//my html
  //var html = "Hello"//Like this all working
    var token = $('input[name="__RequestVerificationToken"]').val();//checked:OK
    var funcUrl = $("#btn_saveHtml").data("urlaction");//checked :OK
    $.ajax({
        url: funcUrl,
        type: 'GET',
        dataType : "text/xml",
        data: {
            html:html,
            __RequestVerificationToken: token
        },

        success: function (data)
        {
            alert("Good");
        },
        error: function (xhr, status, error) {

            alert(xhr.responseText);
            alert(xhr.status);
            alert(error);
        }
    });

}

Update2: My html that i am trying to send:

"<p style=\"text-align: center; font-size: 15px;\"><img title=\"TinyMCE Logo\" src=\"//www.tinymce.com/images/[email protected]\" alt=\"TinyMCE Logo\" width=\"110\" height=\"97\" /></p>\n<h1 style=\"text-align: center;\">Welcome to the TinyMCE editor demo!</h1>\n<h1><img style=\"float: right; padding: 0 0 10px 10px;\" title=\"Tiny Husky\" src=\"//www.tinymce.com/docs/images/tiny-husky.jpg\" alt=\"Tiny Husky\" width=\"304\" height=\"320\" /></h1>\n<h2>Image Tools Plugin feature<br />Click on the image to get started</h2>\n<p>Please try out the features provided in this image tools example.</p>\n<p>Note that any <strong>MoxieManager</strong> file and image management functionality in this example is part of our commercial offering &ndash; the demo is to show the integration.</p>\n<h2>Got questions or need help?</h2>\n<ul>\n<li>Our <a href=\"https://www.tinymce.com/docs/\">documentation</a> is a great resource for learning how to configure TinyMCE.</li>\n<li>Have a specific question? Visit the <a href=\"http://community.tinymce.com/forum/\">Community Forum</a>.</li>\n<li>We also offer enterprise grade support as part of <a href=\"www.tinymce.com/pricing\">TinyMCE Enterprise</a>.</li>\n</ul>\n<h2>A simple table to play with</h2>\n<table>\n<thead>\n<tr>\n<th>Product</th>\n<th>Cost</th>\n<th>Really?</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>TinyMCE</td>\n<td>Free</td>\n<td>YES!</td>\n</tr>\n<tr>\n<td>Plupload</td>\n<td>Free</td>\n<td>YES!</td>\n</tr>\n</tbody>\n</table>\n<h2>Found a bug?</h2>\n<p>If you think you have found a bug please create an issue on the <a href=\"https://github.com/tinymce/tinymce/issues\">GitHub repo</a> to report it to the developers.</p>\n<h2>Finally ...</h2>\n<p>Don't forget to check out our other product <a href=\"http://www.plupload.com\" target=\"_blank\">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.</p>\n<p>Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br />All the best from the TinyMCE team.</p>"

My ajax return empty error, so I can't get you more information.

Upvotes: 2

Views: 3548

Answers (3)

Geeky Ninja
Geeky Ninja

Reputation: 6052

You can do it like this by multiple ways:-

  1. Stringify the content to JSON.

    JSON.stringify({'html':HTML});

  2. Put your HTML string in single quotes.

    [
    {
        "html": '<p>Hello World!</p>'
    }
];

  3. Escape your double quotes from your HTML code by adding "".

  4. Use Encoder.js When data is passing use: Encoder.htmlDecode(value);

Also, while passing HTML in JSON remember these 4 things.

Upvotes: 1

mr.
mr.

Reputation: 679

This is ajax request

$.ajax({
        url: '@Url.Action("Test")',
        type: 'POST',
        datatype: 'text/xml',
        data: { "html": "<p style=\"text-align: center; font-size: 15px;\"><img title=\"TinyMCE Logo\" src=\"//www.tinymce.com/images/[email protected]\" alt=\"TinyMCE Logo\" width=\"110\" height=\"97\" /></p>\n<h1 style=\"text-align: center;\">Welcome to the TinyMCE editor demo!</h1>\n<h1><img style=\"float: right; padding: 0 0 10px 10px;\" title=\"Tiny Husky\" src=\"//www.tinymce.com/docs/images/tiny-husky.jpg\" alt=\"Tiny Husky\" width=\"304\" height=\"320\" /></h1>\n<h2>Image Tools Plugin feature<br />Click on the image to get started</h2>\n<p>Please try out the features provided in this image tools example.</p>\n<p>Note that any <strong>MoxieManager</strong> file and image management functionality in this example is part of our commercial offering &ndash; the demo is to show the integration.</p>\n<h2>Got questions or need help?</h2>\n<ul>\n<li>Our <a href=\"https://www.tinymce.com/docs/\">documentation</a> is a great resource for learning how to configure TinyMCE.</li>\n<li>Have a specific question? Visit the <a href=\"http://community.tinymce.com/forum/\">Community Forum</a>.</li>\n<li>We also offer enterprise grade support as part of <a href=\"www.tinymce.com/pricing\">TinyMCE Enterprise</a>.</li>\n</ul>\n<h2>A simple table to play with</h2>\n<table>\n<thead>\n<tr>\n<th>Product</th>\n<th>Cost</th>\n<th>Really?</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>TinyMCE</td>\n<td>Free</td>\n<td>YES!</td>\n</tr>\n<tr>\n<td>Plupload</td>\n<td>Free</td>\n<td>YES!</td>\n</tr>\n</tbody>\n</table>\n<h2>Found a bug?</h2>\n<p>If you think you have found a bug please create an issue on the <a href=\"https://github.com/tinymce/tinymce/issues\">GitHub repo</a> to report it to the developers.</p>\n<h2>Finally ...</h2>\n<p>Don't forget to check out our other product <a href=\"http://www.plupload.com\" target=\"_blank\">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.</p>\n<p>Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br />All the best from the TinyMCE team.</p>" },
        error: function () {
            console.log("error");
        },
        success: function () {

        }
    })

And the server code

    [HttpPost]
    [ValidateInput(false)]
    public void Test(string html)
    {

    }

Of course i dont have any token.I can catch the html from server in debug mode.

Upvotes: 4

Riad
Riad

Reputation: 3850

You need to use the function 

    html:encodeURIComponent(html);

See Doc

Upvotes: 2

Related Questions