I have 4+ experience and working as software Engineer with Hytech professionals India PVT ltd and also working as Consultant,Trainer,Blogger and Author on Microsoft technologies,Also I have Trained more than 500+ IT professionals.I have knowledge about Asp.net,C#,SQL,Project management,replication,MVC,WebApi,SSRS,PostMan,TFS,SVN,Swagger,WMI,Agile,SignalR,Angularjs,IIS configuration.
Wednesday, 26 April 2017

Training session and seminar details

My Speaking or In-Personal Events

Okay, great to see you on this page. Here, i will list upcoming/past events in which i will be speaking. Also, this page will allow you to access resources (on demand) that I have used in my session.

DateTopicEvent Details/URL
coming soon... coming soon... coming soon... 
coming soon... coming soon... coming soon... 
coming soon... coming soon... coming soon... 
coming soon... coming soon... coming soon... 
24-June-2017Web API 2 at Gurgaonhttp://www.c-sharpcorner.com/events/full-day-handson-with-angular-4-and-web-api
28-May-2017Introduction about MVC at TechStack Delhihttp://bikeshsrivastava.com/
28-May-2017Angular2 at 91Springboard Gurgaonhttp://www.c-sharpcorner.com/events/learn-angular2-and-typescript
02-April-2017Angular2 at C# Corner Noida officehttp://www.c-sharpcorner.com/events/learn-azure-net-and-c-sharp
25-March-2017Web API 2 at Microsoft Office Gurgaonhttp://www.c-sharpcorner.com/events/learn-asp-net-web-api-2-nodejs-and-identity-server
05-March-2017Web API at C# corner Office Noidahttp://www.c-sharpcorner.com/events/learn-uwp-xamarin-and-web-api
23-Feb-2017On Agile Methodology as guest lecturer at IMS College Noidahttp://bikeshsrivastava.com/
Bikesh Srivastava Training & Seminar

My Awards & Achievement

My Awards & Achievement Details

Okay, great to see you on this page. Here, i will list my awards and achievement. Also, this page 
will allow you to access see all images and details.
For more details go given link: http://bikeshsrivastava.com/#Aachievement

DateAward/Achievement NameImage
July-2016Monthly winner in C# Corner 

Aug-2016Top leader of C# Corner

Oct-2016Monthly Winner in C# Corner

Oct-2016Employee of the Month in HytechPro
Jan-2017Become C# Corner MVP

Feb-2017Become C# Corner Speaker
March-2017Monthly Top member in C# Corner

April-2017MVP Award in C# Corner Annual conference

May-2017Become Chapter Lead of C# Corner Gurgaon Chapter

Coming soon.......Coming soon.......Coming soon.......
Coming soon.......Coming soon.......Coming soon.......
Bikesh Srivastava Awards & Achievements
Tuesday, 18 April 2017

Hiring for Software developers In Noida

We have urgent requirement for software developer position in Noida Delhi NCR Location
1.Java Developer exp.3+
2.Dot net developer Fresher and exp 0-3+ exp.
2.ReactJs exp.1+
3.PHP with laravel framework exp.2+
4.SalesForce Lead exp.5+
Interested candidates call me at 08802592478 (whatsapp) or drop a mail with updated resume ASAP.
Bikesh Srivastava Latest Job

Part 46: How To Post FormData To WebAPI Using Angular 2

Introduction 
  In this article we will learn about how to post  FormData to webapi using angularjs2.Normally you can post data to webapi in body,but if you want to pass image and some filed in that case we have to post FormData.

If you are not aware about how to post multipart form data to webapi go through my article.
I have already explained How to post Multipart formData in webapi2,you can create webapi to upload multipart form data.go through and can be test by postman. 

In angular2 if have configured project then all thing will be so easy because its totally component based.just create component with HTML and use anywhere.
In this example i am going to create simple application to upload image with field (FormData)  to web api and save in api application folder.

If you are beginner in angular2 go on my previous article or blog to learn how to setup and how to start work on angular2.
click on above link and learn how to create component,module,services and html using angular2 with typescript using visual studio code.
I think vscode is better than other to develop angularjs2 applications.

Ok Lets go to learn step to upload multipart fom data in angular2 to webapi.

If you have already configured your application and run succesfully,
just add a single line of html element with input type file.see code
1.  <div class="float-label-control">                                               
2.                                             <a class="btn btn-sm btn-primary" href="javascript:;">Upload Contract  
3.                                                  File  
4.                                                  <input class="uploadfile-style" [(ngModel)]="networkContract.FilePath" (change)="fileChange($event)" name="CContractorFPath"                                                   
5.                                                  size="10" type="file"></a></div>     
you can see in line of code  fileChange($event) function will call once you select any file and fire a event to save document.
Now create a function inside component.ts see code
1.  fileChange(event) {   
2.       let fileList: FileList = event.target.files;  
3.       if(fileList.length > 0) {  
4.       let file: File = fileList[0];   
5.       let fileSize:number=fileList[0].size;  
6.       if(fileSize<=10485760)  
7.       {   
8.       let formData:FormData = new FormData();  
9.       formData.append('Document',file);  
10.      formData.append('ClientId'this.clientId);  
11.      formData.append('NetworkOrgID',this.networkContract.NetworkOrgID);  
12.      formData.append('DocumentType','ClientContractDoc');  
13.       if((this.clientId!=undefined && this.clientId>0) &&(this.networkContract.NetworkOrgID!=undefined && this.networkContract.NetworkOrgID>0))  
14.       {  
15.      this._contractInfoTabService.UploadClientContractDoc(formData).subscribe(val => {  
16.       if(val.json().status=='success')  
17.       {    
18.         this.networkContract.FilePath=val.json().data.fileName;          
19.       }  
20.      this.alertService.show(val.json());  
21.     });   
22.      }  
23.      else  
24.      {  
25.      this.alertService.error("Client Name and Contract Org is not selected, please select Client Name and Contract Org first.");  
26.     }  
27.      }  
28.      else  
29.      {  
30.        this.alertService.error("File size is exceeded");  
31.      }       
32.    }  
33.    else  
34.    {  
35.      this.alertService.error("Something went Wrong.");  
36.    }  
37. }  
 Inside this peace of code i am checking multiple conditions,you can customize or remove as per your requirment.

1.  formData.append('Document',file);
2.  formData.append('ClientId'this.clientId);
3.  formData.append('NetworkOrgID',this.networkContract.NetworkOrgID);
4.  formData.append('DocumentType','ClientContractDoc');

These line of code appending value in formdata object with keypair value,you can change key name and value as per your requirment.
01 line is doc file and other is normal field. 
These fields are coming from other object,you can change or remove and add if need any extra filed.
     this.alertService.error("File size is exceeded");
alert service is a custom service which is created to display error message in application.you can remove as per your need.
In this part of code i am also checking size of file,if you need otherwise can remove. 

   this._contractInfoTabService.UploadClientContractDoc(formData).subscribe(val => {  

This line of code calling the service to post formdata object with file and fields.
Now lets go to create service to hit endpoint.see code
1.  UploadClientContractDoc(formData:FormData)  
2.    {     
3.       return this.http.post("ApiUrl",formData)  
4.              .map((response: Response) => {  
5.                return response;                 
6.              }).catch(this.handleError);             
7.    }  
FormData is predefined class of angular2. I am passing information with document file via FormData object.
You need to create HTTP POST request and pass formdata object as body.
Inside this part of codcane i have used..
 .catch(this.handleError); this one for exeception handling 
But if you want use you need to create a exception method other wise remove if you don't need.see code. 
1.  private handleError(error: Response){  
2.      console.error(error);  
3.      return Observable.throw(error.json().error || 'Server error');  
4.    }  
If you have not created web for that scenario so just go and open visual studio and create webapi. 
Now time to create webapi to take FormData request from angularjs .So I have already written article on that go through on given below link.
use "git clone https://github.com/Bikeshs/Angular2-Typescript"  command to clone code from github if you have installed git on your system,otherwise git command will not work.

 I hope you have learned lot of points, how to upload image with formdata,and also check size of image or document and post FormData to webApi using component and services. 


Bikesh Srivastava AngularJs 2
Sunday, 16 April 2017

Part 45:Getting Started With Angular 2 Using Visual Studio Code

In this article, I am going to explain firstly how to configure an Application architecture, using Angular2 with Visual Studio code. In this, I am using systemjs.config.js to load modules compiled, using TypeScript compiler. There are lots of ways to load the modules in Angularjs2 e.g Webpack, Gulp, Grunt, etc. but I am going to develop an example, using systemjs.config.json.


Prerequisites to setup and create Angular.js 2 Application
If you have installed already, then there is no need to install it again.Try to start developing an Application on Angular2.
You just need to follow few simple steps to develop Angular2 Application.

Step 1

Create a folder in your local drive, where you want keep your code. If you already have any project folder, just open Visual Studio code and select the folder.

Step 2

Now, create project.json file in your project folder. See the code and copy. 
1.  {    
2.      "name""angular-quickstart",    
3.      "version""1.0.0",    
4.      "scripts": {    
5.          "start""tsc&& concurrently \"tsc -w\" \"lite-server\" ",    
6.          "lite""lite-server",    
7.          "postinstall""typings install",    
8.          "tsc""tsc",    
9.          "tsc:w""tsc -w",    
10.         "typings""typings"    
11.     },    
12.     "licenses": [{    
13.         "type""MIT",    
14.         "url""https://github.com/angular/angular.io/blob/master/LICENSE"    
15.     }],    
16.     "dependencies": {    
17.         "@angular/common""~2.1.0",    
18.         "@angular/compiler""~2.1.0",    
19.         "@angular/core""~2.1.0",    
20.         "@angular/forms""~2.1.0",    
21.         "@angular/http""~2.1.0",    
22.         "@angular/platform-browser""~2.1.0",    
23.         "@angular/platform-browser-dynamic""~2.1.0",    
24.         "@angular/router""~3.1.0",    
25.         "@angular/upgrade""~2.1.0",    
26.     
27.         "angular-in-memory-web-api""~0.1.5",    
28.         "bootstrap""^3.3.7",    
29.         "core-js""^2.4.1",    
30.         "reflect-metadata""^0.1.8",    
31.         "rxjs""5.0.0-beta.12",    
32.         "systemjs""0.19.39",    
33.         "zone.js""^0.6.25"    
34.     },    
35.     "devDependencies": {    
36.         "concurrently""^3.0.0",    
37.         "lite-server""^2.2.2",    
38.         "typescript""^2.0.3",    
39.         "typings""^1.4.0"    
40.     }    
41. }  
In package.json, you need to add the dependencies of your project. You can change project.json file, as per your project's need.

Step 3

Create file tsconfig.json. This file is used to compile TypeScript code. See the code given below.
1.  {    
2.      "compilerOptions": {    
3.          "target""es5",    
4.          "module""commonjs",    
5.          "moduleResolution""node",    
6.          "sourceMap"true,    
7.          "emitDecoratorMetadata"true,    
8.          "experimentalDecorators"true,    
9.          "removeComments"false,    
10.         "noImplicitAny"false,  
11.         "watch"true   
12.     } ,  
13.     "compileOnSave"true   
14. }  
"complieOnSave"  is used to compile the code, once you save or CTRL+S.

Step 4

Create typings.json. This file contains TypeScript compiler libraries. See the code given below.
1.  {    
2.      "globalDependencies": {    
3.          "core-js""registry:dt/core-js#0.0.0+20160725163759",    
4.          "jasmine""registry:dt/jasmine#2.2.0+20160621224255",    
5.          "node""registry:dt/node#6.0.0+20160909174046"    
6.      }    
7.  }  
Step 5

Create an app folder. Now, your project will look, as shown below.


Ignore other given file for o now.

Step 6

Now, you need to install dependencies, using npm command. Open the integrated terminal from view tab or CTRL+` and go to the project path. Type npm command "npm install" and wait for 1-2 minutes. Thereafter, node_module and typing folder will be created automatically inside the project.

Step 7

Create systemjs.config.js to load modules, as shown below. 
1.  /**  
2.   * System configuration for Angular samples  
3.   * Adjust as necessary for your application needs.  
4.   */    
5.  (function(global) {    
6.      System.config({    
7.          paths: {    
8.              // paths serve as alias    
9.              'npm:''node_modules/'    
10.         },    
11.         // map tells the System loader where to look for things    
12.         map: {    
13.             // our app is within the app folder    
14.             app: 'app',    
15.     
16.             // angular bundles    
17.             '@angular/core''npm:@angular/core/bundles/core.umd.js',    
18.             '@angular/common''npm:@angular/common/bundles/common.umd.js',    
19.             '@angular/compiler''npm:@angular/compiler/bundles/compiler.umd.js',    
20.             '@angular/platform-browser''npm:@angular/platform-browser/bundles/platform-browser.umd.js',    
21.             '@angular/platform-browser-dynamic''npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',    
22.             '@angular/http''npm:@angular/http/bundles/http.umd.js',    
23.             '@angular/router''npm:@angular/router/bundles/router.umd.js',    
24.             '@angular/forms''npm:@angular/forms/bundles/forms.umd.js',    
25.     
26.             // other libraries    
27.             'rxjs''npm:rxjs',    
28.             'angular-in-memory-web-api''npm:angular-in-memory-web-api',    
29.         },    
30.         // packages tells the System loader how to load when no filename and/or no extension    
31.         packages: {    
32.             app: {    
33.                 main: './main.js',    
34.                 defaultExtension: 'js'    
35.             },    
36.             rxjs: {    
37.                 defaultExtension: 'js'    
38.             },    
39.             'angular-in-memory-web-api': {    
40.                 main: './index.js',    
41.                 defaultExtension: 'js'    
42.             }    
43.         }    
44.     });    
45. })(this);    
Inside this file, required dependecy and modules are loaded.

Step 8

Inside an app folder, create component name as app.component.ts, as shown below.
1.  import { Component } from '@angular/core';  
2.  @Component({  
3.    selector: 'my-app',  
4.    template:'<h1>Hello C# corner</h1>'  
5.  })  
6.  export class AppComponent { }   
Step 9

Create module name as app.module.ts, as shown below.
1.  import { NgModule    
2.  } from '@angular/core';    
3.  import {    
4.      BrowserModule    
5.  } from '@angular/platform-browser';    
6.  import {    
7.      AppComponent    
8.  } from './app.component';    
9.      
10. @NgModule({    
11.     imports: [BrowserModule],    
12.     declarations: [AppComponent],    
13.     bootstrap: [AppComponent]    
14. })    
15. export class AppModule {}  
Step 10

Now, create main.ts file, as shown below.
1.  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';  
2.    
3.  import { AppModule } from './app.module';  
4.    
5.  const platform = platformBrowserDynamic();  
6.  platform.bootstrapModule(AppModule);  
In main.ts file, register your module.

Step 11

Create an index.html, as shown below.
1.  <html>  
2.    <head>  
3.      <title>My First AngularJs 2 Application</title>  
4.      <meta charset="UTF-8">  
5.      <meta name="viewport" content="width=device-width, initial-scale=1">  
6.      <!--<link rel="stylesheet" href="styles.css">-->  
7.   <base href="/">  
8.     
9.      <!-- 1. Load libraries -->  
10.      <!-- Polyfill(s) for older browsers -->  
11.     <script src="node_modules/core-js/client/shim.min.js"></script>  
12.   
13.     <script src="node_modules/zone.js/dist/zone.js"></script>  
14.     <script src="node_modules/reflect-metadata/Reflect.js"></script>  
15.     <script src="node_modules/systemjs/dist/system.src.js"></script>  
16.   
17.     <!-- 2. Configure SystemJS -->  
18.     <script src="systemjs.config.js"></script>  
19.     <script>  
20.       System.import('app/app.main.js').catch(function(err){ console.error(err); });  
21.     </script>  
22.   </head>  
23.   
24.   <!-- 3. Display the application -->  
25.   <body>  
26.     <my-app>Loading...</my-app>  
27.   </body>  
28. </html>  
Inside index.html, call main.js, followed by compile ts file into js. You can see <my-app> loading...</my-app> is a component selector. You can use it well anywhere.

Step 12

Project Setup and an Application is done. Now, we have to configure launc.json and task.json to run the task. 
Visual Studio Code uses launch.json and tasks.json file to launch your Angular2 Application.

launch.json

First, press F1 or CTRL+SHIFT+P in Visual Studio code and type launch in the address bar on the top of the editor, select node.js file from the selection list. Once you select launch.json file, it will be created under .vscode folder.
In order to launch Angular2 Application, launch.json will use the lite-Server, which is defined in node_modules. Change the program property from “${workspaceRoot}/app.js” to “${workspaceRoot}/node_modules/lite-server/bin/lite-server”.
tasks.json

Press F1 or CTRL+SHIFT+P and type “task”, select “Configure Task runner” and subsequently use Typescript-Watch Mode.This will create tasks.json, which will be created under .vscode folder.
Remove the arguments from argsproperty, as we don’t require it now and add new property as “watch”:true. Now, we are ready to run Application. To start an Application, type "npm start" command. After build completes, click F5. For more details, go to my GitHub and download the code using git command. To get the code in your local drive, use git command :: "git clone https://github.com/Bikeshs/Angular2-Typescript" therefater run "npm install".

Remember, we don't forget install npm,git.

Conslusion

After running the Application, you will see like magic because all ts file has been compiled into JS file and inside the app folder, all ts file make js file, using tsc compiler. 


Bikesh Srivastava AngularJs 2

Life Is Complicated, But Now programmer Can Keep It Simple.