RyannosaurusRex

How to set up an Ember app inside of an ASP.NET MVC app.

I love Ember. It helps me build fantastic UIs, but security isn't super straightforward and I suck at it. I love ASP.NET MVC. It help me build secure applications and solid APIs, but for some apps I need a great responsive UI with great interaction.

Together, these two technologies can be used together to create really amazing apps (and really quickly, too). So this guide is to show you how to set them up together.

Note: This article assumes you have created a stock new ASP.NET project within Visual Studio and included MVC and WebAPI options. It also assumes you have EMBER CLI installed and have run ember new my-ember-app into a directory in the root of your ASP.NET MVC project.

RyannosaurusRex

using namespace System.Management.Automation
using namespace System.Management.Automation.Language
 
if ($host.Name -eq 'ConsoleHost')
{
    Import-Module PSReadLine
}
#Import-Module PSColors
#Import-Module posh-git
Import-Module -Name Terminal-Icons

RyannosaurusRex

SELECT TOP (1000) 
      p.[Id] as PersonId
      ,COALESCE( [FirstName] , '' ) as FirstName
      ,COALESCE([NickName], '') AS NickName
      ,COALESCE([MiddleName], '') AS MiddleName
      ,COALESCE([LastName], '') AS LastName
      ,[BirthDate] as Birthdate     
      ,[AnniversaryDate] as Anniversary
      --,MedicalNotes
      ,g.id as HouseholdID

RyannosaurusRex

public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                    "Sub", // Route name
                    "{controller}/{action}/{id}", // URL with parameters
                    new { controller = "SubdomainController", action = "AnyActionYouLike", id = UrlParameter.Optional },

RyannosaurusRex

Keybase proof

I hereby claim:

• I am ryannosaurusrex on github.
• I am ryannosaurusrex (https://keybase.io/ryannosaurusrex) on keybase.
• I have a public key ASCmgpW0YP-qQLDMTUAGT9QQpd7SwrY_2EwpJyCpFz44ewo

To claim this, I am signing this object:

RyannosaurusRex

Set-WindowsExplorerOptions -EnableShowHiddenFilesFoldersDrives -EnableShowProtectedOSFiles -EnableShowFileExtensions
Enable-RemoteDesktop

cinst fiddler4
cisnt nodejs.install
cinst git-credential-winstore
cinst console-devel
cinst filezilla
cinst poshgit
cinst skype

RyannosaurusRex

#addin "nuget:?package=Cake.Watch" // Put this at the top to pull in the Cake.Watch package for use.

// Add this task in your build file somewhere.  You can update which target to run, the file pattern to watch, and even the toast notification.
Task("Watch")
    .Does(() => {
        var settings = new WatchSettings {
            Recursive = true,
            Path = "./",
            Pattern = "*.*"
        };

RyannosaurusRex

function showNotification(title, body) {
    var notification = new Notification(title, { body });
    notification.onclick = e => {
        alert("Clicked!");
    };
}

Notification.requestPermission(permission => {
    console.log(permission);
    if(permission==="granted") {

RyannosaurusRex

var inFocus = true;
$(window).blur(function(){
    inFocus = false;
});
$(window).focus(function(){
    inFocus = true;
});

setTimeout(function(){
    if (!inFocus) {

RyannosaurusRex

<!-- 
   This javascript code will find the logout form on your page and do the submit. 
   We do this separation so we can have total control over styling.
-->
<a href="javascript:document.getElementById('logoutForm').submit()">Logout!</a>

<!-- 
    Put this form anywhere you want outside your content area so styling isn't jacked up. 
-->
@using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-form pull-right" }))