Tag Archives: .net jobs

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

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

How to Use Your GPU in .NET

Introduction

This blog topic is going to tell you that a modern Core I7 is most probably the slowest piece of programmable hardware that your PC has. Modern Quad Core CPUs have almost 6 Gflops whereas modern GPUs have about 6Tflops of computational power.

This can dynamically execute simple programs written in a C dialect on your GPU, CPU or both. They are compiled and executed at the run time.

This also shows that GPU programming is not that hard. You will need a little bit of basic programming skills.

Why I need this?

Your PC is a powerful machine. By using only a CPU to execute tasks, you might waste about 90% of its potential.

Basically all data fits into some other numeric arrays.

Instances for a powerful speed up are:

  • Work on images or movies

  • When parallel works are done

  • Save time and energy by using GPU and CPU parallely

  • Use your GPU for a task while have your CPU free for something else

Keep in mind that this topic speaks about OpenCL. Unlike Cuda, it runs on any GPU (Amd, Nvidia, Intel) and also on the CPU. So any program you code can be used on any device. (Even phones)

Tested on NVIDA, AMD, and Intel.

These are the results for some prime calculations:

You can really speed up your program. Native C# is 5 times slower than the best speed you can get on your PC. The speedup factor can approach 500 times in pure multiply and add workloads. It is easy to write a program for your GPU and CPU with this class.

OpenCL code always runs faster than C# on arrays.

How To Use It?

OpenCL programming is very time consuming. This helper project will lessen your programming such that you can focus on the core problem. It is written in C# but could be adapted to any .NET language and also C++.

Suppose you want to know all the prime numbers from 2 to 10^8. Here is a simple implementation in C#

tatic void IsPrimeNet(int[] message)

{

Parallel.ForEach(message, (number, state, index) =>

{

int upperlimit = (int)Math.Sqrt(number);

for(int i=2;i<=upperlimit;i++)

{

if (message[index]%i == 0) //no lock required. every index is independent

{

message[index] = 0;

break;

}

}

});

}

Now take this code and translate to OpenCL-C.
The following
Kernel is declared as a string in a file, inline or in a resource file.

kernel void GetIfPrime(global int* message)

{

int index = get_global_id(0);

int upperl=(int)sqrt((float)message[index]);

for(int i=2;i<=upperl;i++)

{

if(message[index]%i==0)

{

//printf(“” %d / %d\n””,index,i );

message[index]=0;

return;

}

}

//printf(“” % d””,index);

}

OpenCL does cover your kernel in a loop. For simple 1D Arrays, you can get the index by calling get_global_id(0); The upper index is passed when you call the the kernel.

Instead of int[], you can write int* and so on.

You have to pass logics in the same order in which you declared them. You can also call printf inside your kernel to debug later. You can define many methods as you want inside the kernel. You can pick the entry point afterwards by stating Invoke(“Name Here”).

OpenCL C is the same as C but you can’t use pointers and you also have some special data types.

Here is how you can use this project:

Add the Nuget Package Cloo

Add reference to OpenCLlib.dll.
Download OpenCLLib.zip.

Add using OpenCL

static void Main(string[] args)

{

int[] Primes = Enumerable.Range(2, 1000000).ToArray();

EasyCL cl = new EasyCL();

set the accelerator after loading the kernel

cl.Accelerator = Accelerator.Gpu; //You can also

cl.LoadKernel(IsPrime); //Load kernel string here, (Compiles in the background)

cl.Invoke(“GetIfPrime”, Primes.Length, Primes); //Call Function By Name With Parameters

//Primes now contains all Prime Numbers

}

static string IsPrime

{

get

{

return @”

kernel void GetIfPrime(global int* message)

{

int index = get_global_id(0);

int upperl=(int)sqrt((float)message[index]);

for(int i=2;i<=upperl;i++)

{

if(message[index]%i==0)

{

//printf(“” %d / %d\n””,index,i );

message[index]=0;

return;

}

}

//printf(“” % d””,index);

}”;

}

}

With this, you can compile and call upon OpenCL kernels.

If you want to use every bit of computational power of your PC, you can use the class MultiCL. This class splits your work into N parts. Every part is pushed onto the GPU or CPU whenever required. This way, you attain the maximum performance from your PC.

static void Main(string[] args)

{

int[] Primes = Enumerable.Range(2, 1000000).ToArray();

int N = 200;

MultiCL cl = new MultiCL();

cl.ProgressChangedEvent += Cl_ProgressChangedEvent1;

cl.SetKernel(IsPrime, “GetIfPrime”);

cl.SetParameter(Primes);

cl.Invoke(0, Primes.Length, N);

}

private static void Cl_ProgressChangedEvent1(object sender, double e)

{

Console.WriteLine(e.ToString(“0.00%”));

}

Working

This work refers to the Nuget package Cloo. With Cloo, orders to OpenCL are possible from .NET.

It hides the installation details you need to know to use OpenCL and Cloo. To get more information about your kernel or device, use the class OpenCL.

There are 3 classes in this project:

  • EasyCL
  • MultiCL
  • OpenCL

Every call to Invoke calls the corresponding methods in the OpenCL API:

void Setargument(ComputeKernel kernel, int index, object arg)

