AJAX, short for Asynchronous JavaScript and XML, it isn’t a technology but rather a grouping of technologies. AJAX uses a communication technology (typically SOAP and XML) to send and receive an asynchronous request/response to the server, and then leverages presentation technologies (JavaScript, DOM, HTML, and CSS) to process the response. Applications using AJAX are legitimate today, because most browsers support the necessary technology.
First thing we need to do is to import the AJAX namespace from Ajax.DLL.The Ajax namespace contains Ajax.dll encapsulate Asynchronous JavaScript and XML in Bin folder. This is a combination of JavaScript and XML. The data is transferred in the form of XML.
Now we can simply just call the Script Manager Service or ToolKit Script Manager.
Also go into you code behind and import these 2 lines, since we will be using a database we made to pull data from, you will want to import these namespaces. We have included a database to use during the tutorial, feel free to download our source code.
First thing we need to do is to import the AJAX namespace from Ajax.DLL.The Ajax namespace contains Ajax.dll encapsulate Asynchronous JavaScript and XML in Bin folder. This is a combination of JavaScript and XML. The data is transferred in the form of XML.
Now we can simply just call the Script Manager Service or ToolKit Script Manager.
Also go into you code behind and import these 2 lines, since we will be using a database we made to pull data from, you will want to import these namespaces. We have included a database to use during the tutorial, feel free to download our source code.
Imports System.Data.SqlClient Imports System.DataWe migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect’s help, we were able to avoid any headaches!
In this tutorial, the only configuration step beyond that is to add the following code in the web.config file, inside the
If you have Visual Studio 2008 and above the AJAX Control Toolkit manager will make these changes for you automatically.
<httphandlers> <add verb="POST,GET" path="ajax/*.ashx" type="Ajax.PageHandlerFactory, Ajax"/> </httphandlers>We stand behind Server Intellect and their support team. They offer dedicated servers , and they are now offering cloud hosting !
In order to make server-side functions available through JavaScript, two things must be done. First, the function or functions in question must be marked with the Ajax.AjaxMethodAttribute . Second, the class containing these functions must be registered through a call to Ajax.Utility.RegisterTypeForAjax during the page load event.
Then we use GetData() even of btnGetData and display () event of DropDownList to do the work. The button btnGetData is an html button, it displays employee data without page post-back. When we choose a particular record in the Dropdownlist , the employee name and employee ID will be displayed in the label.
<script language="javascript" type="text/javascript">
function GetDataundefined) {
var response;
Ajax_CSharp.GetDataundefinedGetData_CallBack);
}
function GetData_CallBackundefinedresponse) {
var response = response.value;
if undefinedresponse == "Empty") {
alertundefined"No Record Found !!!");
}
else if undefinedresponse == 'Error') {
alertundefined"An Error occured in accessing the DataBase !!!");
}
else {
var arr = response.splitundefined"~");
var empID = arr[0].splitundefined",");
var empName = arr[1].splitundefined",");
document.getElementByIdundefined'dlistEmployee').length = 0;
for undefinedvar i = 0; i < empID.length; i++) {
var o = document.createElementundefined"option");
o.value = empID[i];
o.text = empName[i];
document.getElementByIdundefined'dlistEmployee').addundefinedo);
}
}
}
function displayundefined) {
var selIndex = document.getElementByIdundefined"dlistEmployee").selectedIndex;
var empName = document.getElementByIdundefined"dlistEmployee").optionsundefinedselIndex).text;
var empID = document.getElementByIdundefined"dlistEmployee").optionsundefinedselIndex).value;
document.getElementByIdundefined"lblResult").innerHTML = "You have selected " + empName + " undefined ID : " + empID + " )";
}
</script>
We used over 10 web hosting companies before we found
Server Intellect
. They offer
dedicated servers
, and they now offer
cloud hosting
!
The front end AjaxDataSearchVB.aspx page looks something like this:
As you can see it’s only a button and Drop Down list, and a label with an error message
Below we added
A button to invoke our button click event.
A simple ASP DropDown List.
Then we added a Label to report to our user that ” No Record was Selected.”
<div align="center">
<input id="Button1" onclick="GetDataundefined);" type="button" value="To Get Employee Data From DB"
style="width: 203px" />
<asp:dropdownlist id="dlistEmployee" runat="server" onchange="displayundefined);">
</asp:dropdownlist>
<asp:label id="lblResult" runat="server" text="No Record Selected"></asp:label>
</div>
If you’re looking for a really good web host, try Server Intellect – we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!
Now we will register ajax in the pageload function, and we will extract the data from the employee table of the database we used for the example. Use the SQLConnection Method to connect to the database.
We have included the database in our source code which is available for download.
Imports System
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Collections
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls
Imports Ajax
Class Ajax_CSharp
Inherits System.Web.UI.Page
Protected Sub Page_LoadundefinedByVal sender As Object, ByVal e As EventArgs)
Ajax.Utility.RegisterTypeForAjaxundefinedGetTypeundefinedAjax_CSharp))
End Sub
<Ajax.AjaxMethodundefinedHttpSessionStateRequirement.ReadWrite)> _
Public Function GetDataundefined) As String
Try
Dim con As New SqlConnectionundefinedConfigurationManager.AppSettingsundefined"conn"))
Dim cmd As New SqlCommandundefined"SELECT * FROM employee", con)
cmd.Connection.Openundefined)
Dim adapter As New SqlDataAdapterundefinedcmd)
Dim ds As New DataSetundefined"DataSet")
adapter.Fillundefinedds, "Table")
If ds.Tablesundefined0).Rows.Count <= 0 Then
Return "Empty"
Else
Dim empID As String = ""
Dim empName As String = ""
Dim i As Integer
For i = 0 To ds.Tablesundefined0).Rows.Count - 1
empID += ds.Tablesundefined0).Rowsundefinedi)undefined0).ToStringundefined) + ","
empName += ds.Tablesundefined0).Rowsundefinedi)undefined1).ToStringundefined) + ","
Next i
empID = empID.Substringundefined0, empID.Length - 1)
empName = empName.Substringundefined0, empName.Length - 1)
Return empID + "~" + empName
End If
Catch
Return "Error"
End Try
End Function
End Class
Remember we included the source file so you may follow along and get your hands dirty with the code.
See how easy that was?
Not as easy when,
We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect’s help, we were able to avoid any headaches!
Thank you for reading our tutorial on AJAX Controls, we aim to provide the best AJAX tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas. If you have any questions or concerns, please feel free to suggest a tutorial or you can comment below in the comments section.
