I've been using jQuery a whopping 2 days now and I'm already amazed at how powerful it is. Using the jQuery .get() method, making AJAX calls to another page a snap.
Below are 2 examples of essential the same thing. The addNumbers_Click function just passes 2 integers to jQuery.giveMeSomething.aspx, adds the 2 values and returns the total back to this page to be displayed in the "results" div. Notice in the $.get() function that the first parameter is the URL to send the values to followed by the values to send in the URL string. Note that it doesn't use the typical page.aspx?value=somevalue constructor and takes are of all of that for you.
The second exampe, searchMovies_Click, does the same thing except passes a movie title to jQuery.contact.form.response.gridview.aspx, looks up matching movie titles in the database and returns the results in a gridview. Now that's cool!
Here is a working demo
<script type="text/javascript">
function addNumbers_Click() {
var number1 = $('#number1').attr('value');
var number2 = $('#number2').attr('value');
$.get('jQuery.giveMeSomething.aspx', {number1: number1, number2: number2},
function(data) {
$('#results').empty().html(data);
// This is just another way of doing the same as the line above
// $("#results").empty().append(data);
});
}
function searchMovies_Click() {
var movietitle = $('#movietitle').attr('value');
$.get('jQuery.contact.form.response.gridview.aspx', {title: movietitle},
function(data) {
$('#movieResults').empty().html(data);
});
}
</script>
<body>
<input type="text" id="number1" value="0" /> + <input type="text" id="number2" value="0" />
<input type="button" onclick="addNumbers_Click();" value="Add Numbers" />
<div id="results"></div>
<p />
<input type="text" id="movietitle" />
<input type="button" onclick="searchMovies_Click();" value="Search Movies" />
<div id="movieResults"></div>
<p />
</body>
** jQuery.giveMeSomething.aspx **
<%@ Page Language="VB" %>
<script runat="server">
Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim intNumber1 As Integer = Request("number2")
Dim intNumber2 As Integer = Request("number1")
Response.Write("The answer is " & intNumber1 + intNumber2 & ". <b>Thanks for playing </b>")
End Sub
</script>
** 'jQuery.contact.form.response.gridview.aspx **
<%@ Page Language="VB" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<script runat="server">
Sub Page_Load()
If Not Page.IsPostBack Then
Dim strTitle As String = Request("title")
lblTitle.Text = strTitle
BindGridView(strTitle, "Title")
End If
End Sub
Sub BindGridView(ByVal strTitle As String, ByVal strSortOrder As String)
Dim con As New SqlConnection(ConfigurationManager.ConnectionStrings("MyDatabase").ConnectionString)
Dim strSqlText As String = "SELECT Title, Director FROM Movies WHERE Title LIKE '%" & strTitle & "%' ORDER BY " & strSortOrder
Dim cmd As New SqlCommand(strSqlText)
con.Open()
cmd.Connection = con
dgMovies.DataSource = cmd.ExecuteReader(CommandBehavior.CloseConnection)
dgMovies.DataBind()
con.Close()
con.Dispose()
End Sub
Sub SortGridView(ByVal Sender As Object, ByVal e As GridViewSortEventArgs)
BindGridView(lblTitle.Text, e.SortExpression.ToString())
End Sub
</script>
<html>
<head><title></title>
</head>
<body>
<form runat="server">
<asp:gridview runat="server" CellPadding="4"
ForeColor="#333333" GridLines="None"
AllowSorting="true" OnSorting="SortGridView"
id="dgMovies" Width="80%"
HorizontalAlign="Center"
Font-Names="Tahoma"
Font-Size="Small"
EmptyDataText="No records were found">
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:gridview>
<asp:Label ID="lblTitle" runat="server" Visible="false" />
</form>
</body>
</html>