Tag Archives: .net training

First MVC 6 and EF 7 Application (using Tag Helpers)

Part 2

In Part 1 of this series we created and configured a basic project using ASP.NET MVC 6. Though the project runs as per expectations and gives a message in the browser, it isn’t yet database driven. In this blog we will add database support to the project in the following ways:

  • By displaying a list of customers from the Northwind database
  • Permit modifications of existing customers
  • Give basic validation capabilities

As a result, the page will display a list of customers from the Customers table of the Northwind database. Each table row has an Edit link. By clicking on the Edit link that will take you to the Edit view such that the customer details can be modified.

Once you edit the details and click the Save button the changes are saved in the database. In case there are any errors they are displayed on the page.

Let’s stasrt with development!

Let’s recall the same project that we created in Part 1 and add Customer class to the Models folder by using the Add New Items dialog. The complete code of this class is shown below:

[Table(“Customers”)]

public class Customer

{

[Required]

[StringLength(5)]

public string CustomerID { get; set; }

[Required]

public string CompanyName { get; set; }

[Required]

public string ContactName { get; set; }

[Required]

public string Country { get; set; }

}

The Customer class is added to the Customers table using the [Table] feature and contains 4 public properties namely CustomerID, CompanyName, ContactName and Country. Basic validations like [Required] and [StringLength] are also added to these properties.

Then add NorthwindDbContext class to the Classes folder and write the following code to it.

public class NorthwindDbContext:DbContext

{

public DbSet<Customer> Customers { get; set; }

protected override void OnConfiguring

(DbContextOptionsBuilder optionsBuilder)

{

optionsBuilder.UseSqlServer(AppSettings.ConnectionString);

}

}

The NorthwindDbContext class represents the data context and hence inherits from the DbContext base class. It consists of a single DbSet – Customers. Notice how the OnConfiguring() method has been overridden to specify the database connection string.

The overridden OnConfiguring() method supplies optionsBuilder parameter. The UseSqlServer() method accepts a d-base connection string. Remember that we stored the database connection string in the ConnectionString static property of the AppSettings class during startup of the application.

Next modify the Index() action of the HomeController as shown below:

public IActionResult Index()

{

using (NorthwindDbContext db = new NorthwindDbContext())

{

List<Customer> data = db.Customers.ToList();

return View(data);

}

}

The Index() action instantiates the NorthwindDbContext and brings all the customers in the form of a List. This List is given to the Index view as its model.

Now, open the Index view and modify it as shown below:

@model List<MVC6Demo.Models.Customer>

<html>

<head>

<title>My First MVC 6 Application</title>

</head>

<body>

<h1>List of Customers</h1>

<table border=”1″ cellpadding=”10″>

@foreach (var item in Model)

{

<tr>

<td>@item.CustomerID</td>

<td>@item.CompanyName</td>

<td><a asp-action=”Edit”

asp-controller=”Home”

asp-route-id=”@item.CustomerID”>

Edit</a></td>

</tr>

}

</table>

</body>

</html>

The Index view displays a list of customers in a table. This code is quite same to MVC 5.x except the Edit link. In MVC 5.x you use ActionLink() HTML helper to render hyperlinks. The above code uses an anchor Tag Helper to achieve the same. The asp-action and asp-controller features points to the action method and the controller. The asp-route-id attribute specifies the ID route parameter to a CustomerID. This way the Edit links will take this form:

/home/edit/ALFKI

To get the Tag Helper intellisense you must add _ViewImports.cshtml file to the Views folder (you can do that using Add New Items dialog). Once added place the following code in it:

@addTagHelper “*, Microsoft.AspNet.Mvc.TagHelpers”

The @addTagHelper directive tells the framework to use Tag Helpers from the specified assembly. You will now get various tag helper related attributes in the Visual Studio intellisense.

Ok. Next, add Edit() action to the HomeController as shown below:

public IActionResult Edit(string id)

{

using (NorthwindDbContext db = new NorthwindDbContext())

{

Customer data = db.Customers.Where(i =>

i.CustomerID == id).SingleOrDefault();

var query = (from c in db.Customers

orderby c.Country ascending

select new SelectListItem()

{ Text = c.Country, Value = c.Country })

.Distinct();

List<SelectListItem> countries = query.ToList();

ViewBag.Countries = countries;

return View(data);

}

}

The Edit action gets a CustomerID as its parameter. Inside, the code brings a Customer matching the supplied ID and sends it to the Edit view. The Edit view needs a list of countries for the Country column. So, a List of SelectListItem (Microsoft.AspNet.Mvc.Rendering namespace) is developed and filled with unique countries from the Customers table. This List is sent to the view through the Countries ViewBag property.

Then add Edit view under Views/Home folder and key-in the following markup in it:

@model MVC6Demo.Models.Customer

<html>

<head>

<title>My First MVC 6 Application</title>

<style>

.field-validation-error

{

color:red;

}

.validation-summary-errors

{

color:red;

}

</style>

</head>

<body>

<h1>Edit Customer</h1>

<form asp-controller=”Home” asp-action=”Save” method=”post”>

<table border=”1″ cellpadding=”10″>

<tr>

<td>

<label asp-for=”CustomerID”>Customer ID :</label>

</td>

<td>

<input asp-for=”CustomerID” readonly=”readonly” />

<span asp-validation-for=”CustomerID”></span>

</td>

</tr>

<tr>

<td>

<label asp-for=”CompanyName”>Company Name :</label>

</td>

<td>

<input asp-for=”CompanyName” />

<span asp-validation-for=”CompanyName”></span>

</td>

</tr>

<tr>

<td>

<label asp-for=”ContactName”>Contact Name :</label>

</td>

<td>

<input asp-for=”ContactName” />

<span asp-validation-for=”ContactName”></span>

</td>

</tr>

<tr>

<td>

<label asp-for=”Country”>Country :</label>

</td>

<td>

<select asp-for=”Country”

asp-items=”@ViewBag.Countries”></select>

<span asp-validation-for=”Country”></span>

</td>

</tr>

<tr>

<td colspan=”2″>

<input type=”submit” value=”Save” />

</td>

</tr>

</table>

</form>

<div asp-validation-summary=”ValidationSummary.All”></div>

<br />

<a asp-action=”Index” asp-controller=”Home”>Go Back</a>

</body>

</html>

The above markup uses the following Tag Helpers:

  • form
  • label
  • input
  • select
  • field validation and validation summary

The asp-action and asp-controller features of the form tag helper are set to Save and Home respectively. This way the form will be POSTed to the Save() action of the HomeController. The asp-for attribute of the label and the input tag helpers specify a model property that is bound with the label and the input field respectively. The asp-items feature of the select tag helper specify that the <option> elements be generated from the Countries ViewBag property.

The field level validations are displayed by adding <span> elements and setting their asp-validation-for attribute to the appropriate model property. This way the model validation errors will be displayed in the <span> elements. The validation summary is displayed in a <div> element by setting its asp-validation-summary attribute to ValidationSummary.All. The look and feel of the validation tag helpers is controlled through CSS classes – .field-validation-error and .validation-summary-errors (see top of the markup).

Now add Save() action to the HomeController and write the following code to it:

public IActionResult Save(Customer obj)

{

using (NorthwindDbContext db =

new NorthwindDbContext())

{

var query = (from c in db.Customers

orderby c.Country ascending

select new SelectListItem()

{ Text = c.Country, Value = c.Country }).Distinct();

List<SelectListItem> countries = query.ToList();

ViewBag.Countries = countries;

if (ModelState.IsValid)

{

db.Entry(obj).State = EntityState.Modified;

db.SaveChanges();

}

return View(“Edit”, obj);

}

}

The code that fills the Countries ViewBag property is similar to before. Then the code finds whether the ModelState is valid using the IsValid property. If the model state is valid the modified Customer details are saved to the database. This is done by setting the State property to Modified and then calling SaveChanges() method.

That’s done! Run the application and check if the customer details could be edited successfully.

We conclude for now. Keep coding!!

Let us know your opinion in the comments sections below. And feel free to refer Microsoft’s site to gather more information.

If you want to improve your skill in ASP.Net and excel yourself in ASP.NET training program; our institute, CRB Tech Solutions would be of great help and for you. Come and join us with our well structured program for ASP .Net.

Stay connected to CRB Tech for more technical optimization and other updates and information.

Don't be shellfish...Buffer this pageEmail this to someoneDigg thisShare on FacebookShare on Google+Share on LinkedInPrint this pageShare on RedditPin on PinterestShare on StumbleUponTweet about this on TwitterShare on Tumblr

First MVC 6 and EF 7 Application (with Empty Project Template)

Part 1

If you are one of that techie who is tracking the progress of ASP.NET 5, you probably know that RC 1 of ASP.NET 5 is available now. This article explains how a simple MVC 6 application could be developed from ground up by using an Empty Project Template. This article is based on the following software:

  • Visual Studio 2015

  • ASP.NET 5 RC 1

  • Entity Framework 7 RC 1

Before you start you need to ensure that you have installed them correctly before you proceed further.

Let’s start here!

Open VS 2015 and select File—–New—-Project menu option. In the New Project dialog choose ASP.NET Web Application, give some project name and click OK button.

In the project template dialog, select Empty under ASP.NET 5 Preview Templates section.

Next, open Project.json file in the VS editor. The Project.json file is a JSON file and contains the entire project configuration like project dependencies, target frameworks and much more. For this example, you have to add some NuGet packages required to develop and run the application. You can enhance project dependencies in two ways:

  • Right click on the References node and choose Manage NuGet Packages. This is very similar to MVC 5.x projects. Once added the NuGet package entries are automatically added to the Project.json file.

  • Add NuGet package dependencies in the Project.json file.

