Pass multiple parameters to WebMethod using jQuery

Last updated: 30th Jan 2023

The web service example that I have shared in my previous article, returns multiple values to a jQuery Ajax request. Now, in this article I’ll show you how to pass multiple parameters to an Asp.Net WebMethod using jQuery Ajax.

I don't want to make it look complicated by passing too many parameters to a "WebMethod". Calls (or requests) made using Ajax should always be limited. 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.

What the method will do?

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

WebService.asmx

Let's create the web service.

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.

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

👉 Do you know you can call a WebMethod using Pure JavaScript. See this article.

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

The Markup

Add few HTML elements on your web page. We need two textboxes to input numbers to calculate the percentage.

<head>
    <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>
</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>

This is how it will look.

image

The Script

Now let's make a request to web service using Ajax.

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

Try this Percentage Calculator tool that I have created using the above method.

← PreviousNext →