Pass multiple parameters to Web Method using jQuery

← PrevNext →

Well, our Web Service methods are serving well by returning multiple values to a jQuery Ajax request. We have discussed this in brief in an article before. And, now we shall see how to Pass multiple parameters to a Web Method using a jQuery Ajax call.

We do not want to make it look complicate by passing too many parameters to a web service method. Calls or requests made using Ajax should always be limited, that is, the data sharing must be reasonably sized. Typically, a web service uses XML format for sharing data either way. Since, XML is a language, which can easily be understood by other programming languages.

In case you want to submit form details which are big in size, use server side or asp.net code behind functions instead of web service, for better performance.

So, keeping the above point in mind, we will see a simple, light weight data sharing demo between the client and server using the above methods. A simple mathematical percentage calculation is ideal for our demo.

To calculate the percentage, we need two operands or values which will serve as multiple parameters, will be passed through an Ajax call and the web service will return the calculated percentage value.

WebService.asmx

Open Solution Explorer and right click the project and select Add New Item… In the Item dialog box find and select Web Service and click the Add button. The WebService.asmx file will be added to the project which will be located at the root of your website.

We also need to configure the web.config file to avoid Internal Server Error (500).

The Markup and CSS
<head>
    <title>Pass Multiple Parameters using jQuery Ajax to a Web Method</title>

    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" 
        rel="stylesheet" type="text/css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

    <style>
        div input { 
            border:solid 1px #CCC;
            border-radius:2px; 
            -moz-border-radius:2px; 
            -webkit-border-radius:2px; 
            padding:1px;
            width:70px;
            margin:10px 5px;
            background:#FFF;
        } 
    </style>
</head>
<body>
    <div>
        <input type="text" id="tbLftOpd" value="20" /> is what percent of 
            <input type="text" id="tbRtOpd" value="100" /> ?
        <input type="text" id="tbResult" disabled="disabled" value="" /> 
            %
        <input type="button" id="btCal" style="cursor:pointer" value="Calculate" />
    </div>
</body>
The Script
<script>
    $(document).ready(function() {
       BindControls();
    });

    function BindControls() {
        $("#btCal").click(function() {
            $.ajax({
                url: "WebService.asmx/Percentage",
                data: "{ 'dLftOperand': '" + $('input[id$=tbLftOpd]').val() + 
                    "', 'dRtOperand': '" + $('input[id$=tbRtOpd]').val() + "' }",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function(data) {
                    if (data.d != '') {
                        $('input[id=tbResult]').val(data.d);
                    }
                }
            });
        });
    }
</script>
The Web Service (C#)
using System;
using System.Web;
using System.Web.Services;

[WebService(Namespace = "https://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

    [WebMethod]
    public double Percentage(double dLftOperand, double dRtOperand) {
        return (dLftOperand / dRtOperand) * 100;
    }
}
(Vb.Net)
Imports System.Web
Imports System.Web.Services

<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="https://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class WebService
    Inherits System.Web.Services.WebService

    <WebMethod()> _
    Public Function Percentage(ByVal dLftOperand As Double, ByVal dRtOperand As Double) As Double
        Return (dLftOperand / dRtOperand) * 100
    End Function
End Class

Try it yourself

A Simple Percentage Calculator

  • is what percent of ?
  • %
  • What is % of ?
  • is % of what value ?
Note: Use the TAB button on your keyboard to hop through the boxes. Once you have put the figures, click the Calculate button.

That's it. Thanks for reading.

← PreviousNext →


Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.
Delivered by FeedBurner