Let’s make use of the later approach.

We won’t go into every minute details of each and every package in this article. It is sufficient to mention that:

  • Microsoft.AspNet.Mvc is the core MVC 6 package

  • Microsoft.AspNet.Mvc.TagHelpers contains tag helpers (discussed later)

  • EntityFramework.MicrosoftSqlServer provides Entity Framework 7 support

Then, right click on the project and choose Add > New Item to open the Add New Item dialog.

Select ASP.NET Configuration File from the list, name it AppSettings.json and click on Add to add the file to project root folder.

The AppSettings.json file has the entire application specific configuration. There is a difference between Project.json and AppSettings.json. The former stores project configuration that is necessary to compile and run the project. The later stores application configuration utilized in the code.

Next you have to add four folders under the project root namely Models, Views, Controllers and Classes. The purpose of the first three is quite obvious. The Classes folder will store other classes required in the application such as a DbContext class. You can give any other name to this folder.

Then add a class called AppSettings in the Classes folder and write the following code:

public class AppSettings

{

public static string ConnectionString { get; set; }

}

The AppSettings class has a single static property – ConnectionString – that intends to hold the database

connection string. This property is taken from the Startup class as discussed recently. Once assigned you can reach out the database connection string from anywhere in the application.

Now open Startup.cs file. The code from the Startup class is implored whenever the application runs. You will find that the Startup class has two methods – ConfigureServices() and Configure(). Both of them have special meaning to the framework and hence their name must remain unchanged.

Edit the Startup file to include a few namespaces and a public constructor.

using Microsoft.AspNet.Hosting;

using Microsoft.Dnx.Runtime;

using Microsoft.Extensions.Configuration;

using Microsoft.Extensions.PlatformAbstractions;

using Microsoft.Data.Entity;

using MVC6Demo.Classes;

namespace WebApplication1

{

public class Startup

{

public Startup(IHostingEnvironment env,

IApplicationEnvironment app)

{

}

public void ConfigureServices(IServiceCollection services)

{

}

public void Configure(IApplicationBuilder app)

{

}

}

}

Take note of the namespaces at the top. They are needed by the code that you will fill in these methods sooner. Also take note that the constructor accepts two parameters: IHostingEnvironment and IApplicationEnvironment. These 3 methods are executed by the framework in the same order – Startup(), ConfigureServices() and Configure().

Next, add the following code to the Startup() constructor.

public Startup(IHostingEnvironment env,

IApplicationEnvironment app)

{

ConfigurationBuilder builder = new ConfigurationBuilder();

builder.SetBasePath(app.ApplicationBasePath);

builder.AddJsonFile(“appsettings.json”);

IConfigurationRoot config = builder.Build();

AppSettings.ConnectionString = config.Get<string>

(“Data:DefaultConnection:ConnectionString”);

}

The Startup constructor mainly reads the AppSettings.json file and stores the database connection string into the AppSettings class. The ConfigurationBuilder class is responsible for reading and loading the configuration information. The SetBasePath() method sets the base path where the configuration file(s) is located. The ApplicationBasePath means the physical path of the project’s root folder.

The AddJsonFile() adds AppSettings.json file to the list of configuration files to be processed. You can have multiple configuration files per project. The Build() method reads the configuration and returns it as an instance of IConfigurationRoot.

To read it, you can use Get<T>() method on the IConfigurationRoot object. Now the database connection string could be accessed from anywhere in the application in typed manner.

Then modify the ConfigureServices() method as shown below:

public void ConfigureServices(IServiceCollection services)

{

services.AddMvc();

services.AddEntityFramework().AddSqlServer();

}

The ConfigureServices() method specifies the features that are available to your application. In this case your application is made available the services of the MVC framework and the Entity Framework.

Now modify the Configure() method as shown below:

public void Configure(IApplicationBuilder app)

{

app.UseStaticFiles();

app.UseMvc(routes =>

{

routes.MapRoute(

name: “default”,

template: “{controller=Home}/{action=Index}/{id?}”);

});

}

The Configure() method tells the framework that you want to use static files feature and MVC features. The static files feature allows you to access static files such as .htm and .html. If you don’t specify this feature and attempt to access the static files you will get an error. Of course, if you don’t need this feature you can skip this line.

The UseMvc() call is important because it not only tells the framework that your application is using MVC but also configures the routing system.

Ok. Now add HomeController to the Controllers folder using the Add New Item dialog. The default HomeController looks like this:

public class HomeController : Controller

{

public IActionResult Index()

{

ViewBag.Message = “Hello from MVC 6!”;

return View();

}

}

Notice that the Index() action returns IActionResult. The Index() action is quite straightforward and simply sets Message property on the ViewBag.

Then add Home subfolder under Views folder. Right click on the Home folder and open the Add New Item dialog again to add Index view to the project.

Add the following HTML markup to the Index view.

<html>

<head>

<title>My First MVC 6 Application</title>

</head>

<body>

<h1>@ViewBag.Message</h1>

</body>

</html>

The Index view simply outputs the Message ViewBag property on the response stream.

Run the application by pressing F5.

We conclude for now. Keep coding!!

If you want to improve your skill in ASP.Net and excel yourself in ASP.NET training program; our institute, CRB Tech Solutions would be of great help and for you. Come and join us with our well structured program for ASP .Net.

Stay connected to CRB Tech for more technical optimization and other updates and information.

Don't be shellfish...Buffer this pageEmail this to someoneDigg thisShare on FacebookShare on Google+Share on LinkedInPrint this pageShare on RedditPin on PinterestShare on StumbleUponTweet about this on TwitterShare on Tumblr

Preparation Of ASP.NET MVC / ASP.NET Core Projects To Utilise Angular 2

With the availability of Angular 2; let’s try hands hands on this new framework. Angular 2 documentation already have many great articles available online; that could guide you to the whole process. In this article we shall discuss how you can prepare your ASP.NET MVC and ASP.NET Core projects to use Angular 2.

Let’s start.

Step 1 :Install NPM

Those who already has NPM installed; this is an optional step. Many programmers prefer to work with NPM from the command prompt instead of using Visual Studio features.

Step 2 : Develop ASP.NET MVC / ASP.NET Core Project

Start by designing a new ASP.NET MVC project using Empty project template. Name it AngularAspNetMvc.

In the same solution you must add ASP.NET Core project using Empty project template. You could also prefer Web Application project template instead of empty project for MVC. Name it as AngularAspNetCore.

Then configure the ASP.NET Core project to use MVC.

Step 3 : Download Angular 2 framework and its dependencies

Before you start coding you should download and install the Angular 2 framework files in your project. This step involves more effort. Actually you need to download Angular 2 and its dependency packages using NPM.

There are two methods to do this task – using NPM command line options and using VS. Here Visual Studio 2015 is used to download the necessary packages.

Select NPM Configuration file item. Name the item as Packages.json (default) and click Ok.

The Packages.json file has all the packages and dependencies needed. Add the following markup into the Packages.json file.

{

“name”: “angular-aspnet”,

“version”: “1.0.0”,

“scripts”: {

“start”: “tsc && concurrently \”npm run tsc:w\”

\”npm run lite\” “,

“lite”: “lite-server”,

“postinstall”: “typings install”,

“tsc”: “tsc”,

“tsc:w”: “tsc -w”,

“typings”: “typings”

},

“license”: “ISC”,

“dependencies”: {

“@angular/common”: “2.0.0”,

“@angular/compiler”: “2.0.0”,

“@angular/core”: “2.0.0”,

“@angular/forms”: “2.0.0”,

“@angular/http”: “2.0.0”,

“@angular/platform-browser”: “2.0.0”,

“@angular/platform-browser-dynamic”: “2.0.0”,

“@angular/router”: “3.0.0”,

“@angular/upgrade”: “2.0.0”,

“core-js”: “^2.4.1″,

“reflect-metadata”: “^0.1.3″,

“rxjs”: “5.0.0-beta.12″,

“systemjs”: “0.19.27”,

“zone.js”: “^0.6.23″,

“angular2-in-memory-web-api”: “0.0.20”,

“bootstrap”: “^3.3.6″

},

“devDependencies”: {

“concurrently”: “^2.2.0″,

“lite-server”: “^2.2.2″,

“typescript”: “^2.0.2″,

“typings”:”^1.3.2″

}

}

Now add a JSON file to the root of the project using the Add New Item dialog. Name it as Typings.json.

Add the following markup into the Typings.json file.

{

“globalDependencies”: {

“core-js”: “registry:dt/core-js#0.0.0+20160725163759″,

“jasmine”: “registry:dt/jasmine#2.2.0+20160621224255″,

“node”: “registry:dt/node#6.0.0+20160909174046″

}

}

Then right click on the Packages.json file and select Restore Packages from the shortcut menu.

All the necessary packages will get downloaded.

Repeat the same method for AngularAspNetCore project.

To mention AngularAspNetCore project also updates the Dependencies node to reflect the NPM packages.

Step 4 : Add TypeScript configuration file

Before you proceed you need to configure the TypeScript compiler. You can do this by adding tsconfig.json file in the project. You can open the Add New Item dialog and search for TypeScript.

After adding the tsconfig.json file add the below mentioned markup into it:

