code-for-coffee/bindingJSON

## bindingJSON
ASP.NET MVC: Intro to MVC using Binding JSON objects to Models

This post is designed to assist in jump-starting your MVC (model-view-control) project binding JSON to models (using Ajax posts). I feel that this is a vital skill to any journeyman ASP.NET MVC developer. Before we start note that all examples using Xamarin (Mono 3.2.0) - this should be opened in Visual Studio 2010+.

If you're new to MVC, here is a brief explanation. This design pattern is designed to keep your code into specific parts dedicated for specific usage. Models are designed to represent your data objects. The controller works with/manipulates models (backend, server side code). It then generates a View (rendered HTML) that is presented to the user on their web browser. The Model and Controller are written in C# for this project. The View is rendered in pure HTML with Javascript.

Create a new MVC project and call it "bindingJSON" (using the standard, no authentication). Now, inspect the object you need to model. Using an object oriented approach, how would you create your item? We'll use a common squirrel as our object; so, create a new Model in your ASP.NET project called "Squirrel.cs". A squirrel has a few properties, such as:

name
age
acorns
gender
hobby

So, inside of your model you'll have the following class:

using System;

namespace bindingJSON
{
	public class Squirrel
	{
		public string Name { get; set; }
		public int? Age { get; set; }	// squirrels aren't required tell us their age
		public int Acorns { get; set; }
		public char Gender { get; set; }
		public string Hobby { get; set; }
	}
}

Next, we'll build out a simple controller. This controller will contain an ActionResult and a JsonResult method. This will be our "HomeController.cs". The thing to note is the use of the JsonResult. A JsonResult allows you receive an XmlHttpRequest (in Javascript) that will send JSON objects. You can send any object you want; we're going to expect a Squirrel - incomingSquirrel. It'll call a private function (just an example of what you can do with the object).

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace bindingJSON.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
			// Initial View
            return View();
        }

        [HttpPost]
        public JsonResult PostSquirrel(Squirrel incomingSquirrel)
        {
			string status = null;
			try {
				saveSquirrel(incomingSquirrel);
				status = "If you don't see this, something went wrong.";
			} catch (Exception e) {
				status = e;
			}
			return Json(status);
        }

		#region privateHelpers
		private Boolean saveSquirrel(Squirrel incomingSquirrel)
		{
			if (!incomingSquirrel.Age) {
				// do something...
				return false;
			} else {
				// do something positive!
				return true;
			}
		}
		#endregion
    }
}

Okay, so we have the model and controller built out. Now, we need to put together our view. We'll call it "Home/Index.cshtml". Inside, we're going to have just a few small parts. For sake of simplicity, I won't be using partial views to keep the project small. The view will put together a page that sends form data to the server (using Javascript and the JSONResult in your controller). In the view, we'll have a simple $.ajax method (via the jQuery library) that fetches the current values of each input, places them into a JSON object, and then sends it to our server. Note that on success of the ajax call you'll see a message in the error log. If you receive a server error (such as 500) then your model and JSON have errors (such as case sensitivity errors). Also note that you could send a Javascript array of JSON objects and have them bound on the server side using a List<Squirrel>() (ie: public ActionResult HiSquirrels(List<Squirrel> aTonOfSquirrels){}).

@model bindingJSON.Squirrel

@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Index</title>
</head>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		// when the DOM has fully loaded...
		$("#btnSubmit").bind("click", function() {
			var onEventLaunchSquirrel = new postSquirrel();
  			onEventLaunchSquirrel.launchSquirrel();
		});
	});
	function postSquirrel() {
		this.launchSquirrel = function() {

			// fetch values from input
			var name = $("Name").val();
			var age = $("Age").val();
			var acorns = $("Acorns").val();
			var gender = $("Gender").val();
			var hobby = $("Hobby").val();

			// build json object
			var squirrel = {
				Name: name,
				Age: age,
				Acorns: acorns,
				Gender: gender,
				Hobby: hobby
			};

			 $.ajax({
		        type: "POST",
		        url: "home/PostSquirrel",
		        traditional: true,
		        contentType: 'application/json; charset=utf-8',
		        data: JSON.stringify(squirrel),
		        success: function (data) { console.log(data) },
		        error: function (data) { console.log(data) }
    		});

		}
	}

</script>
<body>

<header>
	<hgroup>
		<h1>oh hey, a squirrel!</h1>
		<h3>we should interview it!</h3>
	</hgroup>
</header>

<section>
	<p>If the squirrel cooperates, record their information and send it to our server.</p>

	<p><input type="text" required="required" id="Name" placeholder="Enter the squirrel's name" /></p>
	<p><input type="number" id="Age" placeholder="squirrel's age (optional)" /></p>
	<p><input type="number" required="required" id="Name" placeholder="How many acorns do they own?" /></p>
	<p><input type="number" required="required" id="Name" placeholder="M or F? (single letter only)" size="1" /></p>
	<p><input type="string" required="required" id="Hobby" placeholder="How many acorns do they own?" /></p>

	<p><input id="btnSubmit" type="button" value="launch the squirrel through the internet!" /></p>

	<div id="status"></div>

</section>

</body>
</html>

So, now you have your full MVC application built (well, sort of). Once you submit the form the JSON object will be send to the JSONResult method on the server side and you can do whatever you need with it.

That's it! If you have any questions or spot any errors let me know. If anyone has problems with this working in Visual Studio I'll put together a project in 2013.

