Friday, November 27, 2015

TypeScript configurations in Visual Studio Code

Before sometime I have blogged about - Why It's the right time to learn Typescript and It does get lot of buzz. Typescript getting every day more popular due to reason I have mentioned in above blog post.  So now in this blog we are going to learn how we can use TypeScript with new Visual Studio Code editor.

TypeScript support in Visual Studio Code:


As you know Visual Studio Code is in beta now and provide great support for typescript. Here you can operate TypeScript in two modes.

1) File Scope:

In this mode Visual Studio Code will treat each typescript file as separate unit. So if you don't reference the typescript files manually with reference or external modules it will not provide intellisense as well as there will not common project context for this.

2) Explicit Scope:

In this scope we are going to create a tsconfig.json which will indicate that folder in which this file exist is a root of TypeScript project. Now you will get full intellisense as well as other common configurations on tsconfig.json file.

You can create a new file via File->New file from Visual Studio Code and add following code about TypeScript configuration under compiler operations.
{
    "compilerOptions": {
        "target": "ES5",
        "module": "amd",
        "sourceMap": true
    }
}

Converting TypeScript into JavaScript files automatically(Transpiling ):

Now as we all know that TypeScript is a super set of JavaScript and this files we can not directly put into html page. As browser will not understand the typescript itself. So we have to convert it into JavaScript. So to convert TypeScript file into JavaScript file we need to configure a in built task runner which will automatically convert all the TypeScript files into JavaScript.

To configure Task Runner you can either press F1 or Ctrl+Shift+P and type task runner. Configure Task runner will popup.

task-runner-vs-code

Once you press enter it will create a .vscode folder and create file called task.json which will have following code.
{
    "version": "0.1.0",

    // The command is tsc. Assumes that tsc has been installed using npm install -g typescript
    "command": "tsc",

    // The command is a shell script
    "isShellCommand": true,

    // Show the output window only if unrecognized errors occur.
    "showOutput": "silent",

    // args is the HelloWorld program to compile.
    "args": ["HelloWorld.ts"],

    // use the standard tsc problem matcher to find compile problems
    // in the output.
    "problemMatcher": "$tsc"
}

Now when you build your project it will create a JavaScript file automatically. Now Let's create a TypeScript file like following.
class HelloWorld{
     PrintMessage(name:string){
        console.log("Hello world:" + name);
    }
}

Here you can right now there is only one file there in explore section.

typescript-file-in-visual-studio-code

Now when you build the project with Ctrl+Shift+B. It will create a JavaScript file.

typescript-and-javascript-both-vscode

and Following is a code for the same.
var HelloWorld = (function () {
    function HelloWorld() {
    }
    HelloWorld.prototype.PrintMessage = function (name) {
        console.log("Hello world:" + name);
    };
    return HelloWorld;
})();

Hiding JavaScript File from explore area in Visual Studio Code:


I don't like my JavaScript file to show in explore area as we already have TypeScript file. So we don't have to worry about JavaScript file. There is a way to hide JavaScript file and I have to add following code in my user settings file. Which you can get it via File->Preferences->UserSetting
"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
"**/*.js":{
    "when": "$(basename).ts"
}
Here in above I have written custom filter for excluding JavaScript file when TypeScript file is present. Now it will not JavaScript file even if they exists on disk.


typescript-file-in-visual-studio-code

That's it. Hope you like it. Stay tuned for more!!. In forthcoming post we are going learn a lot of TypeScript.
Share:
Sunday, November 8, 2015

My Entity framework blog series

Share:
Saturday, November 7, 2015

Working with transaction in Entity Framework 6

In  any Relation database, maintaining the integrity of the database is very important and Transaction is one way of maintaining database integrity. When you have the situation, where you need to insert data into multiple tables and if inserting a data in one of the table fails you should always rollback other inserts transaction becomes very useful. The Same scenario can occur for update or delete operations. If transactions are not there you will end up with lots of junk data in tables. Entity framework is one of most popular ORM in Microsoft.NET World. So in this post, we are going to learn how we can use transactions with Entity Framework 6.

Transaction and Entity Framework 6:


Entity framework internally maintains a transaction when you call SaveChanges() method. So all Inserts, update operation under single save changes method call will be in a single transaction. But when you want to wrap multiple SaveChanges() method under single transaction there was not inbuilt functionality in the earlier version of Entity framework. We have used to use TransactionScope class for the same.

But now with Entity Framework 6.0, We have two inbuilt APIs for Transaction.

DbContext.Database.BeginTransaction:

It allows us to Begin transaction for multiple save changes, You can combine as many operations as you want under the single transaction and hence either all will be performed successfully then the transaction will be committed  and if any exception occurred than transaction will be rollback.

DbContext.Database.UseTransaction :

Sometimes we need to use a transaction which is started outside of the entity framework. In this case, this option allows us to use that transaction with entity framework also.

In this blog post, We are going to use Begin Transaction. I will write a separate blog post about how to use existing transaction with entity framework.

So enough theory, let's create a console application understand it better.

ef6-with-transactions-console-application

We need entity framework. So I have added it via NuGet package.

entity-framework-transaction-nuget-package

In this application, we are going to use two model classes category and product. We will save them both in the single transaction and try to understand how the transaction works with Entity Framework.
namespace EFWithTransactions
{
    public class Category
    {
        public int CategoryId { get; set; }
        public string CategoryName { get; set; }
    }
}
And here is product model.
using System.ComponentModel.DataAnnotations.Schema;

namespace EFWithTransactions
{
    public class Product
    {
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        [ForeignKey("Category")]
        public int CategoryId { get; set; }
        public virtual Category Category { get; set; }
    }
}

Here you can see I have category id there in product and a product is belong to category and I have created my DB context class like following.
using System.Data.Entity;

namespace EFWithTransactions
{
    public class ProductDbContext : DbContext
    {
        public ProductDbContext()
            : base("ProductConnectionString")
        {

        }
        public DbSet<Category> Categories { get; set; }
        public DbSet<Product> Products { get; set; }
    }
}