{

“compilerOptions”: {

“target”: “es5″,

“module”: “commonjs”,

“moduleResolution”: “node”,

“sourceMap”: true,

“emitDecoratorMetadata”: true,

“experimentalDecorators”: true,

“removeComments”: false,

“noImplicitAny”: true,

“suppressImplicitAnyIndexErrors”: true

},

“compileOnSave”: true,

“exclude”: [“node_modules”,”scripts”]

}

The above markup is for AngularAspNetMvc project. The tsconfig.json for AngularAspNetCore looks identical with one difference. The exclude options specify wwwroot folder and not the scripts folder as given below:

{

“compilerOptions”: {

“target”: “es5″,

“module”: “commonjs”,

“moduleResolution”: “node”,

“sourceMap”: true,

“emitDecoratorMetadata”: true,

“experimentalDecorators”: true,

“removeComments”: false,

“noImplicitAny”: true,

“suppressImplicitAnyIndexErrors”: true

},

“compileOnSave”: true,

exclude”: [“node_modules”,”wwwroot”]

}

Step 5 : Design your Angular 2 client side application using TypeScript

Now add a new folder under the project’s root folder. Name it as AngularApp. Then add 3 TypeScript files to this folder : main.ts, app.component.ts and app.module.ts.

Click on No button and add remaining files.

Now, open app.component.ts file and add the following TypeScript code to it.

import { Component } from ‘@angular/core';

@Component({

selector: ‘my-app’,

template: ‘<h1>Angular 2 meets ASP.NET!</h1>’

})

export class AppComponent { }

Similarly, open the app.module.ts file and add the following code:

import { NgModule } from ‘@angular/core';

import { BrowserModule } from ‘@angular/platform-browser';

import { AppComponent } from ‘./app.component';

@NgModule({

imports: [BrowserModule],

declarations: [AppComponent],

bootstrap: [AppComponent]

})

export class AppModule { }

Finally, open the main.ts file and write the following code:

import { platformBrowserDynamic } from

‘@angular/platform-browser-dynamic';

import { AppModule } from ‘./app.module';

const platform = platformBrowserDynamic();

platform.bootstrapModule(AppModule);

After this step your AngularApp folder should look like this:

Ensure to repeat the same process for AngularAspNetCore project.

Step 6 : Configure Angular 2 module loading

This is done using SystemJS. First add a JavaScript file named systemjs.config.js in the project’s root folder.

Write the following code inside the systemjs.config.js file.

(function (global) {

System.config({

paths: {

‘npm:': ‘/scripts/angularframework/’

},

map: {

app: ‘/scripts/angularapp’,

‘@angular/core': ‘npm:@angular/core/bundles

/core.umd.js’,

‘@angular/common': ‘npm:@angular/common/bundles/

common.umd.js’,

‘@angular/compiler': ‘npm:@angular/compiler/bundles/

compiler.umd.js’,

‘@angular/platform-browser': ‘npm:@angular/

platform-browser/bundles/platform-browser.umd.js’,

‘@angular/platform-browser-dynamic': ‘npm:@angular/

platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js’,

‘@angular/http': ‘npm:@angular/http/bundles/

http.umd.js’,

‘@angular/router': ‘npm:@angular/router/bundles/

router.umd.js’,

‘@angular/forms': ‘npm:@angular/forms/bundles/

forms.umd.js’,

‘rxjs': ‘npm:rxjs’,

‘angular2-in-memory-web-api':

‘npm:angular2-in-memory-web-api’,

},

packages: {

app: {

main: ‘./main.js’,

defaultExtension: ‘js’

},

rxjs: {

defaultExtension: ‘js’

},

‘angular2-in-memory-web-api': {

main: ‘./index.js’,

defaultExtension: ‘js’

}

}

});

})(this);

Notice the code marked in bold letters. The first bold line sets the path where Angular 2 framework files are located. On the same lines the second bold line sets the path where your Angular 2 application files will be located. In our example we will store these files under Scripts folder (more on that later).

Ensure to do this step for both the projects.

Step 7 : Add HomeController and Index view

Next add HomeController and Index view in the project. Open the Index.cshtml file and write the following codes into it.

<html>

<head>

<title>Angular 2 meets ASP.NET</title>

<script src=”/scripts/angularframework/core-js/client/shim.min.js”>

</script>

<script src=”/scripts/angularframework/zone.js/dist/zone.js”>

</script>

<script src=”/scripts/angularframework/reflect-metadata/Reflect.js”>

</script>

<script src=”/scripts/angularframework/systemjs/dist/system.src.js”>

</script>

<script src=”/scripts/systemjs.config.js”></script>

<script>

System.import(‘app’).catch(function(err){ console.error(err); });

</script>

</head>

<body>

<my-app>Loading…</my-app>

</body>

</html>

</html>

The codes marked in bold letters are <script> references required by the application.

The <body> has one element <my-app>. This element is handled by Angular 2 component from app.component.ts file.

Step 8 : Develop the project

Build both the projects AngularAspNetMvc and AngularAspNetCore. This will help you compile the C# code but also the TypeScript code. If the compilation is successful you will find that the TypeScript code has been converted to JavaScript code under the AngularApp folder.

Step 9 : Moving all JavaScript files to Scripts folder

It’s time to deploy the JavaScript files. There are two types of JavaScript files you need to take into account:

  • Angular 2 framework files and dependencies
  • Your application’s JavaScript files (see previous step).

You copy all the files under your “Scripts” folder. For an ASP.NET MVC application there is no specific name or location for the scripts folder. For ASP.NET Core applications all scripts must be placed under wwwroot folder. So, do the following:

  • For AngularAspNetMvc project create Scripts folder under the project root.
  • For AngularAspNetCore project create Scripts folder under the wwwroot folder.

There are two ways to copy the files from node_modules and AngularApp folders to the Scripts folder – manual and automated.

For AngularAspNetMvc project do the following from Windows Explorer and not from VS:

  • Copy node_modules folder from project root to the Scripts folder.
  • Rename the newly copied folder to AngularFramework.
  • Copy AngularApp folder from project root to the Scripts folder.
  • Copy Systemjs.config.js file from project root to the Scripts folder.

For AngularAspNetCore project do the following from Windows Explorer and not from VS:

  • Copy node_modules folder from project root to the /wwwroot/Scripts folder.
  • Rename the newly copied folder to AngularFramework.
  • Copy AngularApp folder from project root to the /wwwroot/Scripts folder.
  • Copy Systemjs.config.js file from project root to the /wwwroot/Scripts folder.

Step 10 : Run the application

Now time to press F5.

Make sure to run both the applications and confirm if they behave as expected.

After this you need to add more codes, configuration and functionality as required by your application.

We conclude now….. Enjoy coding!

Let us know your opinion in the comments sections below. And feel free to refer Microsoft’s site to gather more information.

If you want to improve your skill in ASP.Net and excel yourself in ASP.NET training program; our institute, CRB Tech Solutions would be of great help and for you. Come and join us with our well structured program for ASP .Net.

Stay connected to CRB Tech for more technical optimization and other updates and information.

Don't be shellfish...Buffer this pageEmail this to someoneDigg thisShare on FacebookShare on Google+Share on LinkedInPrint this pageShare on RedditPin on PinterestShare on StumbleUponTweet about this on TwitterShare on Tumblr

Use Session in ASP.NET Core 1.0

ASP.NET programmers use Session object to store session wide data. To store and retrieve values in Session object is quite straightforward in ASP.NET web forms and ASP.NET MVC. But, ASP.NET Core deals with the session data in a various ways. This article will introduce you to the basics of session data management in ASP.NET Core.

To demonstrate how data could be stored and retrieved in the Session object under ASP.NET Core, develop a new ASP.NET web application. The first step is to reference the needed NuGet package as shown below (Project.json).

“dependencies”: {

“Microsoft.AspNet.Mvc”: “6.0.0-rc1-final”,

“Microsoft.AspNet.Mvc.TagHelpers”: “6.0.0-rc1-final”,

“Microsoft.AspNet.StaticFiles”: “1.0.0-rc1-final”,

“Microsoft.AspNet.Tooling.Razor”: “1.0.0-rc1-final”,

“Microsoft.Extensions.Configuration.Abstractions”:

“1.0.0-rc1-final”,

“Microsoft.Extensions.Configuration.Json”:

“1.0.0-rc1-final”,

“Microsoft.AspNet.Session”: “1.0.0-rc1-final”,

“Newtonsoft.Json”: “8.0.3”

}

As visible, the above configuration makes use of Microsoft.AspNet.Session assembly. Also you will need a reference to Newtonsoft.Json component. The Json.Net component is needed to serialize and de-serialize objects to and from strings.

Then open the Startup.cs file and change the ConfigureServices() and Configure() methods as shown below:

public void ConfigureServices(IServiceCollection services)

{

services.AddMvc();

services.AddCaching();

services.AddSession();

}

public void Configure(IApplicationBuilder app)

{

app.UseIISPlatformHandler();

app.UseSession();

app.UseMvc(routes =>

{

routes.MapRoute(

name: “default”,

template: “{controller=Home}/

{action=Index}/{id?}”);

});

}

The ConfigureServices() method adds the in-memory caching service and session service by using AddCaching() and AddSession() methods. The Configure() method next indicates that the application uses the session service making use of UseSession() method.

Next add HomeController to the Controllers folder and add the following actions to it:

public IActionResult Index()

{

HttpContext.Session.SetString(“message”,

“Hello World!”);

HttpContext.Session.SetInt32(“count”, 4);

return View();

}

public IActionResult Index2()

{

ViewBag.Message = HttpContext.Session.

GetString(“message”);

ViewBag.Count = HttpContext.Session.

GetInt32(“count”);

return View();

}

