MVC – Load and Retrieve Data with JSON

MVC – Load and Retrieve Data with JSON

Create a Action filter to execute action

public class JsonFilter : ActionFilterAttribute
{
public string Param { get; set; }
public Type JsonDataType { get; set; }
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
if (filterContext.HttpContext.Request.ContentType.Contains("application/json"))
{
string inputContent;
using (var sr = new StreamReader(filterContext.HttpContext.Request.InputStream))
{
inputContent = sr.ReadToEnd();
}
//var result = JavaScriptConvert.DeserializeObject(inputContent, JsonDataType);
//var result = new JavaScriptSerializer().DeserializeObject(inputContent);

JavaScriptSerializer jsonSerializer = new JavaScriptSerializer();

var result = jsonSerializer.GetType().GetMethod("Deserialize").MakeGenericMethod(new Type[] { JsonDataType }).Invoke(jsonSerializer, new object[] { inputContent });
filterContext.ActionParameters[Param] = result;
}
}
}



Create a model class
public class Task
{
[Required]
[DisplayName("Task Descr")]
public string Text { get; set; }

[DisplayName("Completed?")]
public bool Completed { get; set; }

}


Create a controller for json
public class JsonTestController : Controller
{
private static List taskList = new List();

static JsonTestController()
{
taskList.Add( new Task(){ Completed=false, Text="test1"});
taskList.Add( new Task(){ Completed=false, Text="test2"});
}
//
// GET: /JsonTest/
[HttpGet]
public ActionResult Index()
{
return View();
}

[HttpPost]
[JsonFilter(Param = "tasklist", JsonDataType = typeof(Task[]))]
public JsonResult AddTaskList(Task[] tasklist)
{
if (tasklist != null)
{
taskList.AddRange(tasklist);
}
return Json(new { msg = "record added." });
}

[AcceptVerbs(HttpVerbs.Post)]
[JsonFilter(Param = "task", JsonDataType = typeof(Task))]
public JsonResult AddTask(Task task)
{
if (task != null)
{
taskList.Add(task);
}
return Json(new { msg = "record added." });
}


[AcceptVerbs(HttpVerbs.Post)]
public JsonResult GetJsonTaskList()
{
Task[] tasks = taskList.ToArray();
return Json(tasks);
}

}
Add index.aspx in to the view/JsonTest folder

<script type="text/javascript">

function Task(text, completed) {
this.Text = text;
this.Completed = completed;
}

function getTaskList() {

$.ajax({
type: "post", //json
url: "/JsonTest/GetJsonTaskList",
success: function(result) {

var htmlData = ""
for (var i = 0; i < result.length; i++) {
htmlData += "<tr><td>" + result[i].Text + "</td><td>" + result[i].Completed + "</td></tr>";
}
$("#divTodolist").html("<table>" + htmlData + "</table>");
},
error: function(req, status, error) {
alert("Error occured.");
}
});
}
//refresh list
getTaskList();

//add records
function AddTaskList() {
//alert("Text=" + $("#Text").val() + "&Completed=" + $("#Completed").attr('checked') );
var tasklist = new Array();
//todoArray[0] = { Text: $("#Text").val(), Completed: $("#Completed")..attr('checked') };
//var postData = { todos: todoArray };

tasklist.push(new Task($("#Text").val(), $("#Completed").attr('checked')));
var postData = JSON.stringify(tasklist);
alert(postData);

$.ajax({
type: "post", //json
url: "/JsonTest/AddTaskList",
dataType: "json",
contentType: 'application/json',
//data: "Text=" + $("#Text").val() + "&Completed=" + $("#Completed").attr('checked'),
//data: $("#form0").serialize(),
data:postData,
success: function(result) {
alert("Record added.")
getTaskList();
},
error: function(req, status, error) {
alert("Error occured.");
}
});
}

function AddTask() {
//var tasklist = new Array();
//tasklist[0] = { Text: $("#Text").val(), Completed: $("#Completed")..attr('checked') };
//var postData = { todos: todoArray };

var task =new Task($("#Text").val(), $("#Completed").attr('checked'));
var postData = JSON.stringify(task);
alert(postData);

$.ajax({
type: "post", //json
url: "/JsonTest/AddTask",
dataType: "json",
contentType: 'application/json',
//data: "Text=" + $("#Text").val() + "&Completed=" + $("#Completed").attr('checked'),
//data: $("#form0").serialize(),
data: postData,
success: function(result) {
alert("Record added.")
getTaskList();
},
error: function(req, status, error) {
alert("Error occured.");
}
});

}



$(document).ready(function() {
$('#AddTaskList').click(function() {
AddTaskList();
return false;
});

$('#AddTask').click(function() {
AddTask();
return false;
});

});
</script>

<h2>Add a Todo</h2>
<p>
Click on Add to Add a Todo.
</p>
<% Html.EnableClientValidation(); %>

<% using (Html.BeginForm()) { %>

<fieldset>
<legend>Todo Information</legend>
<table>
<tr>
<td>
<div class="editor-label">
<%= Html.LabelFor(m => m.Text)%>
</div>
<div class="editor-field">
<%= Html.TextBoxFor(m => m.Text, new { Width = "100px" })%>
<%= Html.ValidationMessageFor(m => m.Text)%>
</div>
</td>
<td>
<div class="editor-label">
<%= Html.LabelFor(m => m.Completed)%>
</div>
<div class="editor-field">
<%= Html.CheckBoxFor(m => m.Completed)%>
</div>
</td>
<td><input type="submit" id="AddTaskList" value="Add Task List" /> </td>
<td><input type="submit" id="AddTask" value="Add Task" /> </td>
</tr>
</table>
</fieldset>
<div id="divTodolist">

</div>

<% } %>