I've looked around, and I'm trying to find an elegant solution to this, and I'm yet to find one. I have an ASMX web service in .NET that I'm trying to call that requires parameters.
I'm using jQuery on the client side to call the service and my jQuery code looks something like this:
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
url: "/Reviews/HotelReview.asmx/SubmitReview",
data: "{'name': '" + name + "', " +
"'info': '" info + "'}",
processData: true,
beforeSend: function() { startSubmit(); },
complete: function() { submitComplete(); },
error: function(xhr) { submitError(xhr); },
success: function(msg) { submitSuccess(msg.d); }
});
It works very well, except when either name or info contain the ' character, a single quote. Simple enough, because my JSON defines the end of the value of the field and is a single quote. When either of these fields contains a single quote, all I get is an "Internal Server Error", but further inspection using Fiddler showed me the results (I won't bother to post them) indicating the single quote issue.
I've put something in place temporarily to remove the single quotes on the client side and put them back in on the server side, but this is far from elegant. Is there a more elegant way to escape these single quotes so that my code can work?
The specifications say that in JSON you can only use double-quotes around keys and values so try it with double quotes. I am pretty sure your error will be solved.
You may want to use json.js to encode / escape special characters in the actual values so you don't run into problems with values containing " for instance, or the stringify method from http://www.json.org/js.html.
Related
All the articles i've found talks about either uploading both files and text values using non-ajax form post, or uploading only files with ajax post requests. Is there a way to upload both files and text values using ajax post to mvc action where i can get model binding as well as Request.Files?
After making some experiments, turns out the code doing this is also not that complicated:
var formData = new FormData($("form")[0]);
$.post({
url: "/Home/Upload",
contentType: false,
processData: false,
data: formData,
success: function () {
alert("done");
}
});
The tricky part is the construction of FormData object. There's actually no need to manually add files and other text values, as long as all the inputs are inside a form tag.
I am sending the form data to web api controller in asp.net mvc but my ajax request not hitting the controller every time i got the above error kindly tell me how to send request with files in ajax in asp.net mvc to web api controller
$(document).on("submit", ".SignupForm", function (event) {
event.preventDefault();
var formData = new FormData($(".SignupForm"));
formData.append($('#imageFile')[0].files[0]);
$.ajax({
url: 'api/Countries',
type:'POST',
data: obj,
dataType: 'json',
processData: false,
success: function (result) {
console.log(result);
},
error: function (data, status, abc) {
console.log(data);
console.log(status);
console.log(abc);
}
});
});
Easy's answer is right, if you don't understand his answer there is what you want.
formData.append('chooseAName', $('#imageFile')[0].files[0]);
See this: (apparently you must add argument)
SyntaxEDIT There are two versions of this method: a two and a three
parameter version:
formData.append(name, value); formData.append(name, value, filename);
Parameters
name The name of the field whose data is contained in value. value The
field's value. This can be a USVString or Blob (including subclasses
such as File). filename Optional The filename reported to the server
(a USVString), when a Blob or File is passed as the second parameter.
The default filename for Blob objects is "blob". The default filename
for File objects is the file's filename.
ExampleEDIT The following line creates an empty FormData object:
var formData = new FormData(); // Currently empty You can add
key/value pairs to this using FormData.append:
formData.append('username', 'Chris'); formData.append('userpic',
myFileInput.files[0], 'chris.jpg'); As with regular form data, you can
append multiple values with the same name. For example (and being
compatible with PHP's naming conventions by adding [] to the name):
formData.append('userpic[]', myFileInput1.files[0], 'chris1.jpg');
formData.append('userpic[]', myFileInput2.files[0], 'chris2.jpg');
This technique makes it simpler to process multi-file uploads because
the resultant data structure is more conducive to looping.
https://developer.mozilla.org/en-US/docs/Web/API/FormData/append
My first forray into ajax webpages is causing me some problems.
My basic structure is that I have a table on a page, which I want to reload without refreshing the entire page.
So on clicking a button on the page it fires of this:
function RefreshMissionsAjax() {
//fade out the old table.
$(clientID('MissionsDisplay')).fadeOut(500);
//request the new value from the page (calls the GetIncompleteMissions() method in the MissionViewer.aspx.cs page)
$.ajax({
type: "POST",
url: "MissionViewer.aspx/GetIncompleteMissions",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$(clientID('MissionsDisplay')).html(msg.d);
$(clientID('MissionsDisplay')).fadeIn(500);
},
error: function (xhr, ajaxOptions, thrownError) {
$(clientID('MissionsDisplay')).html('An error occured while trying to refresh the page data.');
$(clientID('MissionsDisplay')).fadeIn(500);
}
});
}
And I have in the code bedind of an aspx page:
[WebMethod]
public static string GetIncompleteMissions()
{
return GetHTMLTable();
}
This method just grabs some data, and creates a html table - nothing too fancy.
When the returned table is small (a dozen rows or less) then it works like a charm.
But when it gets larger, it takes a long long time.
At 100 rows it can take 5 minutes to render the table.
At 1000 rows I have left it for 30 minutes and nothing will happen after the fadeout.
(NB - it loads fairly quickly on the pageload, before the ajax refresh is used, so it is not the actual server side creation of the table thats the problem).
This is my first real attempt at doing something like this, so I dont know if this is the best way to do it - it was just something i pieced together that worked great when i was testing with small datasets.
Now, not so much.
Any ideas how I can make it usable?
If possible, use WCF instead, it should be lot faster.
Anyway, don't pass the raw HTML back, have the service return minimized data in JSON format then use this data in the onsuccess event to create the table on the fly with jQuery.
For example have the service return JSON array with 1000 items then iterate this array and add one row for each item.
i have an asp.net controller that output Json as the results
a section of it is here
returnString += string.Format(#"{{""filename"":""{0}"",""line"":[", file.Filename);
what i get returned is this:
"{\"DPI\":\"66.8213457076566\",\"width\":\"563.341067\",\"editable\":\"True\",\"pricecat\":\"6\",\"numpages\":\"2\",\"height\":\"400\",\"page\":[{\"filename\":\"999_9_1.jpg\",\"line\":[]},{\"filename\":\"999_9_2.jpg\",\"line\":[]}]]"
i have tried to return with the following methods:
return Json(returnString);
return Json(returnString.Replace("\\","");
return Json will serialize my string to a jSon string, this i know but it likes to escape
for some reason, how can i get rid of it ????
for info this is how i call it with jQuery:
$.ajax({
url:"/Products/LoadArtworkToJSon",
type:"POST",
dataType: "json",
async: false,
data:{prodid: prodid },
success: function(data){
sessvars.myData = data;
measurements = sessvars.myData;
$("#loading").remove();
//empty the canvas and create a new one with correct data, always start on page 0;
$("#movements").remove();
$("#canvas").append("<div id=\"movements\" style=\"width:" + measurements.width + "px; height:"
+ Math.round(measurements.height)
+ "px; display:block; border:1px solid black; background:url(/Content/products/"
+ measurements.page[0].filename + ") no-repeat;\"></div>");
your help is much appreciated
thanks
Are you looking at it in the debugger in VS or in the browser? The debugger will include the extra slashes when it displays it, while the actual output will not consist of those values.
Edit: Try passing an object to Json instead of a custom string. Your string is already in Json format (ish), so passing it to Json is re-ecoding it.
return Json(new { filename = "yourfilename" } );
or
return "yourfilename";
...etc, adding in whatever properties you need.
So far, I've only been passing javascript strings to my web methods, which get parsed, usually as Guids. but now i have a method that accepts an IList... on the client, i build this array of objects and then attempt to pass it like:
$.ajax({
type: 'POST',
url: 'personalization.aspx/SetPersonalization',
data: "{'backerEntries':" + backerEntries + "}",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: postcardManager.SetPersonalizationComplete
});
The post:
{'backerEntries':[object Object],[object Object],[object Object]}
The error response:
Invalid JSON primitive: object.
For some reason, jquery doesn't seem to convert my array into a json string? Any ideas why? I tried putting [] around the backerEntries, and {}, as well as {[]} just in sheer desperation. Am I missing something obvious here?
data: "{'backerEntries':" + backerEntries + "}",
..is the same as
data: "{'backerEntries':" + backerEntries.toString() + "}",
...which is pretty much useless. Use Duncan's suggestion if you just want to pass an encoded list of values with the name "backerEntries" in your querystring. If you want to JSON-encode the data, then get a JSON library and call JSON.stringify().
The data you are passing you are trying to pass it as a string already. If you want jQuery to transform it leave the whole thing as an object, e.g.
data:{backerEntries: backerEntries }
Assuming of course backerEntries is an array. jQuery should transform this and will append it to the querystring as that is its default behaviour. Your current code is relying on default JavaScript behaviour which won't by default convert an array into its string representation.
Since you're using ASP.NET, you can use the built-in ASP.NET AJAX serialization library:
var backerEntriesJson = Sys.Serialization.JavaScriptSerializer.serialize(backerEntries);
then pass that directly in your jQuery ajax call:
...
data: backerEntriesJson,
...
This is NOT valid JSON: { 'foo': 'bar' }
Isn't, wasn't ever, never will be. JSON processors are often very forgiving, which of course is a false convenience.
Read the specification. A string is defined to be enclosed in double quotes, not single quotes, not smiley face characters, not pieces of metal bent at right angles, not bricks. There's no mention of single quotes, period.
Now, property names are JSON strings. By definition, they MUST are enclosed in double quotes.
Valid: { "foo": "bar" }
valid" { "foo": 100 }
valid: { "foo": true }
valid: { "foo": [ "one", "two" ], "bar": false }
see www.json.org
see www.jsonlint.com