The Index() action gets the availability to the Session object through the HttpContext object. The SetString() and SetInt32() extension methods are then used to store a string value and an integer value into the session. Both these methods include two parameters, viz. key name and the value.

The Index2() action makes use of the GetString() and GetInt32() methods are used to recover the prior stored session values. The retrieved values are stored in the ViewBag.

Next, add two views – Index.cshtml and Index2.cshtml – and write the below mark-up in them.

Index.cshtml

<h2>@Html.ActionLink(“Go to Index2″, “Index2″)</h2>

Index2.cshtml

<h2>@ViewBag.Message</h2>

<h2>@ViewBag.Count</h2>

Sometime you need to store complex types – objects – into the session. You can’t do this directly because ASP.NET Core is developed to support distributed sessions. So, you can’t store object references in the session. But you can have your own way to store and retrieve entire objects.

What you can do is that you can convert an object to its JSON equivalent and next store this JSON string data into the session. While obtaining the object stored in the session you have to convert the JSON string back into an object. You can accomplish this object to JSON conversion using the Json.Net component.

Let’s consider you have Employee class as shown below:

public class Employee

{

public int EmployeeID { get; set; }

public string FirstName { get; set; }

public string LastName { get; set; }

}

And you want to store an Employee object into the session.

To do the object to JSON and JSON to object transformation, you need to write a set of extension methods. Take a look at the following code:

public static class SessionExtensionMethods

{

public static void SetObject(this ISession session,

string key, object value)

{

string stringValue = JsonConvert.

SerializeObject(value);

session.SetString(key, stringValue);

}

public static T GetObject<T>(this ISession session,

string key)

{

string stringValue = session.GetString(key);

T value = JsonConvert.DeserializeObject<T>

(stringValue);

return value;

}

}

The static class SessionExtensionMethods comprise of two extension methods viz. SetObject() and GetObject().

The SetObject() extension method extends ISession. It takes a key name and an object which has to be stored in the session. Inside, SerializeObject() method of JsonConvert is used to change the supplied object into a JSON string. The JSON string obtained thus, is then stored in the session using the SetString() method.

The GetObject() generic extension method accepts a key name. Inside, which reads the JSON string for the specified key and resolves it to get an object. This is performed using the DeserializeObject() method of JsonConvert. The object is next sent back to the caller.

Once the SetObject() and GetObject() extension methods are reader, you can use them as follows:

public IActionResult Index()

{

….

Employee emp = new Employee()

{

EmployeeID = 1,

FirstName = “Nancy”,

LastName = “Davolio” };

HttpContext.Session.SetObject(“emp”, emp);

return View();

}

public IActionResult Index2()

{

ViewBag.Employee = HttpContext.Session.

GetObject<Employee>(“emp”);

return View();

}

Now the Index() action creates an Employee object and stores it in the session using SetObject() extension method. The Index2() action brings back the Employee object using the GetObject() extension method.

In the examples till now you could access the session inside a controller class. At times you might need to access the session inside some class which is not a controller. In these cases you can’t get the HttpContext object inside that class. But, you can use dependency injection to inject IHttpContextAccessor into such a class. The IHttpContextAccessor object next permits you to access the HttpContext.

Let’s quickly see how this is done. Look at the following class:

public class MyHelperClass

{

private IHttpContextAccessor httpContextAccessor;

public MyHelperClass(IHttpContextAccessor obj)

{

this.httpContextAccessor = obj;

}

public string Message

{

get

{

return httpContextAccessor.HttpContext.

Session.GetString(“message”);

}

}

public int Count

{

get

{

return httpContextAccessor.HttpContext.

Session.GetInt32(“count”).Value;

}

}

}

The MyHelperClass class needs to access the session. The code announces a private variable of type IHttpContextAccessor (Microsoft.AspNet.Http namespace). This variable is assigned a value in the constructor. The constructor receives an IHttpContextAccessor object from the DI framework. The Message and Count read-only properties then return the message and count values from the Session.

To mention, you need to register MyHelperClass with the DI framework. You can do so in the ConfigureServices() method in Startup.cs.

public void ConfigureServices(IServiceCollection services)

{

….

services.AddScoped<SessionDemo.Models.MyModel>();

}

To test the functioning of MyHelperClass, change the HomeController as written below:

public class HomeController : Controller

{

private MyHelperClass helper;

public HomeController(MyHelperClass obj)

{

this.helper = obj;

}

….

}

The above code injects MyHelperClass object into the HomeController. You can then use this object to read the message and count keys.

ViewBag.Message = helper.Message;

ViewBag.Count = helper.Count;

We conclude for now. Keep coding!!

Let us know your opinion in the comments sections below. And feel free to refer Microsoft’s site to gather more information.

If you want to improve your skill in ASP.Net and excel yourself in ASP.NET training program; our institute, CRB Tech Solutions would be of great help and for you. Come and join us with our well structured program for ASP .Net.

Stay connected to CRB Tech for more technical optimization and other updates and information

Don't be shellfish...Buffer this pageEmail this to someoneDigg thisShare on FacebookShare on Google+Share on LinkedInPrint this pageShare on RedditPin on PinterestShare on StumbleUponTweet about this on TwitterShare on Tumblr

Create Custom Tag Helpers in ASP.NET Core

As an ASP.NET programmer we are already familiar with server controls and HTML helpers. What does they do? In simple words they execute some server side logic and generate HTML markup. The HTML markup hence generated is then rendered in the browser. In ASP.NET core you can continue using HTML helpers as in ASP.NET MVC. But, there is a better alternative i.e. the Tag Helpers.

ASP.NET Core tag helpers consist of markup they you place in your views. This markup is special in that it is processed on the server side and renders certain HTML markup. In order to get an idea consider the following Form tag helper:

<form asp-action=”ProcessForm” asp-controller=”Home” method=”post”>

….

….

</form>

The above mark-up indicates that you are using a form tag helper. Notice that the form tag helper has two attributes of the form asp. These attributes mention the action name and the controller name respectively. There is also a method attribute. The asp-action and asp-controller attributes are processed on the server while the method attribute is the standard HTML attribute. The above server side markup gets transformed to this :

<form action=”/home/ProcessForm” method=”post>

….

….

</form>

Tag helpers are better than HTML helpers because they are mark-up friendly. They appear more natural to go along standard HTML markup. What’s more that you can easily build your own custom tag helpers. The article will illustrate how.

The Latestblogposts tag helper – markup

A custom tag helper has two parts: a piece of mark-up that you put in a razor view and a class that houses the processing logic of the tag helper under consideration. Let’s understand with an example. Suppose you are building a blog engine and wish to display a list of latest blog posts belonging to a particular category. You also want to control the number of items being displayed. Considering these requirements let’s say we wish to have this kind of custom tag helper markup in our view:

<latestblogposts Category=”AspNetCore” Count=”10″>

</latestblogposts>

Here, the latestblogpost tag helper puts itself as an independent mark-up element. It has two attributes namely Category and Count. The Category attribute indicates the blog post category or tag to be used (AspNetCore in this case) to pick the latest posts. The Count attribute mentions that 10 items are to be displayed in the latest posts list.

The Latestblogpost tag helper – class

This is the first part of our custom tag helper. Now the remaining part a class named LatestblogpostsTagHelper must be created. This class is shown below:

public class LatestblogpostsTagHelper:TagHelper

{

public string Category { get; set; }

public int Count { get; set; }

public override void Process(TagHelperContext context,

TagHelperOutput output)

{

output.TagName = “div”;

output.Attributes.Add(“class”, “latestBlogPosts”);

using (BlogDbContext db = new BlogDbContext())

{

var query = (from p in db.BlogPosts

where p.Category == Category

orderby p.PublishDate descending

select p

).Take(Count);

StringBuilder sb = new StringBuilder();

foreach(var item in query)

{

sb.AppendFormat(“<h2><a href=’/home/

displaypost/{0}’>{1}</a></h2>”,item.BlogPostID,

item.Title);

}

output.Content.SetHtmlContent(sb.ToString());

}

}

}

Take note of the above code carefully. The LatestblogpostsTagHelper class comes from TagHelper class (Microsoft.AspNetCore.Razor.TagHelpers namespace). The LatestblogpostsTagHelper class has two properties – Category and Count – and an overridden Process() method.

The Category and Count properties belong to the respective attributes used in the tag helper markup. In the Process() method the processing logic of the custom tag helper stays. The Process() method receives TagHelperOutput parameter that is used to render the desired output. The TagName property indicates the HTML tag name of the resultant mark-up (div in this case). The feature collection is made use to set the class feature of the <div> to latestBlogPosts. Then an Entity Framework Core code connects with the data-base and brings records from the BlogPosts table. The BlogDbContext and BlogPost are discussed later.

Notice how the LINQ to Entities query use the Category and Count properties while getting the records. A for each loop then iterates through the latest blog posts and generates a list of hyperlinks for each post. This is done with the help of a StringBuilder. Lastly, SetHtmlContent() method is used to render the HTML fragment.

DbContext and entity class

This completes the Latestblogposts tag helper. Before running the application you must need to add the DbContext and the BlogPost entity class. They are shown below:

[Table(“BlogPosts”)]

public class BlogPost

{

[DatabaseGenerated(DatabaseGeneratedOption.Identity)]

public int BlogPostID { get; set; }

[Required]

[StringLength(200)]

public string Title { get; set; }

[Required]

public string Content { get; set; }

[Required]

[StringLength(50)]

public string Category { get; set; }

[Required]

public DateTime PublishDate { get; set; }

}

