create a javascript function that will collect parts of the form data and then send that data to the ASHX handler. the ASHX handler will do some work and can respond with a response.
This is an example that I did to invoke a database to populate a grid using AJAX calls. There are better libraries for creating AJAX (prototype, ExtJS, etc.), but this is a raw deal. (I know this can be reorganized to be even cleaner, but you can get the idea well enough)
It works like this ...
- The user enters text in the search field,
- The user clicks the search button,
- JavaScript receives form data,
- javascript makes an ajax call for ASHX,
- ASHX receives the request,
- ASHX Query Database,
- ASHX JSON/Javascript,
- ASHX ,
- Javascript ,
- javascript Eval() ,
- javascript
html :
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="AjaxHelper.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtSearchValue" runat="server"></asp:TextBox>
<input id="btnSearch" type="button" value="Search by partial full name" onclick="doSearch()"/>
<igtbl:ultrawebgrid id="uwgUsers" runat="server"
//infragistics grid crap
</igtbl:ultrawebgrid>--%>
</div>
</form>
</body>
</html>
script, , :
function doSearch(){
var eleVal;
var eleBtn;
eleVal = document.getElementById('txtSearchValue').value;
eleBtn = document.getElementById('btnSearch');
eleVal = trim(eleVal);
if (eleVal.length > 0) {
eleBtn.value = 'Searching...';
eleBtn.disabled = true;
refreshGridData(eleVal);
}
else {
alert("Please enter a value to search with. Unabated searches are not permitted.");
}
}
function refreshGridData(searchString){
if (searchString =='undefined'){
searchString = "";
}
var xhr;
var gridData;
var url;
url = "DefaultHandler.ashx?partialUserFullName=" + escape(searchString);
xhr = GetXMLHttpRequestObject();
xhr.onreadystatechange = function() {
if (xhr.readystate==4) {
gridData = eval(xhr.responseText);
if (gridData.length > 0) {
clearAndPopulateGrid(gridData);
}
else {
}
}
}
xhr.open("GET", url, true);
xhr.send(null);
}
function clearAndPopulateGrid(jsonObject) {
var grid = igtbl_getGridById('uwgUsers');
var eleBtn;
eleBtn = document.getElementById('btnSearch');
for (x = grid.Rows.length; x >= 0; x--) {
grid.Rows.remove(x, false);
}
for (x = 0; x < jsonObject.length; x++) {
var newRow = igtbl_addNew(grid.Id, 0, false, false);
newRow.getCell(0).setValue(jsonObject[x][1]);
newRow.getCell(1).setValue(jsonObject[x][2]);
newRow.getCell(2).setValue(jsonObject[x][3]);
}
grid = null;
eleBtn.disabled = false;
eleBtn.value = "Search by partial full name";
}
function GetXMLHttpRequestObject() {
var XHR;
var ua = navigator.userAgent.toLowerCase();
try
{
if (!window.ActiveXObject)
{
XHR = new XMLHttpRequest();
}
else
{
if (ua.indexOf('msie 5') == -1)
{
XHR = new ActiveXObject("Msxml2.XMLHTTP");
}
else
{
XHR = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if (XHR == null)
{
throw "Unable to instantiate the XMLHTTPRequest object.";
}
}
catch (e)
{
alert("This browser does not appear to support AJAX functionality. error: " + e.name
+ " description: " + e.message);
}
return XHR;
}
function trim(stringToTrim){
return stringToTrim.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
}
ashx .
Imports System.Web
Imports System.Web.Services
Imports System.Data
Imports System.Data.SqlClient
Public Class DefaultHandler
Implements System.Web.IHttpHandler
Private Const CONN_STRING As String = "Data Source=;Initial Catalog=;User ID=;Password=;"
Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
context.Response.ContentType = "text/plain"
context.Response.Expires = -1
Dim strPartialUserName As String
Dim strReturnValue As String = String.Empty
If context.Request.QueryString("partialUserFullName") Is Nothing = False Then
strPartialUserName = context.Request.QueryString("partialUserFullName").ToString()
If String.IsNullOrEmpty(strPartialUserName) = False Then
strReturnValue = SearchAndReturnJSResult(strPartialUserName)
End If
End If
context.Response.Write(strReturnValue)
End Sub
Private Function SearchAndReturnJSResult(ByVal partialUserName As String) As String
Dim strReturnValue As New StringBuilder()
Dim conn As SqlConnection
Dim strSQL As New StringBuilder()
Dim objParam As SqlParameter
Dim da As SqlDataAdapter
Dim ds As New DataSet()
Dim dr As DataRow
'define sql
strSQL.Append(" SELECT ")
strSQL.Append(" [id] ")
strSQL.Append(" ,([first_name] + ' ' + [last_name]) ")
strSQL.Append(" ,[email] ")
strSQL.Append(" FROM [person] (NOLOCK) ")
strSQL.Append(" WHERE [last_name] LIKE @lastName")
'clean up the partial user name for use in a like search
If partialUserName.EndsWith("%", StringComparison.InvariantCultureIgnoreCase) = False Then
partialUserName = partialUserName & "%"
End If
If partialUserName.StartsWith("%", StringComparison.InvariantCultureIgnoreCase) = False Then
partialUserName = partialUserName.Insert(0, "%")
End If
'create the oledb parameter... parameterized queries perform far better on repeatable
'operations
objParam = New SqlParameter("@lastName", SqlDbType.VarChar, 100)
objParam.Value = partialUserName
conn = New SqlConnection(CONN_STRING)
da = New SqlDataAdapter(strSQL.ToString(), conn)
da.SelectCommand.Parameters.Add(objParam)
Try 'to get a dataset.
da.Fill(ds)
Catch sqlex As SqlException
'Throw an appropriate exception if you can add details that will help understand the problem.
Throw New DataException("Unable to retrieve the results from the user search.", sqlex)
Finally
If conn.State = ConnectionState.Open Then
conn.Close()
End If
conn.Dispose()
da.Dispose()
End Try
'make sure we have a return value
If ds Is Nothing OrElse ds.Tables(0) Is Nothing OrElse ds.Tables(0).Rows.Count <= 0 Then
Return String.Empty
End If
'This converts the table into JS array.
strReturnValue.Append("[")
For Each dr In ds.Tables(0).Rows
strReturnValue.Append("['" & CStr(dr("username")) & "','" & CStr(dr("userfullname")) & "','" & CStr(dr("useremail")) & "'],")
Next
strReturnValue.Remove(strReturnValue.Length - 1, 1)
strReturnValue.Append("]")
'de-allocate what can be deallocated. Setting to Nothing for smaller types may
'incur performance hit because of a forced allocation to nothing before they are deallocated
'by garbage collection.
ds.Dispose()
strSQL.Length = 0
Return strReturnValue.ToString()
End Function
ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property
End Class