Twin Cities Code Camp #21

Over the weekend our team got together and all attended the Twin Cities Code Camp together.  It was a ton of fun and I have lots of new tech stuff to research.  Here is a summary of my notes.

Unboxing ASP.NET Core

by Kevin Leung
  @KSLHacks 

http://kevinleung.com/

“ASP.NET Core is a new open-source Web framework optimized for building cross-platform web apps, IoT apps and mobile backends. ASP.NET Core comes with great new features ready to use out of the box with minimal setup required! In this talk we’ll look at .NET Core, architecture, package management and how to begin weighing the options between choosing .NET Framework and .NET Core. I will also share my experiences and insights while working alongside the .NET Core team at Microsoft to port over an existing project from .NET Framework to .NET Core; as well as the challenges we faced. Core brings Microsoft into the exciting world of open-source, cross-platform and package modularity/portability – Let’s see what we can build!”

Notes:

 

Building Reusable UI Components in ASP.NET Core MVC

by Scott Addie
  @Scott_Addie 

https://scottaddie.com/

“ASP.NET proper MVC developers have long relied upon partial views and HTML helpers to construct reusable UI components. ASP.NET Core MVC expands the arsenal of options for creating such UI components by introducing view components and tag helpers. Do these new offerings render partial views and HTML helpers obsolete? Absolutely not! Using the right tool for the job is important, which means understanding the differences between these options is paramount. In this session, you’ll gain an understanding of when it’s most appropriate to use each of them in the real world. You’ll also see how to create basic view components and tag helpers.”

Notes

 

Building Shiny Web Apps with TypeScript and Angular 2

by Dustin Ewers
  @dustinjewers 

https://dustinewers.com/

“From humble beginnings, JavaScript has gone from a hastily thrown together language for web pages to a hastily thrown together language that runs everywhere. If you can do it with code, you can probably do it in JavaScript. It’s the Swiss Army Knife of programming languages.  Unfortunately, JavaScript wasn’t designed for the large scale apps we use it in today. We’ve had to rely on design patterns, willpower, and luck to mitigate JavaScript’s failings. However, there is a better way. TypeScript adds features to JavaScript that make it usable on large projects. Additionally, the bar for web applications gets higher everyday. jQuery was cool ten years ago, but it doesn’t cut it for modern web apps. We need something with a little more horsepower. Angular 2 makes it easy to build clean, modular web apps. In this talk, we’ll explore TypeScript and Angular 2 and how they can be used together to build large-scale web applications. We will learn how to get started and get up to speed quickly.”

Notes

Unit Testing for the Scared, Skeptical and Ashamed

by J Wynia
  @jwynia 

http://www.wynia.org/

“Does the mention of the phrase “unit testing” make your “fight or flight” response kick in? Do you feel like the right time to get started unit testing was a while back and you missed the boat? Do you just have a hard time believing that writing unit tests won’t cut your development speed in half? Come learn about getting started unit testing in a judgement-free environment. Examples in C#, but applicable to other languages as well.”

Notes

 

Cool SQL Server Features Everyone Should Know About

by David Berry
  @DavidCBerry13 

http://buildingbettersoftware.blogspot.com/

“We all use SQL Server every day in our jobs, so it pays to know what SQL Server can do for us that will make our jobs easier. This talk will introduce you to some key features of SQL Server that you might not know about but will definitely want to use once you learn about them. First, we’ll discuss temporal tables, which provide a convenient way to track all of the changes made to data in a table. Second, we’ll talk about the JSON support built into SQL Server 2016 and what capabilities it provides us. Third, we’ll cover some advanced SQL constructs like the MERGE statement and Common Table Expressions that can make the SQL you write simpler. And finally, we’ll wrap up by talking about the windowing functions in SQL Server, which provide powerful analytic capabilities to our SQL Statements. After this talk, you will better appreciate some of the rich functionality built into SQL Server and understand how to use these capabilities to make your job easier.”

Notes

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