public class BlogDbContext:DbContext

{

public DbSet<BlogPost> BlogPosts { get; set; }

protected override void OnConfiguring

(DbContextOptionsBuilder optionsBuilder)

{

optionsBuilder.UseSqlServer(@”data source=.;

initial catalog =BlogDb;

Integrated Security=True;

MultipleActiveResultSets = true”);

}

}

To design a database based on the above DbContext you can use the following commands:

> dotnet ef migrations add MyMigrations

> dotnet ef database update

Of course, you can also designthe database manually and not use these commands.

Using the custom tag helper

In order to use the latestblogposts tag helper successfully on a razor view, it must be made available to the view. You do this using the @addtagHelper directive. You can place this directive either inside the view file itself or better yet inside _ViewImports.cshtml file.

@addTagHelper *,MyWebApplication

The @addTagHelper directive specifies that all the tag helpers (*) from the MyWebApplication assembly (the current web application’s project) are to be made available to the view. You will also get IntelliSense for the custom tag helpers:

After creating the database and adding a few dummy records run the application. The following figure shows a sample run of the application.

If you see the HTML source of the page, you will see this HTML fragment:

<div class=”latestBlogPosts”>

<h2>

<a href=’/home/displaypost/4′>Blog Post Title 2</a>

</h2>

<h2>

<a href=’/home/displaypost/1′>Blog Post Title 1</a>

</h2>

</div>

Tag helpers and Pascal casing

In the above example the tag helper element was <latestblogposts>. What if you wish to use the following tag name?

<Latest-Blog-Posts Category=”AspNetCore” Count=”10″>

</Latest-Blog-Posts>

Here the tag name includes hyphened character. You can’t use hyphen in C# class names. The remedy is to do Pascal casing for the tag helper class name. So, the class name needs to be :

public class LatestBlogPostsTagHelper : TagHelper

{

….

}

The same rule applies for attribute names also. Thus article-category feature would be drawn with ArticleCategory attribute and article-count attribute will communicate to ArticleCount attribute.

Specifying element and attribute mapping manually

In the above example the markup element <latestblogposts> was compared to LatestblogpostsTagHelper class automatically. On the same lines Category and Count attributes were mapped to Category and Count properties automatically. Though this might work well in many situations, at times you might want to specify this mapping. You can do so as mentioned below:

[HtmlTargetElement(“latestblogposts”)]

public class LatestblogpostsTagHelper:TagHelper

{

[HtmlAttributeName(“Category”)]

public string Category { get; set; }

[HtmlAttributeName(“Count”)]

public int Count { get; set; }

….

….

}

As you can see the LatestblogpostsTagHelper class is designed with [HtmlTargetElement] attribute that maps it to the latestblogposts element. Similarly, Category and Count properties are decorated with [HtmlAttributeName] attribute. The [HtmlAttributeName] attribute maps the properties to Category and Count attributes respectively.

Creating tag helpers for standard HTML elements

In the above example we designed a new markup element – <latestblogposts> – to represent a custom tag helper. What if you wish to use a standard HTML element instead of introducing your own? Say for example :

<div article-category=”AspNetCore” article-count=”10″>

</div>

In this case the custom tag helper takes a form of <div> element. The <div> element has two attributes article-category and article-count.

The class that manages the above tag helper is shown below:

[HtmlTargetElement(“div”,Attributes = “article-*”)]

public class LatestBlogPostsTagHelper : TagHelper

{

public string ArticleCategory { get; set; }

public int ArticleCount { get; set; }

public override void Process(

TagHelperContext context,

TagHelperOutput output)

{

output.Attributes.Add(“class”, “latestBlogPosts”);

using (BlogDbContext db = new BlogDbContext())

{

var query = (from p in db.BlogPosts

where p.Category == ArticleCategory

orderby p.PublishDate descending

select p

).Take(ArticleCount);

StringBuilder sb = new StringBuilder();

foreach (var item in query)

{

sb.AppendFormat(“<h2><a href=’/home/

displaypost/{0}’>{1}</a></h2>”,

item.BlogPostID, item.Title);

}

output.Content.SetHtmlContent(sb.ToString());

}

}

}

Notice that the LatestBlogPostsTagHelper class is now decorated with [HtmlTargetElement] attribute. The target element is set to div. Now, there might be several <div> elements on the page. We wish to tell our helper only for a <div> that has article-category and article-count attributes (you could have used any other attribute names). The second parameter sets the Attributes filter to article. This way only the <div> elements having features of the form article are processed by this helper.

We conclude now….. Enjoy coding!

Let us know your opinion in the comments sections below. And feel free to refer Microsoft’s site to gather more information.

If you want to improve your skill in ASP.Net and excel yourself in ASP.NET training program; our institute, CRB Tech Solutions would be of great help and for you. Come and join us with our well structured program for ASP .Net.

Stay connected to CRB Tech for more technical optimization and other updates and information

Don't be shellfish...Buffer this pageEmail this to someoneDigg thisShare on FacebookShare on Google+Share on LinkedInPrint this pageShare on RedditPin on PinterestShare on StumbleUponTweet about this on TwitterShare on Tumblr

ASP.NET Core Identity – Add Email Confirmation

In today’s age of digitalisation, you would wish to confirm that the email address entered by the user at the time of creating an account actually belongs to him. So, that verification becomes important. ASP.NET Core helps an easy way to do that.

The email verification step in ASP.NET Core Identity works in the following manner:

  • You produce an email verification token
  • Next you send an email to the user’s email address with a link that contains the user’s ID and above generated token.
  • The user clicks on the email verification link and if there is no issue it is marked verified.
  • When the user attempts a log-in to the system you next check if his email is verified or not and allow or deny the access.

ASP.NET Core Identity gives most of the functionality required to use the above steps, you need an external aide. You require a mechanism to send emails through your code. In .NET Framework , System.Net.Mail classes is used for the same. There is no direct equivalent in .NET Core. You must use some third-party NuGet packages. For the sake of our example I am going to stick with SmtpClient class from .NET Framework’s System.Net.Mail namespace.

Let’s begin!

First of all make changes in the Project.json to use .NET Framework rather than .NET Core. You can do it like this :

“frameworks”: {

“net452″: {

“frameworkAssemblies”: {

“System.Net”: “4.0.0.0”

}

}

}

Then open the AccountController and modify its Register() POST action as shown below:

[HttpPost]

[ValidateAntiForgeryToken]

public IActionResult Register(RegisterViewModel obj)

{

if (ModelState.IsValid)

{

MyIdentityUser user = new MyIdentityUser();

user.UserName = obj.UserName;

user.Email = obj.Email;

user.FullName = obj.FullName;

user.BirthDate = obj.BirthDate;

IdentityResult result = userManager.CreateAsync(user,

obj.Password).Result;

if (result.Succeeded)

{

if(!roleManager.RoleExistsAsync(“NormalUser”).Result)

{

MyIdentityRole role = new MyIdentityRole();

role.Name = “NormalUser”;

role.Description = “Perform normal operations.”;

IdentityResult roleResult =

roleManager.CreateAsync(role).Result;

if(!roleResult.Succeeded)

{

ModelState.AddModelError(“”,

“Error while creating role!”);

return View(obj);

}

}

userManager.AddToRoleAsync(user, “NormalUser”).Wait();

//send confirmation email

string confirmationToken = userManager.

GenerateEmailConfirmationTokenAsync(user).Result;

string confirmationLink = Url.Action(“ConfirmEmail”,

“Account”, new { userid = user.Id,

token = confirmationToken },

protocol: HttpContext.Request.Scheme);

SmtpClient client=new SmtpClient();

client.DeliveryMethod = SmtpDeliveryMethod.

SpecifiedPickupDirectory;

client.PickupDirectoryLocation = @”C:\Test”;

client.Send(“test@localhost”,user.Email,

“Confirm your email”,

confirmationLink);

return RedirectToAction(“Login”, “Account”);

}

}

return View(obj);

}

The code calls the GenerateEmailConfirmationTokenAsync() method of UserManager class by passing on the MyIdentityUser object. This call returns a confirmation token for that user. For verifying an email address you require a user’s Id and his confirmation token. A URL is formed using Url.Action() that points to the ConfirmEmail action of the Accountcontroller. The URL contains the user’s Id and the confirmation token in the query string.

Then the code develops a SmtpClient object and configures it such that outgoing emails are stored in the Test folder. This is done only for testing. In a real application you will need a better way like a 3rd party component. Then the code sends an email using the Send() method of SmtpClient. The from address, to address, subject and the body is marked.

The above code will create an email to be sent to the user with a URL. You can go to your C:\Test and open the email stored there in any text editor such as Notepad. A sample verification URL is given below:

http://localhost:49310/Account/

ConfirmEmail?userid=d333fcd6-ac33-4d16-b17e-ed4096a567de&token=….

For the sake of clarity the actual token is not shown above. But you can see how the query string contains “userid” and “token” values.

Clicking on this link will take the user to ConfirmEmail() action of Account controller. The ConfirmEmail() action is shown below:

public IActionResult ConfirmEmail(string userid,string token)

{

MyIdentityUser user= userManager.FindByIdAsync(userid).Result;

IdentityResult result= userManager.

ConfirmEmailAsync(user,token).Result;

if(result.Succeeded)

{

ViewBag.Message = “Email confirmed successfully!”;

return View(“Success”);

}

else

{

ViewBag.Message = “Error while confirming your email!”;

return View(“Error”);

}

}

