ASP.NET MVC: store model data as JSON string - asp.net-mvc-4

Question

I'm working on a (for the time being) self-learning project to create an Accounting Software package to manage Customer, Invoice, Estimate, etc. data.
I'm currently working on the Customer system. I know how to setup the application to store the different pieces of data in different columns, but I wanted to learn how to store everything as a JSON string.
Models:
[Table("Customers")]
public partial class CustomerDb
{
public int Id { get; set; }
public string Obj_Data { get; set; }
}
I then created a Customer model for the individual pieces of data:
public partial class Customer
{
public int Company_Id { get; set; }
public string Customer_Name { get; set; }
public string Customer_Company { get; set; }
public Dictionary<string, string> Phones { get; set; }
public List<Dictionary<string, string>> Emails { get; set; }
public string Terms { get; set; }
public Dictionary<string, string> Locations { get; set; }
public Dictionary<string, string> Preferences { get; set; }
public string Exemptions { get; set; }
}
Add New Customer View:
#model BSheets.Models.Custom.CustomerDb
#{
ViewBag.Title = "Add";
}
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Customer</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Obj_Data, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextAreaFor(model => model.Obj_Data, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Obj_Data, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Add" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
CustomerController:
using BSheets.Models;
using BSheets.Models.Custom;
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
namespace BSheets.Controllers
{
public class CustomerController : Controller
{
private BSheetsEntities _db = new BSheetsEntities();
private ViewModel _vm = new ViewModel();
// GET: Customer
public ActionResult Index(string search)
{
_vm.Companies = _db.Companies.ToList();
_vm.Customers = _db.Customers.ToList();
if (string.IsNullOrEmpty(search))
{
AllResults();
}
else
{
FilteredResults(search);
}
return View();
}
public PartialViewResult AllResults()
{
return PartialView(Json(_vm));
}
public PartialViewResult FilteredResults(string search)
{
return PartialView(Json(_vm));
}
// GET: Customer/Details/5
public ActionResult Details(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
CustomerDb customer = _db.Customers.Find(id);
if (customer == null)
{
return HttpNotFound();
}
return View(customer);
}
// GET: Customer/Add
public ActionResult Add()
{
return View();
}
// POST: Customer/Add
// To protect from overposting attacks, please enable the specific properties you want to bind to, for
// more details see http://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Add([Bind(Include = "ID,Obj_Data")] CustomerDb customer)
{
if (ModelState.IsValid)
{
_db.Customers.Add(customer);
_db.SaveChanges();
return RedirectToAction("Index");
}
return View(customer);
}
// GET: Clients/Update/5
public ActionResult Update(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
CustomerDb customer = _db.Customers.Find(id);
if (customer == null)
{
return HttpNotFound();
}
return View(customer);
}
// POST: Clients/Update/5
// To protect from overposting attacks, please enable the specific properties you want to bind to, for
// more details see http://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Update([Bind(Include = "ID,Obj_Data")] CustomerDb customer)
{
if (ModelState.IsValid)
{
_db.Entry(customer).State = EntityState.Modified;
_db.SaveChanges();
return RedirectToAction("Index");
}
return View(customer);
}
// GET: Clients/Remove/5
public ActionResult Remove(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
CustomerDb customer = _db.Customers.Find(id);
if (customer == null)
{
return HttpNotFound();
}
return View(customer);
}
// POST: Clients/Remove/5
[HttpPost, ActionName("Remove")]
[ValidateAntiForgeryToken]
public ActionResult RemoveConfirmed(int id)
{
CustomerDb customer = _db.Customers.Find(id);
_db.Customers.Remove(customer);
_db.SaveChanges();
return RedirectToAction("Index");
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
_db.Dispose();
}
base.Dispose(disposing);
}
}
}
In a sense, I managed to make this work: the views to Add/Update customer information have a single TextArea where I simply add the JSON string. Then, in the Customer Index view, I deserialize the JSON string into a Customer object and display the individual Customer values. I then created a separate app with formfields using HTML/JavaScript to spit out a JSON string that I can copy/paste into.
If it were just me using this, it's perfectly fine as is pasting in the JSON string. Let's say I wanted to setup my application for a different user, editing a minified JSON string is cumbersome.
I'd like to create a view based on the Customer model defined above and submit a JSON string to the database from the CustomerController. Can someone point me in the right direction? Thanks.

Answer 1

I took a break from this for a few weeks, and I finally came up with an answer.
If I'm understanding what's going on:
In the CustomerController's Update GET action, I simply deserialize the input CustomerDb's Obj_Data property (it's the JSON string in my case) as a Customer object. I then pass the Customer object back to the view and it's working nicely so far (of course I bind the relevant model properties):
// GET: Clients/Update/5
public ActionResult Update(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
CustomerDb customerDb = _db.Customers.Find(id);
if (customerDb == null)
{
return HttpNotFound();
}
Customer customer = JsonConvert.DeserializeObject<Customer>(customerDb.Obj_Data);
return View(customer);
}
// POST: Clients/Update/5
// To protect from overposting attacks, please enable the specific properties you want to bind to, for
// more details see http://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Update([Bind(Include = "Id,Customer_Name,Customer_Company,Phones,Emails,Terms,Locations,Preferences,Exemptions")] Customer customer)
{
if (ModelState.IsValid)
{
_db.Entry(customer).State = EntityState.Modified;
_db.SaveChanges();
return RedirectToAction("Index");
}
return View(customer);
}
There were a few things I had to change; for the customer model, I had to replace the Dictionary properties with separate string properties. For example, I removed the Phones Dictionary and replaced it with primary, alternate and fax string properties, and the Emails Dictionary is now a string. I'm sure there's a way to work with Dictionary properties, but every time I tested everything using them, I'd get a Null reference exception from them.
Then, some simple edits to the various controller actions to Add and Delete customer records from the database and it's working very nicely.
#Tetsuya Yamamoto, thanks again for the help.