elanderson · elanderson · Nov 2, 2017 · Oct 30, 2017 · Nov 1, 2017
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,4 @@
-/Properties/launchSettings.json
+launchSettings.json
 
 ## Ignore Visual Studio temporary files, build results, and
 ## files generated by popular Visual Studio add-ons.

diff --git a/ASP.NET Core Basics/ASP.NET Core Basics.sln b/ASP.NET Core Basics/ASP.NET Core Basics.sln
@@ -1,7 +1,6 @@
-
 Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio 15
-VisualStudioVersion = 15.0.27004.2002
+VisualStudioVersion = 15.0.27004.2005
 MinimumVisualStudioVersion = 10.0.40219.1
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "src", "src", "{6446DEF2-D423-47E2-85CC-691A52915EC2}"
 EndProject
@@ -15,28 +14,78 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Angular", "src\Angular\Angu
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "React", "src\React\React.csproj", "{56EC1AA3-0060-4349-921F-59AAB8A93129}"
 EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Vue", "src\Vue\Vue.csproj", "{9C278842-E287-488D-B76B-D3096AF553D4}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
+		Debug|x64 = Debug|x64
+		Debug|x86 = Debug|x86
 		Release|Any CPU = Release|Any CPU
+		Release|x64 = Release|x64
+		Release|x86 = Release|x86
 	EndGlobalSection
 	GlobalSection(ProjectConfigurationPlatforms) = postSolution
 		{A1208011-947A-475C-9011-E2657FAB5A31}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
 		{A1208011-947A-475C-9011-E2657FAB5A31}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{A1208011-947A-475C-9011-E2657FAB5A31}.Debug|x64.ActiveCfg = Debug|Any CPU
+		{A1208011-947A-475C-9011-E2657FAB5A31}.Debug|x64.Build.0 = Debug|Any CPU
+		{A1208011-947A-475C-9011-E2657FAB5A31}.Debug|x86.ActiveCfg = Debug|Any CPU
+		{A1208011-947A-475C-9011-E2657FAB5A31}.Debug|x86.Build.0 = Debug|Any CPU
 		{A1208011-947A-475C-9011-E2657FAB5A31}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{A1208011-947A-475C-9011-E2657FAB5A31}.Release|Any CPU.Build.0 = Release|Any CPU
