Json has become one of the most popular form of data interchange method and being tightly integrated in the mvc framework makes it very easy to use. I will be demonstratating a very usefull technique of passing a response in an Ajax style using JsonResult (It is a class that is used in mvc framework to pass a json formatted content to the response).
Model
public class Users
{
public int UserId { get; set; }
public string UserName { get; set; }
}
Controller
public ActionResult Index()
{
return View();
}
public JsonResult GetUsers()
{
List<Users> users = new List<Users>()
{
new Users
{
UserId =1, UserName ="kaunain"
}};
return this.Json(users,JsonRequestBehavior.AllowGet);
}
View
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$.getJSON("/Home/GetUsers", null, function (data) {
$.each(data, function (index, users) {
$("p").text(users.UserName);
});
});
});
</script>
Updated view for multiple users
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$.getJSON("/Home/GetUsers", function (data) {
var items = [];
$.each(data, function (key, users) {
items.push('<li id="' + users.UserId + '">' + users.UserName + '</li>');
});
$('<ul/>', {
'class': 'Users-list',
html: items.join('')
}).appendTo('p');
});
});
</script>
Lastly specify Home/GetUsers route in global.asax.
Comments
Post a Comment