And following code is for Main method of console application, Which illustrate real times scenario where exception might occurs during multiple save changes().
using System;

namespace EFWithTransactions
{
    class Program
    {
        static void Main(string[] args)
        {
            using (ProductDbContext productDbContext = new ProductDbContext())
            {
                using (var transaction = productDbContext.Database.BeginTransaction())
                {
                    try
                    {
                        //saving category
                        Category category = new Category
                        {
                            CategoryName = "Clothes"
                        };
                        productDbContext.Categories.Add(category);
                        productDbContext.SaveChanges();

                        // Throw some error to check transaction
                        // Comment this to make transactions sucessfull
                        // throw new Exception("Custom Exception");

                        //saving product
                        Product product = new Product
                        {
                            ProductName = "Blue Denim Shirt",
                            CategoryId = category.CategoryId
                        };
                        productDbContext.Products.Add(product);
                        productDbContext.SaveChanges();
                        Console.Write("Cateogry and Product both saved");
                        transaction.Commit();
                    }
                    catch (Exception exception)
                    {
                        transaction.Rollback();
                        Console.WriteLine("Transaction Roll backed due to some exception");
                    }
                }

            }
            Console.ReadKey();
        }
    }
}
If you see above code carefully, you can see I have two save changes method one for category and another for the product. Also, I have used BeginTransaction method to initiate a new transaction. I have put one custom exception to illustrate something is wrong with that transaction. Also, try catch block is there so if any exception occurs catch block will rollback the transaction. If all went well it will commit the transaction.

Now let's run this application and following is an output as expected. As we have thrown an exception.

Transaction-roll-back-entity-framework

And there is no data inserted in database also.

sql-server-database-with-no-data

Now let's comment the throw new exception part.
//throw new Exception("Custom Exception");

And now let's run our application again and here is the output as expected.

transaction-committed-sql-server

And now we have data in the database there.

sql-server-database-with-data-transaction-commited

So now we have a really good way to use transaction in entity framework. Hope you like it. Stay tuned for more!.
You can find complete source code of above blog post on github at - https://github.com/dotnetjalps/EF6WithTransaction
Share:
Friday, November 6, 2015

How to use stored procedure with Entity Framework Code First

I'm getting lots of request from readers of my blog about writing blog post about how to use stored procedure with entity framework code first. So in this blog post we're going to learn about how we can use stored procedure with Entity framework code first.

To demonstrate that we are going to use create a table called Employee like following.

