MVC Json DateTime handling

When working on a page where we are displaying dates in grids I ran into a properly displaying dates in the right format.  This is a problem with how MVC JSONResults handles dates.   We had solved this problem in the past and I wanted to write it up for future reference.   Instead of using JsonResult we need to use the Newtonsoft.Json JsonNetResult type to pass the data to the Clientside.

using Newtonsoft.Json;
public JsonNetResult GetDFLessonsCompletedData(string programId, string periodValue)
var parameters = SetProgramParameters(programId, String.Format("Problem downloading Lesson Completed for ProgramID:{0} and Period:{1}", programId, periodValue));
var period = (TimePeriod)Enum.Parse(typeof(TimePeriod), periodValue);
parameters = SetTimePeriod(period, parameters);
var data = DFLessonCompletedResource.GetDetails(parameters);
// use ISO 8601 date formats
var jsonNetResult = new JsonNetResult {Formatting = Formatting.Indented, Data = new AjaxDataResult(data)};
return jsonNetResult;

#tinymce and #xeditable

headlineI am working on a project with some fairly complex editable fields in popups requirements.  I started looking around for a library that would package up the popups so that I can use them without having to start from scratch.  I came across the x-editable library which works very smoothly and handles most of what I need it to.  One of the requirements is that the textarea in the popup need to be a tinymce editor.  Here is my solution to hooking them up.  As usual the code is fairly simple and elegant once it works, but getting it to work took far longer than I anticipated.


  <a href="#" id="puHeadline"><i class="fa fa-edit"></i></a>
  <div id="textGoesHere"></div>


