Passing CKEDITOR.instances.editor1.getData() to HTTPPost gives error - javascript

I am reading the HTML from the CKEditor and am able to display it in the alert but for some odd reason when I get to the ajax post it gives an error. I have identified this by removing it and passing a plain string just in case. That works fine.
function GetHTML() {
var _content = CKEDITOR.instances.editor1.getData();
alert(content);
var _filename = $("#pages").val();
var url = "/CMS/UpdateHTML/";
$.ajax({
url: url,
data: {content: _content, filename: _filename },
cache: false,
type: "POST",
success: function (data) {
},
error: function (reponse) {
alert("error : " + reponse);
}
});
}
I never actually get to the controller code. It just gives an error
error : [object Object]
the code in the controller is
<HttpPost()>
Function UpdateHTML(content As String, filename As String) As ActionResult
stop
Return Json("")
End Function

I found the answer to my problem it seems that if you place the attribute in the code it works.
<ValidateInput(False)>
I saw this in an article Using CKEditor with Razor for .NET MVC 3
In the article it is mentioned how this is very important else an error will be generated.
"[HttpRequestValidationException (0x80004005): A potentially dangerous
Request.Form value was detected from the client..." exception is
thrown because there is HTML being sent to the server. The
[ValidateInput(false)] attribute will prevent this error happening,
however we are opening ourselves up to a security vulnerability.

Related

Why is XML I'm passing via AJAX to an MVC controller not getting there?

I am trying to pass an XML string from the HTML/JavaScript client side to the ASP.NET MVC server side. The problem is that the XML string never reaches the server, whereas an ordinary "non-XML" string will be successfully transferred.
The relevant JavaScript code on the client side is the following:
function TransferXmlDataToServer() {
var sXml = "<Tag>This is an XML test string.</Tag>"
$.ajax({
type: "POST",
url: '#Url.Action("TransferXMLData", "Home")',
data: { sInputXml: sXml },
dataType: "json",
success: function(sReturnValue) {
alert("Value returned from server is: " + sReturnValue);
},
error: function() {
alert("There was an error on the server side");
}
})
};
This is the corresponding function in the MVC Home controller on the server side:
public JsonResult TransferXMLData(string sInputXml) {
// The arguments' name must match those used in the View's Ajax call
return Json("Success");
}
When the TransferXmlDataToServer is invoked from the client side, the There was an error on the server side message is displayed. I have put some debugging printing statements in the TransferXMLData on the server side that are not invoked, showing that one does not even enter in this function.
On the other hand, when
sXml = "<Tag>This is an XML test string.</Tag>"
is replaced by
sXml = "This is a test string."
everything works as expected.
Additional notes:
This was tried with IE11 and Edge.
I tried to convert the XML string to Serialized Json prior to sending it to the server, to no avail.
I would greatly appreciate knowing what I am doing wrong.
Thanks a lot.
This is because by default asp.net protects against content that looks like HTML mark-up being sent to a controller action un-encoded. You need to decorate your action with the ValidateInputAttribute to let the content through:
[ValidateInput(false)]
public JsonResult TransferXMLData(string sInputXml)
{
// The arguments' name must match those used in the View's Ajax call
return Json("Success");
}

result variable not accessbile in HtmlHelper inside Ajax success

