I have been playing with jstree (1.0rc2)+jquery (1.4.2) for the first time with c#.net and although I have gotten it working, there are a couple things that I don't understand about how data is provided to the tree by the webservice I use to populate the tree (using ajax and the json_data plug-in). I was hoping someone with more experience using jstree could provide some insight.
The jstree config looks like this:
"json_data": {
"ajax": {
"url": "GetTree.asmx/GetChildren",
"type": "POST",
"contentType": "application/json; charset=utf-8",
"dataType": "json",
"data": function(n) {
var result = "{'id':'" + (n.attr ? n.attr("id").replace("node_", "") : "0") + "'}";
return (result);
}
}
}
GetTree.asmx GetChildren method:
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Xml )]
public string GetChildren(string id)
{
List<jsTreeNode> jsTree = new List<jsTreeNode>();
//... (build the tree as needed)
JavaScriptSerializer serializer = new JavaScriptSerializer();
return(serializer.Serialize(jsTree));
}
Question 1: So everything works great, so what's the problem? The problem is "ResponseFormat = ResponseFormat.Xml". I struggled for a while to get this working because it did not work when it was set to ResponseFormat.Json, which is what I would expect it to be. In that situation, no errors would be reported by the web service or by jQuery when parsing the json response, but the tree would render empty.
In looking at the HTML output of the web service, I could see no difference between what was rendered either way. I was hoping someone could explain why this works (counterintuitively) and why it does not work with ResponseFormat.Json, and if this is indicative of something else I might be doing wrong.
Question 2: Generally, web service or web handler?
Would using a generic web handler (ashx) be a more efficient way to do this anyway? Is there a substantial difference in the overhead required of a standard web service versus a generic web handler? Since my goal is basically to control exactly what is output (and using the json data format in the web service doesn't seem to be working the way I want it to anyway) I am not sure what benefit, if any, there is to using a web service here instead of just stripping it down completely. On the other hand this works now so maybe I should leave well enough alone.
Seeing as this question has almost 600 views and no answers I thought I would answer it myself (since I've long since figured it out).
Using a ScriptMethod is really not the right way to communicate with jQuery ajax. While it can be done, you will notice what I was doing above is returning a string with data that I encoded myself to JSON using JavascriptSerializer.
However, using a ScriptMethod automatically incorporates serialization/deserialization designed to communicate with Microsoft's AJAX framework. Since serializing a pure string with no object wrapper will genererally result in the same string (whether I be returning XML or JSON format), it basically worked, but what was really happening internally is it was being serialized twice.
So what I should have done, at a minimum, was:
public List<jsTreeNode> GetChildren(string id)
that is, the return type should be the actual data type, not a string of serialized data.
However, this still wouldn't be exactly right, because Microsoft's methods wrap the return value in an object d. I could still extract that in Javascript to get the inner data. But if something like jsTree is expecting data in a predefined format this may not be workable.
The best solution is do not use WebServices, use generic handlers (ashx) instead. This gives you complete control over the format and handling of your input and output. It may take a little bit of doing to set yourself up a nice framework, but the frustration of being unable to skip parts of the WebService handling that you don't need makes it well worth it.
Sorry, I have to disagree with your answer the 3.5 framework has really good support for Json serialization and Web Services (and for 2.0 you can use Newtonsoft.Json). Please see my JsTree ASP.NET Web Control Demo at http://code.zyky.com/jsTreeView/Default.aspx and http://asp-net-elephant.blogspot.com/2012/01/how-to-use-jstree-in-aspnet-web-forms.html for an example of both. Hope this helps.
Regarding Question 1 (I cannot speak to Q2), I have gotten a web service to feed JSON back to the jsTree plugin. While I recognize that WCF and REST are more current approaches, and no doubt better in the long run, we still use asmx web services and they do get the job done. But it was not easy: I spent a while trying to get the exact syntax to work in JS so that jsTree would get its data object from an ASP.NET web service. As the OP alludes to in his solution, the problem isn't so much my JS and wiring of the plugin but was with the wonky JSON data that was returned my web service. It -looked- like JSON but it was a string representation of a simplified JSON object.
To fix it I had to deserialize and serialize my json string (I got a clue about this from https://stackoverflow.com/a/20080495/1129926) and the resulting object was consumed happily by jsTree. Here's my web service:
Imports System.Web.Script.Serialization
Public Function GetJsonData() As String
Dim jss As JavaScriptSerializer = New JavaScriptSerializer
' IMPORTANT: do not use single quotes ' in JSON string, use ""
Dim jsonData As String = "" & _
"{ ""text"": ""CONTACTS"", ""children"": [ { ""text"": ""CUSTOMER"", ""column"": ""CLASS"", ""children"": [ { ""text"": ""Excelo Communications"", ""column"": ""COMPANY"", ""children"": [{ ""text"": ""Fred Shorts"", ""column"": ""CONTACT"" }] } ] }, { ""text"": ""USER"", ""column"": ""CLASS"" } ] }"
Dim o As Object = Nothing
Try
' deserialize the JSON into an Object,
' shout out to: https://stackoverflow.com/a/20080495/1129926
o = jss.Deserialize(Of Object)(jsonData)
o = jss.Serialize(o)
Context.Response.Clear()
Context.Response.ContentType = "application/json; charset=utf-8"
Catch ex As Exception
// log something
End Try
Return o
End Function
On the client I initialized jsTree in script block as follows:
$(document).ready(function () {
var sURL = "../dataIO.asmx/GetJsonData";
var dataIn = "";
$.ajax({
async: true,
type: "POST",
url: sURL,
dataType: "json",
data: dataIn,
contentType: "application/json; charset=utf-8",
success: function (data) {
console.log("data obj:" + data);
createJSTrees(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log(XMLHttpRequest.statusText + "(status=" + XMLHttpRequest.status + "): " + XMLHttpRequest.responseText);
}
});
});
function createJSTrees(jsonData) {
$("#jstree_dataNav").jstree({
"core": {
"data": jsonData
}
});
$("#jstree_dataNav").on("changed.jstree", function (e, data) {
console.log(data.selected);
});
}
<div id="jstree_dataNav"></div>
jsTree has a somewhat alternative syntax whereas you call the web service within the core.data section but I was unable to get that to work. Instead, I call my web service via ajax and then pass the JSON data object to a function that initializes the jsTree plugin and jsTree just used the object passed in within data:.
Related
I created an ASMX file with a code behind file. It's working fine, but it is outputting XML.
However, I need it to output JSON. The ResponseFormat configuration doesn't seem to work. My code-behind is:
[System.Web.Script.Services.ScriptService]
public class _default : System.Web.Services.WebService {
[WebMethod]
[ScriptMethod(UseHttpGet = true,ResponseFormat = ResponseFormat.Json)]
public string[] UserDetails()
{
return new string[] { "abc", "def" };
}
}
To receive a pure JSON string, without it being wrapped into an XML, you have to write the JSON string directly to the HttpResponse and change the WebMethod return type to void.
[System.Web.Script.Services.ScriptService]
public class WebServiceClass : System.Web.Services.WebService {
[WebMethod]
public void WebMethodName()
{
HttpContext.Current.Response.Write("{property: value}");
}
}
From WebService returns XML even when ResponseFormat set to JSON:
Make sure that the request is a POST request, not a GET. Scott Guthrie has a post explaining why.
Though it's written specifically for jQuery, this may also be useful to you:
Using jQuery to Consume ASP.NET JSON Web Services
This is probably old news by now, but the magic seems to be:
[ScriptService] attribute on web service class
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)] on method
Content-type: application/json in request
With those pieces in place, a GET request is successful.
For a HTTP POST
[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)] on method
and on the client side (assuming your webmethod is called MethodName, and it takes a single parameter called searchString):
$.ajax({
url: "MyWebService.asmx/MethodName",
type: "POST",
contentType: "application/json",
data: JSON.stringify({ searchString: q }),
success: function (response) {
},
error: function (jqXHR, textStatus, errorThrown) {
alert(textStatus + ": " + jqXHR.responseText);
}
});
A quick gotcha that I learned the hard way (basically spending 4 hours on Google), you can use PageMethods in your ASPX file to return JSON (with the [ScriptMethod()] marker) for a static method, however if you decide to move your static methods to an asmx file, it cannot be a static method.
Also, you need to tell the web service Content-Type: application/json in order to get JSON back from the call (I'm using jQuery and the 3 Mistakes To Avoid When Using jQuery article was very enlightening - its from the same website mentioned in another answer here).
Are you calling the web service from client script or on the server side?
You may find sending a content type header to the server will help, e.g.
'application/json; charset=utf-8'
On the client side, I use prototype client side library and there is a contentType parameter when making an Ajax call where you can specify this. I think jQuery has a getJSON method.
Alternative: Use a generic HTTP handler (.ashx) and use your favorite json library to manually serialize and deserialize your JSON.
I've found that complete control over the handling of a request and generating a response beats anything else .NET offers for simple, RESTful web services.
I have searched high and low, and tried many different options, but can't figure out what is going wrong here.
I have a knockoutjs viewmodel, which looks like this:
{"Id":0,"Type":"post","Title":"adsf","AuthorId":0,"Description":"adsfadsf","ChosenCategoryValues":["7","8","9"]}
(some fields omitted for brevity)
Everything gets passed back to the controller just fine, except ChosenCategoryValues. That's an observableArray on the client side, a List<string> on the server side. It always comes back null, unles string with all the values in the first item which I would then have to string parse.
$.post("/serverurl", viewmodel, function (response) { do some stuff }, "json"); is how it's being sent to the server.
I've tried ko.toJS to make it a simple array, with no result.
I'm sure it's something basic, I'm new to knockoutjs, but I've been at this for far too long now, and none of the suggestions I've found online have been able to help.
In order to send view model data you should get view model data into JSON (remember - observables are simple functions), which is achieved via call to ko.toJSON() function.
Also you need to tell server, that you are sending JSON data. You can't achieve it with jQuery post() method - dataType parameter affects only expected server response type, but it does not affect request content type. So, simply use jQuery ajax() method:
$.ajax({
url: '/serverurl',
type: 'POST',
data: ko.toJSON(viewmodel),
contentType: 'application/json',
success: function(response) {
// do some stuff
}
});
As I commented above, you should use fiddler to look at the request. I suspect that your data isn't being sent as json. When your values are sent as ordinary html post values, the collection typically isn't mapped.
I'd suggest creating the actual json to be sent to the server with JSON.stringify as shown here:
$.post("/serverurl", JSON.stringify(viewmodel), function (response) { do some stuff }, "json");
Recently, I searched for a good engine to generate charts with Asp.Net Mvc 3. I finally found FusionChart which have a very nice varieties of chart types.
For helping me creating the xml required to display the chart, I found the project Libero. This project create a level of abstraction between the xml and the object model to define the properties of the graphic.
The project use Mvc2 and I tried to convert it to Mvc3. All the samples works perfectly except one; a sample with ajax call.
In the sample, the controller returns a ContentResult that returns a xml to update the graphic dynamically. The project works perfectly in Mvc2 but not in Mvc3.
Here is the code in the controller:
public ActionResult GetSalesXmlData(string period, string chartType, string chartTemplate)
{
var salesXmlData = this.Content(GetSalesChart(period, chartType, chartTemplate).ToXML(), "text/xml");
return salesXmlData;
}
And here is the code in the view:
$.ajax({
url: "/Home/GetSalesXmlData",
type: "POST",
data: { chartType: chartType, chartTemplate: chartTemplate, period: period },
dataType: "application/JSON",
success: function (data) {
Chart01.xmlData = data;
Chart01.chartType = chartType;
Chart01.showChart();
},
error: function () {
alert("XMLHttpRequest=" + XMLHttpRequest.responseText + "\ntextStatus=" + textStatus + "\nerrorThrown=" + errorThrown);
}
});
When I try to execute this code in Mvc3, I receive this error:
textStatus=parsererror
errorThrown=No conversion from xml to application/json
After searching for a while, I found how to correct my problem in this stackoverflow question.
After reading this post, I changed my controller code to this:
public JsonResult GetSalesXmlData(string period, string chartType, string chartTemplate)
{
var salesXmlData = this.Json(GetSalesChart(period, chartType, chartTemplate).ToXML(), "text/xml");
return salesXmlData;
}
And my ajax call to this:
$.ajax({
url: "/Home/GetSalesXmlData",
type: "POST",
data: { chartType: chartType, chartTemplate: chartTemplate, period: period },
dataType: "text json",
success: function (result) {
Chart01.xmlData = result;
Chart01.chartType = chartType;
Chart01.showChart();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("XMLHttpRequest=" + XMLHttpRequest.responseText + "\ntextStatus=" + textStatus + "\nerrorThrown=" + errorThrown);
}
});
My question is: Why after converting my project from Mvc2 to Mvc3, I must change the result returns by the controller from ContentResult to JsonResult and in my view, the dataType value from application/JSON to text json?
Thank you for your time.
In your original example, you were instructing jQuery to parse the response as JSON even though it was XML. If you upgraded from an older version of jQuery to a newer one as part of the MVC upgrade process, that would explain the parser error. Older versions of jQuery were fairly fast and loose about parsing AJAX responses, but later versions have begun using JSON.parse when jQuery believes the response to be JSON or you explicitly tell it to treat them as such.
Your newer version works around this by taking the XML and JSON-serializing that XML. While that technically does work, it has added an inefficient layer of redundant serialization.
Does your original approach work if you change the dataType to text/xml?
Speaking of efficiency, have you considered using JSON instead of XML? FusionCharts appears to support that. Then, you could avoid the XML altogether, use a more compact serialization over the wire, and take advantage of the browser's native JSON.parse method to more efficiently unpack the response too.
[NOTE:I am really looking for some good debugging techniques here. Perhaps some tricks or ways to simplify things of which I am unaware.]
I am using the technique of calling [WebMethods] defined in an ASPX page from JQuery as mentioned here and here. It seems to be an increasingly common method.
I've been using it for a while and, in general, it works great. But while developing it is pretty fragile. Any incorrect parameter will result in a really vague, non-specific, error message. For instance, if I have a fairly complex web method defined as:
[WebMethod]
public static string SaveComplexRecord(int recID, GeneralData general, SomeObject data, SomeOtherObject moreData)
{
//do a bunch of stuff with that data
}
And GeneralData, SomeObject, and SomeOtherObject all have a mix of various types of parameters (strings, ints, bools, datetimes.) It is very likely, especially during initial development, that I will build the JSON on the client side incorrectly. Perhaps I will do this:
var data = {
recID: curID,
general:
{
a: aValue,
b: bValue,
c: cValue
},
data:
{
d: dValue,
e: eValue,
f: fValue
},
moredata:
{
g: gValue,
h: hValue,
i: iValue
}
};
Which will result in an error because the name of the third parameter is moreData, not moredata. And that's just an example, there could be any of a hundred other subtle typo-style errors.
If I were calling this method from C# the compiler would give me an error message something like "No overloaded method of SaveComplexRecord takes three parameters." or some other helpful message that points you in the right direction.
So... is there a way of getting ASP.Net to produce better error messages here?
Or is there some utility that will automatically build the JSON parameter structure of a [WebMethod] call? (just like you can automatically get the WSDL of a web service)
...or any other technique that I may be missing?
And for completeness here is how I call these WebMethods from JQuery:
var jsondata = $.toJSON(data);
$.ajax({
type: "POST",
url: "MyWebPage.aspx/SaveComplexRecord",
data: jsondata,
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function(xhr)
{
xhr.setRequestHeader("Content-type",
"application/json; charset=utf-8");
},
success: function(msg)
{
//do something on success
},
error: function(XMLHttpRequest, textStatus, errorThrown)
{
alert("ERROR status:" + textStatus + " error:" + errorThrown);
}
});
Or is there some utility that will automatically build the JSON parameter structure of a [WebMethod] call? (just like you can automatically get the WSDL of a web service)
Yes! The ASP.Net AJAX framework can do this! You could get the framework to generate client side proxy classes for GeneralData, SomeObject and SomeOtherObject classes using the 'GenerateScriptType' attribute on a web service class.
See understanding asp net ajax web servcies for a very good article about the subject.
[Unfortunately, AFAIAA, the GenerateScriptType has no effect when applied to the Page class where your page method is defined - so you will have to add an .asmx purely to get the proxy generation.]
You could perhaps use these classes to build up the data structure that you then JSON stringify when you call .ajax? [One of (the very few) things I really like about the MS AJAX framework is the client side proxy generation: it really does make calling web services and page methods very easy. Having said that, I too am moving towards using jQuery in preference to MS AJAX.]
Or alternatively...
Your problem is really that the de-serialisation of the JSON data into the arguments of your page method is done transparently by the framework (which in most cases is a good thing) but when it goes wrong, the feedback you get is less-than-helpful. If you want to trap de-serialisation problems then I think you have to take control of the serialisation either by using custom JSON converters (see here) or by using the rather inelegant sledgehammer approach of having your method accept a string and de serializing the JSN yourself in the method - which is trivial with anyone of the numerous JSON libs out there.
Javascript is dynamically typed so you can't get a compile-time error. But you could use the old window.onerror + ajax trick (or send the error via ajax in the error callback of jQuery.ajax()), and once you're in the server you can treat it just like any other runtime error (throw an exception, log the error, whatever)
From a jQuery standpoint, your problem is in the error function declaration. Only take one input parameter, and that will have all properties of the error, then you can debug more easily.
If the problem is server side, catch the error there, and create return json containing the error message.
Oh, and if you DO want to check your javascript at compile time, I recommend the add-in from jslint.com.
So:
$.ajax({
type: "POST",
url: "MyWebPage.aspx/SaveComplexRecord",
data: jsondata,
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function(xhr)
{
xhr.setRequestHeader("Content-type",
"application/json; charset=utf-8");
},
success: function(msg)
{
//do something on success
},
error: function(err)
{
alert(e.message);
}
});
What I do when returning JSON from a web service is have an object called "ret" containing an attribute "err" as well as the attribute "data" containing the result of the service call. Inside the web service I trap any exceptions and put the exception message on the "err" attribute. Then in the client I check for the "err" attribute being non empty, if it is I know that an error occurred.
I created an ASMX file with a code behind file. It's working fine, but it is outputting XML.
However, I need it to output JSON. The ResponseFormat configuration doesn't seem to work. My code-behind is:
[System.Web.Script.Services.ScriptService]
public class _default : System.Web.Services.WebService {
[WebMethod]
[ScriptMethod(UseHttpGet = true,ResponseFormat = ResponseFormat.Json)]
public string[] UserDetails()
{
return new string[] { "abc", "def" };
}
}
To receive a pure JSON string, without it being wrapped into an XML, you have to write the JSON string directly to the HttpResponse and change the WebMethod return type to void.
[System.Web.Script.Services.ScriptService]
public class WebServiceClass : System.Web.Services.WebService {
[WebMethod]
public void WebMethodName()
{
HttpContext.Current.Response.Write("{property: value}");
}
}
From WebService returns XML even when ResponseFormat set to JSON:
Make sure that the request is a POST request, not a GET. Scott Guthrie has a post explaining why.
Though it's written specifically for jQuery, this may also be useful to you:
Using jQuery to Consume ASP.NET JSON Web Services
This is probably old news by now, but the magic seems to be:
[ScriptService] attribute on web service class
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)] on method
Content-type: application/json in request
With those pieces in place, a GET request is successful.
For a HTTP POST
[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)] on method
and on the client side (assuming your webmethod is called MethodName, and it takes a single parameter called searchString):
$.ajax({
url: "MyWebService.asmx/MethodName",
type: "POST",
contentType: "application/json",
data: JSON.stringify({ searchString: q }),
success: function (response) {
},
error: function (jqXHR, textStatus, errorThrown) {
alert(textStatus + ": " + jqXHR.responseText);
}
});
A quick gotcha that I learned the hard way (basically spending 4 hours on Google), you can use PageMethods in your ASPX file to return JSON (with the [ScriptMethod()] marker) for a static method, however if you decide to move your static methods to an asmx file, it cannot be a static method.
Also, you need to tell the web service Content-Type: application/json in order to get JSON back from the call (I'm using jQuery and the 3 Mistakes To Avoid When Using jQuery article was very enlightening - its from the same website mentioned in another answer here).
Are you calling the web service from client script or on the server side?
You may find sending a content type header to the server will help, e.g.
'application/json; charset=utf-8'
On the client side, I use prototype client side library and there is a contentType parameter when making an Ajax call where you can specify this. I think jQuery has a getJSON method.
Alternative: Use a generic HTTP handler (.ashx) and use your favorite json library to manually serialize and deserialize your JSON.
I've found that complete control over the handling of a request and generating a response beats anything else .NET offers for simple, RESTful web services.