table-entity-framework-code-first-stored-procedure
And here is the create table script for the same.
CREATE TABLE [dbo].[Employee](
[EmployeeId] [int] NOT NULL,
[FirstName] [nvarchar](50) NULL,
[LastName] [nvarchar](50) NULL,
[Designation] [nvarchar](50) NULL,
CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED 
(
[EmployeeId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF,
ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

And following is the data I have inserted there.

entity-framework-table-data

And here is the store procedure we are using for that.
CREATE PROCEDURE usp_GetAllEmployees
AS
SELECT EmployeeId,FirstName,LastName,Designation FROM Employee

Now we have already done with our database side, it's time to write some C# code. I'm going to use simple console application for the same.

console-application-ef-code-first-stored-procedure

Now It's time to add entity framework via nuget package .

nuget-package-entity-framework-code-first

Here is the model class I have created.
namespace CodeFirstStoredProcedure
{
public class Employee
{
public int EmployeeId { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Designation { get; set; }
}
}
And then I have created entity framework dbcontext like following.
using System.Data.Entity;

namespace CodeFirstStoredProcedure
{
public class EmployeeDbContext : DbContext
{
public EmployeeDbContext()
: base("EmployeeConnectionString")
{

}
public DbSet<Employee> Employees { get; set; }
}
}
And following is a code for using stored procedure to get data from database via entity framework code first.
using System;
using System.Linq;

namespace CodeFirstStoredProcedure
{
class Program
{
static void Main(string[] args)
{
using (EmployeeDbContext dbContext = new EmployeeDbContext())
{
string commandText = "[dbo].[usp_GetAllEmployees]";
var employees = dbContext.Database.SqlQuery<Employee>(commandText).ToList();

Console.WriteLine("Printing Employee");
foreach (var employee in employees)
{
Console.WriteLine(employee.EmployeeId);
Console.WriteLine(employee.FirstName);
Console.WriteLine(employee.LastName);
Console.WriteLine(employee.Designation);
Console.WriteLine("-----------------");
}
}
Console.ReadKey();
}
}
}

Here in the above code, If you see care fully. I have used SQL Query function to execute stored procedure and that will return a list of employee. Then I have printed this list with console.writeline.  Now when you run this application, output will be as expected.

entity-framework-code-first-stored-procedure

That's it. It's very easy to use stored procedure with entity framework code first. Hope you like it. Stay tuned for more!!.
You can find complete source code of this sample application at - following location - https://github.com/dotnetjalps/EFCodeFirstStoredProcedure
Share:
Sunday, October 18, 2015

The Famous MongoDB Document Database: Operations and Benefits

This is a guest post from Jenny Richards. Jenny Richard is a content maker for RemoteDBA.com which is one of the leading companies in the country which provides remote DBA support Services. You can find more about her at following social profiles.
https://plus.google.com/u/0/114743495388960667319/posts https://www.linkedin.com/in/richardsjenny

Over the last few years, a lot of enterprise attention has been focused on data requirements and data management and administration. The reason for this is clear: proper management of an enterprise’s information assets is critical to effective operation. Enterprises stand to gain a lot if they have in place systems that facilitate proper management of data streaming in from all sources.

Improper storage and management of data also presents a challenge, particularly with subsequent management and analysis to inform decision making and business critical process management. as a result, countless technologies are being developed and churned into the market to enable data storage, analytics and management. These technologies are also constantly being upgraded according to user requirements to make them better suited for different enterprises’ needs.

image
Image credit: slidesharecdn.com

One such technology is the MongoDB, which is just about the best NoSQL, document storage-based database available on the market. If you are looking to implement a data storage solution, you will be interested in a few important qualities, which will explain why best one database is suited for your needs but not the other.

Among the most important considerations is the performance level of the database, as well as the level of availability. You would want to have a database that allows for the highest performance and also one that is available for a large portion of time. These are databases which offer replicated services, including master failover systems. In addition, enterprises need databases that offer seamless scalability, so that the database can be easily grown as organizations/ data volumes increase.

Enterprise requirements for a database solution


Every database must include capabilities to perform a few key functions. In addition, they should have fast learning curves, since the enterprise may have to take up initial and ongoing training for its IT staff if using in-house teams. Organizations that invest in implementation of new database systems without accounting for the training of management personnel are simply setting themselves up for failure.

Every database, MongoDB included, comes with a unique set of features and operational and maintenance requirements. This means that for you to derive maximum benefit and optimal performance from each, you must assign the time and resource allocation for training of the database handlers. If you are unable to, you can instead go with remote DBA services experts, who are already trained in management and can provide maintenance and administration support for a fixed fee payable periodically.

Of course, you should also consider how much data the enterprise needs to store, both in the short and longer term. You don’t want to invest in hardware and applications that will be obsolete just a few years into your investment. As the business grows and its data requirements increase, you need a database solution that can scale accordingly and allow you to manage the content effectively.

MongoDB offers easy, seamless scalability on implementation. In addition, being a NoSQL database storing data in BSON format, there is no need for schema definition which means faster data storage and retrieval. In addition, binary JSON allows fast performance of queries for effective content management.

Why MongoDB is superior to other document-based databases:


There are many features that make MongoDB a preferred NoSQL database solutions compared with other similar databases in the market:
  • The document-based storage method enables seamless object mapping onto various data types and programming languages. It includes documents and embedded arrays which significantly reduce the need for connectors.
  • Polymorphism is made simpler owing to its dynamic schema storage method. Dynamic schema in database terms means that documents found within one collection needn’t have the same structure, or a similar set of fields. In turn, similar/common fields within the same document collection can have different data types.
  • MongoDB is optimized for high performance. Read/write operations are faster because of embedding capability. In addition, keys from embedded arrays and documents can be included within indexes.
  • The database offers high availability owning to replicated servers and automated mater failover implementation.
  • ·High scalability made possible by auto-sharding features to distribute collection data along machines. Consistent reads can also be dispersed throughout the replicated servers.
image
Image credit: blogspot.com

Key features of MongoDB:


The main features of MongoDB are defined by its power, flexibility, ease of use and speed

1. Power

MongoDB offers most of the features included in traditional RDBMSs including: dynamic queries, secondary indexes, upsert operations (update existing documents, insert non-existent documents), rich updates, easy aggregation and sorting. This means you can enjoy the same level of functionality you would using an RDBMS, while still taking advantage of the scalability and flexibility benefits presented by non-relational models.

2. Flexibility

MongoDB stores data in JSON document format (JavaScript object notation) which is them serialized as BSON (Binary JSON). JSON offers a rich data model that can flawlessly map onto programming language types for native apps. In addition, its dynamic schema feature allows easier evolution of data models compared with RDBMS systems that have defined schema, rigid schemas.

3. Ease of use

MongoDB was designed by its creators to have easy installation, configuration, maintenance and usability functions. In this regard, MongoDB comes with few options for configuration, instead opting for the logically “right thing” according to the circumstance. As a result, MongoDB can be used straight out of the box, allowing you to concentrate on application development rather than spending countless hours tweaking vague database configurations

4. Scalability/speed

In MongoDB, related data is grouped into documents, which means that queries can be run much faster. This in comparison to relational databases; where related data may be separated in multiple tables because of different schema definition, necessitating connection prior to processing at a later time.

The auto-sharding feature in MongoDB allows for easy outward scaling - clusters can be linearly scaling by increasing the number of machines. In addition, the database can be scaled outwards without having any downtime. This is extremely important for enterprises with a web presence, since it eliminates the need to take down the website for maintenance, during which time the business sacrifices huge amounts in actual and potential revenue. 
Share:

Three way to activate state in UI-Router Angular.js

Before some time I have written a blog post about routing - Routing with UI-Router and Angular.js I have got few questions from my reader in email. One of question is to how we can activate state of UI-Router as UI-Router works with state instead of URLs. In this blog post we are going to explain, different ways to activate state in UI-Router.

There are three ways of activating state in UI-Router.

  1. Call $State.go
  2. UI-sref directive as link
  3. Navigate to URL associated with State
We are going to learn about this three ways in details.

Call $State.Go:


It is a one of convenient method of changing state, Returns a promise representing the state of transition. It calls underlying $State.Transition method internally but automatically sets option location: true , inheritance:true, relative: $state.$current and notify:true. This allows you to set easily update parameters with passing arguments. You can find more information about that at following location.

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options

UI-sref directive as link:


We have used this method already in previous example. It is a directive that bind a link to state. If the state has an associated URL, the directive automatically generate and update the href attribute via $State.href() method. Clicking on link will trigger a state transition with parameters.
You can use it in following way.
  • ui-sref='stateName' - Navigate to state, no params. 'stateName' can be any valid absolute or relative state, following the same syntax rules as $state.go()
  • ui-sref='stateName({param: value, param: value})' - Navigate to state, with params.
You an find more information about this at following location.

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

Navigate to the URL associated with State:


As we have seen in previous blog post, most of the state will have URL associated with it. Now when user access the index.html/contactus, it will activate contactus state and load the template associated with this state. You can also pass the parameters with that. Following is documentation for the same.

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

Hope you like it, Stay tuned for more!!.
Share:
Friday, October 9, 2015

Best way to do code review with GIT

Recently we had a discussion when you should do a code review when using GIT. As a general rule you should do code review often.There are two ways to do code review with GIT.

1) Classic way:

 

We all know that GIT is known for it's feature branch features. So each developer working on some feature should have created feature set. That features branch is accessible to all the peers working on same project. So when developer completes his changes and push to feature branch anybody from his/her peers can checkout branch and perform code review.  The problem with this method is we don't have any records for the code review in source control it self.

2) Integration Way:

 

This is best method for doing code review. As we all know GIT provides pull request feature. So we will have two type of branches one is master branch for project and another feature branches for each developer working on different features of project. So now once a developer completes his feature and feels that its ready to push developer will send a pull request to master branch. Now the person or lead who are managing master branch will perform a review of pull request and either accept pull request and merged into code or if he found a some issue with code he can also reject pull request also with proper comments. So here we can easily perform code review with GIT and all data remains same. Most of the open source project on Github maintained this way only.

Hope you like it. Stay tuned for the more!.
Share:
Thursday, October 8, 2015

Arguments in View Component : ASP.NET MVC 6

Recently before sometime, I have written a blog post about What's new in View Component : ASP.NET MVC 6. I have got lots of page view for that blog post and I am thank full to my readers for that. I got email from one of the readers that how we can pass arguments in View Component or how we can filter data in view component? I'm sure lots of people will have same question. So I thought it will a good idea to write a blog post about it.

I'm going to use same application which we have used for previous blog post. In previous application we created Product Categories View Component in this blog post I'm going to create a method in same view component which will display data based on category id passed.

So  now code for the view component will look like following.
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNet.Mvc;
using ViewComponentMVC.Models;

namespace ViewComponentMVC
{
    [ViewComponent(Name = "ProductCategoriesComponent")]
    public class CategoryViewComponent : ViewComponent
    {
        private readonly List<Category> _categories;
        private CategoryViewComponent()
        {
            _categories = new List<Category>()
           {
               new Category {CategoryId = 1, Name = "Clothes",Description = "Men and women's clothes"},
               new Category {CategoryId = 2, Name = "Elentronics", Description = "Eletronics"}
           };
        }
        public IViewComponentResult Invoke()
        {
          
            return View(_categories);
        }

        public IViewComponentResult Invoke(int categoryId)
        {
            var category = _categories.FindAll(c => c.CategoryId == categoryId).ToList();
           return View(category);
        }
    }
}

If you see above code then you will realize that I have made category list read-only and used in both invoke methods. And created a new Invoke method that expects a category id as parameter and based on category id it will filter categories list with linq and return a view.

Now I have putted same thing in about view like following.
@{
    ViewData["Title"] = "About";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>

<p><div>
    @Component.Invoke("ProductCategoriesComponent",1)
</div></p>

Now when you run this application it load home page with both categories like following.



Now when you click on about and see same view filtration it will look like following.

about-view-component-asp-net-mvc6 

That's it. Hope you like it. You can see how its easy to pass argument and override invoke method in ASP.NET MVC 6. Stay tuned for more!.
You can find complete source code of this and earlier blog post  at following location on github-https://github.com/dotnetjalps/ViewComponentMVC6
Share:
Tuesday, October 6, 2015

What's new in View Component : ASP.NET MVC 6

There are lots of new features added with ASP.NET MVC 6 and View components is one of them.  In this blog post we are going to learn about View Component in ASP.NET MVC 6 in detail.

What is View Components and how it is different from partial views:


As per ASP.NET official web site
New to ASP.NET MVC 6, view components (VCs) are similar to partial views, but they are much more powerful. VCs include the same separation-of-concerns and testability benefits found between a controller and view. You can think of a VC as a mini-controller
So the first question comes in our mind is why we need a View Component as all? As partial views are there and its serving its purpose very well.  But if you have worked with partial views you know that there is a limitation for partial views you can not have controller associated with it. You have to use Child actions with partial views and as you now when you mark any actions with child actions it will only allow for child you can not use that as a complete action. Also it will make a extra server trip which could make your application slow if you have a very complex view.  That where View Component can help.  It's contains a view and backing class It's not a 100% controller but it acts like a controller.

Let's create a View component that can be reused at multiple places. Think about a ECommerce application where you have multiple product categories which can be displayed multiple places in ECommerce application. We are going to create a view component that will list multiple categories.

How to create View Component in ASP.NET MVC 6 Application:


So to create a View component we need a ASP.NET 5 ASP.NET MVC 6 application. So have created web application from Visual Studio 2015.

mvc-view-component-application

Then created a model class category for storing categories information.
namespace ViewComponentMVC.Models
{
    public class Category
    {
        public int CategoryId { get; set; } 
        public string Name { get; set; }
        public string Description { get; set; }
    }
}
Then created a View component with following code.
using System.Collections.Generic;
using Microsoft.AspNet.Mvc;
using ViewComponentMVC.Models;

namespace ViewComponentMVC
{
    [ViewComponent(Name = "ProductCategoriesComponent")]
    public class CategoryViewComponent : ViewComponent
    {
        public IViewComponentResult Invoke()
        {
           var categories = new List<Category>()
           {
               new Category {CategoryId = 1, Name = "Clothes",Description = "Men and women's clothes"},
               new Category {CategoryId = 2, Name = "Elentronics", Description = "Eletronics"}
           };
            return View(categories);
        }

    }
}
Here there are three things to notice

  1. I have inherited class from ViewComponent from Microsoft.AspNet.MVC name space
  2. I have created a invoke method which will return data for the view. In our case we have created manual list as we don't need database for this example. But you can write any code for the same.
  3. See view component attribute on the top of class. We need to use same name when call this view component.
Now it's time to create a view for the view component. I have created this component under /Views/Home/Components/ProductCategoriesComponent/default.html as we have given same name in attribute. As this view component is used home/index.cshml I have putted there but if you have generic view than you can put that in share component also. Following is a code for the same. A simple ul-li listing.
@model IEnumerable<Category>
<ul>
   @foreach (var category in Model)
   {
       <li>@category.Name </li>
   }
</ul>
Now it's time to use this view component in one of view. I have putted following code in Views/Home/Index.cshtml.
<div>
    @Component.Invoke("ProductCategoriesComponent")
</div>
When you run this application, It will look like following in browser

view-component-mvc6-brower-rendering.

So you can see how our hard code categories renders under view. Even you can passed argument with view component invocation that we will see in future blog post.
You can find complete source code of this application at following location on github- https://github.com/dotnetjalps/ViewComponentMVC6
Hope you like it. Stay tuned for more!!
Share:
Saturday, October 3, 2015

Routing with UI-Router and Angular.js

In Today's world, Angular.js is one of best JavaScript framework available to create Single page applications. It's provides some great features and with the help of this features we can built great interactive apps. In any single page application routing is very important as in most of the time single page application will not have full post backs. So routing will be very important to give feel like normal page application and sometimes proper routing will increase search engine ranking also.

So in this blog post we are going to learn how we can create routes in Angular.js application with help of UI-Router.

What is UI-Router:


UI-Router is a routing frame work created Angular.js team and its not a part of Angular.js But it built on top of Angular.js. You can say it's a 3rd-Party module and is very powerful. It support most of things that we can do with ng-route and also do many other stuff that is not possible with ng-route.
You can find more information about UI-Router at following link.

https://github.com/angular-ui/ui-router
http://angular-ui.github.io/ui-router/site/#/api/ui.router

Here are few features that is provided by UI-Router.
  1. UI-Router allows nested views and multiple views
  2. It allows you to strong type linking between state based on state names.
  3. State allows you to map and access different information about different states and you can easily pass information between states via $Stateparams parameter.
  4. With states approach your views are not tied to the URL and it is tied to states. Which can be very useful in large applications as you can change UI part without changing URLs.
  5. You can also change Partial UI of application which is not possible with ng-route.

So what are we waiting for let's create a sample application with UI-Router and Angular.js.

Sample application with UI-Router:


I'm going to use visual studio for creating this sample application. So that we can use IIS local express to host this application. I'm going to create asp.net web application.

angular-Ui-route-demo-project

We are going to use empty asp.net web forms application as we are not going to use asp.net code here it's a simple HTML page application to demonstrate the power of UI-Router.

empty-web-application-angular-ui-route-demo
We are going to create sample application with 3 pages.
  1. Home
  2. About Us
  3. Contact Us

So for that we need three html pages which will acts as partial views just like ASP.NET MVC partial views or user control in ASP.NET Web Forms.
I'm going to create a very basic HTML pages with following code.
home.html page code:
<h1>Home</h1>
About Us HTML page code:
<h1>About us page</h1>
Contact Us HTML page code:
<h1>contact us </h1>
And now we are going create index.html and following is a code for that.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Angular UI Router Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="routerDemoApp">
    <ul >
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="aboutus">About us</a></li>
        <li><a ui-sref="contactus">Contact us</a></li>
    </ul>
<div>
    Angualr UI Router Demo
</div>
<div>
    <div ui-view></div>
</div>
</body>
</html>
If you see above code you can see I have added angular.js and angular-ui-router-min.js JavaScript files from the cloud flare CDN and then I have created a ng-app "routerDemoApp" with body tag of html page. I have used UL and Li ta and UI-Sref to create link for our routes. Here also notice ui-view tag in one of div where html pages will be rendered in this div.

So now basic infrastructure is ready now its time to create JavaScript code for our application. So lets create app.js file and write code like following.
// JavaScript source code
var routerDemoApp = angular.module('routerDemoApp', ['ui.router']);

routerDemoApp.config(function ($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise("/home");

    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'home.html'
        })
        .state('aboutus', {
            url: '/aboutus',
            templateUrl: 'aboutus.html'
        })
        .state('contactus', {
            url: '/contactus',
            templateUrl: 'contactus.html'
        });

});
So if you see above code carefully, Here I have created a angular app module called routerDemoApp and I have injected dependency of UI-Router. Then in config function we have created different states for Home, About Us and Contact Us. You can see I have passed two parameter url and template url for each state with respective html pages. Also I have written otherwise function which will return home state by default.

Now let's run this application in browser.

demo-application-browser-ui-router-angularjs

So by default Home page is loaded as you can see and in URL also you have /home now when you click on About us it will load about us page like following.

about-us-demo-page-in-browser-ui-angular-js

So it's very easy to create routing with Angular UI-Router in future post we will see how we can use nested view and multiple view.
You can find complete source code of this application at github on- https://github.com/dotnetjalps/AngularUIRouter
Hope you like it. Stay tuned for more!.
Share:
Friday, October 2, 2015

Convert C# Object into JSON and vice versa using Jil

I have also written couple of posts about converting C# object into JSON and vice versa. Following is a list of post for the same.

Converting a C# Object into JSON string
How to convert C# object into JSON string with JSON.NET

In this blog post we will learn about how we can convert C# object into JSON with Jil- Fast .NET JSON (De)Serializer, Built On Sigil an open source library by stack exchange team.

What is Jil:


Jil is a open source (De) Serializer library written by Kevin Montrose and stack exchange team. It is built on Sigil- with a number of crazy optimization tricks.Sigil is also a custom fast validation helper for .NET CIL Generation. Jil is one of fastest Serializer and deserializer library. It is also open source. You can find more information about at following link.

https://github.com/kevin-montrose/Jil

Example:

So let's create example which demonstrate both Serializing and Deserializing object. So first we will create JSON string from C# object via serializing with Jil and then we again deserialize that string to C# object. I'm going to create a console application for this.

jil-jason-converter

After creating a application first thing we have to do is to add Nuget package from JIl via following command.

nuget-package-jil-json-serializer

I'm going to use a Employee class for this example which have four properties Employee Id, First Name, Last Name and Designation.
namespace CsharpJSON
{
    public class Employee
    {
        public int EmployeeId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Designation { get; set; }
    }
}
Then I have created a function Get Employee function to initialize Employee class with some data.
private static Employee GetEmployee()
{
    var employee = new Employee
    {
        EmployeeId = 1,
        FirstName = "Jalpesh",
        LastName = "Vadgama",
        Designation = "Technial Architect"
    };
    return employee;
}
Now it's time to serialize that employee class into JSON string so I have created  Serialize Employee function.
private static string SerializeEmployee(Employee employee)
{
    using (var output = new StringWriter())
    {
        JSON.Serialize(
           employee,
            output
        );
        return output.ToString();
    }
}
Here you can see I have use JSON.Serialize function which serialize C# object into string writer. Same way I have created Deserialize Employee function to deserialize JSON string created by previous function.
private static Employee DeserializeEmployee(string employeeString)
{
    return JSON.Deserialize<Employee>(employeeString);
}

Here you can see I have used  JSON. Deserialize function to convert JSON string into C# object. Finally I have called this function in my console application Main method and print it with Console.Writeline method.
static void Main(string[] args)
{
    var employee = GetEmployee();
    string employeeSerializedString = SerializeEmployee(employee);

    Console.WriteLine("Serialize Employee");
    Console.WriteLine(employeeSerializedString);

    Console.WriteLine("\n\nDeserializing Employee");
    var employeeDeserialized = DeserializeEmployee(employeeSerializedString);

    Console.WriteLine(employeeDeserialized.EmployeeId);
    Console.WriteLine(employeeDeserialized.FirstName);
    Console.WriteLine(employeeDeserialized.LastName);
    Console.WriteLine(employeeDeserialized.Designation);

    Console.ReadKey();
}

Now when you run application it will generate output like following.

json-csharp-object


You can find complete source code of this application at following location on GitHub- https://github.com/dotnetjalps/CsharpJsonJil

Hope you like it. Stay tuned for more!
Share:

A Better Solution to create PDF with Rotativa and ASP.NET MVC

In most of the line of business application we need some kind of reports. Now days we need those reports as PDF format as it is the most convenient way of storing documents. I have written a post about creating a PDF in ASP.NET MVC with Razor PDF and it is one of the top visited page on my blog.

Creating PDF with ASP.NET MVC and RazorPDF

But now I have found a better way to create a PDF with ASP.NET MVC so I thought it will be a good idea to write a blog post about it. So in this blog post we are going to learn about creating PDF with ASP.NET MVC with the use of Rotativa as open source framework for creating PDF with ASP.NET MVC.

What is Rotativa:


It is a framework created by Giorgio Bozio with the purpose of creating PDF in ASP.NET MVC extremely easy way. It is based on wkhtmltopdf tool to create PDF from html content rendered on browser. It uses the web kit engine which is used by Safari and Chrome browser to render html. And support most of HTML tags and styles. It is a open source command line tools so Giogio has created a nuget package to use this tool as PDF creator. You can find more information about Rotativa from the following links.

http://letsfollowtheyellowbrickroad.blogspot.it/
http://www.codeproject.com/Articles/335595/Rotativa-how-to-print-PDF-in-Asp-Net-MVC

You can find source code of rotativa-

https://github.com/webgio/Rotativa

Now let's create example to demonstrate the power of Rotativa with ASP.NET MVC

Creating PDF with ASP.NET MVC and Rotativa:


So to create example, I have created a ASP.NET MVC application.

asp-net-mvc-pdf-application

The first thing we need to do is to add Rotativa Nuget Package in our application.

nuget-package-for-rotativ-asp-net-pdf
Here is the model class I have used to demonstrate power or Rotativa.
namespace MvcPdf.Models
{
    public class Customer
    {
        public int CustomerId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string ProfileImage { get; set; }
    }
}
In this example, we are not going to use any database so we are going to hardcode data in customer. so We have done is hardcode list of customer in controller and returning it to a view.
using MvcPdf.Models;
using Rotativa;
using System.Collections.Generic;
using System.Web.Mvc;

namespace MvcPdf.Controllers
{
    public class CustomerController : Controller
    {
        private List<Customer> _customers;

        public CustomerController()
        {
            var imagePath = "profile.jpg";
            _customers = new List<Customer>()
            {
                new Customer {CustomerId = 1, FirstName = "Jalpesh",
                               LastName = "Vadgama", ProfileImage = imagePath},
                new Customer {CustomerId = 1, FirstName = "Vishal", 
                               LastName = "Vadgama", ProfileImage = imagePath}
            };
        }

        // GET: Customer
        [HttpGet]
        public ActionResult Index()
        {
            return View(_customers);

        }
    }
}
And in view we has displayed this list as table like following.
@model List<MvcPdf.Models.Customer>

@{
    ViewBag.Title = "PDF Title";
  
}

<h2>Convert to  PDF</h2>

<table class="table">
    <tr>
        <td class="alert-success">First Name</td>
        <td class="alert-info">Last name</td>
        <td style="background-color: yellow;">Profile Image</td>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>@item.FirstName</td>

            <td>@item.LastName</td>
            <td><img src="@Url.Content("~/content/" + Path.GetFileName(item.ProfileImage))" alt="" width="100" height="100" /></td>
        </tr>
    }

