.NET and ASP.NET interview questions: – How will you consume web services in AJAX?

Answer:
The simple answer to the above question is by using the ‘asp:ServiceReference’ tag inside ‘asp:scriptmanager’ tag as shown in the below code snippet. Inside the ‘servicereference’ tag provide the ASMX file name.Following is the video for consuming webservices in AJAX: –


Now let’s go a for a long answer and a step by step answer.

Normally consumption of web services happens as shown in the below
figure. The browser Ajax controls calls the ASP.NET code and the ASP.NET code consumes the web service. But there are scenarios where you would like to call the web services directly from the Ajax JavaScript functions rather than calling via the behind code. This article will demonstrate how we can achieve the same.

 Step 1: Create your Customer Class

The first step is to create the customer class as shown below. So our
customer class has 4 properties on customer id, first name, address and designation.

public class Customers
{
// private properties 
private int _intCustomerID;
private string _strFirstName;
private string _strAddress;
private string _strDesignation;

// Public property and 
public int CustomerID
{
get
{
return _intCustomerID;
}
set
{
_intCustomerID = value;
}
}

public string FirstName
{
get
{
return _strFirstName;
}
set
{
_strFirstName = value;
}
}

Step 2: Create your Web Service

The next step is we need to create the web service which exposes the
customer class to our UI. Below is a simple web service which has
encapsulated customer collection. In the constructor, we are loading some dummy data into the list of customers as shown in the below code snippet:

[System.Web.Script.Services.ScriptService]
public class Customer : System.Web.Services.WebService {

// Customer collection
List listcust = new List();
public Customer () 
{
//Load some dummy data in to customer collection.
listcust.Clear();
Customers cust = new Customers();
cust.CustomerID = 1;
cust.FirstName = "Taha";
cust.Address = "Live in India";
cust.Designation = "Software Developer";
listcust.Add(cust);

cust = new Customers();
cust.CustomerID = 2;
cust.FirstName = "Shyam";
cust.Address = "Live in Austrailia";
cust.Designation = "Web Designer";
listcust.Add(cust);

cust = new Customers();
cust.CustomerID = 3;
cust.FirstName = "Khadak";
cust.Address = "Live in London";
cust.Designation = "Architect";
listcust.Add(cust);
}

// This function exposes all customers to the end client’
[WebMethod]
public List LoadCustomers()
{
return listcust;
}

// This function helps us to get customer object based in ID

[WebMethod]
public Customers LoadSingleCustomers(int _customerid)
{
return (Customers)listcust[_customerid-1];
}

We are also exposing two functions through the web service, one which
gives out a list of customers and another which gives out individual
customer data based on customer id.

Step 3: Reference your Web Service using the asp:servicereference

Using the ‘asp:ServiceReference’, we will then point the path to the ASMX file as shown in the below code snippet. This will generate the JavaScript proxy which can be used to call the customer object.

Step 4: Call the Webservice and the JavaScript Code

Once you have defined the proxy, you can now call the ‘Customer’ proxy directly to make method calls.

function LoadAll() 
{
Customer.LoadCustomers(LoadCustomerToSelectOption, ErrorHandler, TimeOutHandler);
}

When you call the JavaScript proxy object, we need to provide three
functions; the first function (‘LoadCustomerToSelectOption’) will be called when the web service finishes and returns data. The data will be returned in the fill variable which will then be looped and added to the customer combo box.

function LoadCustomerToSelectOption(Fill)
{
var select = document.getElementById("cmbCustomers");

for (var i = 0; i < Fill.length; i++) 
{
var value = new Option(Fill[i].FirstName, Fill[i].CustomerID);
select.options.add(value);
}
}

There are two more functions which are attached; one which handles error and the other which handles time out. Below are the code snippets for the same:

function ErrorHandler(result) 
{
var msg = result.get_exceptionType() + "\r\n";
msg += result.get_message() + "\r\n";
msg += result.get_stackTrace();
alert(msg);
}
function TimeOutHandler(result) 
{
alert("Timeout :" + result);
}

Please click here to see more .Net and Asp.Net interview questions

Regards,

Visit Authors blog for more .Net and Asp.Net interview Question
Advertisements

About c# and .NET Interview questions

This blog is for developers who want to crack .NET and C# interviews. It has all tips and tricks needed to crack .NET interviews , C# interview , SQL Server interview , Java interview , WCF Interview , Silverlight interview , WPF interview , LINQ interview , Entity framework Interview. Do not forget to watch our Learn step by step video series. Learn MVC in 16 hours:- https://www.youtube.com/watch?v=Lp7nSImO5vk Learn AngularJS Step by Step:- https://www.youtube.com/watch?v=0kmdjqgO9IY Learn Design Pattern in 8 hours:- https://www.youtube.com/watch?v=YDobmucohqk Learn C# and .NET in 60 days:- https://www.youtube.com/watch?v=yh2SrzCkNQA Learn MSBI in 32 hours:- https://www.youtube.com/watch?v=mGPJx3ocFgg Learn SharePoint Step by Step in 8 hours:- https://youtu.be/C2fW76SwJNU
This entry was posted in Uncategorized and tagged , , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s