Ajax Service Methods: Returning Strong types or lists.
In all the examples we've seen so far, we've returned simple strings, integers, or a standard type / value. That's all fine and good, until we have something a little more complex to return, or need to return a list or array of something, or a list of type. In the following example I'll demonstrate through code how to accomplish just that.
So lets get started at our webservice first. I'll create a webservice in my project named WebService1.asmx. Inside it will be a class called WebService1. The first thing we need to do is add the class attribute that lets us call this through our JavaScript proxy.
<System.Web.Script.Services.ScriptService()> _
I'm going to go ahead and fire up my service to check it and test the hello world example, once I'm done with that, we can move on!
<?xml version="1.0" encoding="utf-8" ?> <string xmlns="http://tempuri.org/">Hello World</string>
Ok, I hope everyone checked their service, now...to create the complex type that we'll be returning, we need are going to add a new class file to our project, and call it widget.
I'm going to keep the example simple, so I've just wired up two properties, with their private members, and a default constructor with one overload so that I can new it in one line.
Public Class widget
Private _Name As String
Public Property Name() As String
Get Return _NameEnd Get
Set(ByVal value As String)
_Name = value
End Set
End Property
Private _Price As Decimal
Public Property Price() As Decimal
Get Return _PriceEnd Get
Set(ByVal value As Decimal)
_Price = value
End Set
End Property
Public Sub New()
End Sub
Public Sub New(ByVal Name As String, ByVal Price As Decimal)
_Price = Price
_Name = Name
End Sub
End ClassOk, so back to our webservice to do something with our widget! I'm going to mock up 5 widgets for this example, normally you'd connect to your datasource or collection object to get real life data.
<WebMethod()> _
Public Function GetWidgets() As List(Of widget)
Dim tempWidgets As New List(Of widget)
For I As Integer = 1 To 5
Dim tempWidget As New widget("Name:" & I, CDec(I))
tempWidgets.Add(tempWidget)
Next Return tempWidgetsEnd FunctionI can verify this is working by running the service again and getting this result:
<?xml version="1.0" encoding="utf-8" ?>
- <ArrayOfWidget xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/">
- <widget>
<Name>Name:1</Name>
<Price>1</Price>
</widget>
- <widget>
<Name>Name:2</Name>
<Price>2</Price>
</widget>
- <widget>
<Name>Name:3</Name>
<Price>3</Price>
</widget>
- <widget>
<Name>Name:4</Name>
<Price>4</Price>
</widget>
- <widget>
<Name>Name:5</Name>
<Price>5</Price>
</widget>
</ArrayOfWidget>
Ok, now for the fun part, lets work with this data coming back - lets get into the page we'd like to call the webservice, and wire it up. The first thing we'll need is a container to hold this data. I'm just loading up a div in this case, dont forget to set the ID so you can find it.
<div id="returnData">
</div>
In this case, I'm going to have a button fire the event that calls the webservice, so we'll add that too:
<asp:Button ID="button1" runat="server" OnClientClick="doWork" Text="Do Work" />
The last thing we need before we write our JavaScript is our service reference inside our script manager on the page.
<asp:ScriptManager ID="scriptmanager1" runat="server">
<Services>
<asp:ServiceReference Path="~/WebService1.asmx" />
</Services>
</asp:ScriptManager>
Ok, on to our Javascript!
I'm going to post the complete example in here - and let you guys parse through it. Please feel free to post comments or questions:
<script type="text/javascript" language="javascript">
function pageLoad(){ret = WebService1.GetWidgets(onComplete, onError, onTimeout);
}
function onComplete(result){var retData = new Array(5);
retData = result;
var strDiv = ""
var x = 0; for (x=0; x<5; x++) {strDiv = strDiv + retData[x].Name + " " + retData[x].Price + "<br />";
}
document.getElementById("returnData").innerHTML = strDiv;}
function onError(){} function onTimeout(){}</script>
As always, Happy Coding and good luck!
Bryan Sampica