ASP.NET MVC - How to Use Ajax with Parameters

Ajax methodology in web development can or cannot have input query parameters for processing/loading web parts on the web page. However, complex logic and improved performance measures demand Ajax call to pass multiple input query parameters whether in a typical multiple parameter format or JSON input format.

 

Today, I shall be demonstrating the integration of Ajax calls by passing multiple input query parameters with the ASP.NET MVC5 platform.

 

 

Prerequisites

 

The following are some prerequisites before you proceed any further in this tutorial,

1. Knowledge of Jquery.
2. Knowledge of HTML.
3. Knowledge of JavaScript.
4. Knowledge of Bootstrap.
5. Knowledge of ASP.NET MVC5.
6. Knowledge of C# Programming.

The example code is being developed in Microsoft Visual Studio 2019 Professional.

 

Let's begin now.

 

Step 1

 

Create a new MVC web project and name it "MVCAjaxWithParam".

 

Step 2

 

Create a "Controllerss\HomeController.cs" file with default Index method and GetData(...) method with two input query parameters for Ajax call with following lines of code i.e.

...
        public ActionResult GetData(int customerID, string fname = "")
        {
            // Initialization.
            JsonResult result = new JsonResult();
            DataTable data = DataTable();
...
            // Load Data.
...
            // Filter data with input query parameters.
...
            // Prepare Ajax JSON Data Result.
            result = this.Json(JsonConvert.SerializeObject(data), JsonRequestBehavior.AllowGet);
...
            // Return info.
            return result;
        }
...

In the above code, I have created a simple “GetData(…)” method with ActionResult returning type for client-side ajax calling to return result data in JSON format. I have first loaded my data in DataTable structure, then I have applied the input query filter with OR condition and finally, I have prepared my JSON response.

 

Step 3

 

Now, create the subsequent view "Views\Home\Index.cshtml"of "Controllerss\HomeController.cs" index method and add table HTML tag as shown below i.e.

...
    <table class="table table-responsive table-striped table-bordered table-hover"
           id="TableId"
           cellspacing="0"
           align="center"
           width="100%">
    </table>
...

In the above code, I have created a simple responsive Bootstrap style HTML table tag structure. I will populate the data in this table using Ajax call.

 

Step 4

 

Now, create the JavaScript file "Scripts\script-custom-ajax.js" with the following lines of code i.e.

...

$(document).ready(function ()
{
    // Initialization
    var customerID = 23;
    var firstname = "John";

    $.ajax(
        {
            type: 'POST',
            dataType: 'JSON',
            url: '/Home/GetData',
            data: { customerID: customerID, fname: firstname },
            success:
                function (response)
                {
                    // Generate HTML table.
                    convertJsonToHtmlTable(JSON.parse(response), $("#TableId"));
                },
            error:
                function (response)
                {
                    alert("Error: " + response);
                }
        });
...

});

...

In the above code, I have made an Ajax call to my server-side at the load of the page to get input query base filter data, since I am now passing multiple query parameters to the Ajax call. After receiving the processed JSON data from the server-side you can utilize any logic of your own to convert the JSON data to HTML table.

 

Step 5

 

Now, execute the provided solution and you will be able to see the following in action i.e.

 

 

When I only pass single "CustomerID" input query parameter then I will get the following result as shown below i.e.:

 

 

Conclusion

 

In this article, you will learn integration of Ajax calls by passing multiple input query parameters with ASP.NET MVC5 platform. You will also learn to create a server-side method, which will be called by client-side Ajax call using Jquery. You will learn to make simple client-side Ajax calls at the load of the page and finally, you will learn to pass multiple input query parameters to the Ajax call.