Pass multiple parameters to Web Method using jQuery

← PrevNext →

Well, the Web Service methods are serving well by returning multiple values to a jQuery Ajax request. I have discussed this in brief in one of my previous article. And, now we'll see how to pass multiple parameters to a Web Method using a jQuery Ajax call.

I don't want to make it look complicated 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 like 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).

👉 Do you know you can redirect to another page with Multiple Parameters using Pure JavaScript. See this article.

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 →