Introduction:

This article we will explain how to create a web service in ASP.NET and how to call webservice using jQuery ajax in asp.net.

Description:
What is Web Service
A "web service is the communication platform between two different or same platform applications that allows to use their web method."
Once a web service is created and hosted on the server in the internet it can be consumed by any kind of application developed in any technology.

How to create a Web Service
Let us implement create a sample Asp.Net Application and add web service in ASP.Net application. Open Visual Studio and click on  File menu=> New=> Project.

Call ASP.NET Web Service Using jQuery Ajax

In the following figure select “Templates”, Visual C#, then ASP.NET Web Application, and here I give the name of project “webservice”. You can give the project name as you wish.

And then click on “OK” button

Call ASP.NET Web Service Using jQuery Ajax

Now right click on project name “webservice” to add Role.asmx like as  following figure.

Call ASP.NET Web Service Using jQuery Ajax

Choose the Web Service template and Enter the name (for example: Role.asmx) then click on "Add".

Call ASP.NET Web Service Using jQuery Ajax

This will create the following two file

.Call ASP.NET Web Service Using jQuery Ajax

Open the file Role.asmx.cs and write the following code

 <%@ WebService Language="C#" Class="Role" %>
 
using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data;
using System.Collections.Generic;
using System.Web.Script;
using System.Web.Script.Serialization;
using System.Web.Script.Services;
using System.Text;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo= WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class Role : System.Web.Services.WebService
{
    [WebMethod]
    public string Add(string val1, string val2)
    {
        return (val1 + " " + val2).ToString();
    }
 
}

 

Attaching the WebMethod attribute to a Public method indicates that you want the method exposed as part of the XML Web service. You can also use the properties of this attribute to further configure the behavior of the XML Web service method. The WebMethod attribute provides the following properties


  • 1. BufferResponse
  • 2. CacheDuration
  • 3. Description
  • 4. EnableSession
  • 5. MessageName
  • 6. TransactionOption

Now right click on project name “webservice” to add WebService.aspx like as  following figure.

Call ASP.NET Web Service Using jQuery Ajax

Open the file WebService.aspx and write the following code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebService.aspx.cs"
   
Inherits="webservice.WebService" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
 
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table border="2" cellpadding="2" cellspacing="2">
                <tr>
                    <td align="right">
                        <asp:Label ID="Label1" runat="server" Text="Enter 1st Name"></asp:Label>
                    </td>
                    <td align="left">
                        <asp:TextBox ID="txtnum1" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <asp:Label ID="Label2" runat="server" Text="Enter 2nd Name"></asp:Label>
                    </td>
                    <td align="left">
                        <asp:TextBox ID="txtnum2" runat="server"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <asp:Label ID="Label3" runat="server" Text="Result"></asp:Label>
                    </td>
                    <td align="left">
                        <asp:Label ID="lblResult" runat="server"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td align="center">&nbsp;
                    </td>
                    <td align="center">
                        <asp:Button ID="btnSub" runat="server" Text="Submit" />
                    </td>
                </tr>
 
            </table>
        </div>
    </form>
    <script src="/Scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("[id*=btnSub]").click(function () {
                var val1 = $.trim($("[id*=txtnum1]").val());
                var val2 = $.trim($("[id*=txtnum2]").val());
                $.ajax({
                    url: '<%=ResolveUrl("~/MyWebService.asmx/Add")%>',
                    data: '{ val1:"' + val1 + '",val2:"' + val2 + '"}', // parameter map
                    type: "POST", // data has to be Posted                   
                    contentType: "application/json; charset=utf-8",
                    timeout: 120000,
                    dataType: "json",
                    success: function (result) {
                        $("[id*=lblResult]").text(result.d);
                    },
                    error: function (xhr, status) {
                       console.log(xhr.responseText);
                    }
                });
 
                return false;
            });
        });
    </script>
</body>
</html>

Now run your application and see output

Call ASP.NET Web Service Using jQuery Ajax

Enter 1st Name and 2nd Name then click on submit button then result will show like below:

 Call ASP.NET Web Service Using jQuery Ajax

I hope it will help to you after reading.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

you may also like