</table>    
          
@Html.ActionLink("Print", "Print", "Customer")
If you see in above code, I have used a image to display profile pic. I have also used different styles for td element in table to display power of Rotativa. Even I have used hardcoded style directly.  At bottom I have created  Html Action link to print this view as PDF and following is a code the printing this view as PDF in Action Result.
public ActionResult Print()
{
    return new ActionAsPdf("Index", _customers);
}
And when we run this application it looks like following.

browser-demo-pdf

Now when you click on Print it will create a PDF like following.

pdf-created-with-rotativa-with-browser

This was pretty basic demo but there are lots of options also available with Rotativa you can find that options in documentation on Github as well. I have shared same link above.
You can find source code of this sample application on github at following location - https://github.com/dotnetjalps/AspNetMvcPdfRotativa
Hope you like it. Stay tuned for more!!
Share:

My Interview on Geek.Fest - What's new in C# 6

I have been featured on Geek.Fest a you channel by Fanie Reynders. I have lots of fun while talking about latest C# features. We had interesting discussion and demo of latest c# features. Following is a video on the you tube.



You can find blog from Fanie at following location.
http://reynders.co/2015/10/01/geekfest-9-whats-new-in-csharp-6/

Following is the sample code and demo for the discussion.
https://github.com/dotnetjalps/LatestCSharpFeatures

