Conditional JavaScript in MVC Razor Statement

I had an odd case where the Model for a MVC Razor page may or may not be null.   If data exists we need to do some extra javascript on the page that doesn’t get run at any other time.   I had problems figuring out how to check for a “null” Model using javascript.   This StackOverflow post had the example that finally showed me a nice elegant way of writing my code.  Here is another SO post with additional information that uses the <text> option.

    var jsonData = null;
    @if(Model != null)
    {
      @:jsonData=@Html.Raw(Json.Encode(Model.ServerDataItemList))
    }

    koVM = new ScheduledEmailVM(jsonData);
    ko.applyBindings(koVM , document.getElementById("ko_div_id"));

Bootstrap Modal Scrolling issue

We have a complex knockout page where we have a Bootstrap Modal that opens up and then we open a simple BootstrapDialog modal on top of it.   When the BootstrapDialog modal is closed the initial Modal will no longer scroll with the page.   The solution that worked for me was as simple as this.  If this solution doesn’t work there were a few more complex solutions on the referenced page.

.modal { overflow: auto !important; }

Code Credit goes to jofftiquez on Github

#TinyMCE: IE11 Insert Content

In one of our main projects we are using a custom TinyMCE plugin to allow the users to attach files to an email that is sent from our system.   The plugin pops up a modal and asks the user for information then inserts the entered data into the editor at the cursor.   This works perfectly well in most cases, except for IE11 where it inserts the text at the beginning of the editor.

We found a Stack Overflow post (TinyMCE – Inserting content at cursor position in IE doesn’t work) that gave the basics on how to fix it.   Here is what I ended up doing.

Create the plugin with the bookmark code:


tinymce.PluginManager.add('customattachment', function (editor, url) {
  var self = this;

  // ie11 does not retain the current cursor position when the attachment popup loads.  We need to retain the current position
  // and then restore it in the "InlineAttachment" function using the self.restoreBookmark() defined in this file.
  var bookmark;

  editor.addButton('insertcustomattachment', {
    title: "Insert Attachment",
    type: 'button',
    icon: 'attachment-ico',
    onclick: function (e) {
      //save bookmark
      bookmark = tinyMCE.activeEditor.selection.getBookmark();

      $.fancybox({
        content: "<iframe class=\"naked customattachment\" src=\"/attachment/upload/InlineAttachment/\" scrolling=\"no\" style=\"border:none; width:500px; min-height:250px; margin:15px;\"></iframe>",
        scrolling: 'no',
        padding: 0,
        margin: 0,
        onClosed: function () {
        }
      });

      // prevent bootstrap from hijacking the click (on Website | Home full-width pages)
      $('.fancybox-inner').find('iframe').on('focusin', function (evt) {
        var $ipt = $($(evt.target)[0].contentWindow.document).find('.custom-attachment-title').closest('form');
        if ($ipt.length) {
          evt.stopImmediatePropagation();
        }
      });

    },
  });
  self.restoreBookmark = function () {
    //restore bookmark
    return tinyMCE.activeEditor.selection.moveToBookmark(bookmark);
  }
});

Call the code to insert the attachment after the modal is closed:


  // Used in _komodal_tinymce for customattachment
  function InsertInlineAttachment(item) {
    tinyMCE.activeEditor.plugins["customattachment"].restoreBookmark();
    tinyMCE.activeEditor.execCommand('mceInsertContent', false, item.replace(/"/g, "'"));
    $.fancybox.close();
  }

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: PAGELOAD FLICKERING V2

So a while back I wrote this post: #TinyMCE: Fixing Pageload Flickering

Well now I have found a problem with it.  When you load the page with the textarea hidden the plugins don’t seem to bind properly.  I had to come up with a new way to do the same thing.  Here is my solution.  Not ideal but seems to work fine so far.

Notice that the ‘display:none’ is now gone and the size is now set to a size so that the textarea is not visible on the page. Although, there is a small remnant left there. Not sure I like it but I’m not sure how to hide it.

@Html.TextAreaFor(m => m.ContentHtml, 
                       new { @class = "tinymce", maxlength = 5000, 
                       @style = "height:1px; width:1px; " })

Now once TinyMCE is properly initialized I manually set the iframe size to be the height and width I want.

$('textarea.tinymce').tinymce({
  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) {
     $(editor.getContainer()).find("iframe").css("height", "300px");
     $(editor.getContainer()).find("iframe").css("width", "100%");
  }
});

#VisualStudio Extension: Custom Title Bar

Sometimes there is a need to work in two different versions of the same project, it can get complicated to keep track of which window you are in.

I just found a new extension to add my Visual Studio that changes the title bar to show the root path of the solution you are working in.

Once installed it looks like this

The key settings to set it up for our SVN file structure is this

#TinyMCE: Style and Script Elements

We have begun using TinyMCE as the primary editor in our CMS system.  Some of the functionality is to store pages that are later rendered as html on websites.  This means that often our designers are adding custom javascript and css styles to pages.  In our most recent release we found that when we switched to TinyMCE we lost the functionality to add custom scripts and styles to the pages.  After a mad dash we found that adding the following code to the TinyMCE editor allows the user to enter <style> and <script> elements via the Source Code window.   TinyMCE does add comments around the code that is added but they do not affect the functionality.

TinyMCE Initalization Settings

//Allow html script, style, etc tags to work in the editors
extended_valid_elements: 'pre[*],script[*],style[*]', 
valid_children: "+body[style|script],pre[script|div|p|br|span|img|style|h1|h2|h3|h4|h5],*[*]",
valid_elements : '*[*]', 

TinyMCE Example Input

<script type="text/javascript">
$(function () {
    Console.log('test');
  });
</script>



<style>
h2 {
        color: #FF0000;
    }
</style>


TinyMCE Example Output

<script type="text/javascript">// <![CDATA[ $(function () { Console.log('test'); }); // ]]></script>


<style><!-- h2 { color: #FF0000; } --></style>