The ConfirmEmail() action receives the user’s ID and confirmation token from the query string. Inside, the code finds the MyIdentityUser whose Id matches with the one sent through the query string. Then ConfirmEmail() method of UserManager is called to confirm the user’s email The ConfirmEmail() method requires the MyIdentityUser object and the confirmation token.

The result of ConfirmEmail() is checked and if all goes well a success view is displayed in the browser.

Here is the final step. You need to add some checking in the Login() action that checks whether a user’s email has been verified or not. So, open the Login() POST action and modify it as given below:

[HttpPost]

[ValidateAntiForgeryToken]

public IActionResult Login(LoginViewModel obj)

{

if (ModelState.IsValid)

{

var user = userManager.FindByNameAsync

(obj.UserName).Result;

if (user != null)

{

if (!userManager.IsEmailConfirmedAsync

(user).Result)

{

ModelState.AddModelError(“”,

“Email not confirmed!”);

return View(obj);

}

}

var result = loginManager.PasswordSignInAsync

(obj.UserName, obj.Password,

obj.RememberMe,false).Result;

if (result.Succeeded)

{

return RedirectToAction(“Index”, “Home”);

}

ModelState.AddModelError(“”, “Invalid login!”);

}

return View(obj);

}

If IsEmailConfirmedAsync() returns false or not verified, an error message is displayed to the user, otherwise the login process continues.

We conclude now….. Keep coding!

Let us know your opinion in the comments sections below. And feel free to refer Microsoft’s site to gather more information.

If you want to improve your skill in ASP.Net and excel yourself in ASP.NET training program; our institute, CRB Tech Solutions would be of great help and for you. Come and join us with our well structured program for ASP .Net.

Stay connected to CRB Tech for more technical optimization and other updates and information

Don't be shellfish...Buffer this pageEmail this to someoneDigg thisShare on FacebookShare on Google+Share on LinkedInPrint this pageShare on RedditPin on PinterestShare on StumbleUponTweet about this on TwitterShare on Tumblr

ASP.NET Core Identity And How It Allows Password Reset

In today’s article we shall discuss how to enable password reset such that users can reset their passwords and get a new password.

The password reset steps in ASP.NET Core Identity works in the following manner:

  • A user mentions that he wants to reset his password. He next specifies his UserName.
  • The system generates a password reset token
  • The system sends an email to the user along with a link to reset the password which contains the password reset token.
  • The user clicks on the password reset link and is presented with a form where a new password can be supplied.
  • The system resets the password after assessing the token and then gives a new password to the user.

To enable password reset, you have to add a view model class and a couple of views. Let’s start here….

Open the Login view and change it to include another form to reset the password. The following mark-up shows the new form.

<h1>Reset Your Password</h1>

<form asp-controller=”Account”

asp-action=”SendPasswordResetLink”

method=”post”>

<table>

<tr>

<td><label asp-for=”UserName”>User Name :

</label></td>

<td><input name=”UserName” type=”text” /></td>

</tr>

<tr>

<td colspan=”2″>

<input type=”submit”

value=”Reset Password” />

</td>

</tr>

</table>

<strong>@ViewBag.Message</strong>

<div asp-validation-summary=”All”></div>

</form>

Did you notice that the above form contains textbox for entering user name and submits to the SendPasswordResetLink() action.

The SendPasswordResetLink() action is given below:

public IActionResult SendPasswordResetLink(string username)

{

MyIdentityUser user = userManager.

FindByNameAsync(username).Result;

if (user == null || !(userManager.

IsEmailConfirmedAsync(user).Result))

{

ViewBag.Message = “Error while

resetting your password!”;

return View(“Error”);

}

var token = userManager.

GeneratePasswordResetTokenAsync(user).Result;

var resetLink = Url.Action(“ResetPassword”,

“Account”, new { token = token },

protocol: HttpContext.Request.Scheme);

// code to email the above link

// see the earlier article

ViewBag.Message = “Password reset link has

been sent to your email address!”;

return View(“Login”);

}

The SendPasswordResetLink() action gets the username as given by the user on the Login view. It then produces a password reset token using GeneratePasswordResetTokenAsync() method of the UserManager. The GeneratePasswordResetTokenAsync() method accepts a MyIdentityUser object whose password is to be reset.

Then a URL is generated containing the password reset token in the query string. The URL points to the ResetPassword() action (discussed next). Note that the code that actually sends an email has been omitted for the sake of clarity. A sample URL looks like this:

http://localhost:49310/Account/ResetPassword?token=….

Before you develop the ResetPassword() actions and the ResetPassword view, add new view model class – ResetPasswordViewModel – in the Models folder. This class is mentioned below:

public class ResetPasswordViewModel

{

[Required]

public string UserName { get; set; }

[Required]

[DataType(DataType.Password)]

public string Password { get; set; }

[Required]

[DataType(DataType.Password)]

public string ConfirmPassword { get; set; }

[Required]

public string Token { get; set; }

}

The ResetPasswordViewModel contains four properties – UserName, Password, ConfirmPassword and Token. The Token property holds the password rest token generated earlier.

The ResetPassword() GET action displays ResetPassword view for supplying the new password.

public IActionResult ResetPassword(string token)

{

return View();

}

The markup of ResetPassword view is as follows:

@model ResetPasswordViewModel

<h1>Reset Your Password</h1>

<form asp-controller=”Account”

asp-action=”ResetPassword”

method=”post”>

<input type=”hidden” asp-for=”Token” />

<table>

<tr>

<td><label asp-for=”UserName”></label></td>

<td><input asp-for=”UserName” /></td>

</tr>

<tr>

<td><label asp-for=”Password”>

New Password</label></td>

<td><input asp-for=”Password” /></td>

</tr>

<tr>

<td><label asp-for=”ConfirmPassword”>

Confirm New Password</label></td>

<td><input asp-for=”ConfirmPassword” /></td>

</tr>

<tr>

<td colspan=”2″>

<input type=”submit”

value=”Reset Password” />

</td>

</tr>

</table>

<div asp-validation-summary=”All”></div>

</form>

The ResetPassword view POSTs to ResetPassword() POST action. This action is given below:

[HttpPost]

public IActionResult ResetPassword

(ResetPasswordViewModel obj)

{

MyIdentityUser user = userManager.

FindByNameAsync(obj.UserName).Result;

IdentityResult result = userManager.ResetPasswordAsync

(user, obj.Token,obj.Password).Result;

if (result.Succeeded)

{

ViewBag.Message = “Password reset successful!”;

return View(“Success”);

}

else

{

ViewBag.Message = “Error while resetting the password!”;

return View(“Error”);

}

}

The ResetPassword() POST action gets ResetPasswordViewModel object which has the user name, new password and the password reset token. It then calls ResetPasswordAsync() method of UserManager in an effort to reset the user’s password to the new value. If all goes fine the IdentityResult will succeed. Accordingly a success message or an error message is displayed to the user.

We conclude the discussion here. Keep coding!!

Let us know your opinion in the comments sections below. And feel free to refer Microsoft’s site to gather more information.

If you want to improve your skill in ASP.Net and excel yourself in ASP.NET training program; our institute, CRB Tech Solutions would be of great help and for you. Come and join us with our well structured program for ASP .Net.

Stay connected to CRB Tech for more technical optimization and other updates and information.

Don't be shellfish...Buffer this pageEmail this to someoneDigg thisShare on FacebookShare on Google+Share on LinkedInPrint this pageShare on RedditPin on PinterestShare on StumbleUponTweet about this on TwitterShare on Tumblr

How To Develop Web API in ASP.NET Core

To mention, developing Web API in ASP.NET Core is equivalent to decorating Web API in ASP.NET MVC with a few differences. The differences are mentioned below in brief:

  • Web API is not a separate framework. It got merged with ASP.NET Core MVC.
  • Previously a Web API class used to inherit from ApiController base class. Due to the merging mentioned above, the Web API doesn’t inherit from ApiController, in fact it inherits from the same Controller class that other controllers also inherit from.
  • As Web API is just another controller, you are free to have as many actions you want. Of course, to create a REST style service you still need to have those standard Get(), Post(), Put() and Delete() actions as before.
  • You can define the HTTP verb and action mapping at the action level using features like [HttpPost], [HttpPut] and [HttpDelete].

With the above overview, let’s build a simple REST style Web API that performs CRUD operations on the Customers table of the Northwind database.

Start by creating a new ASP.NET Core project using VS and pick the Web API project template.

The project contains ValuesController in the Controllers folder. Take note that the ValuesController inherits from Controller base class just like any other MVC controller.

Rename the default Web API class to CustomerServiceController. You will require database support for your service and hence you need to add NuGet packages for Entity Framework Core. You can do that through Project.json file:

….

“Microsoft.EntityFrameworkCore”: “1.0.1”,

“Microsoft.EntityFrameworkCore.SqlServer”: “1.0.1”

….

Take the Startup class and modify as shown below:

public class Startup

{

public void ConfigureServices

(IServiceCollection services)

{

services.AddMvc();

services.AddEntityFrameworkSqlServer();

}

public void Configure

(IApplicationBuilder app)

{

app.UseStaticFiles();

app.UseMvc(routes =>

{

routes.MapRoute(

name: “default”,

template: “{controller=Home}

/{action=Index}

/{id?}”);

});

}

}

The ConfigureServices() method sums up MVC and Entity Framework Core to the services collection. The Configure() method configures the MVC routing. This routing is not required by the Web API as such but is needed for local clients while consuming the Web API (as you will see in later parts).

