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

03:56:00  , , , , ,  No comments

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;
       
    }
   
}




First - Add New - WebService.asmx Form 




Next - Create Add Program - Public 






Next - Add - New WebForm - Select TextBox & Label From ToolBox






Next - Script File Add - JQuery Plugin - Call The WebService Form  - Assign  Result For Label






Next - Call Function  To Button 

0 comments:

Post a Comment