Laurie Atkinson

Build a Reusable View Component in ASP.NET Core

Laurie Atkinson — Sat, 01 Oct 2016 17:25:26 GMT

View Components have been added to ASP.NET MVC to replace functionality previously accomplished using partial views. It is possible to include reusable components in their own class library and consume them in multiple MVC projects. This post walks through the steps required to create a dynamic navigation menu that is then inserted into an MVC page.

Create the View Component

1. Create a Class Library (.NET Core) project in Visual Studio 2015 named ComponentLibrary 2. Modify the project.json to include MVC and Razor and indicate to embed the Views in the resulting DLL. 3. Add a Models folder and add 2 classes to represent a model for the navigation links. 4. Add a Components folder and add the NavBarComponent view component class. In a real application these menu items would be constructed using your business rules and/or database information. And the await would be necessary when retrieving the necessary data asynchronously. Task.Run() is just for demo purposes to mimic an async process. 5. Add the view for this component in Views > Shared > Components > NavBarComponent > Default.cshtml 6. The project should now look like this:

Use the View Component in a separate MVC project

1. Create an ASP.NET Core Web Application (.NET Core) project in Visual Studio 2015. 2. Add a reference to the ComponentLibrary project. 3. Add the NavBar component to your view. 4. Configure Razor to look for views as embedded resources in our ComponentLibrary DLL.

Error you may encounter

InvalidOperationException: The view 'Components/NavBarComponent/Default' was not found.

SOLUTION:

Make sure the project.json of the Class Library project indicates to embed the views into the DLL using this code:

  "buildOptions": {
"embed": "Views/**/*.cshtml"
}

Add necessary code to ConfigureServices() provided in step 4.

Using Data-binding with Angular 2 to disable a button

Laurie Atkinson — Mon, 12 Sep 2016 00:03:48 GMT

I received a question from a customer new to AngularJS asking for the right way to disable a button until at least one checkbox was checked. The customer’s first thought was to recognize an event on the checkbox and react to it, but this is not necessary with the data-binding feature of Angular. You can use 2-way data-binding on the checkbox to a Boolean property on the component. So, as soon as the user modifies the checkbox, the change is reflected in the component. Also, use 1-way data-binding on the disabled property of the button to a method on the component that returns the condition you want to test. In this case the method returns true if any items have been selected.

Component Template

Select Name {{item.name}} " width="730" height="342" class="alignnone wp-image-125 size-full" />

Component Class

item.chosen); } }" width="568" height="392" class="alignnone wp-image-135 size-full" />

Note: This code has been tested with RC6 of Angular 2.

File order matters with TypeScript inheritance

Laurie Atkinson — Wed, 27 Apr 2016 21:18:36 GMT

If you receive the following JavaScript error and your code contains a TypeScript class derived from another class, it is likely that your parent class has not been defined prior to the definition of your child class.

Unable to get property ‘prototype’ of undefined or null reference

To see the actual error, you will need to view the generated JavaScript file, which may look like this:

var __extends = (this && this.__extends) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); };

The cause of this problem is that TypeScript requires the parent class to appear before the child class. If the classes have been defined in separate files, then the scripts must be loaded onto the page in the correct order. In my case I am using the ASP.NET MVC bundler which loads files alphabetically. So one solution could be to name my file appropriately, however I decided instead to specifically list the files in the correct order within the bundle. For example:

Implementing a Save Warning in an Angular SPA

Laurie Atkinson — Sat, 23 Aug 2014 22:21:44 GMT

I have an Single Page Application written in AngularJS and need to provide a warning to the user if he or she attempts to close a window without saving. Since Angular automatically updates the DOM with a dirty flag this should not be a difficult feature to implement. However, it becomes more difficult when the user is able to open multiple tabs, edit different items, and still receive a warning even if the unsaved changes are in a tab not currently open.

The sample application

The user can select or search for a name and the grid is replaced by an edit view.

The application after opening multiple tabs

The user can continue to open additional persons and a link is created in the left-nav for that person so that the user can navigate between people. Modifications are only saved in the local Angular model and not committed to the server until the user clicks Save for a particular person.

Each name in the left-nav is a link to another person that is in the process of being editing and may or may not have been saved.

Expected behavior if the user clicks the close button or attempts to close the browser window

(1) User clicks the Close button while editing a person which contains unsaved changes.

(2) User attempts to close the browser while editing a person which contains unsaved changes.

(3) User attempts to close the browser while editing a person which contains NO unsaved changes, but there are unsaved changes on a different tab that is not open.

Save and restore the dirty flag from and to the DOM

Since we need to read and write a value in the DOM, this means we need to use a directive. I'm using TypeScript, so you might have to squint a bit to see the underlying JavaScript.

The view

DirtyFlag directive

The important lines of code:

26-30: When the user navigates away from this view, check the value of the $dirty flag on this form. If it is dirty (indicating unsaved changes), then store the id of the current person as dirty using a service named personManger.

23-24: When the directive is first invoked, check if the stored dirty value is true and if so set the $dirty flag on the form.

