Async Databinding in ASP.NET

23 May, 2009 AJAX,ASP.NET

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.

  1. A database obviously
  2. A table with data in it obviously
  3. A stored procedure to pull the data
  4. A function to call the stored procedure
  5. A web service call to call the function
  6. A Javascript call to the web service (AJAX)
  7. 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!

4 Comments for this entry

  • Mark Vice, June 12th, 2010 on 6:18 pm

    I love it!

  • Karlyn Minton, May 27th, 2010 on 8:13 am

    Thank you for another informative blog. Where else could I get that kind of info written in such a perfect way? I have a project that I am just now working on, and I have been on the look out for such information.

  • justin, April 22nd, 2010 on 5:15 am

    Thanks Darron. Let us know if you have any specific questions.

  • Darron Freman, April 22nd, 2010 on 5:08 am

    I am brand-new to blogging and actually loved your website. I am going to bookmark your site and keep checking you out. Thanks for sharing your website.