$(function () {
  // Demo popover edit with tinymce
  $.fn.editable.defaults.mode = 'popup'; //toggle `popup` / `inline` mode

    pk: 1,
    type: 'textarea',
    title: 'Headline:',
    placeholder: 'Enter your headline...',
    placement: 'right',
    showbuttons: 'bottom',
    inputclass: 'tinymce',
    validate: function(value) {
      if($.trim(value) == '') {
        return 'This field is required';
    display: function (value) {

  $('#puHeadline').click(function() {

  function setupTinyMCE() {
    // TinyMCE functionality
      // Location of TinyMCE script
      script_url: '/scripts/tinymce/4.0.25/tinymce.min.js',
      // General options
      theme: "modern",
      plugins: "link code fullscreen fmgwordpaste",
      toolbar: "bold italic | alignleft aligncenter alignright | fullscreen",
      menubar: false,
      statusbar: false,
      content_css: "/areas/c2c/Content/css/editor.css",
      setup: function(editor) {
      init_instance_callback: function(editor) {
        $(editor.getContainer()).find(".mce-path").css("display", "none");

XML Date, Convert to TimeZone

Dates are complicated no matter which language you use.  To solve some of our problems we save all dates as Universal time, typically using (DateTime.UtcNow).  Then when we display it we convert to a specific timezone.

For this specific project we save the Utc date as an XML string.  When we parse it out for display we read the date, convert to the proper timezone, then put it back in the XML be parsed for display. In this system we show all our dates as Central Standard Time.   We were doing a TryParse but got an error stating that the date was the wrong “Kind”.  Finally I hit on the right syntax and, as with so many other little tidbits, don’t want to lose it.


XElement cElement = data.Element("CreatedDate");

cElement.ReplaceWith(GetDateFormattedCst(cElement, "{0:g} CST"));

 private XElement GetDateFormattedCst(XElement element, string format)
      if(element == null || element.IsEmpty)
         return null;
      XmlReader reader = element.CreateReader();
      string dateValue = reader.ReadInnerXml();

      DateTime dateTime;
      CultureInfo culture = CultureInfo.CreateSpecificCulture("en-US");
      DateTimeStyles styles = DateTimeStyles.AdjustToUniversal;

      if (DateTime.TryParse(dateValue, culture, styles, out dateTime))
        dateTime = dateTime.ToCentralStandardTime();
        return null;

      dateValue = String.Format(format, dateTime);
      dateValue = string.Format("<{0}>{1}</{0}>", element.Name, dateValue);

      return XElement.Parse(dateValue);

MVC: Check if Is Dirty via #JavaScript

I had a need to do some fancy work on a MVC Razor page enabling and disabling buttons based on various criteria.  To do this I needed to check to see if the user had changed any data on the page I ended up using the following structure to do it.

First set up your page with a form and all your input fields.

@using(Html.BeginForm("actionname", "controllername", new { area = "areaname" }, 
       FormMethod.Post, new { id = "saveForm", @class = "disable-submit-form" }))
     /* lots of page code */

This method serializes the data into a Name, Value array of objects  and hashes it.

     // Grab all the data fields in the code and serialize them, then hash them
     // @Html.Checkbox and CheckBoxFor need to be handled as a separate case 
     function GetSerializedItems() {
        var serializedArray = $(".disable-submit-form").serializeArray()
                                 .filter(function (item) { 
                                           return != 'CheckboxItem1' 
                                               && != 'CheckboxItem2'; 
        var serializedCheckboxItems = $('input:checkbox').map(
                                        function () { 
                                           return { name:, 
                                                    value: this.checked ? this.value 
                                                                        : "false" }; 
        for (var index = 0; index < serializedCheckboxItems.length; ++index) {
        return convertSerializedArrayToHash(serializedArray);

      $(document).ready(function () {
        // Get the initial state of the data on the page.
        var startItems = GetSerializedItems(); 
        // On each field change recheck the current button state
        $('.disable-submit-form').on('change', function () {

      function showhidebuttons() {
        var $form = $(".disable-submit-form");
        var currentItems = GetSerializedItems();
        var dirty = hashDiff(startItems, currentItems);
        var isDirty = countProperties(dirty) > 0;
        var isValid = $form.valid();
        var isDraft = '@Model.IsDraft' === 'True';

        $form.find(".submitform").attr('disabled', 'disabled');

        if (isValid && isDirty) {
        } else if (isDraft && isValid) {
     //Call ShowHideButtons to set the default state

Here are the javascript helpers I used.

 function convertSerializedArrayToHash(a) {
 var r = {};
 for (var i = 0; i < a.length; i++) {
 r[a[i].name] = a[i].value;
 return r;

 function hashDiff(h1, h2) {
 var d = {};
 for (k in h2) {
 if (h1[k] !== h2[k]) d[k] = h2[k];
 return d;

 function countProperties(obj) {
 var count = 0;

 for (var prop in obj) {
 if (obj.hasOwnProperty(prop))

 return count;

#TinyMCE: Fixing Pageload Flickering

When my TinyMCE boxes load I find that there is brief moment when it flickers, the users don’t like that.   Looking closely I found that the flicker is a brief glimpse of the underlying HTML that is rendered before the TinyMCE box finishes loading and is displayed.  To fix it I do some fancy hide/show work.  Initially the page is loaded with the control hidden, then when it is done loading it shows it. Since I had the code already put together, I left in an example of a read-only version of the editor.

When the page is loading mark the textarea as hidden:

     <div class="form-group">
        @Html.Label("Content:") @Html.ValidationMessageFor(m => m.ContentHtml)
        @if (Model.IsReadOnly)
          @Html.TextAreaFor(m => m.ContentHtml, 
                            new { @class = "tinymce-ro", @readonly = "readonly", 
                            @style = "height:300px; width:100%; display:none" })
          @Html.TextAreaFor(m => m.ContentHtml, 
                            new { @class = "tinymce", maxlength = 5000, 
                            @style = "height:300px; width:100%; display:none" })

Then show it again once loading is complete:

      script_url: '/scripts/tinymce/4.0.25/tinymce.min.js',
      theme: "modern",
      toolbar: "bold italic ",
      paste_auto_cleanup_on_paste: true,
      init_instance_callback: function (editor) {

      readonly: true,
      script_url: '/scripts/tinymce/4.0.25/tinymce.min.js',
      theme: "modern",
      toolbar: false,
      menubar: false,
      statusbar: false,
      init_instance_callback: function (editor) {
        if (document.getElementById( === 'none') {
          editor.getBody().style.backgroundColor = "#EBEBE4";

UPDATE: I discovered that my custom plugins were not loading properly when I used this method. I came up with another version posted here – Pageload Flickering V2.

#TinyMCE: Plugin DDL with Popup

Recently I had a story asking for some advanced functionality for a new TinyMCE button. I broke down the requirements to the following.  I created a JSFiddle to show it working.

  • Custom TinyMCE drop down menu
  • When a menu item is selected it should insert the menu value into the editor at the cursor
  • Last item on the menu will show a popup
  • On the popup have a text box for entering custom text
  • When Insert is clicked insert the text into the editor at the cursor
Core plugin code – Javascript
$('#Insert').click(function () {
    var text = $('#added-token').val();
    tinyMCE.activeEditor.execCommand('mceInsertContent', false, &quot;{Added Text:&quot; + text + &quot;}&quot;);
    return false;
tinymce.PluginManager.add('tokens', function (editor, url) {
    editor.addButton('inserttoken', {
        title: &quot;Insert Token&quot;,
        type: 'menubutton',
        text: 'Tokens',
        icon: false,
        onselect: function (e) {
          if (e.control.settings.value != '{MenuItemPopup}') {
          } else {
            $('#token-modal').modal({ show: true });
        menu: [
            { text: 'Menu Item 1', value: '{MenuItem1}' },
            { text: 'Menu Item 2', value: '{MenuItem2}' },
            { text: 'Menu Item 3', value: '{MenuItem3}' },
            { text: 'Menu Item 4', value: '{MenuItem4}' },                     
            { text: 'Menu Item with Popup', value: '{MenuItemPopup}' }                        
        onPostRender: function () {
    selector: &quot;textarea&quot;,
	width:      '100%',
	height:     270,
    plugins:    [ &quot;anchor link tokens&quot; ],
    statusbar:  false,
	menubar:    false,
    toolbar:    &quot;inserttoken anchor | alignleft aligncenter alignright alignjustify&quot;,
	rel_list:   [ { title: 'Lightbox', value: 'lightbox' } ]
Core plugin code – HTML
&lt;div id=&quot;token-modal&quot; class=&quot;modal hide fade&quot; &gt;
    &lt;div class=&quot;modal-header&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;×&lt;/button&gt;
        &lt;h3 id=&quot;myModalLabel&quot;&gt;Modal header&lt;/h3&gt;
    &lt;div class=&quot;modal-body&quot;&gt;
        &lt;input type=&quot;text&quot; name=&quot;group&quot; id=&quot;added-token&quot;  /&gt;
    &lt;div class=&quot;modal-footer&quot;&gt;
        &lt;button data-dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
        &lt;button id=&quot;Insert&quot;&gt;Insert&lt;/button&gt;