Then add Models and Views folders to the project. Add Customer model class in the Models folder as given below:

[Table(“Customers”)]

public class Customer

{

[Key]

public string CustomerID { get; set; }

public string CompanyName { get; set; }

public string ContactName { get; set; }

public string Country { get; set; }

}

The Customer class is decorated with [Table] attribute that maps it to the Customers table. It contains four public properties namely CustomerID, CompanyName, ContactName and Country. The CustomerID is marked as the primary key using the [Key] attribute.

Then add NorthwindDbContext class to the Models folder and write the following code to it:

public class NorthwindDbContext:DbContext

{

public DbSet<Customer> Customers { get; set; }

protected override void OnConfiguring

(DbContextOptionsBuilder optionsBuilder)

{

optionsBuilder.UseSqlServer(“data source=.;

initial catalog=northwind;

integrated security=true”);

}

}

The NorthwindDbContext class acts as the DbContext for our data access and inherits from the DbContext class. The NorthwindDbContext defines Customers DbSet. The OnConfiguring() method configures the DbContext to use the SQL Server database with the specified connection string. Ensure to adjust the connection string to suit your need.

Now, open the CustomerServiceController and type the following code:

[Route(“api/[controller]”)]

public class CustomerServiceController : Controller

{

[HttpGet]

public List<Customer> Get()

{

using (NorthwindDbContext db =

new NorthwindDbContext())

{

return db.Customers.OrderBy(

i => i.CustomerID).ToList();

}

}

[HttpGet(“{id}”)]

public Customer Get(string id)

{

using (NorthwindDbContext db =

new NorthwindDbContext())

{

return db.Customers.Where(

i => i.CustomerID == id).SingleOrDefault();

}

}

[HttpPost]

public string Post([FromBody]Customer obj)

{

using (NorthwindDbContext db =

new NorthwindDbContext())

{

db.Customers.Add(obj);

db.SaveChanges();

return “Customer added successfully!”;

}

}

[HttpPut(“{id}”)]

public string Put(string id, [FromBody] Customer obj)

{

using (NorthwindDbContext db =

new NorthwindDbContext())

{

db.Entry(obj).State = EntityState.Modified;

db.SaveChanges();

return “Customer modified successfully!”;

}

}

[HttpDelete(“{id}”)]

public string Delete(string id)

{

using (NorthwindDbContext db =

new NorthwindDbContext())

{

var obj = db.Customers.Where(

i => i.CustomerID == id).SingleOrDefault();

db.Customers.Remove(obj);

db.SaveChanges();

return “Customer deleted successfully!”;

}

}

}

Take note of the following about the Web API you have created:

  • The CustomerServiceController is designed with [Route] feature that configures the routing for the Web API. The route adds /api is written after the name of the controller. So, our Web API will be located at /api/CustomerService.
  • The Web API comprise of five actions namely Get(), Get(id), Post(), Put(), Delete().
  • The HTTP verb to action mapping is done using the features – [HttpGet], [HttpPost], [HttpPut] and [HttpDelete] respectively.
  • The Customer parameter of the actions is model bound and makes use of the [FormBody] feature which indicates the parameter values that will be coming from the request’s body.
  • These features also specify the id route parameter when necessary.

Here in this article we shall not discuss the details of the Entity Framework Core code that is present in these actions. If you worked with EF before that code must be familiar to you. The above mentioned actions generally implement CRUD (create, read, update and delete) operations for the Customers table.

Ok. This completes the CustomerService Web API. Run the application and see the result. If all goes well you should see JSON customer objects removed in the browser.

Return of the IActionResult and HTTP status codes

In the above example the actions gave back the specific types like List<Customer>, Customer and string. However, that’s not required. You might return a generic IActionResult from all the Web API action methods. This technique gets easy when you want to indicate HTTP status codes along with the return values.

Consider the Put() method given below:

[HttpPut(“{id}”)]

public IActionResult Put(string id,

[FromBody] Customer obj)

{

using (NorthwindDbContext db =

new NorthwindDbContext())

{

db.Entry(obj).State = EntityState.Modified;

db.SaveChanges();

return new ObjectResult

(“Customer modified successfully!”);

}

}

The Put() now returns IActionResult in place of a string. Inside, the code develops a new ObjectResult object to return a string value back to the caller. The ObjectResult sets the HTTP status code to 200 (Ok) and then returns the specific value to the caller. All the actions of our CustomerService Web API can be modified to use this technique.

If you don’t want to return anything from an action (void) then you can use NoContentResult object instead of ObjectResult. The NoContentResult returns HTTP status 204 (no content).

You can also use certain inbuilt methods to indicate the HTTP status code. Some of them are mentioned below:

  • Ok() : Gives back HTTP status code of 200 (ok).
  • BadRequest() : Gives back HTTP status code of 400 (bad request).
  • NotFound() : Gives back HTTP status code of 404 (not found).

The following code shows Get(id) action modified to use NotFound() method.

[HttpGet(“{id}”)]

public IActionResult Get(string id)

{

using (NorthwindDbContext db =

new NorthwindDbContext())

{

var data= db.Customers.Where

(i => i.CustomerID == id).SingleOrDefault();

if(data==null)

{

return NotFound(“Invalid CustomerID!”);

}

return new ObjectResult(data);

}

}

As you can see, the code now checks whether data is null or not. If it is null it indicates that the CustomerID was not found in the database and hence NotFound() method is called with a custom error message.

We conclude the discussion here.

Keep coding!

Let us know your opinion in the comments sections below. And feel free to refer Microsoft’s site to gather more information.

If you want to improve your skill in ASP.Net and excel yourself in ASP.NET training program; our institute, CRB Tech Solutions would be of great help and for you. Come and join us with our well structured program for ASP .Net.

Stay connected to CRB Tech for more technical optimization and other updates and information.

Don't be shellfish...Buffer this pageEmail this to someoneDigg thisShare on FacebookShare on Google+Share on LinkedInPrint this pageShare on RedditPin on PinterestShare on StumbleUponTweet about this on TwitterShare on Tumblr

How To Highlight Keywords Using ASP.NET Core Middleware

Today in this article we shall discuss how to highlight keywords from response using .NET core middleware. Sometime you need to search for certain keywords from a response body and then highlight them with various colours. In ASP.NET Web Forms there is an HTTP module to achieve this. In ASP.NET MVC you must have written a custom filter to achieve this task. In ASP.NET Core you can code a custom middleware to do the same. This article tells you how.

If you are not aware with ASP.NET Core middleware, I suggest you read the basics first and then continue with this.

Let’s take a scenario that closely resembles what has been mentioned above and then create a simple example to explain what we learn.

Suppose you are building a website using ASP.NET Core. The website has a search box.

You can enter some keywords to search for and press the Search key. The server side then generates the response based on the business logic and also highlights the keyword. Let’s say the keyword “Nancy” gets highlighted.

Why do you need such functionality? The above scenario is quite straight and strictly speaking doesn’t need middleware as such, just consider the following possibilities:

  • You want to automatically insert advertisements into the response depending on one or more keywords.
  • You might wish to add headers or footers dynamically.
  • You want to tamper with the response HTML to suit your needs.
  • You want to do all the above without writing any specific program in the controllers or views.

In a nutshell, you want to manipulate the response from the server to suit your needs.

Now when you understood what we want to explain, let’s create a simple middleware that really does what we wish.

Start by creating a new ASP.NET Core project based on the Web Application template. Then sumup HomeController and Index view as usual. Place the following HTML markup inside the Index view.

@{

ViewData[“Title”] = “Home Page”;

}

<div>

<form asp-action=”Index” asp-controller=”Home” method=”post”>

<input type=”text” name=”keyword” />

<input type=”submit” value=”Search” />

</form>

<p>Nancy Davolio : Her ducation comprise of a BA

in psychology from Colorado State University in 1970.

She also completed “The Art of the Cold Call.”

Nancy is a fellow of Toastmasters International.</p>

</div>

The Index view has a form tag helper that submits to the Index action of the HomeController. The method is set to POST. The form has of a textbox named keyword and a submit button. The paragraph just below the form simply holds a number of text data. The text will be generated from a database based on some server side processing. To make things simple, we won’t discuss about data access code here.

Next add a middleware class to the project and name it – MyMiddleware. The complete code of MyMiddleware is shown here:

public class MyMiddleware

{

private RequestDelegate nextMiddleware;

public MyMiddleware(RequestDelegate next)

{

this.nextMiddleware = next;

}

public async Task Invoke(HttpContext context)

{

if (context.Request.Method.ToUpper() == “POST”)

{

string highlightedText = “”;

Stream originalStream = context.Response.Body;

using (MemoryStream newStream = new MemoryStream())

{

context.Response.Body = newStream;

await this.nextMiddleware.Invoke(context);

context.Response.Body = originalStream;

newStream.Seek(0, SeekOrigin.Begin);

StreamReader reader = new StreamReader(newStream);

highlightedText = reader.ReadToEnd();

string keyword = context.Request.Form[“keyword”];

highlightedText = highlightedText.Replace

(keyword, $”<span class=’Highlight’>{keyword}</span>”);

await context.Response.WriteAsync(highlightedText);

}

}

else

{

await this.nextMiddleware.Invoke(context);

}

}

}

The MyMiddleware class has a public constructor and asynchronous Invoke() method.

The constructor gets a RequestDelegate object that is a pointer to the next middleware in the chain. The Invoke() method is responsible for invoking your custom code and then call the next middleware.

