Tag Archives: .net courses

Preparation For ASP.NET 5 – Part 1 (Less and Sass)

It is often said that .NET are not comfortable with the new environment for a variety of reasons. One of the reasons is they didn’t use the following much talked about technologies: Less, Sass, npm, Gulp, Grunt, Bower, OWIN.

Not all developers remain updated with the cutting edge technologies. Many companies use an old fashioned way of doing the things and their developers might not get chance to work with these kinds of technologies at all. In this article series we will explain the basics of all these technologies as well as major ASP.NET vNext changes you must be aware of. This article is for the beginners in the technologies mentioned above as well as in ASP.NET vNext.

To begin with, the first part tells something about Less and Sass. So, let’s start.

Old vs. modern way of creating ASP.NET applications

Let’s outline the tasks that many simple web applications follow. They mainly don’t use the above technologies. They are done mostly with what comes with the default installation of .NET, VS and web standards.

The traditional way of developing ASP.NET applications is as follows:

  • You create an ASP.NET web application project in VS.
  • You write application specific server side code. This could be done either with web forms or with MVC.
  • You might refer .NET framework assemblies and custom components using References folder in the Solution Explorer.
  • You might install some NuGet packages using options in the Solution Explorer.
  • You could add JavaScript libraries such as jQuery or AngularJS to your project.
  • Create JavaScript files required by your application.
  • Create CSS style sheets for your application.
  • You might do some unit testing for your application.
  • Finally, deploy your application on the server.

Many modern, big applications use this approach to produce a better code-base and to manage it better.

  • Create an ASP.NET web application project in VS.
  • Program application specific server side code. This can be done either with web forms or with MVC.
  • You might refer .NET framework assemblies and custom the components using References folder in the Solution Explorer.
  • You might install some NuGet packages using “Manage NuGet Packages” options in the Solution Explorer.
  • You use some client side package manager such as npm and Bower to grab the JavaScript libraries such as jQuery and AngularJS.
  • You create JavaScript files needed by your application using plain JavaScript and / or TypeScript or CoffeeScript.
  • You compile your TypeScript or CoffeeScript into plain JavaScript.
  • You create style sheets using some CSS pre-processor such as Less and Sass.
  • You compile the Less and Sass files into plain CSS.
  • You minify all the JavaScript and CSS files you created so far using some automated build tool such as Gulp or Grunt.
  • You do unit testing of your application.
  • You tweak the configuration file (JSON format, more on this in later parts) to adjust settings such as connection string.
  • Finally, you deploy the application on the server or in cloud.

As a first instalment we shall discuss the basics of Less and Sass.

Basics of Less and Sass

To create CSS style sheets and attach them to web pages is a common task one must do. Although this task is straight and simple it has troubles of its own. Consider the following style rules:

h1{

color: #0026ff;

font-family: Arial;

font-size: 20px;

}

h2 {

color: #0026ff;

font-family: Arial;

font-size: 16px;

}

The official Less website lesscss.org defines Less like this:

“Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.”

The official Sass website sass-lang.com says :

“Sass lets you use features that don’t exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies.”

Installing and using Less

Firstly go to Node.js website and install Node Package Manager on your machine. Then open the Command Prompt and set the following command:

npm install -g less

Less will get installed on your machine. Once installed you can use Less compiler to compile Less code to plain CSS.

Next, design an empty ASP.NET MVC project in VS and add a LESS style sheet to it.

Notice that Less files are stored with .less extension. Instead of using this template you can also add a text file manually and save it with .less extension.

Then add the following “code” to the Less style sheet:

@textSize:20px;

@fontName: Arial;

h1{

color:blue;

font-family:@fontName;

font-size:@textSize;

}

The above code declares two Less variables – @textSize and @fontName – and also stores some values in them.

Browsers won’t understand .less files unless you compile them to plain CSS. To do so you need to invoke Less compiler as follows:

$ lessc StyleSheet1.less > StyleSheet1.css

The Less command line compiler – lessc – takes two things. The .less file name and the .css file name where the result of compilation is to be stored. If you invoke the above command successfully StyleSheet1.css will contain something like this:

h1 {

color: blue;

font-family: Arial;

font-size: 20px;

}

This is plain old CSS!

Now you can add a <link> reference to StyleSheet1.css in all the ASP.NET web forms or MVC views.

Installing and using Sass

Sass works on similar lines as Less but there with a few differences. Install Ruby on your development machine. You can do so by visiting Ruby Installer website. Once installed you need to invoke Command Prompt as before and issue the following command.

Gem install sass

This will install Sass on your machine.

Next, add a text file to your Visual Studio project and name it – StyleSheet2.scss

Note that there are two syntax variations for Sass. One uses file extension of .sass and the other uses file extension of .scss. The later is the newer syntax and hence is recommended.

Now add the following “code” to the .scss file:

$textSize:20px;

$fontName: Arial;

h1{

color:blue;

font-family:$fontName;

font-size:$textSize;

}

As you can see, the syntax is quite similar but uses $ instead of @ for variable names.

