I want to save in the database the value of a igHtmlEditor. I am using Ajax to post form data like this:
$.ajax({ url: '@Url.Action("Save","MyData")', type: "POST", data: $("#MyForm").serialize(), success: function (data) { cheer(data); } });
That works fine but I have a problem with igHTMLEditor, when I type 'AA + BB' (without apostrophe and in bold) its corresponding HTML is:
<span style="font-weight: bold;">AA + BB</span>
That is serialized with jQuery using standard URL-encoded notation and sent to the controller, the string is:
%3Cspan%20style=%22font-weight:%20bold;%22%3EAA%20+%20BB%3C/span%3E
In the controller I want to deserialize it before save it in the database, so I do something like:
public ActionResult Save(string mystring) { SaveToDB(System.Web.HttpUtility.UrlDecode(mystring));}
But UrlDecode replace '+' with an space resulting in:
AA BB
Two 'A', three spaces, and two 'B'.
How to send igHtmlEditor values to database using Ajax and MVC and then back to client without losing any information due to serialization issues?
Hello Luis,
Which version of jQuery are you using and how do you have your view set up? From what I'm seeing, serialize should convert the string with the + being converted to %2B. For example, please see the following jsFiddle I put together to research this behavior:
http://jsfiddle.net/azrxf3zv/
Hi Jason. You're right, but in my case something happens at the mvc controller side. Say you have a controller like:
using System.Web.Mvc;
namespace MyNamespace{ public class TestHtmlEditorController : Controller { [ValidateAntiForgeryToken] [HttpPost] public ActionResult SaveTestHtmlEditor(string MyString) { var myDecodedString = System.Web.HttpUtility.UrlDecode(MyString); return Content("SUCCESS!"); }
[HttpGet] public ActionResult GetTestHtmlEditor() { return View("TestHtmlEditor"); } }}
And a view like:
@using Infragistics.Web.Mvc
@{ ViewBag.Title = "TEST HTML";}
@using (Html.BeginForm("SaveTestHtmlEditor", "TestHtmlEditor", FormMethod.Post, new { id = "TestForm" })){ @Html.AntiForgeryToken() @Html.ValidationSummary(true) @(Html.Infragistics().HtmlEditor() .ID("MyString") .InputName("MyString") .Height("150px") .Width("100%") .ShowTextToolbar(false) .ShowInsertObjectToolbar(false) .ShowFormattingToolbar(true) .ShowCopyPasteToolbar(false) .Render()) <p />
<div id="divSaveEnd" style="margin-top: 20px;"> <input type="button" id="saveData" class="button" onclick="saveForm()" value="Aceptar" /> </div>}
<script type="text/javascript">
function saveForm() { $.ajax({ url: '@Url.Action("SaveTestHtmlEditor", "TestHtmlEditor")', type: "POST", data: $("#TestForm").serialize() }); }
</script>
Type something like "HELLO + WORLD" and check out MyString and myDecodedString. You will see that "+" is not encoded in MyString and UrlDecode removes it :(
This issue is now resolved in the latest service releases for 2015 Vol. 1 and 2014 Vol. 2. Please download and install the service release from https://es.infragistics.com/my-account/keys-and-downloads to get the fix for this behavior.
Thank you for this update. Using the information I was able to reproduce the behavior. Looking in to this further, the value of the igHtmlEditor is getting encoded through the use of encodeURI which ignores special characters like the plus sign. We should probably be using encodeURIComponent, but I'd like to have the team take a look at this a bit further to get more information about why we are using encodeURI. I have created a development issue for this with an ID of 189760 and have created a support case that you will be able to use to track this issue.