Practical Approach To ASP.NET Web Services - Part Six - Calling ASP.NET Web Service From Java Script Using AJAX

Akshay Phadke
7y
3.9k
0
0

Article

This article is in continuation of my previous articles of "Practical Approach To ASP.NET Web Services" series. So, we will be using the same examples again.

First, will create a table called Students.

CreateTable tblStudents(ID intidentityprimarykey, Namenvarchar(50), Gender nvarchar(20), TotalMarks int)

Now, we will insert some values in it.

Insertinto tblStudents values('Akshay', 'Male', 900)
Insertinto tblStudents values('Milind', 'Female', 760)
Insertinto tblStudents values('Raghvan', 'Male', 980)
Insertinto tblStudents values('Umesh', 'Male', 990)
Insertinto tblStudents values('Gopal', 'Male', 440)

So, we have the following output.

output

The next step is to create a procedure.

CreateProc spGetStudentByID
@ID int
as
Begin
Select ID, Name, Gender, TotalMarks
from tblStudents where ID = @ID
End

Now, we have a stored procedure that will retrieve information by its ID.The name of the stored procedure is spGetStudentByID and it’s a simple straight forward Stored Procedure.

Next, let's create an empty application and add a class file (Student.cs) and a container class having get and set properties.

output

The next step is to add a Web Service.

Right click on project in the Solution Explorer and add a Web Service. Name it as StudentService.asmx.

Copy and paste the following code in StudentService.asmx.cs file. Make sure [System.Web.Script.Services.ScriptService] attribute is included. This attribute allows a web service to be called from JavaScript using ASP.NET AJAX.

It’s a simple straight forward ADO.NET code where we had included Student object and initiated that we had passed the connection string which we had passed in our Web.config file .

Then, we used SqlConnection object to initialize the connection and passed SQL command to pass our stored procedure. It's expecting a parameter, so we passed a parameter as ID and then we are opening our connection. Next, we are looping through each record.

Now, let's quickly check our Web Service and try to invoke it by ID.

JavaScript

So from the above output, our Web Service is working properly.

Next step is to add a webform. Right click project in the Solution Explorer and add a web form. This should add WebForm1.aspx.

Copy and paste the following HTML between the opening and closing <html></html> tags in WebForm1.aspx.

<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scripttype="text/javascript" language="javascript"> function GetStudentById() { var id = document.getElementById("txtStudentId").value; Webservice.StudentService.GetStudentByID(id, GetStudentByIdSuccessCallback, GetStudentByIdFailedCallback); } function GetStudentByIdSuccessCallback(result) { document.getElementById("txtName").value = result["Name"]; document.getElementById("txtGender").value = result["Gender"]; document.getElementById("txtTotalMarks").value = result["TotalMarks"]; } function GetStudentByIdFailedCallback(errors) { alert(errors.get_message()); } </script>
</head>
<body>
<formid="form1" runat="server">
<asp:ScriptManagerID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReferencePath="~/StudentService.asmx" /> </Services>
</asp:ScriptManager>
<tablestyle="font-family:Arial; border:1px solid black">
<tr>
<td><b>ID</b></td>
<td>
<asp:TextBoxID="txtStudentId" runat="server"></asp:TextBox>
<inputid="Button1" type="button" value="Get Student" onclick="GetStudentById()" /> </td>
</tr>
<tr>
<td><b>Name</b></td>
<td>
<asp:TextBoxID="txtName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td><b>Gender</b></td>
<td>
<asp:TextBoxID="txtGender" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td><b>Total Marks</b></td>
<td>
<asp:TextBoxID="txtTotalMarks" runat="server"></asp:TextBox>
</td>
</tr>
</table>
<asp:LabelID="lblPageTime" runat="server"></asp:Label>
</form>
</body>
</html>

Now, let's try to understand the code. We have added script manager control. In that, we have given the respective path of our web service. Now, in our table tag, we have to specify the id and click on Get details buttons. Our webservice will fetch the data with the help of AJAX.

Now, in script tag, we will create a function as GetstudentByid and we will be passing id. If it exists in database, then it will call another function GetStudentByIdSuccessCallback and will return the details from the database, otherwise it will raise an error.

Now, let's run our app and see the output.

JavaScript

As you can see from the above output, we have entered ID as 1 and clicked on GetStudent. The other details like Name, Gender, and Total marks are fetched from the database and are displayed in the respective textbox .

Up Next

Ebook Download

View all

KOTLIN FOR BEGINNERS

Read by 0 people

Download Now!

Learn

View all