Skip to content
This repository was archived by the owner on Jul 30, 2025. It is now read-only.

Commit 3ba665c

Browse files
abooarulrajabooarulraj
authored
Committed the example project.
0 parents commit 3ba665c

36 files changed

+191331
-0
lines changed

‎CRUD.csproj‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<Project Sdk="Microsoft.NET.Sdk.Web">
2+
3+
<PropertyGroup>
4+
<TargetFramework>netcoreapp2.0</TargetFramework>
5+
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
6+
<TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
7+
<IsPackable>false</IsPackable>
8+
</PropertyGroup>
9+
10+
<ItemGroup>
11+
<PackageReference Include="Microsoft.AspNetCore.All" Version="2.0.7" />
12+
<PackageReference Include="Newtonsoft.Json" Version="12.0.3" />
13+
<PackageReference Include="Syncfusion.EJ2.AspNet.Core" Version="17.3.0.34" />
14+
</ItemGroup>
15+
16+
<ItemGroup>
17+
<DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="2.0.3" />
18+
</ItemGroup>
19+
20+
<Target Name="DebugRunWebpack" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('wwwroot\dist') ">
21+
<!-- Ensure Node.js is installed -->
22+
<Exec Command="node --version" ContinueOnError="true">
23+
<Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
24+
</Exec>
25+
<Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
26+
27+
<!-- In development, the dist files won't exist on the first run or when cloning to
28+
a different machine, so rebuild them if not already present. -->
29+
<Message Importance="high" Text="Performing first-run Webpack build..." />
30+
<Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js" />
31+
<Exec Command="node node_modules/webpack/bin/webpack.js" />
32+
</Target>
33+
34+
<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
35+
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
36+
<Exec Command="npm install" />
37+
<Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod" />
38+
<Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />
39+
40+
<!-- Include the newly-built files in the publish output -->
41+
<ItemGroup>
42+
<DistFiles Include="wwwroot\dist\**" />
43+
<ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
44+
<RelativePath>%(DistFiles.Identity)</RelativePath>
45+
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
46+
</ResolvedFileToPublish>
47+
</ItemGroup>
48+
</Target>
49+
50+
</Project>

‎ClientApp/boot.ts‎

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

‎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+
}

‎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>

‎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+
}

‎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>

‎ClientApp/components/fetchdata/fetchdata.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import Vue from 'vue';
2+
import { GridPlugin, Edit, Toolbar } from '@syncfusion/ej2-vue-grids';
3+
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
4+
Vue.use(GridPlugin);
5+
6+
export default Vue.extend({
7+
data(){
8+
return{
9+
data: new DataManager({
10+
url: 'Home/UrlDatasource',
11+
insertUrl: 'Home/Insert',
12+
updateUrl: 'Home/Update',
13+
removeUrl: 'Home/Delete',
14+
// crudUrl: 'Home/CrudAction',
15+
// batchUrl: 'Home/BatchUpdate',
16+
adaptor: new UrlAdaptor()
17+
}),
18+
editOptions:{
19+
allowAdding: true,
20+
allowEditing: true,
21+
allowDeleting: true,
22+
// mode: "Batch" // Enable while performing batch editing
23+
},
24+
toolbarOptions: ['Add', 'Edit', 'Delete', 'Update', 'Cancel']
25+
}
26+
},
27+
provide:{
28+
grid: [Edit, Toolbar]
29+
}
30+
})

‎ClientApp/components/fetchdata/fetchdata.vue.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<template>
2+
<div>
3+
<ejs-grid
4+
:dataSource="data"
5+
:editSettings="editOptions"
6+
:toolbar="toolbarOptions">
7+
<e-columns>
8+
<e-column field="OrderID" headerText="Order ID" :isPrimaryKey="true"
9+
textAlign="Right" width="90"></e-column>
10+
<e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
11+
<e-column field="Freight" headerText="Freight" editType="numericedit"
12+
textAlign="Right" format="C2" width="90"></e-column>
13+
<e-column field="ShipCity" headerText="Ship City" editType="dropdownedit"
14+
textAlign="Right" width="120"></e-column>
15+
<e-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit"
16+
textAlign="Right" width="120"></e-column>
17+
</e-columns>
18+
</ejs-grid>
19+
</div>
20+
</template>
21+
22+
<style>
23+
@import url("https://cdn.syncfusion.com/ej2/material.css");
24+
</style>
25+
26+
<script src="./fetchdata.ts"></script>
27+
28+

‎ClientApp/components/home/home.vue.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<div>
3+
<h1>Hello, world!</h1>
4+
<p>Welcome to your new single-page application, built with:</p>
5+
<ul>
6+
<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>
7+
<li><a href="https://vuejs.org/">Vue.js</a> and <a href="http://www.typescriptlang.org/">TypeScript</a> for client-side code</li>
8+
<li><a href="https://webpack.github.io/">Webpack</a> for building and bundling client-side resources</li>
9+
<li><a href="http://getbootstrap.com/">Bootstrap</a> for layout and styling</li>
10+
</ul>
11+
<p>To help you get started, we've also set up:</p>
12+
<ul>
13+
<li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
14+
<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>
15+
<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>
16+
<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>
17+
</ul>
18+
</div>
19+
</template>

‎ClientApp/components/navmenu/navmenu.css‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
.main-nav li .glyphicon {
2+
margin-right: 10px;
3+
}
4+
5+
/* Highlighting rules for nav menu items */
6+
.main-nav li a.router-link-active,
7+
.main-nav li a.router-link-active:hover,
8+
.main-nav li a.router-link-active:focus {
9+
background-color: #4189C7;
10+
color: white;
11+
}
12+
13+
/* Keep the nav menu independent of scrolling and on top of other items */
14+
.main-nav {
15+
position: fixed;
16+
top: 0;
17+
left: 0;
18+
right: 0;
19+
z-index: 1;
20+
}
21+
22+
@media (min-width: 768px) {
23+
/* On small screens, convert the nav menu to a vertical sidebar */
24+
.main-nav {
25+
height: 100%;
26+
width: calc(25% - 20px);
27+
}
28+
.main-nav .navbar {
29+
border-radius: 0px;
30+
border-width: 0px;
31+
height: 100%;
32+
}
33+
.main-nav .navbar-header {
34+
float: none;
35+
}
36+
.main-nav .navbar-collapse {
37+
border-top: 1px solid #444;
38+
padding: 0px;
39+
}
40+
.main-nav .navbar ul {
41+
float: none;
42+
}
43+
.main-nav .navbar li {
44+
float: none;
45+
font-size: 15px;
46+
margin: 6px;
47+
}
48+
.main-nav .navbar li a {
49+
padding: 10px 16px;
50+
border-radius: 4px;
51+
}
52+
.main-nav .navbar a {
53+
/* If a menu item's text is too long, truncate it */
54+
width: 100%;
55+
white-space: nowrap;
56+
overflow: hidden;
57+
text-overflow: ellipsis;
58+
}
59+
}

0 commit comments

Comments
 (0)