You can grab the source code here: https://github.com/code-for-coffee/mvcBindingJson
	ASP.NET MVC: Intro to MVC using Binding JSON objects to Models

	This post is designed to assist in jump-starting your MVC (model-view-control) project binding JSON to models (using Ajax posts). I feel that this is a vital skill to any journeyman ASP.NET MVC developer. Before we start note that all examples using Xamarin (Mono 3.2.0) - this should be opened in Visual Studio 2010+.

	If you're new to MVC, here is a brief explanation. This design pattern is designed to keep your code into specific parts dedicated for specific usage. Models are designed to represent your data objects. The controller works with/manipulates models (backend, server side code). It then generates a View (rendered HTML) that is presented to the user on their web browser. The Model and Controller are written in C# for this project. The View is rendered in pure HTML with Javascript.

	Create a new MVC project and call it "bindingJSON" (using the standard, no authentication). Now, inspect the object you need to model. Using an object oriented approach, how would you create your item? We'll use a common squirrel as our object; so, create a new Model in your ASP.NET project called "Squirrel.cs". A squirrel has a few properties, such as:

	name
	age
	acorns
	gender
	hobby

	So, inside of your model you'll have the following class:

	using System;

	namespace bindingJSON
	{
	public class Squirrel
	{
	public string Name { get; set; }
	public int? Age { get; set; } // squirrels aren't required tell us their age
	public int Acorns { get; set; }
	public char Gender { get; set; }
	public string Hobby { get; set; }
	}
	}

	Next, we'll build out a simple controller. This controller will contain an ActionResult and a JsonResult method. This will be our "HomeController.cs". The thing to note is the use of the JsonResult. A JsonResult allows you receive an XmlHttpRequest (in Javascript) that will send JSON objects. You can send any object you want; we're going to expect a Squirrel - incomingSquirrel. It'll call a private function (just an example of what you can do with the object).

	using System;
	using System.Collections.Generic;
	using System.Linq;
	using System.Web;
	using System.Web.Mvc;

	namespace bindingJSON.Controllers
	{
	public class HomeController : Controller
	{
	public ActionResult Index()
	{
	// Initial View
	return View();
	}

	[HttpPost]
	public JsonResult PostSquirrel(Squirrel incomingSquirrel)
	{
	string status = null;
	try {
	saveSquirrel(incomingSquirrel);
	status = "If you don't see this, something went wrong.";
	} catch (Exception e) {
	status = e;
	}
	return Json(status);
	}

	#region privateHelpers
	private Boolean saveSquirrel(Squirrel incomingSquirrel)
	{
	if (!incomingSquirrel.Age) {
	// do something...
	return false;
	} else {
	// do something positive!
	return true;
	}
	}
	#endregion
	}
	}

	Okay, so we have the model and controller built out. Now, we need to put together our view. We'll call it "Home/Index.cshtml". Inside, we're going to have just a few small parts. For sake of simplicity, I won't be using partial views to keep the project small. The view will put together a page that sends form data to the server (using Javascript and the JSONResult in your controller). In the view, we'll have a simple $.ajax method (via the jQuery library) that fetches the current values of each input, places them into a JSON object, and then sends it to our server. Note that on success of the ajax call you'll see a message in the error log. If you receive a server error (such as 500) then your model and JSON have errors (such as case sensitivity errors). Also note that you could send a Javascript array of JSON objects and have them bound on the server side using a List<Squirrel>() (ie: public ActionResult HiSquirrels(List<Squirrel> aTonOfSquirrels){}).

	@model bindingJSON.Squirrel

	@{
	Layout = null;
	}

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Index</title>
	</head>
	<script type="text/javascript" src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
	// when the DOM has fully loaded...
	$("#btnSubmit").bind("click", function() {
	var onEventLaunchSquirrel = new postSquirrel();
	onEventLaunchSquirrel.launchSquirrel();
	});
	});
	function postSquirrel() {
	this.launchSquirrel = function() {

	// fetch values from input
	var name = $("Name").val();
	var age = $("Age").val();
	var acorns = $("Acorns").val();
	var gender = $("Gender").val();
	var hobby = $("Hobby").val();

	// build json object
	var squirrel = {
	Name: name,
	Age: age,
	Acorns: acorns,
	Gender: gender,
	Hobby: hobby
	};

	$.ajax({
	type: "POST",
	url: "home/PostSquirrel",
	traditional: true,
	contentType: 'application/json; charset=utf-8',
	data: JSON.stringify(squirrel),
	success: function (data) { console.log(data) },
	error: function (data) { console.log(data) }
	});

	}
	}

	</script>
	<body>

	<header>
	<hgroup>
	<h1>oh hey, a squirrel!</h1>
	<h3>we should interview it!</h3>
	</hgroup>
	</header>

	<section>
	<p>If the squirrel cooperates, record their information and send it to our server.</p>

	<p><input type="text" required="required" id="Name" placeholder="Enter the squirrel's name" /></p>
	<p><input type="number" id="Age" placeholder="squirrel's age (optional)" /></p>
	<p><input type="number" required="required" id="Name" placeholder="How many acorns do they own?" /></p>
	<p><input type="number" required="required" id="Name" placeholder="M or F? (single letter only)" size="1" /></p>
	<p><input type="string" required="required" id="Hobby" placeholder="How many acorns do they own?" /></p>

	<p><input id="btnSubmit" type="button" value="launch the squirrel through the internet!" /></p>

	<div id="status"></div>

	</section>

	</body>
	</html>

	So, now you have your full MVC application built (well, sort of). Once you submit the form the JSON object will be send to the JSONResult method on the server side and you can do whatever you need with it.

	That's it! If you have any questions or spot any errors let me know. If anyone has problems with this working in Visual Studio I'll put together a project in 2013.

	You can grab the source code here: https://github.com/code-for-coffee/mvcBindingJson