Thank you very much Fanie Reynders and Geek.Fest for featuring me.
Share:
Friday, September 18, 2015

Why it's the right time to learn TypeScript.

In Today's world, If you are an web developer and you don't know JavaScript then you will feel left behind. It's never been a good time to be a JavaScript developer than now. With the rise of Node.js  JavaScript is everywhere now. But as you know when Size and Complexity of your JavaScript is Increased it's very difficult to maintain and mange. That's where TypeScript comes into picture. It is a life saver some times. So in this blog post we will see Why It's the right time to learn TypeScript.

What is TypeScript?


TypeScript is a free and open sourced programming language developed and Maintained by Microsoft. It works as a super set of JavaScript. As we all know that JavaScript is very liberal language by nature. So that we tend to make more mistakes and we does not know all the errors at run time. TypeScript is a strict super set of JavaScript so that you can get most of errors at compile time only.  As per official website of TypeScript it's a language that lets you write JavaScript in the way you really want to. TypeScript offers all the features that you need for Object oriented programming. You can find more information about TypeScript on it's official web site on below link.

http://www.typescriptlang.org/

ECMAScript and TypeScript:


ECMAScript is the specification standard of the JavaScript. So right not standard stable version if ECMAScript 5 and some of the browsers support ECMAScript 6. ECMAScript 6 features are being adopted by latest browsers.While TypeScript follows most of syntax of ECMAScript 6 so that you don't have a feel of the learning new language. As per official road map of Typescript 1.6 comes with ES6 Generator so you can convert your script code into ECMAScript6. Your can find more about that on following blog post.