Related code:

personManger Service

Method to save the dirty flag in the model.

personCtl Controller

When the user saves a person, make sure to reset the dirty value saved in the model as well as the $dirty flag on the form.

Create a directive that warns the user to save

We are interacting with the UI, so this means we need another directive.

The view

Confirm On Close Directive

This directive uses the modal dialog from AngularUI.

Related code:

personManger Service

Method which returns whether or not there are any unsaved changes.

And with that your application should present the expected warning dialogs when attempting to close without saving changes.

Rules for the list name used with ListData.svc

Laurie Atkinson — Thu, 19 Jun 2014 17:46:34 GMT

The ListData.svc web service introduced with SharePoint 2010 offers a great option for querying a list to be consumed by JavaScript. The syntax is:

https:///_vti_bin/ListData.svc/>

Determining the correct list name may not be obvious and there are a number of rules of which you should be aware. To illustrate we will use an example list named today’s quote.

Use the display name (not the internal name).

Check your spelling – list name is case sensitive.

Well almost… The first letter of each word is always capitalized.

Make sure to remove all spaces.

Apostrophes are removed and the character following the apostrophe is capitalized.

Using OAuth in an App for Office

Laurie Atkinson — Tue, 03 Jun 2014 01:28:46 GMT

I will walk through the steps to combine an ASP.NET MVC5 application with an App for Office to allow the app to authenticate using a Microsoft Account or using Facebook. Similar steps could also be followed to authenticate using Google.

Step 1 (Create an App for Office)

Using Visual Studio 2013 or Visual Studio 2012 with MVC5, create a new App for Office application.

Note that the web application project which is automatically created and added to the solution includes an html page and the default Source Location of the app is that html page. We will change this later to reference our ASP.NET MVC5 web application instead.

Step 2 (Create an ASP.NET MVC5 Application)

Add a new ASP.NET MVC project to the solution and click the button to Change Authentication.

By default authentication is set to No Authentication, so change that to Individual Accounts.

Step 3 (Copy CSS and JavaScript assets to your MVC project)

Copy the css files from the App and App\Home folders and paste into the Content folder of your MVC project.

Copy the js files from the App and App\Home folders and paste into a folder within the Scripts folder of your MVC project.

Copy the stylesheet references from the auto-generated Home.html into _Layout.cshtml in your MVC project.

Copy the script references from Home.html into either _Layout.cshtml or the scripts section of Index.cshtml.

Step 4 (Remove the HTML Web project)

Delete the auto-generated Web project from your solution.

Step 5 (Configure authentication and register with each provider)

You will edit Startup.Auth.cs with the login providers you wish to support. The class that is created for you by MVC contains commented out code that can be filled in to automatically add support for each provider.

This code makes use of OWIN middleware and requires a reference to each of the providers you plan to use.

using Microsoft.Owin.Security.Facebook;
using Microsoft.Owin.Security.Google;
using Microsoft.Owin.Security.MicrosoftAccount;
using Microsoft.Owin.Security.Twitter;

In order to obtain the properties that this authentication code needs, you must first register your app with each of the authentication service providers. And this requires that you create a developer account for each one.

MICROSOFT ACCOUNT:

https://account.live.com/developers/applications

The Client ID and Client Secret will be listed under App Settings and should be copied and pasted into Startup.Auth.cs

Startup.Auth.cs

Uncomment the Microsoft Account section and enter the ClientId and ClientSecret. If your app requires access to particular properties (such as the email address in this code example), that field may be requested.

FACEBOOK:

https://developers.facebook.com

Startup.Auth.cs

Uncomment the Facebook Authentication section and enter the AppId and AppSecret. Again, this example shows the syntax to request the email address.

AccountController.cs

If your authentication code requests additional properties such as the email address, modify ExternalLoginCallback() to retrieve the claim attached to the identity.

Step 6 (Update the App manifest file)

YourAppForOffice.xml

The Source location should contain the url for the root of your MVC web application.

In addition you need to include the domains that provide the authentication in the app manifest.

Step 7 (Enable SSL)

Before testing your app you will need to make sure your web project has the SSL Enabled property set to True.

And your App for Office will not be satisfied with a self-signed certificate.

This problem is quickly solved by deploying your web app to Microsoft Azure. If you are using the *.azurewebsites.net domain assigned to your web site by Azure then your site is already secured by a certificate provided by Microsoft. You may access your free ASP.NET web sites through MSDN or here for those without an MSDN subscription.

The Source location in the app manifest should now be updated to contain the url of your Azure web site.

About Me

laurieatkinson@gmail.com — Tue, 14 Jan 2014 15:02:49 GMT

I am a consultant in the Premier Developer Practice at Microsoft where I guide customers in the architecture, design and implementation of software solutions. My areas of expertise are in .NET, HTML5, JavaScript, SharePoint, and Office. My support is through hands-on workshops, remote webcasts, proof of concept work, and side-by-side assistance as developers migrate to new platforms.