Calling web service asynchronously using jquery ajax
In this article, we will see how to get data from database using jquery ajax asynchronously. We will also see how to show the data retrieved from the database onto the web page using Json
Since we are going to use Json, it is very important to have a brief knowledge of json.
What is JSON format?
JSON is a lightweight data-interchange format. Like XML, it is platform independent, easily readable and can be implemented easily in any application. Technically, JSON forms a subset of JavaScript object literal. Data stored in json format is parsed very easily and quickly by JavaScript application and hence becomes the best choice for asynchronous based web requests
Let us directly start with the example to get a better idea.
1) First I will add a class with various properties which would be used for displaying data on front end side. My class would look like
public class DataModel
{
public string EmailId
{
get;
set;
}
public string Name
{
get;
set;
}
public string Gender
{
get;
set;
}
public int Salary
{
get;
set;
}
}
I would be displaying four values (Email Id, name , gender, salary) on the front end side.
2) Let us now add a web service where we would make database call to retrieve data. For this example, I have created dummy data without making actual database call. My web service code would look like
[WebService(Namespace = "https://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class DBCall : System.Web.Services.WebService
{
[WebMethod]
public List<DataModel> GetData(string Gender)
{
List<DataModel> data = new List<DataModel>();
data.Add(new DataModel() {EmailId = "[email protected]", Name = "sarin", Gender = "Male", Salary = 60000 });
data.Add(new DataModel() {EmailId = "[email protected]", Name = "sachin", Gender = "Male", Salary = 800000 });
data.Add(new DataModel() {EmailId = "[email protected]", Name = "katrina", Gender = "Female", Salary = 10000 });
return data.Where(x => x.Gender == Gender).ToList();
//return data;
}
}
Don’t remember to add the line [System.Web.Script.Services.ScriptService] in your service code behind. Otherwise, JavaScript would not have access to the above function (Getdata)
In the above code, I have created a list of type data model and have added various dummy data. Then based on the incoming paraamter ‘Gender’, I would return the filter data.
3) On the HTML side, I would add the following labels and a button to show the data
<asp:Button ID="btnGetMsg" runat="server" Text="Click Me" OnClientClick="DisplayMessageCall();return false;" />
<asp:Label ID="txtName" runat="server" Text=""></asp:Label><br />
<asp:Label ID="txtEmailId" runat="server" Text=""></asp:Label><br />
<asp:Label ID="txtGender" runat="server" Text=""></asp:Label><br />
<asp:Label ID="txtSalary" runat="server" Text=""></asp:Label><br />
4) On click of button, I would be calling javascript function DisplayMessageCall(). Code for this function is
var pageUrl = '<% =ResolveUrl("~/DBCall.asmx")%> '
$.ajax( {
type: "POST",
url: pageUrl + "/GetData",