erotik film
bodyheat full moves www xxx kajal video la figa che sborra ver video de sexo porno
Luxury replica watches
escort antalya

** THIS SITE IS AN ARCHIVE ** - New Content is at:

Mar 11

Written by: Michael Washington
3/11/2017 11:03 PM  RssIcon


You can create database driven .Net Core applications using JavaScriptServices, and PrimeNg.

NOTE: Also see: Upgrading JavaScriptServices and PrimeNG From Angular 2 to Angular 4+

Live Example

You can see the application running live on Microsoft Azure at:

YouTube Video


You can see the YouTube video that covers all the content of this Blog here:


If you do not already have them, install the following prerequisites:


If you need to install Visual Studio ensure you install the ASP.NET and web development & .NET Core cross-platform development.

Run the installer again if you need to install additional components.

Create JavaScriptServices project


Create a folder on your Microsoft Windows computer (this tutorial was created using Windows 10).

Note: Do not have any special characters in the folder name. For example, and exclamation mark (!) will break the JavaScript code.


You can type CMD and press Enter to switch to the command line (and still be in that directory).


If you have not already installed JavaScriptServices, install them by entering (and pressing Enter):

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*


The screen will display indicating the templates now available.


Create the ASP.NET Core JavaScriptServices application by entering (and pressing Enter):

dotnet new angular



The application will be created.

Double-click on the *.csproj file to open it in Visual Studio 2017.


It will start restoring .Net dependencies and the node_modules (you can view the ../node_modules directory to see the items populated).

(Note: This can take 3-10 minutes or more)


Visual Studio will indicate when everything is complete.


Press Ctrl+F5 to Start Without Debugging.


The application will Build.


The application will show.

Close the web browser for now.

Add PrimeNG


We will now install the free open source PrimeNG Angular 2 components.

This will demonstrate how to integrate most Angular 2+ libraries with JavaScriptServices.


Open the package.json file and add:

    "font-awesome": "^4.7.0",
    "primeng": "^2.0.0"

Save the file.


Open the webpack.config.vendor.js file and add:




Also, in rules/test, add:


Save the file.


At this time, PrimeNg does not support pre-rendering so in ..\Views\Home\Index.cshtml, change:

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>




Save the file.


We altered the webpack.config.vendor.js file (to add PrimeNg and Font Awesome) but it is not updated by the normal build process. We have to run its configuration manually whenever we alter it.
In a command prompt, at the project root, run:

webpack --config webpack.config.vendor.js

(Note: If you don’t already have the webpack tool installed (for example you get an error when you run the code above), you’ll need to run: npm install -g webpack first)


Create a folder called prime in the components folder and add the following code to ..\ClientApp\app\components\prime\prime.component.html:


<p>This is a simple example of an Angular 2 component.</p>
<p>Current count: <strong>{{ currentCount }}</strong></p>
<p-growl [value]="msgs"></p-growl>
<button pButton 



Create the file and add the following code to ..\ClientApp\app\components\prime\prime.component.ts:


import { Component } from '@angular/core';
import {
} from 'primeng/primeng';
    selector: 'counter',
    templateUrl: './prime.component.html'
