Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Saturday, March 24, 2012

Call ASP.NET web service and return JSON using only html/javascript

I've implmented a pretty basic webservice as per below. I did a quick test in ASP.NET AJAX using the ScriptManager and it returned JSON-formatted data perfectly. I am now trying to do the same using just html/javascript with the XmlHttpRequest object.

Currently I've assigned the context-type to the XmlHttpRequest as is apparently required, and the webservice is "working", but only returning xml.Surprise

I'd really appreciate any help - or maybe even a better way to access the ASP.NET web service externally (i.e. outside of ASP.NET). Thanks.

PART A: ASP.NET Webservice snippet

[WebService(Namespace = "http://microsoft.com/webservices/";
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class ScriptingService : OrYxBaseWebService {
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public ScriptPersonRoleList GetActiveCategoryManagers() {
OrYxAppStatus myStatus = BFManager.GetInstance().CreateStatus(GetDefaultRequest());
return BFManager.ScriptingBF.GetActiveCategoryManagers(ref myStatus);
}
}

PART B: Index html

<html>
<head>
<title>Ajax Test Drive</title>
<script type="text/javascript" language="javascript">

function makePOSTRequest(url, parameters) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
// http_request.overrideMimeType('text/xml');
http_request.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("not good at all..");
}
}
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}

http_request.onreadystatechange = confirmResponse;
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-Type", "application/json");

http_request.send(parameters);
}

function confirmResponse() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
result = http_request.responseText;
document.getElementById('databox').innerHTML = result;
alert('Response:\n\n' + result);
} else {
alert('There was a problem with the request.');
}
}
}

function getData() {
var url = 'http://localhost/TVScriptingWebService/TVScripting.asmx/GetActiveCategoryManagers';
var request = makePOSTRequest(url, "");
}
</script>

</head>
<body onload="getData()">
<div style="width: 600px; padding: 10px; border: 1px solid;" align="center">
Test page</div>
<br>
<div id="databox">
</div>
<br>
</body>
</html>

What format do you want data in now?


I am wanting JSON not XML.


use text/json rather than application/json


Thanks for the response, I tried adding the following lines, but they all still return only xml as the responseText

http_request.setRequestHeader('Content-Type','text/json');


Could i again confirm that the webservice is actually returning JSON data?


The only time I have seen the webservice returns JSON data is when its called from within ASP.NET AJAX pages using the ScriptManager - which I don't want to do because these services are ultimately going to be called from a php application..

I am trying to call it using using only javascript/html and cannot get it to return JSON - only xml

Environment: ASP.NET 2.0, AJAX ASP.NET RC1. Tested on IIS5.1 and IIS6

Thanks


Well again it could be an inadvertant policy issue where microsoft doesnt want people to use other products just like datatable which is not returned as webservice. But you can always convert xml to json.

Let me see your code for consuming page in .net


Hi naturehermit,

Thanks again. You're right I could parse the xml into Json within the client, however I think that would eliminate one of the main advantages of using JSON..Wink

I couldn't get it to work so I've implemented my own IHttpHandlerFactor and IHttpHandler classes which was pretty easy. They now intercept the webservice calls and check whether use my classes, which return JSON using the JavaScriptSerializer, or the generic WebServiceHandlerFactory().

Currently the flag I've decided on is if there is an "application/OrYxJson" within the Context-Type property of the request. If this property is set, JSON gets returned, otherwise you get good old SOAP.

Early days, but so far so good..


Good luck mate, let me know if i could be of any help. Its always good to share your experiences


Yep agreed and willdo. Thanks.


naturehermit:

What format do you want data in now?


?


Hi,

I ran into same issue where I specified in the webservice JSON and yet XML was returned. Anyway, I found ot that it actually returns JSON. Try running fiddler to intercept the response from the webservice and you'll see the JSON string. Ignore the "_type".

Thanks

Calenderextender problem

when I use the CalenderExtender with a html button as popupbutton and a asp.net text field as target control it works fine. but the problem is when the calender becomes visible if there are any dropdownlist then it is on the calender. so part of the calender becomes invisible. i.e. goes behind the DropDownList.

but if there is a textbox in the position of the DropDownList then everything works fine.

how do i solve this issue? Any idea?

Hi

I'm afraid that it's a normal thing and no solution yet,just avoid it.

Best regards

CalenderExtender in frameset problem

I have created an AJAX webpage which has been placed inside a HTML frameset(intranet at work). Outside the frameset, the calender extender works fine but inside the frameset I get a javascript permissions error. Anyone else had this problem?

Thanks,

Steve

Hi Stevedale,

I think your problem is a caused by Frameset + javascript rather than AJAX. First , you should check whether they are in different domains. Then please remove the interactions between the two Frameset. CalendarExtender is generated by a bunch of javascript. Here are two wonderful links(Link1,Link2);

If all these don't work, please feel free to let me know. And a tiny repro is preferred.

Best regards,

Jonathan

Calender Extenders cssClass problem in Gridview

hi all

i have an HTML table in one of gridview's cell which is always hidden at startup. there is one textbox and one calander extender in that HTML table. In the same cell there is Link Button. On click event of that LinkButton i make that hidden table visible.(this process is done on server side). Problem is that when i perform this operation then after that Calander Extender's css class disturbs and does not show the appropriate design.

i dont know why this problem occured. and now this problem is solved automatically. I havn't done any thing for it.. this is really strangeHuh?

CalendarExtender: Popup does not go over elements with overflow:hidden

I've run into a problem whereby the calendar will not appear over html elements with overflow:hidden applied to them. This occurs in FireFox and Opera

Here's the code to replicate it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title> <style type="text/css"> div.row { background-color: #f7f7f7; margin: 0 0 10px 0; overflow: hidden; padding: 4px 0; zoom: 1; } div.row span { float: left; text-align: left; width: 200px; } div.row .controlGroup { width: 300px; float: left; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div class="row"> <asp:Label ID="Label1" Text="Date" runat="server" /> <div class="controlGroup"> <asp:TextBox ID="DateTextBox" runat="server" /> <ajaxToolkit:CalendarExtender ID="CalendarExtender1" TargetControlID="DateTextBox" runat="server" /> </div> </div> <div class="row"> <asp:Label ID="Label2" Text="Text" runat="server" /> <div class="controlGroup"> <asp:TextBox ID="Test6TextBox" runat="server" /> </div> </div> </form></body></html>
Bump, can anyone help on this one, i've tried setting the z-index on the ajax calendar to no avail.

I've managed to fix this issue in Opera with the following, still doesn't show correctly in FireFox though

.ajax__calendar div
{
z-index: 100;
}


Can anyone help on this one, still can't get the Calendar to display correctly in FireFox
Last bump!
This problem also exists on the AutoCompleteExtender