Saturday, 20 June 2015

Call Web Service Using Jquery Ajax in JavaScript in Asp.Net C#

Call Web Service Using Jquery Ajax 


Web Service Form Addition Function Create Public and Call The One Form Using in JQuery Ajax Display Result  Particular Function  Calling Form Using Asp.Net C#.

                         Download Coding
                                           
                                        Download

                              DEMO


                       HTML CODING

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Run JavaScript function at specific intervals of time</title>
 <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        function CallAddition() {
            $.ajax({
                type: "POST",
                url: "WebService.asmx/Addition",
                data: "{ 'number1': " + $("#txtNumber1").val() + ", 'number2': " + $("#txtNumber2").val() + "}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                error: OnError
              
            });
        }

        function OnSuccess(data) {
            $("#lblResults").html(data.d);

        }
        function OnError(request, error) { 
            $("#lblResults").html("Invalid Input");
        }
        function ClearTextBoxes() {
            document.getElementById('txtNumber1').value = '';
            document.getElementById('txtNumber2').value = '';
        }
    </script>

   
</head>
<body>
    <form id="form1" runat="server">
      <div align="center">     
  <div>
            <table>
                <tbody>
                    <tr>
                        <td>
                            <asp:Label ID="Label1" runat="server" Text="Number1"></asp:Label>
</td>
                        <td>
                            <asp:TextBox ID="txtNumber1" runat="server" />
                        </td>
                    </tr>
                    <tr>
                       <td>
                            <asp:Label ID="Label2" runat="server" Text="Number2"></asp:Label>
</td>
                        <td>
                            <asp:TextBox ID="txtNumber2" runat="server" />
                        </td>
                    </tr>
                    <tr><td>
                        <asp:Label ID="Label3" runat="server" Text="Result"></asp:Label>
                        </td><td>
                            <asp:Label ID="lblResults" runat="server" Font-Size="Large" ForeColor="#CC3300"></asp:Label>
                        </td></tr>
                    <tr><td colspan="2>
                        <asp:Button ID="Button1" runat="server" OnClientClick="CallAddition(); return false;" Text="Add" />
&nbsp;
                        <asp:Button ID="Button2" OnClientClick="ClearTextBoxes();" runat="server" Text="Reset" />
                        </td></tr>
                </tbody>
            </table>    
           
            </div> 
</div>                  
        </form>
</body>
</html>
                     
           C# CODING(WebService.asmx)


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

/// <summary>
/// Summary description for WebService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// 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 WebService : System.Web.Services.WebService {

    public WebService () {

        //Uncomment the following line if using designed components
        //InitializeComponent();
    }

    [WebMethod]
    public int Addition(int number1,int number2)
    {
      
        return number1+number2;
       
    }
   
}













0 comments:

Post a Comment