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. The sample project (available on Github) has been tested in Visual Studio 2012 and Xamarin on OS X.
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.
This tutorial will walk you through creating a project from start to finish. You’ll also be introduced to a cast of squirrels (such as @acommonsquirrel and Foamy the Squirrel). To get started, 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 aSquirrel – 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) { return false; } #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