export class PrimeComponent {
    public currentCount = 0;
    public msgs: Message[] = [];
    public incrementCounter() {
                severity: 'info',
                summary: 'Info Message',
                detail: this.currentCount.toString()



Alter the file at: ..\ClientApp\app\app.module.ts to add:


import { FormsModule } from '@angular/forms';
import { PrimeComponent } from './components/prime/prime.component';
import { ButtonModule, GrowlModule } from 'primeng/primeng';
    declarations: [ 
    imports: [
            { path: 'prime', component: PrimeComponent },



Add the following code to ..\ClientApp\app\components\navmenu\navmenu.component.html:


    <li [routerLinkActive]="['link-active']">
        <a [routerLink]="['/prime']">
            <span class='glyphicon glyphicon-th-list'></span> Prime



Press Ctrl+F5 to Start Without Debugging.


When you click on the Prime link in the menu you will see a page that is using PrimeNg components.

Add A Database


Right-click on the project node, select Add then New Scaffolded Item…


Select Full Dependencies then click Add.


The Scaffolding will run.


Close the ScaffoldingReadMe.txt file that opens.


Right-click on the project node and select Edit HelloWorldData.csproj.



<DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="1.0.0" />

Save and close the file.


From the menu in Visual Studio, select Tools then Connect to Database…


  • Ensure that Microsoft SQL Server Database File (SqlClient) is selected for Data source (use the Change button if not)
  • Enter HelloData.mdf for the database name and indicate that it is in a folder called Data that is under your project root (the file does not exist, it will be created by Visual Studio)
  • Click OK


Click Yes to create the database.


In the Server Explorer window in Visual Studio (you can get to it from the Visual Studio menu using View then Server Explorer), the database will show.

Expand it, right-click on the Tables node and select Add New Table.


Enter the following script and click the Update button:


CREATE TABLE [dbo].[WeatherForecast] (
    [Id]            INT           IDENTITY (1, 1) NOT NULL,
    [DateFormatted] NVARCHAR (50) NOT NULL,
    [TemperatureC]  INT           NOT NULL,
    [TemperatureF] INT NOT NULL, 
    [Summary] NVARCHAR(50) NOT NULL, 



Click Update Database.


The Data Tools Operations window will indicate when the update is complete.


In the Server Explorer window, right-click on the database and select Refresh.


The WeatherForecast table will show.

Right-click on the table and select Show Table Data.


Enter sample data into the grid.


Always Close the database connection when done working with it to prevent locking.


In the Solution Explorer, right-click on the project node and select Manage NuGet Packages.


Search for and install: Microsoft.EntityFrameworkCore.Tools.


Open the NuGet Package Manager Console.



Scaffold-DbContext "Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=C:\TEMP\HelloWorldData\Data\HelloData.mdf;Integrated Security=True;" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models -f

and press Enter.

(update the connection string above to point to the location of the .mdf file in the project)

Alternate Method

You can also scaffold using the .NET Command Line Tools…

1) Follow these directions to set up scaffolding:

2) Enter:

dotnet ef dbcontext scaffold "Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=C:\TEMP\HelloWorldData\Data\HelloData.mdf;Integrated Security=True;" Microsoft.EntityFrameworkCore.SqlServer -t WeatherForcast -o Models -f

and press Enter.

Either method produces the following…


The scaffolded files will appear in the Models directory.

Note: If you get DBContext cannot be found errors (red squiggly lines in the Visual Studio text editor, simply close Visual Studio and re-open it.


Rename the DataContext file and the class to HelloDataContext.


Next, we follow the directions at this link: ASP.NET Core - Existing Database.

We remove the OnConfiguring method.

We add the following constructor to the class:


    public HelloDataContext(DbContextOptions<HelloDataContext> options) : 
        base(options) { }



We add the following using statements to Startup.cs:


using HelloWorldData.Models;
using Microsoft.EntityFrameworkCore;



We add the following code to the ConfigureServices section:


        options => options.UseSqlServer(




Add the following setting to the appsettings.json file:


  "ConnectionStrings": {

"HelloWorldDataDatabase": "Data Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename=

C:\\TEMP\\HelloWorldData\\Data\\HelloData.mdf;Integrated Security=True;"



(Note: The HelloWorldDataDatabase value needs to be on a single line – see the source code for the exact seting)



Right-click on the Controllers folder and select Add then New Scaffolded Item…


Select API, then API Controller with actions, using Entity Framework, then click Add.


Select the options above and click Add.


An API controller that will retrieve data from the database will be created.


We will now point the Angular page to the new API controller.

Open the ..\ClientApp\app\components\fetchdata\fetchdata.component.ts  file and alter the .get address to:




When we run the application, and click on the Fetch data link, the data will now be retrieved from the database.



Upgrading JavaScriptServices and PrimeNG From Angular 2 to Angular 4+

Building Single Page Applications on ASP.NET Core with JavaScriptServices

Visual Studio 2017


EntityFramework Reverse POCO Generator

ASP.NET Core - New Database

ASP.NET Core - Existing Database

Publishing and Running ASP.NET Core Applications with IIS


The project is available at

You must have Visual Studio 2017 (or higher) installed to run the code.

You will need to alter the appsettings.json file to point to the exact location of the .mdf file on your computer depending on where you unzip the project to.

15 comment(s) so far...

Start learn new one technology is hard. Thank to you I passed to join VS2017 SPA WebAPI Core and Angular 2 and libraries with JavaScriptServices.

By Oleg on   3/19/2017 2:25 PM

@Oleg - Thank you for the feedback.

By Michael Washington on   3/19/2017 2:25 PM

Michael, congratulations on such an excellent write-up and especially the video presentation. Seen a lot of Angular 2 videos, books and doucments but after reading your material and watching your video which was easily to comprehend, compact with lot of material covered in a short period of time made, I had to let you know how much I appreciated your efforts. What an interesting concept to just show the screens, walkthrough steps, discuss highlighted points and not waste time on compilation, application startup or unexpected real-time debugging situations. Great job and thanks.

By Mundo Rangel on   3/30/2017 4:13 AM

@Mundo Rangel - Thank you for the kind words. It is appreciated.

By Michael Washington on   3/30/2017 4:13 AM

Also letting you know I've found an error in your code.
It works in your example but it might confuse someone.

In prime.component.ts you have:

selector: 'counter',

but the selector here should be 'prime'.

By ire on   4/10/2017 5:19 AM

@ire - I checked the code and it is consistent (and it works). However, I do agree that I should not have used the same selectector in prime.component.ts as I did in counter.component.ts. However the class name is different and they are not shown at the same time (that would probably throw an error).

By Michael Washington on   4/10/2017 5:22 AM

Dear Michael,

Im having problem with bootstrap Dropdowns , seems problem with server side pre rendering. WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("dnn$ctr382$MainView$ViewEntry$cmdAddComment", "", true, "", "", false, true))

import { BsDropdownModule } from 'ngx-bootstrap/dropdown';

imports: [BsDropdownModule.forRoot(),...]
export class AppModule(){}

By shijil on   5/7/2017 5:28 AM

@shijil - You probably have to disable pre rendering. You can get more help on

By Michael Washington on   5/7/2017 5:31 AM

I only started to "play" with angular 2 and VS 2015, and couldn't see what's NOT supported in 2015 and IS supported in 2017.
You specifically stated that this should be done with VS 2017, so i guess there's a reason for it...
Can you please briefly say what's "missing" in 2015?

By eyal.i on   5/15/2017 6:26 AM

@eyal.i on - My example uses .Net Core. That part is VERY different in VS2015 than VS2017. in VS2017 many integration steps are "built-in". You simply cannot use my tutorial with VS2015.

By Michael Washington on   5/15/2017 6:28 AM

Im having problem with Adding my custom JS files..

How can i add my custom js in app.component.html

By MehtaParth on   7/5/2017 4:08 AM

@MehtaParth - You put your custom JavaScript in a .ts file.

By Michael Washington on   7/5/2017 4:08 AM

I am getting following error while publishing. Looks like aot-loader issue with primeng component. Please help to resolve this issue.

ERROR in ./$$_gendir/~/primeng/components/datatable/datatable.ngfactory.ts
Module parse failed: F:\Work\SperoHQ\$$_gendir\node_modules\primeng\components\datatable\datatable.ngfactory.ts Unexpected token (19:37)
You may need an appropriate loader to handle this file type.
| import * as i8 from 'primeng/components/utils/objectutils';
| import * as i9 from '../common/shared.ngfactory';
| export const DataTableModuleNgFactory:i0.NgModuleFactory = i0.╔╡cmf(i1.DataTableModule,
| ([] as any[]),(_l:any) => {
| return i0.╔╡mod([i0.╔╡mpd(512,i0.ComponentFactoryResolver,i0.╔╡CodegenComponentFactoryResolver,
@ ./$$_gendir/ClientApp/app/components/receipt/receipt-list.component.ngfactory.ts 12:0-109
@ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts
@ ./ClientApp/boot.server.ts

By Biju S on   10/22/2017 5:03 AM

@Biju S - This is an older tutorial. You will want to find an Angular 4 tutorial and/or download the working sample from this site.

By Michael Washington on   10/22/2017 5:05 AM

Thank you for documenting the tutorial. It's a bit dated, as you've noted, but I was able to follow along with a few minor tweaks along the way and got it working.

By Stephen Pham on   1/21/2018 10:31 AM
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation