In this article I will explain with an example, how to get and display Current Date and Time from Controller using jQuery AJAX in ASP.Net MVC Razor.
The Current Date and Time will be determined inside the Controller’s Action method which will be later sent to the View for display using jQuery AJAX in ASP.Net MVC Razor.
 
 
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
 
Action method for handling AJAX POST operation
This Action method handles the call made from the jQuery AJAX function from the View.
Note: The following Action method handles AJAX calls and since a String value is returned, the return type is set to ContentResult.
 
The value of the name parameter along with the Current Date and Time is returned back to the View as a String value.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
 
    [HttpPost]
    public ContentResult AjaxMethod(string name)
    {
        string currentDateTime = string.Format("Hello {0}.\nCurrent DateTime: {1}", name, DateTime.Now.ToString());
        return Content(currentDateTime);
    }
}
 
 
View
The View consists of an HTML TextBox element and a Button. The Button has been assigned a jQuery click event handler and when the Button is clicked a jQuery AJAX called is made to the Controller’s action method.
Note: For more details on using jQuery AJAX in ASP.Net MVC, please refer my article ASP.Net MVC: Call Controller Method from View using jQuery AJAX.
 
The URL for the jQuery AJAX call is set to the Controller’s action method i.e. /Home/AjaxMethod. The value of the TextBox is passed as parameter and the returned response is displayed using JavaScript Alert Message Box.
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <input type="text" id="txtName"/>
    <input type="button" id="btnGet" value="Get Current Time"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnGet").click(function () {
                $.ajax({
                    type: "POST",
                    url: "/Home/AjaxMethod",
                    data: '{name: "' + $("#txtName").val() + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        alert(response);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            });
        });
    </script>
</body>
</html>
 
 
Screenshot
Get and Display Current Date and Time from Controller using jQuery AJAX in ASP.Net MVC
 
 
Downloads
Download Code