http://blogs.msdn.com/b/typescript/archive/2015/09/16/announcing-typescript-1-6.aspx

TypeScript is everywhere:


As we know TypeScript is a fully Object Oriented language, It's provide great productivity boosts than JavaScript and it's super set of JavaScript so it will be compiled into JavaScript itself. So because of this lots of great framework started using TypeScript like following.
  1. Angular JS
  2. Iconic Framework for creating frond end mobile App
  3. Native Script from Telerik is also completely written TypeScript itself.
Take a example of AngularJs, It is one of the most popular JavaScript Framework on earth. With Angular.js 2.0 it will be fully written with TypeScript.

Tooling:


Most of Web Development editor whether it's paid or free are having TypeScript tooling.  Most popular editors like Visual Studio, Visual Studio Code, WebStorm, Atom, Sublime text and Eclipse are having great tooling for TypeScript.

Why to use TypeScript:


Followings are reason why we should use TypeScript instead of JavaScript.
  1. Fully Object Oriented support with classes and interfaces. So It's a great productivity boost for any developer and easily maintainable and understandable.
  2. It's provide most of the errors compile time while JavaScript is more liberal than this. So less run time error means less bugs for your application.
  3. Refactoring is very easy in TypeScript compare to JavaScript.
So it's never been late. It is the right time to learn TypeScript. Hope you like it. Stay tuned for more!.
Share:
Thursday, September 17, 2015