I have an MVC web project. In a cshtml page of the project, I have an Ajax code as below:-
$.ajax({
type: 'POST',
dataType: 'json',
cache: false,
contentType: false,
processData: false,
url: '#Url.Action("Report", "Report")',
data: data,
success: function (result) {
if (result) {
alert(result.AccessToken); // ----> result.AccessToken is accessible here
$("#load-report").html(#Html.PowerBIReportFor(m => m.Report, new { id = "pbi-report", style = "height:68vh", powerbi_access_token = result.AccessToken })); // ----> result.AccessToken is not accessible here
}
else {
alert("server Error: Not able to load report, please try again");
}
},
error: function () {
alert("Error in uploading the data");
}
});
The response to Ajax call is a JSON serialised object which has two data memebers - Report and AccessToken. In the success function of Ajax, the alert is able to access the result.AccessToken and prints it correctly. However, when I try to access result.AccessToken inside Html.PowerBIReportFor() function, the page shows an error saying "The name result does not exist in the current context".
Can anyone help me with this?
#Html.PowerBIReportFor(m => m.Report, new { id = "pbi-report", style = "height:68vh", powerbi_access_token = Model.AccessToken });
The PowerBIReportFor method takes Model object coming from controller. The Model object should contain Report (Microsoft.PowerBI.Api.V1.Models.Report) and AccessToken (string) so that the method dynamically builds a div element using the info. to generate attributes.
This works peacefully if a view is loaded from a controller. However in my case I just want to load the report into current view. If I load partial view entire Layout is loading again.
I finally solved this problem by building the div element by myself from the content of Result object in ajax success event.

Passing a string array to mvc controllers using ajax

I need to pass list of strings from multiple select to the controller. Though the requirement looked very simple to me, I was breaking my head for the past hour in this. I have did a fair research on this, but unable to succeed.
Below is my Javascript code. Please ignore the comments. I was successfully able to fetch the list of items in the multiple select. While i do the ajax call, I get the error "Object reference not set an instance of an object.
function submitForm() {
var selected = $('#selectedTasks option').map(function(){
return this.value
}).get()
var postData = { selectedTasks : selected } //corrected as suggested
//selectedTasks = JSON.stringify({ 'selectedTasks': selected });
alert(postData);
$.ajax({
type: "POST",
//contentType: 'application/json; charset=utf-8',
url: '#Url.Action("AssignTasks", "MonthEndApp")',
dataType: 'json',
data: postData,
traditional: true,
success: function (data) {
alert("Success");
},
error: function (xhr) {
alert(xhr.responseText);
}
});
}
MonthEndAppController.cs
[HttpPost]
public void AssignTasks(List<String> selectedTasks)
{
//do something
}
Can someone guide me where exactly I have gone wrong? Can someone suggest me what is wrong?
EDIT : As suggested by Mr. Rory I have made the java script changes. Now the Java script part works absolutely fine. But the Controller is not getting called when the ajax request is made. Can someone help me out if something wrong in the call made to controller ?
Have you tried with string[] instead of List<String> ?
The parameter your AssignTasks action is expecting is called selectedTasks, not values:
var postData = { selectedTasks: selected };
Also note that when debugging anything in JS you should always use console.log() over alert(), as the latter coerces all types to a string, which means you're not seeing a true representation of the actual value.

Passing HTML over AJAX call to C# MVC Controller. 500 Error

So I'm getting a bit stumped by this one. I've got multiple pages making lots of successful Ajax calls to my C# controllers on the back end with a variety of data, but now I'm trying to build a simple little content management functionality, and hence update the HTML in a database with new HTML from a JS editor.
Long story short, I've taken out all the heavy Database code and narrowed it down to the fact that either my controller won't accept anything with html tags, or my ajax code is having trouble sending it.
The Ajax function is:
$.ajax({
type: "POST",
url: '#Url.Action("UpdateContent", "Admin")',
data: {
elementId: elementId,
newContent: newContent
},
dataType: "json",
success: function (data) {
if (data.result == 'true') {
infoMessage('Content Updated!', 'success');
} else {
infoMessage('Error: ' + data.result + '. Nothing has been updated!', 'error');
}
},
error: function () {
alert('There was a problem contacting the server.');
}
});
And on my Controller side, I've taken away all the code to just leave some debugging write lines.
[HttpPost]
public ActionResult UpdateContent(string elementId, string newContent)
{
System.Diagnostics.Debug.WriteLine("!" + elementId);
System.Diagnostics.Debug.WriteLine("!" + newContent);
string _result = "true";
return Json(new { result = _result });
}
Now the interesting thing is that when I have newContent in the data paramater in the Ajax request set to anything like <p>hello</p> those writelines don't even get called and the whole ajax call fails. Yet when I just use a normal string e.g. hello it works fine. I've further narrowed it down to just the opening html bracket, so even <p would fail.
With this in mind, what is happening here? And secondly, what is the correct way to send html back to the controller via Ajax so this doesn't happen?
ASP.NET has request validation enabled by default to help protect against XSS. You can disable this by adding the ValidateInput attribute to your action:
[HttpPost]
[ValidateInput(false)]
public ActionResult UpdateContent(string elementId, string newContent)
{
System.Diagnostics.Debug.WriteLine("!" + elementId);
System.Diagnostics.Debug.WriteLine("!" + newContent);
string _result = "true";
return Json(new { result = _result });
}
You'll also need to add the following to your web.config:
<httpRuntime requestValidationMode="2.0" />
A newer (and better) alternative is to use the AllowHtml attribute which you would apply to a property on your model. This is preferred because you're only allowing this prop to bypass validation instead of the entire request.
class MyModel
{
[AllowHtml]
public string MyHtml { get; set; }
}

Jquery Ajax success function never called

I have the following Ajax call:
$.ajax({
type: 'POST',
url: myBaseUrl + 'Products/addItemToBasket',
dataType: 'json',
data: {
id: window.location.pathname.substring(window.location.pathname.lastIndexOf('/') + 1),
amount: amount
},
success: function (data) {
alert(data);
var dat = JSON.parse(data);
}
}
});
Now this calls the following method in php:
public function addItemToBasket()
{
if ($this->request->is('post')) {
//todo delete efter at have insat fancybox med valg af antal styk. (sendes via ajax).
$shopping = null;
$item = $this->Product->find('first',array('conditions' => array('Product.id' =>$this->request->data['id'])));
if(isset($_SESSION['basket'])){
$shopping = $_SESSION['basket'];
}else{
$shopping = array();
}
array_push($shopping,$item);
$_SESSION['basket'] = $shopping;
echo json_encode($_SESSION['basket']);
}
}
When i try to debug it everything is working (it gets into the php function) and updates my $_SESSION variable.
BUT it never runs the success function and it never alerts the data.
What am i doing wrong?
NOTE: I know this question is from a couple of months ago, but any help will be useful for people looking for answers to this kind of problems.
As far as I know, because I'm running with a similar problem, it all depends on the response you get from the webservice (you can check it out with Chrome debugging console). For instance, I'm getting this now:
readyState: 4
statusText: "OK"
responseText: (The result I am looking for)
The problem is, as you say, I always get to run the Error part of the callback, never the Success, even if I'm getting the right responseText. As I've read, that's because the call to the WS was OK, but the parsing from JSON wasn't, so it calls "error".
So far I don't know how to fix it, but maybe this will give a clue.

Categories

Resources