Introduction

This article explains the difference between JSON dates in ASP.NET MVC and the Web API. The Web API and ASP.NET MVC use different JSON serializers. In ASP.NET MVC the JSONDataContract Serializer is used and in the Web API the NewtonSoftJSON Serializer is used.

Now we can see the difference.

Step 1: Create Web API application

Use the following procedure to create the sample:

Step 2

Now add the model class to the project as in the following:

Add the following code:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. namespace JavaScriptAndDates.Models
  6. {
  7. public class ClassModel
  8. {
  9. public int ID { get; set; }
  10. public DateTime CurrentDate { get; set; }
  11. }
  12. }

Step 3

Now in the MVC controller "HomeController":

Add the following code:

  1. using JavaScriptAndDates.Models;
  2. using System;
  3. using System.Collections.Generic;
  4. using System.Linq;
  5. using System.Web;
  6. using System.Web.Mvc;
  7. namespace JavaScriptAndDates.Controllers
  8. {
  9. public class HomeController : Controller
  10. {
  11. //
  12. // GET: /Home/
  13. public ActionResult Index()
  14. {
  15. return View();
  16. }
  17. public ActionResult Indexapi()
  18. {
  19. return View();
  20. }
  21. public JsonResult SetData(ClassModel updates)
  22. {
  23. Console.WriteLine(updates.ID);
  24. Console.WriteLine(updates.CurrentDate);
  25. return Json(updates);
  26. }
  27. public JsonResult GetData()
  28. {
  29. return Json(new ClassModel { ID = 1, CurrentDate = DateTime.Now }, JsonRequestBehavior.AllowGet);
  30. }
  31. }
  32. }

Step 4

Now in the API controller "HomeController".

Add the following code:

  1. using JavaScriptAndDates.Models;
  2. using System;
  3. using System.Collections.Generic;
  4. using System.Linq;
  5. using System.Net;
  6. using System.Net.Http;
  7. using System.Web.Http;
  8. namespace JavaScriptAndDates.Controllers
  9. {
  10. public class ValuesController : ApiController
  11. {
  12. public HttpResponseMessage PutData([FromBody]ClassModel updates)
  13. {
  14. Console.WriteLine(updates.ID);
  15. Console.WriteLine(updates.CurrentDate);
  16. return new HttpResponseMessage( HttpStatusCode.OK);
  17. }
  18. public ClassModel GetData()
  19. {
  20. return new ClassModel { ID = 1, CurrentDate = DateTime.Now};
  21. }
  22. }
  23. }

Step 5

Now add the new View in the Home folder.

Add the view

Add the following code;

  1. <hr />
  2. <h2>Web API JSON Date</h2>
  3. <button id="getDateApi">Get Date</button>
  4. <br />
  5. <button id="setDateApi">Set Date</button>
  6. <br />
  7. <label id="theIdApi" data-bind="text: idApi" ></label>
  8. <br />
  9. <input id="theDataApi" data-bind="value: currentDateApi" style="width:300px" />
  10. @section Scripts{
  11. <script src="~/Scripts/jquery-ui-1.10.2.js"></script>
  12. <script src="~/Scripts/knockout-2.2.0.debug.js"></script>
  13. <script src="~/Scripts/knockout.mapping-latest.debug.js"></script>
  14. <script src="~/Scripts/sample-api-45.js"></script>
  15. }
Step 6

Now add some code to the index.cshtml file:

  1. @{
  2. ViewBag.Title = "Index";
  3. }
  4. <h2>MVC JSON Date</h2>
  5. <button id="getDate">Get Date</button>
  6. <br />
  7. <button id="setDate">Set Date</button>
  8. <br />
  9. <label id="theId" data-bind="text: id" ></label>
  10. <br />
  11. <input id="theData" data-bind="date: currentDate" style="width:300px" />
  12. @section Scripts{
  13. <script src="~/Scripts/jquery-ui-1.10.2.js"></script>
  14. <script src="~/Scripts/knockout-2.2.0.debug.js"></script>
  15. <script src="~/Scripts/knockout.mapping-latest.debug.js"></script>
  16. <script src="~/Scripts/knockout.bindings.date.js"></script>
  17. <script src="~/Scripts/sample-45.js"></script>
  18. }
Step 7

In this application we need some scripting files for these.

And we need to create two other scripting files, one for MVC and the second for the Web API.

In the MVC scripting file add the following code:

  1. /// <reference path="../../JsonDates.40/Scripts/_references.js" />
  2. var viewModel = {
  3. id: ko.observable(0),
  4. currentDate: ko.observable("")
  5. }
  6. $(document).ready(function ()
  7. {
  8. ko.applyBindings(viewModel);
  9. $("#theData").datepicker();
  10. $(document).delegate("#getDate", "click", function ()
  11. {
  12. $.ajax({
  13. url: "/Home/GetData",
  14. type: "GET",
  15. contentType: "text/json",
  16. success: function (data)
  17. {
  18. viewModel.id(data.Id);
  19. viewModel.currentDate(data.CurrentDate);
  20. }
  21. });
  22. });
  23. $(document).delegate("#setDate", "click", function ()
  24. {
  25. var js = ko.mapping.toJS(viewModel);
  26. var json = {
  27. Id: js.id,
  28. CurrentDate: js.currentDate
  29. }
  30. $.ajax({
  31. url: "/Home/SetData",
  32. type: "POST",
  33. contentType: "application/json;charset=utf-8",
  34. data: JSON.stringify(json),
  35. success: function (data)
  36. {
  37. viewModel.id(data.Id);
  38. viewModel.currentDate(data.CurrentDate);
  39. }
  40. });
  41. });
  42. });

And in the Web API script file add the following code:
  1. /// <reference path="_references.js" />
  2. var viewModelApi = {
  3. idApi: ko.observable(0),
  4. currentDateApi: ko.observable("")
  5. }
  6. $(document).ready(function ()
  7. {
  8. ko.applyBindings(viewModelApi);
  9. $("#theDataApi").datepicker();
  10. $(document).delegate("#getDateApi", "click", function ()
  11. {
  12. $.ajax({
  13. url: "/api/Values",
  14. type: "GET",
  15. contentType: "text/json",
  16. success: function (data)
  17. {
  18. viewModelApi.idApi(data.Id);
  19. viewModelApi.currentDateApi(data.CurrentDate);
  20. }
  21. });
  22. });
  23. $(document).delegate("#setDateApi", "click", function ()
  24. {
  25. var js = ko.mapping.toJS(viewModelApi);
  26. var json = {
  27. Id: js.idApi,
  28. CurrentDate: js.currentDateApi
  29. }
  30. $.ajax({
  31. url: "/api/Values",
  32. type: "PUT",
  33. contentType: "application/json;charset=utf-8",
  34. data: JSON.stringify(json),
  35. success: function (data)
  36. {
  37. }
  38. });
  39. });
  40. });

Step 8

Execute the application:

MVC Calender

Web API Calender

MVC and Web API JSON Date