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

 

Let's begin now.

 

Step 1

 

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

 

Step 2

 

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

...
        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 loaded a sample data in DataTable structure and then 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:

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

...

$(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 loading of the page to get all the data, since, I am not passing any parameter to the Ajax call. I have processed the received data from the server side and converted the json data to HTML table.

 

Step 5

 

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

 

 

Conclusion

 

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