This tutorial was created with Visual Studio .NET 2008, but can still be recreated with 2005. Microsoft's ASP.NET AJAX Extensions for 2005 can be downloaded at this link.
In this tutorial, we will look at how we can use the GridView Control to display data Asynchronously, and how we can sort data in real-time, using AJAX. We will simply create a sample database, but you can use your own if you have one in mind, and we will add a button and a GridView to the ASPX page. Then we will display the data upon button click and allow sorting in real-time.
Try Server Intellect for Windows Server Hosting. Quality and Quantity!
The first thing we will do is create the sample database. For this example, we will just use a table with names and cities, with some sample data. The next thing we will do is add the button, gridview and sqldatasource - then create the data source to our database:
<form id="form1" runat="server">
<asp:Button ID="butPopulate" runat="server" Text="Get Data"
onclick="butPopulate_Click" /><br />
<br />
<asp:GridView ID="GridView1" runat="server" Visible="False" Width="415px"
AllowSorting="True" DataSourceID="SqlDataSource1"></asp:GridView>
<br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [Table1]"></asp:SqlDataSource>
|
We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.
Notice that we have also associated the datasource with our gridview, set our gridview to allow sorting, and created a click event for our button. This click event will make the gridview visible, when clicked:
protected void butPopulate_Click(object sender, EventArgs e)
{
GridView1.Visible = true;
} |
Yes, it is possible to find a good web host. Sometimes it takes a while. After trying several, we went with Server Intellect and have been very happy. They are the most professional, customer service friendly and technically knowledgeable host we've found so far.
At present, the functionality will work as intended, but the whole page will post back - creating a delay for the user. What we want to do is to AJAX-enabled this page. We will add a ScriptManager and an UpdatePanel, so our ASPX page will now look something like this:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="butPopulate" runat="server" Text="Get Data"
onclick="butPopulate_Click" /><br />
<br />
<asp:GridView ID="GridView1" runat="server" Visible="False" Width="415px"
AllowSorting="True" DataSourceID="SqlDataSource1"></asp:GridView>
<br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [Table1]"></asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel> |
We moved our web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
Our entire code-behind looks like this:
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void butPopulate_Click(object sender, EventArgs e)
{
GridView1.Visible = true;
} |
We should now have a fully-functional AJAX Web Application - one that allows the user to sort by column, and have the data re-arrange instantly.