Which visual studio themes you use? Interesting Survey

I have been using Visual studio since 2003 version and it's been decade and still my favorite editor. With visual studio 2010 they have introduced blue theme and With Visual Studio 2012 they also introduced a black theme. Lots of people are using lots of different themes. Some people like black themes and some does not. I had always argument with my friends about visual studio themes. So I thought it will be a good idea to get survey about themes and so what I have done is to put a survey on my blog. As you know this blog is technical blog so most of my readers will be developers. So far I have got a interesting data so I thought it will be a good idea to write a blog post and share those data with you.

So till now I have got total 124 votes for my survey  and here is the result of the survey till now.

visual-studio-theme-survey

From, the above survey I get following fact.
  1. Lots of people like black themes out of 124 votes I got 49 for black themes. So black theme is most the popular one.
  2. To my surprise light theme comes second which I thought will be a third place but I got 39 votes for that.
This survey is still open for the five days. So if you are new to this blog and still not cast your votes then its right time to do.

Where I can get customize Color themes:


If you need more customized colour  themes than I request you to visit http://studiostyl.es/. It got thousand of customized colour themes.

Visual Studio Theme editor extension:


If you need more option than this three themes and then you should also try visual studio color theme editor extension. It's available from visual studio 2010. Here is the links for different visual studio versions color theme editor extensions.

Visual Studio 2010:
https://visualstudiogallery.msdn.microsoft.com/20cd93a2-c435-4d00-a797-499f16402378

Visual Studio 2012:
https://visualstudiogallery.msdn.microsoft.com/366ad100-0003-4c9a-81a8-337d4e7ace05

Visual Studio 2013:
https://visualstudiogallery.msdn.microsoft.com/9e08e5d3-6eb4-4e73-a045-6ea2a5cbdabe

Visual Studio 2015:
https://visualstudiogallery.msdn.microsoft.com/6f4b51b6-5c6b-4a81-9cb5-f2daa560430b

Once you install you will get lots of default color theme choice as well you can customize your theme and save it.

visual-studio-theme-editor-default-options

Which color theme I'm using:


Now it's time to write about my personal preferences. It totally depends on the lighting condition where I am using visual studio. If there a lots of light I prefer to use light theme while if it is dark then I like to have dark visual studio theme.