{

if (arg == null) throw new ArgumentException(“Argument “ + index + ” is null”);

Type argtype = arg.GetType();

if (argtype.IsArray)

{

Type elementtype = argtype.GetElementType();

//ComputeBuffer<int> messageBuffer = new ComputeBuffer<int>(context,

//ComputeMemoryFlags.ReadOnly | ComputeMemoryFlags.UseHostPointer, (int[])arg);

ComputeMemory messageBuffer = (ComputeMemory)Activator.CreateInstance

(typeof(ComputeBuffer<int>), new object[]

{

context,

ComputeMemoryFlags.ReadWrite | ComputeMemoryFlags.UseHostPointer,

arg

});

kernel.SetMemoryArgument(index, messageBuffer); // set the array

}

else

{

//kernel.SetValueArgument(index, (int)arg); // set the array size

typeof(ComputeKernel).GetMethod(“SetValueArgument”).MakeGenericMethod(argtype).Invoke

(kernel, new object[] { index, arg });

}

}

Every time you change the kernel, the program gets recompiled:
For a faster prototype phase, this class tells you why you cannot compile your kernel.

public void LoadKernel(string Kernel)

{

this.kernel = Kernel;

program = new ComputeProgram(context, Kernel);

try

{

program.Build(null, null, null, IntPtr.Zero); //compile

}

catch (BuildProgramFailureComputeException)

{

string message = program.GetBuildLog(platform.Devices[0]);

throw new ArgumentException(message);

}

}

It is very important to know that if your GPU driver crashes or kernels use 100% of your GPU for more than 3 seconds (on pre Win10 machines), the kernel will get aborted. You should dispose the EasyCL object after that.

//If windows Vista,7,8,8.1 you better be ready to catch:

EasyCL cl = new EasyCL();

cl.InvokeAborted += (sender,e)=> Cl_InvokeAborted(cl,e);

private void Cl_InvokeAborted(EasyCL sender, string e)

{

//your logic here

}

What is missed?

You cannot choose if you want to use the host pointer or read write access to int[] passed to the kernel. This seems to be a legacy function.

This class is written for PCs. With VS/Xamarin, it could be easy adapted for phones.

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

QuickStart TOR in .NET Core

Introduction

To mention there is no TOR library that supports .NET Core. Since a programmer needed, he put them together. It couldn’t do much magic, but it will perform the job 99% of the times, let us explain how:

  • You want to make anonymous requests.
  • You want to make requests to onion APIs.

They are the most common use cases those made someone to use TOR inside their application. This blogtopic aims to serve these basic needs and nothing more. In other words: if you simply want to “change your IP”, this article is for you.

Understand the problem

Some people tries to launch the Tor process in their local machine, giving the process a port number for the SOCKS port, and then configure their browser to point to the Tor process. This won’t work.

Tor is a SOCKS proxy that means it is able to connect to IP addresses and ports, but it fails to understand HTTP requests.

Configure TOR

  1. Download TOR Expert Bundle.
  2. You can find a sample TOR config file, let it be torrc.
  3. Put torrc in the proper default location (depending on your OS), or just run the tor process later by feeding it with the right configuration.
  4. Edit the sample config file:
    • Optionally change and edit the SocksPort, if you don’t change, it will go to 9050 port by default.
    • Change the default ControlPort 9051, optionally edit.
    • Change and modify the password hash:
      • To run a tes, for the ControlPortPassword = “ILoveBitcoin21″ the hash must be: HashedControlPassword 16:0978DBAF70EEB5C46063F3F6FD8CBC7A86DF70D2206916C1E2AE29EAF6

      • You must use different and more complicated one. Keep in mind that you can start tor like this: tor –hash-password password where password is the password you’ve chosen. It will give you the hashed password.
  5. Start tor, it will listen to the ports you set in the config file.

SocksPort vs ControlPort

The control port controls the Tor, mainly through other software like Arm. The Socks port is the port running as a SOCKS5 proxy. This is the one you wanted to use. Remember that Tor is not an HTTP proxy, so your script will need to be configured to use a SOCKS5 proxy.

Create & Test

You can skip this section and get the NuGet package and use it, but you might save time if you make sure everything runs fine, by running these tests. Now get .NET Core, if you haven’t already done so and fire up a terminal:

  1. git clone https://github.com/nopara73/DotNetTor
  2. cd DotNetTor/
  3. dotnet restore
  4. cd src/DotNetTor.Tests/
  5. dotnet test

How to use it

Consider the following simple console app, where

  1. You write out your real IP
  2. Your TOR IP
  3. Change your TOR circuit
  4. Finally write out the changed TOR IP.

var requestUri = “http://icanhazip.com/”; // Gives back your IP

// 1. Get your (real) IP, just like you normally do

using (var httpClient = new HttpClient())

{

var content = httpClient.GetAsync(requestUri).Result.Content.ReadAsStringAsync().Result;

Console.WriteLine($“Your IP: \t\t{content}”);

}

// 2. Get your IP through TOR

using (var socksPortClient = new SocksPort.Client())

{

var handler = socksPortClient.GetHandlerFromDomain(“icanhazip.com”);

using (var httpClient = new HttpClient(handler))

{

var content = httpClient.GetAsync(requestUri).Result.Content.ReadAsStringAsync().Result;

Console.WriteLine($“Your TOR IP: \t\t{ content}”);

}

// 3. Change TOR IP

var controlPortClient = new ControlPort.Client(password: “ILoveBitcoin21″);

controlPortClient.ChangeCircuit();

// 4. Get changed TOR IP

handler = socksPortClient.GetHandlerFromRequestUri(requestUri);

using (var httpClient = new HttpClient(handler))

{

var content = httpClient.GetAsync(requestUri).Result.Content.ReadAsStringAsync().Result;

Console.WriteLine($“Your other TOR IP: \t{content}”);

}

}

Summary

While this article did not cover a full-featured TOR library, but a minimal one, without any dependency, you must acknowledge that this article covered the most popular needs in a platform (.NET Core) where nothing else is available at the time of writing.

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 and join us with our well planned and 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