Calling a C# Function With jQuery AJAX [With Code]

Calling a C# Function With jQuery AJAX [With Code]

One of the most powerful features of jQuery is to perform an asynchronous HTTP request, also known as AJAX (Asynchronous JavaScript and XML). With AJAX you can update one or more areas of your web page without refreshing the whole page. Thus making your application more interactive, faster and reducing the server loads.

In this tutorial we will create a simple but powerful jQuery AJAX Example explaining how easily you can use it in your web application. We will also be doing jQuery Validation to prevent users from inputting wrong values in the textboxes.

jQuery AJAX Application Setup

We are creating this application in ASP.NET with C# as the programming language. We will be making AJAX call using jQuery AJAX method.

no-page-refresh-in-jquery-ajax There are two textboxes, one for name and other for email, and a submit button. When user fills both the textboxes and press this button, it sends the AJAX request to our c# function and no page postback happens.

The work of this C# function is to store the two textboxes information in our database. In the end the function returns the success or failed message depending up on whether the information is saved successfully in the database or not.

The HTML of the Web Page and Code of jQuery AJAX Method is given below:


<h1>Subscribe To Our Newsletter</h1>
<div id="errorDiv"></div>
            <input type="text" id="nameInput"/></td>
            <input type="text" id="emailInput" /></td>
        <td colspan="2">
            <input type="submit" id="submitButton" value="Submit"/></td>
<img src="Image/loading.gif" id="loadingImg" hidden="hidden"/>

The jQuery AJAX Method Calls the Below C# Function

public static string Subscribe(string name, string email)
    //Insert it to our database
    return "thanks "+name+", your email "+email+" is subscribed to our newsletter.";
Why we used [WebMethod] ?

It is an attribute that can be applied to certain functions in C#. It is necessary that this method should be static and must have the attribute of [WebMethod] so that it can be called with the jQuery AJAX Method.

jQuery AJAX Method

$(document).ready(function () {
    $("#submitButton").click(function (e) {
        var result = ValidateAll();
        if (result == true) {
                type: "POST",
                url: "jquery-ajax.aspx/Subscribe",
                contentType: "application/json; charset=utf-8",
                data: '{"name":"' + $("#nameInput").val() + '","email":"' + $("#emailInput").val() + '"}',
                dataType: "json",
                success: function (msg) {
                    if (msg.d) {
                error: function (req, status, error) {
                    alert("Error try again");
        return false;
  • We have called the jQuery AJAX method in the submit button click event.
  • We have given the C# function’s location to the ‘url’ field and passed the values of the two textboxes in the function parameter using the ‘data’ field.
  • Finally we have shown the return message given by our C# function in the errorDiv.

jquery ajax example

Please note that we have returned false in the last line of the click event so that the click event of this button does not bring postback to the page.

Showing Loading Image During jQuery AJAX Calls

We can use jQuery AJAX Events to show a loading image whenever a jQuery AJAX call is made. Similarly hiding this image when the AJAX call is finished. For this we can use the “ajaxStart” and “ajaxStop” functions. The updated code is given below:

$(document).ready(function () {
    $(document).ajaxStart(function () {

    $(document).ajaxStop(function () {

    //jQuery AJAX Method


The jQuery AJAX is very useful in making complex looking things in a better manner. With it you will reduce your code length and will make your web application faster, manageable and lighter. jQuery AJAX will also benefit your server by giving it less load so using it is a win-win situation for both website administrators and their customers.

More jQuery Tutorial

1. jQuery Validation of Email, Number, Checkbox and More.
2. How to Make Sticky Ads with jQuery Effortlessly.
3. Creating jQuery Expand Collapse Panels In HTML.

Share this article -



This article has been written by the Technical Staff of YogiHosting. Check out other articles on "WordPress, SEO, jQuery, HTML" and more.