Hope you like it. Stay tuned for more. Still this survey is open for next five days. Please do vote for your favorite themes.

Update on 1st October 2015

Here is the latest update for the survey, the survey are closed now and here is the final result.


Here are the some statistics

Survey period : 1 Month
Total votes so far: 149
Winner : Black

Clearly Black themes are more popular!.

Thank you all who participated on survey!!. Keep reading my blog and participate in this kind of survey
Share:
Saturday, August 8, 2015

New milestone achieved- 2 million pages view for my blog - www.dotnetjalps.com

Today, I have came to know that my blog has completed 2 million page views. I am not crazy about milestone and normally I don't share my milestones publicly but this is huge milestone so I'm sharing with you and there is another reason behind it. I want to say huge thank you to all my blog readers. Thank you from bottom of my heart.

I host my blog on blogger.com. So here is the statistics from blogger official statistics.

pageviews-blogger

Till 2010, I have not started tracking page views, But after that I have started tracking page views for my blog and I am almost getting 59k page views every month and approx. 2.5 page views everyday.
Here are the top 10 blog post all time as per blogger statistics.

top-ten-blog-post-blogger 

So once again, Thank you very much dear readers and I promise I continue to write blogs in my free time.

Also, last but not least I would like thank my family specially my wife who sacrifices her time some time as I am busy writing blog post for my blog post. So thank you dear wife!. My brother and father for continue providing all the support and my little rock star from where I get all energy to write blog post.
Share:
Sunday, July 26, 2015

Video - Custom Layout in Visual Studio 2015

Recently Microsoft has launched Visual Studio 2015 with loads of features. I have created a video for a feature called custom layouts in Visual Studio 2015. Followings are link for Youtube and Vimeo

Youtube- https://www.youtube.com/watch?v=IZ4LDZU7c_s
Vimeo- https://vimeo.com/134507008



If you  don't want to watch video then I have already written a blog post. Following is a link for that.

Custom Windows Layout in Visual studio 2015

Hope you like it. Stay tuned for more!.
Share:
Wednesday, July 22, 2015

Video - Difference between var and dynamic keyword C#

I have recently produced one video about difference between var and dynamic keyword. Please go through it and let me know how it was.

You can find complete video at following URL.

https://www.youtube.com/watch?v=FPNZ_sTfZBo



Hope you like it. Stay tuned for more!.
Share:
Sunday, July 19, 2015

SQL Server- Guest Post - Solutions for SQL Server Master Database Corruption

This blog post a Guest Post from one of my friend Priyanka Chouhan.

About Author:


Priyanka Chouhan is a technical writer in “Stellar Data Recovery “with 5 years of experience and has written several articles on SQL. She has the fine knowledge of SharePoint and SQL Server. In the spear time she loves reading and gardening.

Here is the her blog about - Solutions for SQL Server Master Database Corruption

Master database is a backbone of the SQL Server database. It is a must have database and user cannot start the SQL Server without master database. It contains the all information about server configuration. When a user installs a SQL Serverthen, it usually creates master, model, MSDB and TEMPDB system databases by default. MSDB and TEMPDB depend on the version of SQL Server database. All system databases performs the different task like: master database is used to store all system level information, TEMPDB stores the information about temporary tables and temporary stored procedures, model is worked as a template for all system created database and MSDB is used by the SQL Server Agent to schedule alerts and jobs.

Corruption in the master database is not a new thing. I will advise to all database users to take the backup of master database because without master database, SQL Server cannot be started. If corruption is high in the master database then SQL Server does not allow starting the database. In this case user can rebuild it by using command prompt or restore from the latest backup (Scroll down to see detailed information). In case of minor corruption, it might be possible that user may start the database but SQL server does not allow to access the details inside the database.

Restore from the Backup


These are the steps to restore the master database from the backup:
Start SQL Server Configuration Manager then click on the SQL Server Services.
Stop SQL Server Agent (it might connect first and prevent you to connect as a second user).
Right-click SQL Serverandthen click Properties.
Advanced tab, in the Startup Parameters box, insert –mto start the SQL Server in the Single User Mode.
Now Start SQL Server.
Start cmd.exe from start menu
Type SQLCMD on command prompt
Restore the master database using command:
RESTORE DATABASE master FROM DISK = ‘D:\MyFolder\master.bak’ WITH REPLACE
Now remove the startup parameter –m.
Start SQL Server.

This is the best way to fix master database corruption issues. If backup of corrupt master database is not available then user can easily rebuilt it by following below steps.

Rebuild System Database


Rebuild the system database means we are going to drop the re-create in their real location.

Open the command prompt and change the directories to the location of setup.exe file on the local server. Its default location in the server is C:\Program Files\Microsoft SQL Server\130\Setup Bootstrap\Release.
Enter the following command in the command prompt Setup
Setup /QUIET /ACTION=REBUILDDATABASE /INSTANCENAME=Instance_Name /SQLSYSADMINACCOUNTS=accounts [ /SAPWD= StrongPassword ] [ /SQLCOLLATION=Collation_Name]
Once the rebuild process completes then it returns the command prompt without any message. User can view the Summary.txt log file to verify the process. The default location of theSummary.txt log file is C:\Program Files\Microsoft SQL Server\130\Setup Bootstrap\Logs.

Conclusion:

These are the methods to solve the corruption in the master database. Sometimes antivirus software can be the reason of master database corruption. So read the guidelines here to choose the antivirus https://support.microsoft.com/en-us/kb/309422/en-us



Share:
Search This Blog
About Me
My Photo

Full Stack Developer,Blogger,Microsoft Mvp, Mentor, Life long learner, 12+ Years of Experience for JavaScript, web and Microsoft technologies. ASP.NET MVC,Web Forms,C#,AngularJs,Golang
Mvp profile
Subscribe to my blog

Enter your email address:

Follow us on facebook
Blog Archive
Total Pageviews