Escape/ Unescape With UrlEncode/UrlDecode In ASP.NET/ jQuery

Recently, I faced an issue while sending an HTML string as a parameter to the Controller action. What I wanted was to have two textareas and a button on my View. And then, get the values from textareas and send it to the Controller.

Then, I was going to save these values to a file at the specific location (like JS, HTML, CSS, Txt), and if the file was already there at the location, then read that file and show data in the respective textarea.

What problem did I face?

When I tried to send a string which had HTML tags like '<br>, <b>xxxxxxx</b>', I used an AJAX call to send the data from View to Controller as below.

function SaveDataToFile() {
var JsCode = $('#textarea1').val();
var JsCode2 = $('#textarea2').val();
$.ajax({
type: "POST",
url: "@Url.Action("
xxxAction ", "
xxController ")",
datatype: "JSON",
data: {
JsCode: JsCode,
FileName: xxx,
JsCode2: JsCode2,
yyy: yyy
},
beforeSend: function() {
alert("Before send to controller");
},
success: function() {
alert("Success");
setTimeout(function() {
location.reload();
}, 4000);
},
});
}

The above function is a JS function and it will work absolutely fine if JsCode/ JsCode2 variables have plane text

(i.e., no HTML tags in it).

If in those variables you have HTML tags ('<br>, <b>xxxxx</b>, <h1>xxxx</h1>'), then it will not give you any error in console window but it goes in the success of that AJAX method and shows alert as "Success".

This happens because while sending a parameter to the controller (in my above case, there are 4 parameters), the AJAX call will convert it to the JSON format because in the variable (JsCode/JsCode2), it will have HTML code it will not be able to convert to JSON format.

The value in Textarea as,

After calling JS function SaveDataToFile

in JSCode, the variable value will come as follows.

To avoid this problem there is a Jquery in build function available that we can use to convert string to serializable string. These functions can be used as:

JsCode = escape(JsCode);
JsCode2 = escape(JsCode2);

The above line of code will convert the value from textarea as,

You need to use this before calling Action from the controller.

function SaveDataToFile() {
var JsCode = $('#textarea1').val();
var JsCode2 = $('#textarea2').val();
JsCode = escape(JsCode);
JsCode2 = escape(JsCode2);
$.ajax({
type: "POST",
url: "@Url.Action("
xxxAction ", "
xxController ")",
datatype: "JSON",
data: {
JsCode: JsCode,
FileName: xxx,
JsCode2: JsCode2,
yyy: yyy
},
beforeSend: function() {
alert("Before send to controller");
},
success: function() {
alert("Success");
setTimeout(function() {
location.reload();
}, 4000);
},
});
}

The above value of variable JSCode will easily convert to JSON format and send to Controller action. Call will go to the controller action and there you need to again decode the above as an encoded string to Normal; you can use C# function like this:

JsCode = HttpUtility.UrlDecode(JsCode);
JsCode2 = HttpUtility.UrlDecode(JsCode2);

This UrlDecode will convert an encoded string to the normal string as,

Now, this is in Controller, then you can use it as you want.

In my case I'm using this to create JS file Dynamically,

__HAPPY_CODING__