+		{A1208011-947A-475C-9011-E2657FAB5A31}.Release|x64.ActiveCfg = Release|Any CPU
+		{A1208011-947A-475C-9011-E2657FAB5A31}.Release|x64.Build.0 = Release|Any CPU
+		{A1208011-947A-475C-9011-E2657FAB5A31}.Release|x86.ActiveCfg = Release|Any CPU
+		{A1208011-947A-475C-9011-E2657FAB5A31}.Release|x86.Build.0 = Release|Any CPU
 		{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
 		{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Debug|x64.ActiveCfg = Debug|Any CPU
+		{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Debug|x64.Build.0 = Debug|Any CPU
+		{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Debug|x86.ActiveCfg = Debug|Any CPU
+		{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Debug|x86.Build.0 = Debug|Any CPU
 		{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Release|Any CPU.Build.0 = Release|Any CPU
+		{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Release|x64.ActiveCfg = Release|Any CPU
+		{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Release|x64.Build.0 = Release|Any CPU
+		{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Release|x86.ActiveCfg = Release|Any CPU
+		{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Release|x86.Build.0 = Release|Any CPU
 		{F27EF346-050A-4AC6-BCAA-D2446246240C}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
 		{F27EF346-050A-4AC6-BCAA-D2446246240C}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{F27EF346-050A-4AC6-BCAA-D2446246240C}.Debug|x64.ActiveCfg = Debug|Any CPU
+		{F27EF346-050A-4AC6-BCAA-D2446246240C}.Debug|x64.Build.0 = Debug|Any CPU
+		{F27EF346-050A-4AC6-BCAA-D2446246240C}.Debug|x86.ActiveCfg = Debug|Any CPU
+		{F27EF346-050A-4AC6-BCAA-D2446246240C}.Debug|x86.Build.0 = Debug|Any CPU
 		{F27EF346-050A-4AC6-BCAA-D2446246240C}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{F27EF346-050A-4AC6-BCAA-D2446246240C}.Release|Any CPU.Build.0 = Release|Any CPU
+		{F27EF346-050A-4AC6-BCAA-D2446246240C}.Release|x64.ActiveCfg = Release|Any CPU
+		{F27EF346-050A-4AC6-BCAA-D2446246240C}.Release|x64.Build.0 = Release|Any CPU
+		{F27EF346-050A-4AC6-BCAA-D2446246240C}.Release|x86.ActiveCfg = Release|Any CPU
+		{F27EF346-050A-4AC6-BCAA-D2446246240C}.Release|x86.Build.0 = Release|Any CPU
 		{56EC1AA3-0060-4349-921F-59AAB8A93129}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
 		{56EC1AA3-0060-4349-921F-59AAB8A93129}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{56EC1AA3-0060-4349-921F-59AAB8A93129}.Debug|x64.ActiveCfg = Debug|Any CPU
+		{56EC1AA3-0060-4349-921F-59AAB8A93129}.Debug|x64.Build.0 = Debug|Any CPU
+		{56EC1AA3-0060-4349-921F-59AAB8A93129}.Debug|x86.ActiveCfg = Debug|Any CPU
+		{56EC1AA3-0060-4349-921F-59AAB8A93129}.Debug|x86.Build.0 = Debug|Any CPU
 		{56EC1AA3-0060-4349-921F-59AAB8A93129}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{56EC1AA3-0060-4349-921F-59AAB8A93129}.Release|Any CPU.Build.0 = Release|Any CPU
+		{56EC1AA3-0060-4349-921F-59AAB8A93129}.Release|x64.ActiveCfg = Release|Any CPU
+		{56EC1AA3-0060-4349-921F-59AAB8A93129}.Release|x64.Build.0 = Release|Any CPU
+		{56EC1AA3-0060-4349-921F-59AAB8A93129}.Release|x86.ActiveCfg = Release|Any CPU
+		{56EC1AA3-0060-4349-921F-59AAB8A93129}.Release|x86.Build.0 = Release|Any CPU
+		{9C278842-E287-488D-B76B-D3096AF553D4}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{9C278842-E287-488D-B76B-D3096AF553D4}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{9C278842-E287-488D-B76B-D3096AF553D4}.Debug|x64.ActiveCfg = Debug|Any CPU
+		{9C278842-E287-488D-B76B-D3096AF553D4}.Debug|x64.Build.0 = Debug|Any CPU
+		{9C278842-E287-488D-B76B-D3096AF553D4}.Debug|x86.ActiveCfg = Debug|Any CPU
+		{9C278842-E287-488D-B76B-D3096AF553D4}.Debug|x86.Build.0 = Debug|Any CPU
+		{9C278842-E287-488D-B76B-D3096AF553D4}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{9C278842-E287-488D-B76B-D3096AF553D4}.Release|Any CPU.Build.0 = Release|Any CPU
+		{9C278842-E287-488D-B76B-D3096AF553D4}.Release|x64.ActiveCfg = Release|Any CPU
+		{9C278842-E287-488D-B76B-D3096AF553D4}.Release|x64.Build.0 = Release|Any CPU
+		{9C278842-E287-488D-B76B-D3096AF553D4}.Release|x86.ActiveCfg = Release|Any CPU
+		{9C278842-E287-488D-B76B-D3096AF553D4}.Release|x86.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -46,6 +95,7 @@ Global
 		{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA} = {6446DEF2-D423-47E2-85CC-691A52915EC2}
 		{F27EF346-050A-4AC6-BCAA-D2446246240C} = {6446DEF2-D423-47E2-85CC-691A52915EC2}
 		{56EC1AA3-0060-4349-921F-59AAB8A93129} = {6446DEF2-D423-47E2-85CC-691A52915EC2}
+		{9C278842-E287-488D-B76B-D3096AF553D4} = {6446DEF2-D423-47E2-85CC-691A52915EC2}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {810FF428-282C-444B-9C2A-660B9AAE9D8F}

diff --git a/ASP.NET Core Basics/src/Vue/ClientApp/boot.ts b/ASP.NET Core Basics/src/Vue/ClientApp/boot.ts
@@ -0,0 +1,18 @@
+import './css/site.css';
+import 'bootstrap';
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+Vue.use(VueRouter);
+
+const routes = [
+    { path: '/', component: require('./components/home/home.vue.html') },
+    { path: '/counter', component: require('./components/counter/counter.vue.html') },
+    { path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue.html') },
+    { path: '/contactlist', component: require('./components/contacts/contactlist.vue.html') }
+];
+
+new Vue({
+    el: '#app-root',
+    router: new VueRouter({ mode: 'history', routes: routes }),
+    render: h => h(require('./components/app/app.vue.html'))
+});
diff --git a/ASP.NET Core Basics/src/Vue/ClientApp/components/app/app.ts b/ASP.NET Core Basics/src/Vue/ClientApp/components/app/app.ts
@@ -0,0 +1,10 @@
+import Vue from 'vue';
+import { Component } from 'vue-property-decorator';
+
+@Component({
+    components: {
+        MenuComponent: require('../navmenu/navmenu.vue.html')
+    }
+})
+export default class AppComponent extends Vue {
+}
diff --git a/ASP.NET Core Basics/src/Vue/ClientApp/components/app/app.vue.html b/ASP.NET Core Basics/src/Vue/ClientApp/components/app/app.vue.html
@@ -0,0 +1,14 @@
+<template>
+    <div id='app-root' class="container-fluid">
+        <div class="row">
+            <div class="col-sm-3">
+                <menu-component />
+            </div>
+            <div class="col-sm-9">
+                <router-view></router-view>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script src="./app.ts"></script>
diff --git a/ASP.NET Core Basics/src/Vue/ClientApp/components/contacts/contactlist.ts b/ASP.NET Core Basics/src/Vue/ClientApp/components/contacts/contactlist.ts
@@ -0,0 +1,26 @@
+import Vue from 'vue';
+import { Component } from 'vue-property-decorator';
+
+@Component
+export default class ContactListComponent extends Vue {
+    contacts: Contact[] = [];
+
+    mounted() {
+        fetch('http://localhost:13322/api/contactsApi/')
+            .then(response => response.json() as Promise<Contact[]>)
+            .then(data => {
+                this.contacts = data;
+            });
+    }
+}
+
+interface Contact {
+    id: number;
+    name: string;
+    address: string;
+    city: string;
+    state: string;
+    postalCode: string;
+    phone: string;
+    email: string;
+}
diff --git a/ASP.NET Core Basics/src/Vue/ClientApp/components/contacts/contactlist.vue.html b/ASP.NET Core Basics/src/Vue/ClientApp/components/contacts/contactlist.vue.html
@@ -0,0 +1,23 @@
+<template>
+    <div>
+        <h1>Contact List</h1>
+        <table v-if="contacts.length" class="table">
+            <thead>
+            <tr>
+                <th>ID</th>
+                <th>Name</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr v-for="contact in contacts">
+                <td>{{ contact.id }}</td>
+                <td>{{ contact.name }}</td>
+            </tr>
+            </tbody>
+        </table>
+
+        <p v-else><em>Loading...</em></p>
+    </div>
+</template>
+
+<script src="./contactlist.ts"></script>
diff --git a/ASP.NET Core Basics/src/Vue/ClientApp/components/counter/counter.ts b/ASP.NET Core Basics/src/Vue/ClientApp/components/counter/counter.ts
@@ -0,0 +1,11 @@
+import Vue from 'vue';
+import { Component } from 'vue-property-decorator';
+
+@Component
+export default class CounterComponent extends Vue {
+    currentcount: number = 0;
+
+    incrementCounter() {
+        this.currentcount++;
+    }
+}
diff --git a/ASP.NET Core Basics/src/Vue/ClientApp/components/counter/counter.vue.html b/ASP.NET Core Basics/src/Vue/ClientApp/components/counter/counter.vue.html
@@ -0,0 +1,13 @@
+<template>
+    <div>
+        <h1>Counter</h1>
+
+        <p>This is a simple example of a Vue.js component.</p>
+
+        <p>Current count: <strong>{{ currentcount }}</strong></p>
+
+        <button @click="incrementCounter">Increment</button>
+    </div>
+</template>
+
+<script src="./counter.ts"></script>
diff --git a/ASP.NET Core Basics/src/Vue/ClientApp/components/fetchdata/fetchdata.ts b/ASP.NET Core Basics/src/Vue/ClientApp/components/fetchdata/fetchdata.ts
@@ -0,0 +1,22 @@
+import Vue from 'vue';
+import { Component } from 'vue-property-decorator';
+
+interface WeatherForecast {
+    dateFormatted: string;
+    temperatureC: number;
+    temperatureF: number;
+    summary: string;
+}
+
+@Component
+export default class FetchDataComponent extends Vue {
+    forecasts: WeatherForecast[] = [];
+
+    mounted() {
+        fetch('api/SampleData/WeatherForecasts')
+            .then(response => response.json() as Promise<WeatherForecast[]>)
+            .then(data => {
+                this.forecasts = data;
+            });
+    }
+}
diff --git a/ASP.NET Core Basics/src/Vue/ClientApp/components/fetchdata/fetchdata.vue.html b/ASP.NET Core Basics/src/Vue/ClientApp/components/fetchdata/fetchdata.vue.html
@@ -0,0 +1,30 @@
+<template>
+    <div>
+        <h1>Weather forecast</h1>
+
+        <p>This component demonstrates fetching data from the server.</p>
+
+        <table v-if="forecasts.length" class="table">
+            <thead>
+                <tr>
+                    <th>Date</th>
+                    <th>Temp. (C)</th>
+                    <th>Temp. (F)</th>
+                    <th>Summary</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="item in forecasts">
+                    <td>{{ item.dateFormatted }}</td>
+                    <td>{{ item.temperatureC }}</td>
+                    <td>{{ item.temperatureF }}</td>
+                    <td>{{ item.summary }}</td>
+                </tr>
+            </tbody>
+        </table>
+
+        <p v-else><em>Loading...</em></p>
+    </div>
+</template>
+
+<script src="./fetchdata.ts"></script>
diff --git a/ASP.NET Core Basics/src/Vue/ClientApp/components/home/home.vue.html b/ASP.NET Core Basics/src/Vue/ClientApp/components/home/home.vue.html
@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <h1>Hello, world!</h1>
+        <p>Welcome to your new single-page application, built with:</p>
+        <ul>
+            <li><a href="https://get.asp.net/">ASP.NET Core</a> and <a href="https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx">C#</a> for cross-platform server-side code</li>
+            <li><a href="https://vuejs.org/">Vue.js</a> and <a href="http://www.typescriptlang.org/">TypeScript</a> for client-side code</li>
+            <li><a href="https://webpack.github.io/">Webpack</a> for building and bundling client-side resources</li>
+            <li><a href="http://getbootstrap.com/">Bootstrap</a> for layout and styling</li>
+        </ul>
+        <p>To help you get started, we've also set up:</p>
+        <ul>
+            <li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
+            <li><strong>Webpack dev middleware</strong>. In development mode, there's no need to run the <code>webpack</code> build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.</li>
+            <li><strong>Hot module replacement</strong>. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, your Vue app will be rebuilt and a new instance injected is into the page.</li>
+            <li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li>
+        </ul>
+    </div>
+</template>
diff --git a/ASP.NET Core Basics/src/Vue/ClientApp/components/navmenu/navmenu.css b/ASP.NET Core Basics/src/Vue/ClientApp/components/navmenu/navmenu.css
@@ -0,0 +1,59 @@
+.main-nav li .glyphicon {
+    margin-right: 10px;
+}
+
+/* Highlighting rules for nav menu items */
+.main-nav li a.router-link-active,
+.main-nav li a.router-link-active:hover,
+.main-nav li a.router-link-active:focus {
+    background-color: #4189C7;
+    color: white;
+}
+
+/* Keep the nav menu independent of scrolling and on top of other items */
+.main-nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+}
+
+@media (min-width: 768px) {
+    /* On small screens, convert the nav menu to a vertical sidebar */
+    .main-nav {
+        height: 100%;
+        width: calc(25% - 20px);
+    }
+    .main-nav .navbar {
+        border-radius: 0px;
+        border-width: 0px;
+        height: 100%;
+    }
+    .main-nav .navbar-header {
+        float: none;
+    }
+    .main-nav .navbar-collapse {
+        border-top: 1px solid #444;
+        padding: 0px;
+    }
+    .main-nav .navbar ul {
+        float: none;
+    }
+    .main-nav .navbar li {
+        float: none;
+        font-size: 15px;
+        margin: 6px;
+    }
+    .main-nav .navbar li a {
+        padding: 10px 16px;
+        border-radius: 4px;
+    }
+    .main-nav .navbar a {
+        /* If a menu item's text is too long, truncate it */
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}