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

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

In this jQuery AJAX Example you will learn the most powerful feature of jQuery which is performing an Asynchronous HTTP Request. It is 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 that will explain how easily you can use it in your web application. We will also be doing some jQuery Validation to prevent users from inputting wrong values in the text boxes.

jQuery AJAX Example Application

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 text boxes 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 text boxes information in the 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:

Page HTML

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

The jQuery AJAX Method Calls the Below C# Function

[WebMethod]
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] in this jQuery AJAX Example?

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) {
            $.ajax({
                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) {
                        $("#errorDiv").html(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 () {
        $("#loadingImg").show();
    });

    $(document).ajaxStop(function () {
        $("#loadingImg").hide();
    });

    //jQuery AJAX Method
});

DEMO DOWNLOAD

Conclusion
I hope you learned this jQuery AJAX Example and now can go on and use it in your websites. 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. How to Make Sticky Ads with jQuery Effortlessly.
2. Creating jQuery Expand Collapse Panels In HTML.

Share this article -

yogihosting

ABOUT THE AUTHOR

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