So in our last post we showed how to interact with the web server by doing a full roundtrip to the server without doing a full post back. I know kind of lackluster right but it is a building block for a greater concept that will lead to some very exciting things in this series. The current trend in Web Software Development is to get a Desktop Feel in a browser. So how do we do that? We do that by enabling partial rendering through the use of Asynchronous Javascript to allow interaction with the server without the appearance of a traditional postback.
Alright, so let’s get into it. If you don’t know how to setup your web project to interact with a web service asynchronously in ASP.NET (WITHOUT THE USE OF ASP.NET AJAX) check out our previous post Asynchronous Web Services with ASP.NET (without ASP.NET AJAX).
So there are several things that are required for this.
- A database obviously
- A table with data in it obviously
- A stored procedure to pull the data
- A function to call the stored procedure
- A web service call to call the function
- A Javascript call to the web service (AJAX)
- A DOM Element to render the data pulled by the AJAX Call
For this tutorial we will assume you have numbers 1 and 2 already done and will jump to number 3. For our purposes we have a created a database on SqlServer 2005 named “DemoDB”. We have set our connection string in our web.config file {we will do a tutorial on this soon as if you don’t know what you are doing this can be a pain in the butt}. We have created a table called “DemoData” and placed a single field in there named “MyData” and we have entered some data in there but for your purpose you can pull any single field for this demo from any table.
3. The stored proc
CREATE PROCEDURE sproc_GetTestData AS
BEGIN
SELECT MyData FROM DemoData
END
GO
4. A function to call the Stored Procedure {this may be over organized as you can combine this with Step 4} – you can put this in your own class file stored in the App_Code directory, for this purpose we are going to call ours Demo.vb
Here is what our class file looks like
Imports Microsoft.VisualBasic
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration.ConfigurationManager
Public Class Demo
Public Function GetData() As DataSet
Dim con As New SqlConnection(AppSettings(“connString”))
Dim da As New SqlDataAdapter(“sproc_GetTestData”, con)
da.SelectCommand.CommandType = CommandType.StoredProcedure
Dim ds As New DataSet()
da.Fill(ds)
Return ds
End Function
End Class
5. Back to our Web Service. We are using the same Web Service we configured with this project in our previous tutorial and we are simply going to add and Imports statement at the top to include our Class file that we created in Step 4 and create a new function that we can call asynchronously in our next steps.
Add this to the bottom of your Imports statements
Imports DemoImports System.Data
Imports System.Data.SqlClient
Now add this as a function in the Web Services file {this is the part that may seem strange since we are returning a serialize string we are going to loop through our dataset splitting it with a pipe “|” and return it as a string, stick with me}
<WebMethod()> _
Public Function GetData() As String
Dim demo As New Demo
Dim ds As New DataSet
ds = demo.GetData()
Dim returnString As String
For Each dr As DataRow In ds.Tables(0).Rows
returnString = returnString & dr.Item(“MyData”).ToString() & “|”
Next
Dim returnStringLength As Integer = returnString.Length – 1
returnString = Left(returnString, returnStringLength)
Return returnString
End Function
You may be tired of reading because I am tired of writing 
but we are almost there. Once you see this connect it will spark your thinking of how you can use it and bigger yet when you see the performance increase over using packaged ASP.NET AJAX you will really love it.
6. Call the Web Service from Javascript {we are going to use our same file as we did last time as it is already setup to interact with our web services file. We will create an Ordered List <ol> and we will write our data from our database to it with the click of a button with javascript.}
In default.aspx from our previous project let’s add an Ordered List to the body.
<ol id=”getMyData”>
<li>This is my data before AJAX</li>
<li>Another Pre-AJAX Item</li>
</ol>
Now let’s add a button to perform the AJAX callback.
<input type=”button” id=”btnGetData” value=”Get Data” onclick=”GetData()” />
Now let’s add the javascript, add this code to the <script> section in the <head> of your code.
function GetData() {
MyWebService.GetData(writeData);
}
function writeData(result, args) {
var MyOutput = document.getElementById(‘getMyData’);
MyArray = result.split(“|”);
var ArrayLength = MyArray.length – 1;
var theData = ”;
for (j=0; j <= ArrayLength; j++) {
theData = theData + ‘<li>’ + MyArray[j] + ‘</li>’;
}
MyOutput.innerHTML = theData;
}
That is it! We wrote it to the DOM Element! Contact me with any questions!