c# barcode maker Implementing AJAX with jQuery in Visual C#

Maker Quick Response Code in Visual C# Implementing AJAX with jQuery

As you saw in Lesson 1, you can use AJAX to call back to the server from the client, get a response, and then update only a portion of the page without doing a refresh. This makes for a better, more interactive user experience. However, Lesson 1 relied on the ASP.NET AJAX Extensions controls to handle the details of setting up the client-to-server calls and the page update. The jQuery library provides similar AJAX functionality but does so by calling web services you define. You can call a stand-alone web service from jQuery and then use the results to update a portion of the page (without causing a refresh). Alternatively, you can write your code to call back to just the page itself and execute a method in the same way. You will take a look at both of these options.

Calling a Web Service with $.ajax()

The jQuery.ajax() method enables you to call a web service and then update your page with the results. This method performs an asynchronous HTTP request, passes data to the request, and gets the results. You can use this method for a variety of tasks, including loading and executing a .js file, posting data to a web form, getting the HTML of a page, and sending and receiving XML data. The typical use, however, is posting to web services for partial page updates. This method takes several name-value pairs as a parameter, called settings. The settings include the URL of your request, the content-type, the HTTP method (GET or POST), and the user name and password of the request. In fact, there are more than 20 settings with which you can work. Let s look at an example of using jQuery to call a typical ASP.NET web service (ASMX file). Note that web services are covered in detail in the 10. In this simple example, the web service takes an employeeId as a parameter and returns a name as a result. The first step is to set up the web service. The following code shows an example.

Sample of Visual Basic Code <System.Web.Script.Services.ScriptService()> _ Public Class EmployeeServiceVb Inherits System.Web.Services.WebService <WebMethod()> _ Public Function GetEmployee(ByVal employeeId As String) As String 'simulate employee name lookup Return "Jane Developer" End Function End Class Sample of C# Code [System.Web.Script.Services.ScriptService] public class EmployeeService : System.Web.Services.WebService { [WebMethod] public string GetEmployee(string employeeId) { //simulate employee name lookup return "Jane Developer"; } }

Notice the ScriptService attribute in the code. You adorn your code with this attribute to indicate that the service can be called from client-side script such as jQuery. The next step is to make the AJAX call from a webpage. Assume that you have a form (based on a master page) that allows a user to enter an employee ID and then click a search button with the ButtonSearch ID to trigger the client-side JavaScript. You would then write the jQuery code shown on the following page.

<script type="text/javascript"> $(document).ready(function () { $("#MainContent_ButtonSearch").click(function () { var empId = $("#MainContent_TextBoxEmpId").val(); $.ajax({ type: "POST", dataType: "json", contentType: "application/json", url: "EmployeeService.asmx/GetEmployee", data: "{'employeeId': '" + empId + "'}", success: function (data) { alert("Employee name: " + data.d); }, error: function () { alert("Error calling the web service."); } }); }); }); </script>

Let s walk through this code. Note that the code is bound to the button click event when the page loads. Next, the user s input is assigned to a variable, empId. Then the call to $.ajax() is made. Notice that the settings are passed as name-value pairs separated by a colon. There is no set order to these pairs. The following list describes each setting: