Thursday, July 14, 2016

Angular 2 packages for sublime text 3

Recently, I have written a blog post about Angular 1.5 Packages for the sublime text 3. It was a great hit and lots of people were asking for packages for the Angular 2. So I thought it would be a good idea to write a blog post about it. So let’s get started. We have already learned that how we are going to install packages on the sublime text 3. So Followings are packages that are good for angular 2.

As we all know that Angular2 is built with TypeScript and So first thing we need is a Typescript package.

Typescript:

This plugin is developed by Microsoft it self. You can find more information at their Github Repository.

https://github.com/Microsoft/TypeScript-Sublime-Plugin

There are code editing services provided by this package. You can do lots many things with the package like Rename, Format document i.e where different shortcuts are already defined in the GitHub repository. This package is a must for Angular 2 development.

typescript-package-for-sublime-text

Angular 2 snippets:

This package provides code completion and snippets for the angular 2. It has been imported from John Papa’s code completion for visual studio code.

https://github.com/pjlamb12/st3-ng2-snippets

It provides various snippets and code completion for Angular 2.

angular2-component-sublime-text

Once you type ng2 it will have snippets for various things in Angular 2.

angular-2-snippets-demo-for-sublime-text

That’s it. Hope you like it. Stay tuned for more!.
Share:
Thursday, July 7, 2016

BugConf- Building secure software by Kaushal Bhavsar–Director of Pratikar Technologies

Nowadays, Security is a major concern as hackers are so smart that they can break anything.  So this Saturday we have one of the great conferences by Kaushal Bhavsar, Director of Pratikar Technologies. He is going to cover lots interesting topics mentioned below and it is the conference should not be missed. I have heard Kaushal many time and many times we have been co-speaker for the events. When Kaushal speaks about security he is just awesome. Please do register and go there I’m sure it will worth investing your time. Following are the topic sKaushal is going to cover in his conference.

  • Why security for developers?
  • Common threats for software.
  • Integrating security in SDLC.
  • Interactive Panel Discussion.
  • Networking and high tea.



So, I request all my reader who is based at Ahmedabad to register for this event and attend this Conference. Here are the details for venue and time. Just register for the conference via clicking on Add to Calendar list.

When:

Saturday, July 9, 2016, from 4:30 PM to 6:30 PM (IST) – Add to Calendar

Where:

Gujarat Law Society Auditorium - GLS Campus Opp. Law Garden, Ahmedabad, Gujarat 380006 – View Map

You can find more information about Kaushal Bhavsar at his blog: http://kaushalbhavsar.com/

and Here is more information Pratikar Technologies : http://pratikar.com/

That’s it. Stay tuned for more!!.
Share:
Wednesday, July 6, 2016

Angular 1.5 packages for Sublime Text 3

One of my friends was using Sublime text 3 as  editor for the Angular.js application but he was using it without packages so he has to do manually all the things. I suggested him few packages and now he is much more productive than ever. So in the blog post, I’m going to share few tips and packages working with Sublime text.

Installing package on Sublime Text 3:

Sublime Text 3 support packages that make Sublime Text 3 a great choice for any kind of Web Development project. This makes developer’s life easy and developers will be much more productive than ever. Sublime Test does not come with inbuilt package manager but there is a third party package manager called “Package Control”. You can find more information about that on the following location.

 https://packagecontrol.io/

There is instruction provided for installation at the following link.

https://packagecontrol.io/installation

Angular.js 1.5 packages for Sublime text:

JS Hint:
If you have ever work with JavaScript you should be knowing about linter for JavaScript. JS Hint is a JavaScript linter which will look your code and verify that it has proper styling, proper syntax, and error related to JavaScript best practices.

To make sure that this plugin works correctly. You need to install JS Hint installed globally via npm:
npm install -g jshint
Then type Ctrl+ Shift + P and select install package.

package-control-sub-lime-text3

Once you click on Install it will load the extension from the repository and you can install the extension you choose.

image

AngularJS:
This package is developed by Angular UI Team. It contains lots of functionality like
  • Code completion for Inbuilt angular libraries.
  • Angular-Related Snippets.
  • Directive completion of Custom Defined Directives
To Take advantage of this plugin’s syntax highlighting You need to change the view type of your HTML page file View-> Syntax-> HTML(Angular.js).

angular-html-package

And then you can code completion like following.


code-completion-angular-js

JSFormat:
This package helps you format your Javascript and JSON. It is based on JS Beautifier. It highly configurable and you can also define your preferences. There are plenty of options available you can see that on the following link.

https://github.com/beautify-web/js-beautify#options

John Papa’s Angular Snippets for Sublime Text:
John Papa has created great snippets for Angular.js and it’s very useful. He has written a nice blog post about how to install it with Sublime Text. You can refer that from the following link and refer that.

https://johnpapa.net/angularjs-snippets-for-sublime-visual-studio-and-webstorm/

After installing that you can create lots of angular boilerplate code very easily. For example, If you want to create an angular controller just type ngcontroller.

ng-controller-sub-lime-text

Once press tab it will create an angular controller like below. It will also follow best practices written in John Papa’s style guide also.

controller-created-sublime-text

That’s it. Now you should be much more productive with angular and sublime text editor. Hope you like it. Stay tuned for more!!.
Share:
Monday, July 4, 2016

Microsoft MVP 2016 and ASP.NET Community Stand-up link

July 1 is always been a special day in my life Because I eagerly wait for My MVP Status renewal and again this time also I have been awarded for Microsoft Most Valuable Professional 2016 for Visual Studio and Development. On July 1 I got the same email again which I was waiting for it eagerly.


Mvp

On this occasion, I would like to thanks, Biplabl Paul and Gadharv Rawat for their constant support and guidance. I would also like to thanks, MvpAward team for considering me to become a Microsoft MVP. As always there has been great support from friends and family. Without their constant support, I am nothing. So thank you for the constant support family and friends.

Also, I would like to thanks my dear readers of the blog. Whatever I am today is due to readers of my blog. So thank you very much for the constant support and guidance.

ASP.NET Community Stand-up:

Recently before few days, I have written A blog post about How to create Rest API(Web API) with ASP.NET Core 1.0. I just recently came to know that it has been shown in ASP.NET Community Stand-up video as community links. This is a such a great appreciation from the makers of ASP.NET like Damien Edwards, Jon Galloway whom I admire most. Special thank Jon Galloway for the mentioning it on ASP.NET Community Stand-up videos. You can see that video at the following link.



Thanks again for everything. Stay tuned for more!!.
Share:
Monday, June 27, 2016

Publishing existing applications to Github with Visual Studio 2015

Before some time, I have published a blog post for using Github with Visual studio team explorer.  So with reference to this blog post, one of the users email me that how we can publish the existing applications to Github? So I thought it would be a great idea to write a blog post about it. So in this blog post, We are going to learn how we can publish existing application to Github with visual studio 2015. Visual Studio 2015 comes with Team explorer and when you install the visual studio 2015 there is an option to install the Github extension for visual studio. If you have not installed it then you can also insert separately from the following link.

https://visualstudio.github.com/

How to publish existing applications to Github with Visual Studio 2015:

To demonstrate this we are going to use console application, So I have created a core console application with File-> New project.

Sample-Conole-Application

Once created application, I have added it to the source via right clicking solution explorer and Click on Add Solution to Source control.

add-to-source-control-github-sample-application

It will add the solution to default source control, In my visual studio git is configured as default source control. But if it not there it will ask between Git or Team server. Once you click on add solution to source control it will create a local git repository. Now It’s time to write some code. Here is a sample code that I have written.
using System;

namespace GithubConsoleApp
{
    public class Program
    {
        public static void Main(string[] args)
        {
            Console.Write("Github sample application");
            Console.ReadLine();
        }
    }
}
Now it's time to commit code to Local Git repository with team explorer like following.

commit-changes-in-git

Now once you click sync it will try to sync with the remote repository of GIT since we don’t have the remote repository.

different-service-for-hosting-github-service

Here, there are three options available, Github, Team Services or custom remote repository. Since we are going to use Github so click on GetStarted for GitHub option. It will load following screen.

github-publishing-sample-application

Here in above screenshot, My Github account is already configured otherwise it will ask for your Github Credentials.  Now click on publish it will create a new repository in Github and publish the whole history to GitHub also.

published-app-sample-application

You can see the same thing on Github.com also.

published-application-on-github

That’s it. It’s very easy to use Github tools with Visual Studio 2015. Hope you like it. Stay tuned for more!!.
You can find sample Github repository used in this application at - https://github.com/dotnetjalps/GithubConsoleApp
Share:
Tuesday, June 21, 2016

Peek Definition every where in Visual Studio 2015

Visual studio 2015 is great IDE and I love more and more whenever I explore some new features of Visual Studio 2015. In this blog post, We are going to learn about Peek Definition which was available from Visual Studio 2015.It is a great feature with this you can view code without moving to file where this code has been written. Till now this was available only for the C# code but with Visual studio 2015 it is now available with anywhere so now you can have that  available in XAML, CSHTML  and ASPX file too.

Let’s see how it's working on both sides.

Peek definition on C# Code:

You can see the particular code for a class via selecting it and right click and select pick definition or you can use shortcut Alt+F12.

peek-definition-csharp-code-visual-studio-2015

Now once you click on Peek Definition. It will peek definition window like below.

peek-defintion-window-chsarp-code-visual-studio-2015

Peek Definition on CSHTML file:

You can also have peek definition now in CSHTML page also just like below.

peek-definition-cshtml-visual-studio-2015

Hope you like it. Stay tuned for more!.
Share:
Monday, June 20, 2016

Simplified Rename feature in Visual Studio 2015

Visual studio 2015 is a great IDE and I love all the latest features provided in this edition. I have always been a fan of refactoring features and with Visual Studio 2015 they are now more streamlined. In this blog post , we are going to learn about rename refactoring features. So Let’s get started.

We can use this renaming feature when we have found there is a spelling mistake in variable declaration and we want to rename that with correct spelling. This is the just scenario I have explained but there could be much more. So Let’s see how it works.

rename-feature-explanation

In above code, you can see that we have made some spelling mistake with employees variable and we want to correct it. So you select that variable and right click and select rename or you can press shortcut Ctrl+ R,Ctrl +R.

rename-features-streamline

Once you click on rename it will open the following dialog.

rename-feature-dialog-visual-studio-2015

This dialog contains three options.

  1. Include comments – which will replace this word in comments also.
  2. Include strings – Which will replace this word in the string which we have defined in double quotes.
  3. Preview changes – It will show a preview of changes we are going to make.
Now you can see the highlighted part in above where I’m going to change from employie to employees.

rename-feature-demo-visual-studio-2015

Now once you click on apply it will open a preview dialog like following.

employee-preview-dialog

Once you will click on apply it will apply the changes.

applied-changes-rename-features

That’s it. It’s very easy Hope you like it. Stay tuned for more!!.
Share:
Sunday, June 19, 2016

Execute in interactive with visual studio 2015 update 2

There are lots many times we need to play with C# Code and at that time, C# interactive  window might come handy.  Those who don’t know what is C# interactive windows, This is a REPL that allows you to execute the C# code in the separate window. You can enable that window via Views-> Other Windows –> C# Interactive.

csharp-interactive-windows-visual-studio2015

Once you click on it will open a window where you can write code and execute it. It will act as the play ground for your C# code.

csharp-playground-interactive-window-visual-studio15

Execute in Interactive with Visual Studio 2015 Update 2:

Earlier, When you need to use existing code with interactive window, you need manually copy and paste the code. Now with Visual Studio 2015 update 2, you have one menu available “Execute in Interactive”. You can right click your existing code and click on “Execute in Interactive”. It will load your code in C# interactive window.

execute-in-intreactive-menu-visual-studio-2015

Once you click it this code will be available to C# interactive window. Even you have a short cut for this also. Ctrl + E, Ctrl + E.

So it’s very useful. Hope you like it. Stay tuned for more!.
Share:
Saturday, June 18, 2016

How to use migration with Entity Framework Core

Entity framework core is  the lightweight, extensible and cross-platform version of Entity Framework. Before some time, Microsoft has Released a new version of Entity Framework RC2. I have written a couple of blog post about Entity framework code first migration earlier for Entity framework 6.0. So there was a couple of request coming for writing a blog post about Entity Framework Core RC2 migration. So I thought it will be a good idea to give an overview how database migration works in Entity Framework Core RC2. This post will cover a basic scenario where we are going to create the database with existing ASP.NET Identity migration and then we are going to create a new model and have that migration applied in the database.

How to use Entity Framework Migrations:

Let’s get started, To demonstrate entity framework core migrations, I am going to create a sample asp.net core web application like following.

creating-project-core-migration

Once we select asp.net core application it will appear the following dialog.

web-application-aspnet-core

Now when you create a sample application. It will basically create a boilerplate code for the asp.net identity and as a part of that it is going to create entity framework migration files under Data –> Migrations folder.

default-migration-entity-framework-core

Here you can find that sample code in GitHub repository given at the bottom.  Now we already asp.net identity migration code ready. So Let’s have those migrations applied with the following command from NuGet package manager console.

update-database
core-migration-aspnet-identity

Now let’s add a new model “Employee” like following.
namespace CoreMigration.Models
{
    public class Employee
    {
        public int EmployeeId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}
As we have employee class, We need to add migration for that. I’m going to create a migration for employee class via the following command.

add-migration AddEmployee
add-employee-migration

It will create “AddEmployee” migration class in Data->Migrations folder.

employee-migration-in-solution-explorer

And here is the code for the migration for the same.
using Microsoft.EntityFrameworkCore.Migrations;
using Microsoft.EntityFrameworkCore.Metadata;

namespace CoreMigration.Data.Migrations
{
    public partial class AddEmployee : Migration
    {
        protected override void Up(MigrationBuilder migrationBuilder)
        {
            migrationBuilder.CreateTable(
                name: "Employees",
                columns: table => new
                {
                    EmployeeId = table.Column<int>(nullable: false)
                        .Annotation("SqlServer:ValueGenerationStrategy", SqlServerValueGenerationStrategy.IdentityColumn),
                    FirstName = table.Column<string>(nullable: true),
                    LastName = table.Column<string>(nullable: true)
                },
                constraints: table =>
                {
                    table.PrimaryKey("PK_Employees", x => x.EmployeeId);
                });
        }

        protected override void Down(MigrationBuilder migrationBuilder)
        {
            migrationBuilder.DropTable(
                name: "Employees");
        }
    }
}

Now we have our migration class ready so I am going to run the update-database command as following.

update-database-employee-migration-entity-framework-core

Now let’s check the database again and You can see employee table is there.

database-after-employee-migration

That’s it. It’s very easy. Hope you like it. Stay tuned for more!!.

You can find complete source code of this application at following location on Github - https://github.com/dotnetjalps/EntityFrameworkCoreMigration
Share:
Tuesday, June 14, 2016

How to create Rest API(Web API) with ASP.NET Core 1.0

Recently Microsoft has released ASP.NET Core 1.0 RC2, I am getting lots of request from readers that about creating Web API. So I thought it will be a good idea to write a blog post about how to create Rest API(Web API) with ASP.NET Core 1.0.

So let’s get started via creating an ASP.NET Core 1.0 Web Application like following.

creating-aspnet-core-project

Once you click on ASP.NET Web Application, It will ask whether you need to create Web Application or Web API application. We are going to Web API so I am going to select Web API Application like following. Please note that in ASP.NET Core 1.0 there is no separate libraries or DLLs required for creating web APIs. This is just a project template.

creating-aspnet-core-api-project

Now once you click on OK It will create a Web API application with default values controller and program.cs.  As you know Program.cs is now starting point for the ASP.NET Core 1.0 application so It contains all the required configuration and startup items. Following is a code for that.
using System.IO;
using Microsoft.AspNetCore.Hosting;

namespace CoreWebApi
{
    public class Program
    {
        public static void Main(string[] args)
        {
            var host = new WebHostBuilder()
                .UseKestrel()
                .UseContentRoot(Directory.GetCurrentDirectory())
                .UseIISIntegration()
                .UseStartup<Startup>()
                .Build();

            host.Run();
        }
    }
}

Here you can see that there is a WebHostBuilder class which hosts the application and there is some configuration for using this application on IIS and Kestrel which is  a cross-platform server from Microsoft.

Now let’s create our model class first. I have created an Employee model class like following.
namespace CoreWebApi.Model
{
    public class Employee
    {
        public int EmployeeId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Designation { get; set; }
    }
}
Since now our model is ready, It’s time to create the controller. You can create web API controller via add new item like following.

creating-aspnet-core-api-controller-class

And here the code for our get Method.
using System.Collections.Generic;
using CoreWebApi.Model;
using Microsoft.AspNetCore.Mvc;

namespace CoreWebApi.Controllers
{
    [Route("api/[controller]")]
    public class EmployeeController : Controller
    {
        // GET: api/values
        [HttpGet]
        public IEnumerable<Employee> Get()
        {
           var employees = new List<Employee>
           {
               new Employee {EmployeeId = 1,FirstName = "Jalpesh",LastName = "Vadgama",Designation = "Technical Architect"},
               new Employee {EmployeeId = 2,FirstName = "Vishal",LastName = "Vadgama",Designation = "Technical Lead"}
           };
            return employees;
        }
    }
}

Here you can see that I have created a get method that returns a List of Employee. Now Let’s run this in our browser and it will work like following.

aspnet-core-api-browser-sample
You can find complete source code of this blog post at following location on Github-https://github.com/dotnetjalps/ASPNetCoreWebAPI
That’s it. Hope you like it. Stay tuned for more!
Share:
Monday, June 13, 2016

Solution: gulp is not recognized as internal or external command- Visual Studio

Recently, After Upgrading to the newer version of Gulp, I was getting this error.  After doing lots of  finding online and in my system I was able to figure out that Modules like Gulp does not installed to the path. So when you try to run it from the command line it was showing below error.
gulp is not recognized as internal or external command

How to solve : gulp is not recognized as internal or external command

To solve this error we just need to create a new environment variable and set the NPM modules path there.

To create an environment variable,  Right click My Computer/ This Pc and click on properties.  It will open following windows.

environment-variable-node-modules

Go to Advance System Settings and it will open system properties windows like below.

system-properties-environment-variable

Click on Environment Variables it will open an environment and system variables windows like below.

environement-variables-node-modules-gulp

Click on new System variable and put NODE_PATH in system variable name and %AppData%\npm\node_modules into the variable value like below.

new-variable-for-gulp-not-found

Click on Ok. That’s it. Now run again the command for gulp and it will work. It’s very easy. Stay tuned for more!!.
Share:
Sunday, April 24, 2016

Cascading dropdown with ASP.NET Web Forms and Entity framework

This post may be pretty basic for many people. But I have been getting this request over and over so I thought it will be a good idea to write a blog post about it.

In this blog post, We are going to learn how we can create the cascading dropdown with ASP.NET Web forms and Entity framework. To create an application first we need to create web application like following.

new-project-visual-studio

After creating a web application like following. It’s time to create model classes for our application. Here to illustrate the example, We are going to use Standard and Student models. Multiple students can be there in a standard. So we are going to have two dropdowns Standard and Student. Once you change select standard based on that student dropdown will be filled.

Here is code for Standard Student Model class:
using System.Collections.Generic;

namespace CascadingDropdownEF.Models
{
    public class Standard
    {
        public int StandardId { get; set; }
        public string Name { get; set; }

        public virtual  ICollection<Student> Students { get; set; }
    }
}
And following is the code for the Student model.
using System.ComponentModel.DataAnnotations.Schema;

namespace CascadingDropdownEF.Models
{
    public class Student
    {
        public int StudentId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int StandardId { get; set; }
        [ForeignKey("StandardId")]
        public Standard Standard { get; set; }
    }
}
Now once we have our model ready it’s time to create our Entity framework context class. We are going to use Entity code first model here . So here is the code for the Entity framework context.
using System.Data.Entity;
using System.Data.Entity.ModelConfiguration.Conventions;

namespace CascadingDropdownEF.Models
{
    public class StudentContext : DbContext
    {
        public StudentContext() : base("name=StudentConnectionString")
        {
            
        }
        public DbSet<Standard> Standards { get; set; }
        public DbSet<Student> Students { get; set; }

        protected override void OnModelCreating(DbModelBuilder modelBuilder)
        {
            modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();
        }
    }
}
Here I have created two DbSet for students and standards. Also in model creating event I have removed plural names so when entity framework create tables when we run this application it will remove plural names from the table.

Creating Web Forms and using Entity framework for cascading dropdowns:


Now we have our database layer or operation ready. it’s time to create a new Web Form which will have Standard and Student drop-down.

adding-cascading-dropdown-page

After creating Web Form I have written following HTML code in aspx file.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CascadingDrodownDemo.aspx.cs" Inherits="CascadingDropdownEF.CascadingDrodownDemo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Cascading dropwon demo</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DropDownList runat="server" ID="ddlStandard" CssClass="dropdown" AutoPostBack="true" OnSelectedIndexChanged="ddlStandard_OnSelectedIndexChanged"/>
        </div>
        <br/>
        <div>
            <asp:DropDownList runat="server" ID="ddlStudent" CssClass="dropdown"/>
        </div>
    </form>
</body>
</html>

You can see that I have created two ASP.NET dropdowns Standard and Student and Also for Standard dropdown I have autopostback=”true” and selected index change event.
On the aspx.cs file i have written the following code.
using System;
using System.Linq;
using CascadingDropdownEF.Models;

namespace CascadingDropdownEF
{
    public partial class CascadingDrodownDemo : System.Web.UI.Page
    {
        private readonly StudentContext _studentContext;

        public CascadingDrodownDemo()
        {
            _studentContext = new StudentContext();
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                BindStandards();
                BindStudents();
            }
           
        }

        private void BindStudents(int? standardId=null)
        {
            ddlStudent.Items.Clear();
            if (standardId != null)
            {
                var students = from student in _studentContext.Students
                    where student.StandardId == standardId.Value
                    select new
                    {
                        StudentId = student.StudentId,
                        Name = student.FirstName + " " + student.LastName
                    };

                ddlStudent.DataSource = students.ToList();
                ddlStudent.DataTextField = "Name";
                ddlStudent.DataValueField = "StudentId";
                ddlStudent.DataBind();
            }

            ddlStudent.Items.Insert(0,"--Select Student--");
        }

        private void BindStandards()
        {
            ddlStudent.Items.Clear();
            var standards = _studentContext.Standards.ToList();
            ddlStandard.DataSource = standards;
            ddlStandard.DataTextField = "Name";
            ddlStandard.DataValueField = "StandardId";
            ddlStandard.DataBind();

            ddlStandard.Items.Insert(0,"--Select Standard--");
        }

        protected void ddlStandard_OnSelectedIndexChanged(object sender, EventArgs e)
        {
            BindStudents(Convert.ToInt32(ddlStandard.SelectedValue));
        }
    }
}
Here You can see that I have created two method BindStudent and BindStarnds. In Bindstandards it fetches all the standards and bind it to Standard dropdown . In BindStudents method, I have used a nullable parameter standardId which will be null by default. So If standard id is not provided as you can see it will only insert default item.  Now in page load method, I have called this two methods. Also, you can see that I have written Standard event dropdown selected index change event which will pass standard value.

Now everything is ready. I have inserted following data in Standard and Student table.

Standard-Cascading-dropdown-data-entity-framework

And student table like following.

student-cascading-dropdown-entity-framework

Now when you run the application. It will look like following.

sample-application

That’s it. Hope you like it. Stay tuned for more.
You can find complete source code of this application at following location on github- https://github.com/dotnetjalps/CascadingDropdownEF
Share:

Support this blog-Buy me a coffee

Buy me a coffeeBuy me a coffee
Search This Blog
Subscribe to my blog

  

My Mvp Profile
Follow us on facebook
Blog Archive
Total Pageviews