The constructor first checks if the request is POST or not. We wish to highlight a keyword later after the operation, so this check is essential. The code then develops a new MemoryStream object and sets it to the Response’s Body property. It then invokes the next middleware such that we can begin our highlight operation.

The code then reads the whole response text using a StreamReader’s ReadToEnd() method. Once we have the text, we find out the keyword entered in the textbox.Then the code substitutes that keyword from the highlightedText string variable by wrapping it in a <span> tag. The <span> tag bears the Highlight CSS class that takes care of the highlight background color and text color. Finally, the modified text is written onto the response stream using the WriteAsync() method.

The Highlight CSS class is shown below:

.Highlight

{

background-color:brown;

color:white;

font-weight:bold;

padding:4px;

}

We are done with the middleware class. Let’s design an extension method such that we can add it more easily. Add MyMiddlewareExtensions class to the project and write the following program to it:

public static class MyMiddlewareExtensions

{

public static IApplicationBuilder UseMyMiddleware

(this IApplicationBuilder app)

{

return app.UseMiddleware<MyMiddleware>();

}

}

The above code has an extension method named UseMyMiddleware() and internally calls IApplicationBuilder’s UseMiddleware<T>() method.

Now, you can finish up your middleware by invoking this extension method from the Configure() method as shown below:

public void Configure(IApplicationBuilder app,

IHostingEnvironment env,

ILoggerFactory loggerFactory)

{

app.UseMyMiddleware();

….

….

app.UseStaticFiles();

app.UseMvc(routes =>

{

routes.MapRoute(

name: “default”,

template:

“{controller=Home}/{action=Index}/{id?}”);

});

}

We conclude the discussion here.

Let us know your opinion in the comments sections below. And feel free to refer Microsoft’s site to gather more information.

If you want to improve your skill in ASP.Net and excel yourself in ASP.NET training program; our institute, CRB Tech Solutions would be of great help and for you. Come join us with our well structured program for .Net.

Stay connected to CRB Tech for more technical optimization and other updates and information.

Don't be shellfish...Buffer this pageEmail this to someoneDigg thisShare on FacebookShare on Google+Share on LinkedInPrint this pageShare on RedditPin on PinterestShare on StumbleUponTweet about this on TwitterShare on Tumblr

Consume ASP.NET Core Web API using jQuery

In the article we shall discuss to create a Web API using jQuery. A Web API can be created by local clients or remote clients. Local clients are housed in the same web application as the Web API. Remote clients are the clients that are not part of the Web API application.

To tell about web applications, a typical local client takes a form of jQuery Ajax driven user interface that consumes the Web API. For instance, consider a simple page shown below:

The above client to the CustomerService Web API comprise of a dropdown list and 4 textboxes. The dropdown list has a list of present CustomerIDs. Selecting a CustomerID gives the other textboxes the respective values. You can change the values and click on Update button to save them. To insert a new Customer, do specify its CustomerID in the textbox besides the dropdown list, fill in other details and press the Insert button. Finally, to erase a Customer, select its CustomerID from the dropdown list and click on the Del button.

To design this page, add a new controller – HomeController – in the Controllers folder. Also add Index view and write the following HTML markup into it:

<h1>Customer Manager</h1>

<form>

<table border=”1″>

<tr>

<td>Customer ID :</td>

<td>

<select id=”customerid”></select>

OR

<input id=”newcustomerid” type=”text” />

</td>

</tr>

<tr>

<td>Company Name :</td>

<td><input id=”companyname” type=”text” /></td>

</tr>

<tr>

<td>Contact Name :</td>

<td><input id=”contactname” type=”text” /></td>

</tr>

<tr>

<td>Country :</td>

<td><input id=”country” type=”text” /></td>

</tr>

<tr>

<td colspan=”2″>

<input type=”button” id=”insert”

value=”Insert” />

<input type=”button” id=”update”

value=”Update” />

<input type=”button” id=”delete”

value=”Delete” />

</td>

</tr>

</table>

<br />

<div id=”msg”></div>

</form>

To initiate the Web API you created earlier, you will use jQuery Ajax. So, sum up Scripts folder under the wwwroot folder and place jQuery library into it

Also, add a <script> reference to the jQuery library in the <head> section of the Index view.

<script src=”~/Scripts/jquery-3.1.1.min.js”></script>

There are 5 jQuery Ajax calls needed by our client. They are as follows:

  • No sooner a page loads in the browser, the dropdown list must be filled with all the existing CustomerIDs. This is done by bringing the Get() Web API action through jQuery Ajax.
  • When you select a CustomerID from the dropdown list its details such as CompanyName, ContactName and Country are shown in the respective textboxes. This is done with the Get(id) Web API action from the change event handler of the dropdown list.
  • Clicking Insert, Update and Delete buttons call the Post(), Put() and Delete() Web API actions respectively, again through jQuery Ajax.

Next write the first Ajax call.

Filling the dropdown list with CustomerIDs

$(document).ready(function () {

var options = {};

options.url = “/api/customerservice”;

options.type = “GET”;

options.dataType = “json”;

options.success = function (data) {

data.forEach(function (element) {

$(“#customerid”).append(“<option>”

+ element.customerID + “</option>”);

});

};

options.error = function () {

$(“#msg”).html(“Error while

calling the Web API!”);

};

$.ajax(options);

});

The above written code makes an Ajax request using $.ajax() method of jQuery. Take notice how the url, type and dataType properties of the options object are specified. Since we wish to start Get() action, the url points to the Web API end point. The HTTP verb used is GET and the response data type is all set to json.

The success function simply fills the dropdown list with a series of <option> element each wrapping a CustoemrID. The error function portrays an error message when something goes wrong while starting the Web API.

Displaying details of a selected customer

The change event handler of the dropdown looks like this:

$(“#customerid”).change(function () {

var options = {};

options.url = “/api/customerservice/” +

$(“#customerid”).val();

options.type = “GET”;

options.dataType = “json”;

options.success = function (data) {

$(“#companyname”).val(data.companyName);

$(“#contactname”).val(data.contactName);

$(“#country”).val(data.country);

};

options.error = function (a, b, c) {

alert(a.responseText);

$(“#msg”).html(“Error while

calling the Web API!”);

};

$.ajax(options);

});

This code is very similar to the previous one. However, it adds the CustomerID whose details are to be fetched to the url. The success function fills the 3 textboxes with CompanyName, ContactName and Country. Do notice something significant- the property names are automatically converted to use camel casing. This way client side code gets to stick with the JavaScript ways of naming the things whereas server side code can continue to stick to the C# ways of naming the things.

To add a new customer

The click event handler of the Insert button is shown below:

$(“#insert”).click(function () {

var options = {};

options.url = “/api/customerservice”;

options.type = “POST”;

var obj = {};

obj.customerID = $(“#newcustomerid”).val();

obj.companyName = $(“#companyname”).val();

obj.contactName = $(“#contactname”).val();

obj.country = $(“#country”).val();

options.data = JSON.stringify(obj);

options.contentType = “application/json”;

options.dataType = “html”;

options.success = function (msg) {

$(“#msg”).html(msg);

};

options.error = function () {

$(“#msg”).html(“Error while

calling the Web API!”);

};

$.ajax(options);

});

The above written code uses POST verb to make the Web API call. Also, it sets data, dataType and contentType properties. The data property is set to the stringed version of the new customer object. Take note that this new object also uses camel casing while setting the properties. The dataType property is set to html because our Post() action returns a plain string. The contentType property indicates the request’s data type – JSON in this case.

The success function simply displays the message returned by the Post() action into the msg <div> element.

To modify an existing customer

The click event of the Update button is shown below:

$(“#update”).click(function () {

var options = {};

options.url = “/api/customerservice/”

+ $(“#customerid”).val();

options.type = “PUT”;

var obj = {};

obj.customerID = $(“#customerid”).val();

obj.companyName = $(“#companyname”).val();

obj.contactName = $(“#contactname”).val();

obj.country = $(“#country”).val();

options.data = JSON.stringify(obj);

options.contentType = “application/json”;

options.dataType = “html”;

options.success = function (msg) {

$(“#msg”).html(msg);

};

options.error = function (a, b, c) {

alert(c);

$(“#msg”).html(“Error while

calling the Web API!”);

};

$.ajax(options);

});

Most of the above program is similar to the code you wrote in the insert click event handler. The CustomerID being changed is added to the url. The HTTP verb is set to PUT.

To Delete a customer

Finally, the code that deletes a customer is mentioned below:

$(“#delete”).click(function () {

var options = {};

options.url = “/api/customerservice/”

+ $(“#customerid”).val();

options.type = “DELETE”;

options.dataType = “html”;

options.success = function (msg) {

$(“#msg”).html(msg);

};

options.error = function () {

$(“#msg”).html(“Error while

calling the Web API!”);

};

$.ajax(options);

});

The above program sets the HTTP verb to DELETE and makes an Ajax call like before.

This finishes the jQuery client to the Web API. Now you need to run the Index view and test all the operations.

We conclude the discussion here. Keep coding!!

Let us know your opinion in the comments sections below. And feel free to refer Microsoft’s site to gather more information.

If you want to improve your skill in ASP.Net and excel yourself in ASP.NET training program; our institute, CRB Tech Solutions would be of great help and for you. Come and join us with our well structured program for ASP .Net.

Stay connected to CRB Tech for more technical optimization and other updates and information.

Don't be shellfish...Buffer this pageEmail this to someoneDigg thisShare on FacebookShare on Google+Share on LinkedInPrint this pageShare on RedditPin on PinterestShare on StumbleUponTweet about this on TwitterShare on Tumblr