In this article I will explain with an example, how to pass (send) JSON object values from Controller to View in ASP.Net MVC Razor.
In order to return JSON object values, the JsonResult return type is used for the Action method inside Controller in ASP.Net MVC Razor.
Model
Following is a Model class named PersonModel with two properties i.e. Name and DateTime.
public class PersonModel
{
///<summary>
/// Gets or sets Name.
///</summary>
public string Name { get; set; }
///<summary>
/// Gets or sets DateTime.
///</summary>
public string DateTime { get; set; }
}
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 jQuery POST operation
This Action method handles the call made from the jQuery POST function from the View.
Note: The following Action method handles POST call and will return JSON object and hence the return type is set to JsonResult.
The value of the name parameter is assigned to the Name property of the PersonModel object along with the Current DateTime and finally the PersonModel object is returned back as JSON to the jQuery POST function.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult PostMethod(string name)
{
PersonModel person = new PersonModel
{
Name = name,
DateTime = DateTime.Now.ToString()
};
return Json(person);
}
}
View
Next step is to add a View for the Controller and while adding you will need to select the PersonModel class created earlier.
![Pass (Send) JSON object values from Controller to View in ASP.Net MVC]()
Inside the View, in the very first line the PersonModel class is declared as Model for the 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 POST called is made to the Controller’s action method.
The URL for the jQuery POST call is set to the Controller’s action method i.e. /Home/PostsMethod. The value of the TextBox is passed as parameter and the returned response is displayed using JavaScript Alert Message Box
@model jQuery_POST_MVC.Models.PersonModel
@{
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 () {
$.post("/Home/PostMethod",
{ name: $("#txtName").val() },
function (response) {
alert("Hello: " + response.Name + " .\nCurrent Date and Time: " + response.DateTime);
}
);
});
});
</script>
</body>
</html>
Screenshot
![Pass (Send) JSON object values from Controller to View in ASP.Net MVC]()
Downloads
