ASP.NET MVC: How to Use Ajax without Passing Parameters

In order to improve UI interactivity in web development, it is often recommended to utilize AJAX to load/process small web parts/components independently on the same page.

Today, I shall be demonstrating the integration of Ajax call without passing any parameters with ASP.NET MVC5 platform.

Prerequisites:

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.

Download Now!

Let's begin now.

1) Create a new MVC web project and name it "MVCAjaxNoParam".  

2) Create a "Controllerss\HomeController.cs" file with default Index method and GetData(...) method for ajax call with following lines of code i.e.

...
        public ActionResult GetData()
        {
            // Initialization.
            JsonResult result = new JsonResult();
...
            // Initialization.
            DataTable data = DataTable();

            // Loading Data.
...
            // Prepare Json response.
            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 and simply load a sample data in DataTable structure and then prepare my json response.

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 simple created a simple responsive Bootstrap style HTML table tag structure. I will populate the data in this table using Ajax call.

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

...

$(document).ready(function ()
{
    $.ajax(
        {
            type: 'POST',
            dataType: 'JSON',
            url: '/Home/GetData',
            success:
                function (response)
                {
                    // Generate HTML table.
                    convertJsonToHtmlTable(JSON.parse(response), $("#TableId"));
                },
            error:
                function (response)
                {
                    alert("Error: " + response);
                }
        });
...
    function convertJsonToHtmlTable(jsonData, tableSelector)
    {
...
        // Initialization.
        var convertJsonToHTML;

        // Process received data.
...
        // Append received data to table
            $(tableSelector).append(convertJsonToHTML);
        }
    } 
});

...

In the above code, I have made an Ajax call to my server-side at the load of the page to get all the data, since, I am not passing any parameter to the Ajax call. I have process the receive data from the server side and convert the json data to HTML table.

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

Conclusion

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