Skip to content

Commit 2df21bd

Browse files
elandersonelanderson
authored
Vue - Add contact list (#22)
* Add Vue project * Add contact list to Vue application
1 parent 05319f0 commit 2df21bd

39 files changed

+40257
-3
lines changed

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/Properties/launchSettings.json
1+
launchSettings.json
22

33
## Ignore Visual Studio temporary files, build results, and
44
## files generated by popular Visual Studio add-ons.

‎ASP.NET Core Basics/ASP.NET Core Basics.sln‎

Lines changed: 52 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
21
Microsoft Visual Studio Solution File, Format Version 12.00
32
# Visual Studio 15
4-
VisualStudioVersion = 15.0.27004.2002
3+
VisualStudioVersion = 15.0.27004.2005
54
MinimumVisualStudioVersion = 10.0.40219.1
65
Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "src", "src", "{6446DEF2-D423-47E2-85CC-691A52915EC2}"
76
EndProject
@@ -15,28 +14,78 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Angular", "src\Angular\Angu
1514
EndProject
1615
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "React", "src\React\React.csproj", "{56EC1AA3-0060-4349-921F-59AAB8A93129}"
1716
EndProject
17+
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Vue", "src\Vue\Vue.csproj", "{9C278842-E287-488D-B76B-D3096AF553D4}"
18+
EndProject
1819
Global
1920
GlobalSection(SolutionConfigurationPlatforms) = preSolution
2021
Debug|Any CPU = Debug|Any CPU
22+
Debug|x64 = Debug|x64
23+
Debug|x86 = Debug|x86
2124
Release|Any CPU = Release|Any CPU
25+
Release|x64 = Release|x64
26+
Release|x86 = Release|x86
2227
EndGlobalSection
2328
GlobalSection(ProjectConfigurationPlatforms) = postSolution
2429
{A1208011-947A-475C-9011-E2657FAB5A31}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
2530
{A1208011-947A-475C-9011-E2657FAB5A31}.Debug|Any CPU.Build.0 = Debug|Any CPU
31+
{A1208011-947A-475C-9011-E2657FAB5A31}.Debug|x64.ActiveCfg = Debug|Any CPU
32+
{A1208011-947A-475C-9011-E2657FAB5A31}.Debug|x64.Build.0 = Debug|Any CPU
33+
{A1208011-947A-475C-9011-E2657FAB5A31}.Debug|x86.ActiveCfg = Debug|Any CPU
34+
{A1208011-947A-475C-9011-E2657FAB5A31}.Debug|x86.Build.0 = Debug|Any CPU
2635
{A1208011-947A-475C-9011-E2657FAB5A31}.Release|Any CPU.ActiveCfg = Release|Any CPU
2736
{A1208011-947A-475C-9011-E2657FAB5A31}.Release|Any CPU.Build.0 = Release|Any CPU
37+
{A1208011-947A-475C-9011-E2657FAB5A31}.Release|x64.ActiveCfg = Release|Any CPU
38+
{A1208011-947A-475C-9011-E2657FAB5A31}.Release|x64.Build.0 = Release|Any CPU
39+
{A1208011-947A-475C-9011-E2657FAB5A31}.Release|x86.ActiveCfg = Release|Any CPU
40+
{A1208011-947A-475C-9011-E2657FAB5A31}.Release|x86.Build.0 = Release|Any CPU
2841
{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
2942
{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Debug|Any CPU.Build.0 = Debug|Any CPU
43+
{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Debug|x64.ActiveCfg = Debug|Any CPU
44+
{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Debug|x64.Build.0 = Debug|Any CPU
45+
{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Debug|x86.ActiveCfg = Debug|Any CPU
46+
{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Debug|x86.Build.0 = Debug|Any CPU
3047
{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Release|Any CPU.ActiveCfg = Release|Any CPU
3148
{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Release|Any CPU.Build.0 = Release|Any CPU
49+
{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Release|x64.ActiveCfg = Release|Any CPU
50+
{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Release|x64.Build.0 = Release|Any CPU
51+
{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Release|x86.ActiveCfg = Release|Any CPU
52+
{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA}.Release|x86.Build.0 = Release|Any CPU
3253
{F27EF346-050A-4AC6-BCAA-D2446246240C}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
3354
{F27EF346-050A-4AC6-BCAA-D2446246240C}.Debug|Any CPU.Build.0 = Debug|Any CPU
55+
{F27EF346-050A-4AC6-BCAA-D2446246240C}.Debug|x64.ActiveCfg = Debug|Any CPU
56+
{F27EF346-050A-4AC6-BCAA-D2446246240C}.Debug|x64.Build.0 = Debug|Any CPU
57+
{F27EF346-050A-4AC6-BCAA-D2446246240C}.Debug|x86.ActiveCfg = Debug|Any CPU
58+
{F27EF346-050A-4AC6-BCAA-D2446246240C}.Debug|x86.Build.0 = Debug|Any CPU
3459
{F27EF346-050A-4AC6-BCAA-D2446246240C}.Release|Any CPU.ActiveCfg = Release|Any CPU
3560
{F27EF346-050A-4AC6-BCAA-D2446246240C}.Release|Any CPU.Build.0 = Release|Any CPU
61+
{F27EF346-050A-4AC6-BCAA-D2446246240C}.Release|x64.ActiveCfg = Release|Any CPU
62+
{F27EF346-050A-4AC6-BCAA-D2446246240C}.Release|x64.Build.0 = Release|Any CPU
63+
{F27EF346-050A-4AC6-BCAA-D2446246240C}.Release|x86.ActiveCfg = Release|Any CPU
64+
{F27EF346-050A-4AC6-BCAA-D2446246240C}.Release|x86.Build.0 = Release|Any CPU
3665
{56EC1AA3-0060-4349-921F-59AAB8A93129}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
3766
{56EC1AA3-0060-4349-921F-59AAB8A93129}.Debug|Any CPU.Build.0 = Debug|Any CPU
67+
{56EC1AA3-0060-4349-921F-59AAB8A93129}.Debug|x64.ActiveCfg = Debug|Any CPU
68+
{56EC1AA3-0060-4349-921F-59AAB8A93129}.Debug|x64.Build.0 = Debug|Any CPU
69+
{56EC1AA3-0060-4349-921F-59AAB8A93129}.Debug|x86.ActiveCfg = Debug|Any CPU
70+
{56EC1AA3-0060-4349-921F-59AAB8A93129}.Debug|x86.Build.0 = Debug|Any CPU
3871
{56EC1AA3-0060-4349-921F-59AAB8A93129}.Release|Any CPU.ActiveCfg = Release|Any CPU
3972
{56EC1AA3-0060-4349-921F-59AAB8A93129}.Release|Any CPU.Build.0 = Release|Any CPU
73+
{56EC1AA3-0060-4349-921F-59AAB8A93129}.Release|x64.ActiveCfg = Release|Any CPU
74+
{56EC1AA3-0060-4349-921F-59AAB8A93129}.Release|x64.Build.0 = Release|Any CPU
75+
{56EC1AA3-0060-4349-921F-59AAB8A93129}.Release|x86.ActiveCfg = Release|Any CPU
76+
{56EC1AA3-0060-4349-921F-59AAB8A93129}.Release|x86.Build.0 = Release|Any CPU
77+
{9C278842-E287-488D-B76B-D3096AF553D4}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
78+
{9C278842-E287-488D-B76B-D3096AF553D4}.Debug|Any CPU.Build.0 = Debug|Any CPU
79+
{9C278842-E287-488D-B76B-D3096AF553D4}.Debug|x64.ActiveCfg = Debug|Any CPU
80+
{9C278842-E287-488D-B76B-D3096AF553D4}.Debug|x64.Build.0 = Debug|Any CPU
81+
{9C278842-E287-488D-B76B-D3096AF553D4}.Debug|x86.ActiveCfg = Debug|Any CPU
82+
{9C278842-E287-488D-B76B-D3096AF553D4}.Debug|x86.Build.0 = Debug|Any CPU
83+
{9C278842-E287-488D-B76B-D3096AF553D4}.Release|Any CPU.ActiveCfg = Release|Any CPU
84+
{9C278842-E287-488D-B76B-D3096AF553D4}.Release|Any CPU.Build.0 = Release|Any CPU
85+
{9C278842-E287-488D-B76B-D3096AF553D4}.Release|x64.ActiveCfg = Release|Any CPU
86+
{9C278842-E287-488D-B76B-D3096AF553D4}.Release|x64.Build.0 = Release|Any CPU
87+
{9C278842-E287-488D-B76B-D3096AF553D4}.Release|x86.ActiveCfg = Release|Any CPU
88+
{9C278842-E287-488D-B76B-D3096AF553D4}.Release|x86.Build.0 = Release|Any CPU
4089
EndGlobalSection
4190
GlobalSection(SolutionProperties) = preSolution
4291
HideSolutionNode = FALSE
@@ -46,6 +95,7 @@ Global
4695
{EB45A937-E3EF-4B0F-A674-92B44BEA3FDA} = {6446DEF2-D423-47E2-85CC-691A52915EC2}
4796
{F27EF346-050A-4AC6-BCAA-D2446246240C} = {6446DEF2-D423-47E2-85CC-691A52915EC2}
4897
{56EC1AA3-0060-4349-921F-59AAB8A93129} = {6446DEF2-D423-47E2-85CC-691A52915EC2}
98+
{9C278842-E287-488D-B76B-D3096AF553D4} = {6446DEF2-D423-47E2-85CC-691A52915EC2}
4999
EndGlobalSection
50100
GlobalSection(ExtensibilityGlobals) = postSolution
51101
SolutionGuid = {810FF428-282C-444B-9C2A-660B9AAE9D8F}

‎ASP.NET Core Basics/src/Vue/ClientApp/boot.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import './css/site.css';
2+
import 'bootstrap';
3+
import Vue from 'vue';
4+
import VueRouter from 'vue-router';
5+
Vue.use(VueRouter);
6+
7+
const routes = [
8+
{ path: '/', component: require('./components/home/home.vue.html') },
9+
{ path: '/counter', component: require('./components/counter/counter.vue.html') },
10+
{ path: '/fetchdata', component: require('./components/fetchdata/fetchdata.vue.html') },
11+
{ path: '/contactlist', component: require('./components/contacts/contactlist.vue.html') }
12+
];
13+
14+
new Vue({
15+
el: '#app-root',
16+
router: new VueRouter({ mode: 'history', routes: routes }),
17+
render: h => h(require('./components/app/app.vue.html'))
18+
});

‎ASP.NET Core Basics/src/Vue/ClientApp/components/app/app.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Vue from 'vue';
2+
import { Component } from 'vue-property-decorator';
3+
4+
@Component({
5+
components: {
6+
MenuComponent: require('../navmenu/navmenu.vue.html')
7+
}
8+
})
9+
export default class AppComponent extends Vue {
10+
}

‎ASP.NET Core Basics/src/Vue/ClientApp/components/app/app.vue.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template>
2+
<div id='app-root' class="container-fluid">
3+
<div class="row">
4+
<div class="col-sm-3">
5+
<menu-component />
6+
</div>
7+
<div class="col-sm-9">
8+
<router-view></router-view>
9+
</div>
10+
</div>
11+
</div>
12+
</template>
13+
14+
<script src="./app.ts"></script>

‎ASP.NET Core Basics/src/Vue/ClientApp/components/contacts/contactlist.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import Vue from 'vue';
2+
import { Component } from 'vue-property-decorator';
3+
4+
@Component
5+
export default class ContactListComponent extends Vue {
6+
contacts: Contact[] = [];
7+
8+
mounted() {
9+
fetch('http://localhost:13322/api/contactsApi/')
10+
.then(response => response.json() as Promise<Contact[]>)
11+
.then(data => {
12+
this.contacts = data;
13+
});
14+
}
15+
}
16+
17+
interface Contact {
18+
id: number;
19+
name: string;
20+
address: string;
21+
city: string;
22+
state: string;
23+
postalCode: string;
24+
phone: string;
25+
email: string;
26+
}

‎ASP.NET Core Basics/src/Vue/ClientApp/components/contacts/contactlist.vue.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div>
3+
<h1>Contact List</h1>
4+
<table v-if="contacts.length" class="table">
5+
<thead>
6+
<tr>
7+
<th>ID</th>
8+
<th>Name</th>
9+
</tr>
10+
</thead>
11+
<tbody>
12+
<tr v-for="contact in contacts">
13+
<td>{{ contact.id }}</td>
14+
<td>{{ contact.name }}</td>
15+
</tr>
16+
</tbody>
17+
</table>
18+
19+
<p v-else><em>Loading...</em></p>
20+
</div>
21+
</template>
22+
23+
<script src="./contactlist.ts"></script>

‎ASP.NET Core Basics/src/Vue/ClientApp/components/counter/counter.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Vue from 'vue';
2+
import { Component } from 'vue-property-decorator';
3+
4+
@Component
5+
export default class CounterComponent extends Vue {
6+
currentcount: number = 0;
7+
8+
incrementCounter() {
9+
this.currentcount++;
10+
}
11+
}

‎ASP.NET Core Basics/src/Vue/ClientApp/components/counter/counter.vue.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<div>
3+
<h1>Counter</h1>
4+
5+
<p>This is a simple example of a Vue.js component.</p>
6+
7+
<p>Current count: <strong>{{ currentcount }}</strong></p>
8+
9+
<button @click="incrementCounter">Increment</button>
10+
</div>
11+
</template>
12+
13+
<script src="./counter.ts"></script>

‎ASP.NET Core Basics/src/Vue/ClientApp/components/fetchdata/fetchdata.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import Vue from 'vue';
2+
import { Component } from 'vue-property-decorator';
3+
4+
interface WeatherForecast {
5+
dateFormatted: string;
6+
temperatureC: number;
7+
temperatureF: number;
8+
summary: string;
9+
}
10+
11+
@Component
12+
export default class FetchDataComponent extends Vue {
13+
forecasts: WeatherForecast[] = [];
14+
15+
mounted() {
16+
fetch('api/SampleData/WeatherForecasts')
17+
.then(response => response.json() as Promise<WeatherForecast[]>)
18+
.then(data => {
19+
this.forecasts = data;
20+
});
21+
}
22+
}

0 commit comments

Comments
 (0)