To compile this Sass code to plain CSS, open Command Prompt and issue this command:

sass –watch “C:\Demos\StyleSheet2.scss”

This will compile the Sass code and create StyleSheet2.css file for you. If you open the .css file you should something like this:

h1 {

color: blue;

font-family: Arial;

font-size: 20px;

}

/*# sourceMappingURL=stylesheet2.css.map */

You can now refer the StyleSheet2.css file in your web forms or views.

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

Read and Write Cookies in ASP.NET Core 1.0

One of the basic requirements in several web applications is storing and retrieving small pieces of information in cookies. This article will discuss with an instance how ASP.NET Core 1.0 deals with cookies. You will learn here to read and write cookies using ASP.NET Core. You will also know how to configure the cookie properties such as expiration time.

You need to specify some preferences like font name, colour and font size. You can choose a preference from the dropdown list and mention its value in the textbox. Click on the Write Cookie button saves that choice in a cookie. The Is Persistent checkbox controls if the cookies are to be stored on the local disk such that they are read during a different browser session. The read cookies link takes you to another page where the choices are read and applied to a some HTML markup.

Begin by developing a new ASP.NET Core Web Application using VS 2015. Next open the HomeController and add 3 actions to it – Index(), WriteCookies() and ReadCookies().

The Index() action is quite straight and simply returns the Index view to the browser.

public IActionResult Index()

{

return View();

}

The WriteCookies() action writes the cookies and is shown below:

public IActionResult WriteCookies(string setting,

string settingValue,bool isPersistent)

{

if (isPersistent)

{

CookieOptions options = new CookieOptions();

options.Expires = DateTime.Now.AddDays(1);

Response.Cookies.Append(setting, settingValue,options);

}

else

{

Response.Cookies.Append(setting, settingValue);

}

ViewBag.Message = “Cookie written successfully!”;

return View(“Index”);

}

The WriteCookies() method receives 3 parameters viz. setting, settingValue and isPersistent through model binding. The set parameter will be the value selected from the dropdown list. The setting Value parameter will be the value entered in the textbox and isPersistent will point whether isPersistent checkbox is seen or not.

Inside, the code checks the value of isPersistent boolean parameter. If it is correct an object of CookieOptions class (Microsoft.AspNetCore.Http namespace) is created. The CookieOptions class helps you to specify the properties of the cookie as mentioned below:

  • Domain (associated with cookie)
  • Expires (when cookie must expire)
  • Path (specifies path where cookie is applicable)
  • Secure (cookie is sent on https channel only)
  • HttpOnly (client side script can’t reach the cookie)

When you set the Expires property of the cookie to one day from now; the cookie will persist on the client machine for a day. Then a cookie is written to the response using the Append() method of the Cookies collection. The Append() method accepts key, value and CookieOptions object.

The else block of the code simply adds a cookie by setting its key and value.

A ViewBag message points to the user that the choice is stored successfully.

Then append Index view and write the following into it:

<h1>Specify your preferences :</h1>

<form asp-action=”WriteCookies” asp-controller=”Home”>

<select name=”setting”>

<option value=”fontName”>Font Name</option>

<option value=”fontSize”>Font Size</option>

<option value=”color”>Color</option>

</select>

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

<input type=”checkbox” name=”isPersistent”

value=”true” /> Is Persistent?

<input type=”submit” value=”Write Cookie” />

</form>

<h4>@ViewBag.Message</h4>

<h4>

<a asp-action=”ReadCookies” asp-controller=”Home”>

Read Cookies

</a>

</h4>

The Index view renders a <form> shown previous using ASP.NET Core tag helpers and inputs. It also outputs the Message property from ViewBag. A Read Cookies link will take the user to a test page where choices are applied.

Now, append ReadCookies() action to the HomeController and write the below code to it :

public IActionResult ReadCookies()

{

ViewBag.FontName = Request.Cookies[“fontName”];

ViewBag.FontSize = Request.Cookies[“fontSize”];

ViewBag.Color = Request.Cookies[“color”];

if(string.IsNullOrEmpty(ViewBag.FontName))

{

ViewBag.FontName = “Arial”;

}

if (string.IsNullOrEmpty(ViewBag.FontSize))

{

ViewBag.FontSize = “22px”;

}

if (string.IsNullOrEmpty(ViewBag.Color))

{

ViewBag.Color = “Blue”;

}

return View();

}

The ReadCookies() action reads 3cookies with the help of their keys. This is achieved using Cookies collection of the Request object. The cookie values are stored in ViewBag properties. A series of if statements check whether a particular preference is empty and if so assign a default value to it.

The ReadCookies view where these preferences are used is shown below:

<div style=”font-family:’@ViewBag.FontName';

font-size:@ViewBag.FontSize;color:

@ViewBag.Color”>

Hello World!

</div>

The ReadCookies view consists of a <div> element whose style feature makes use of font name, font size and colour specified in the respective ViewBag properties.

This concludes the application. Run it and specify values to the three choices. Don’t check the Is Persistent checkbox during saving the values. Then click on the Read Cookies link.

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

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