Sonu on .NET

This is a quick how to post for everyone that would like to get started with the AjaxDataControls. I will cover all steps one by one to show you easy the controls can be used.

Open Visual Studio 2005 and create a new ASP.NET Ajax Enabled Website:

Add a reference to the AjaxDataControls.dll to your bin folder. You can download the binaries from here.

Once you have added the dll, we need to make some small changes to the web.config and add the following line between the <controls> section:

<add tagPrefix="AjaxData" namespace="AjaxDataControls" assembly="AjaxDataControls"/>

Your section should look like this now:

<pages>
  <controls>
    <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, 
    Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
    <add tagPrefix="AjaxData" namespace="AjaxDataControls" assembly="AjaxDataControls"/>
  </controls>
</pages>

If you want to return DataTables from your webservice or pageMethods you will also need to declare the following converters:

<jsonSerialization maxJsonLength="4194304">
  <converters>
    <add name="DataSetConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataSetConverter, Microsoft.Web.Preview"/>
    <add name="DataRowConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataRowConverter, Microsoft.Web.Preview"/>
    <add name="DataTableConverter" type="Microsoft.Web.Preview.Script.Serialization.Converters.DataTableConverter, Microsoft.Web.Preview"/>
  </converters>
</jsonSerialization>

Besides that you will need to download the ASP.NET Futures and add the binaries Microsoft.Web.Preview.dll to your website project.

This should go in between the <scripting>/<webServices> section.

You are now done with the web.config.

Now let us start with a simple webservice that will return some test data. Right click on the project and select "Add New Item" and select "Web Service" and give it the name DataService.asmx.

Open the DataService.vb and add the following namespace:

Imports System.Web.Script.Services
Imports System.Data

Replace this line:

<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _

with:

<ScriptService()> _

Add a test function that will return a DataTable with some test data:

<WebMethod()> _
Public Function TestData() As DataTable
  Dim dt As New DataTable("t1")
  dt.Columns.Add("image")
  dt.Columns.Add("title")

  For i As Integer = 0 To 10
    dt.Rows.Add(New Object() {"c:\img" & i.ToString() & ".jpg", "image-" & i.ToString()})
  Next

  Return dt
End Function

Open the default.aspx and drop an AjaxData Gridview into the page and give it the id MyGrid. By default it will autogenerate the columns for you based on your datasource. Next we need to set the webservice that we created earlier into the ScriptManager:

<asp:ScriptManager ID="ScriptManager1" runat="server">
  <Services>
    <asp:ServiceReference Path="~/DataService.asmx" />
  </Services>
</asp:ScriptManager>

Below the GridView markup add the following BLOCKED SCRIPT

<script type="text/javascript">
var _grid = null;
function pageLoad(sender, e)
{
  _grid = $find('<%= MyGrid.ClientID %>');
  DataService.TestData(onLoadSuccess);
}
       
function onLoadSuccess(result)
{
  _grid.set_dataSource(result.rows);
  _grid.dataBind();
}       
</script>

The first function is called automatically by the asp.net ajax framework whenever the page has loaded. In that function I retrieve an object of the Gridview control and store it into a local variable. Then I make a webservice call to the TestData function and pass the onLoadSuccess function to it, which will be called when the call has finished.

The onLoadSuccess takes the returned data sets the datasource via the set_dataSource function and binds the grid. Here is the result:

You can download the ADCSample Website from here.