Ramchand's Blog

2025-02-04T12:22:00.003+05:30

.NET 9 Features

Params Collections in .NET9

2025-02-04T11:56:00.004+05:30

About

The series of features exploring in .NET 9 posts, This post, we are focusing on "Params Collections" feature in .NET9. Please refer the following links for other .NET 9 features discussed in my earlier posts.

Introduction

Params collection is one of the feature in C#13. This params parameter can be of any types supported for collection parameters.

This enhanced feature helps to write code in cleaner way and it also improves in performance point of view as well.

Lets explore and understand about this with sample code by comparing before .NET9 and now.

Before .NET 9

 //Before .NET 9
 public static void PrintNumbers( params int[] numbers)
 {
     Console.WriteLine("Numbers in Array: " + string.Join(", ", numbers));
 }
 public static void PrintNumbers(List numbers)
 {
     Console.WriteLine("Numbers in List: " + string.Join(", ", numbers));
 }

.NET 9

 // .NET 9
public static void PrintNumbersInNET9(params ReadOnlySpan numbers)
{
    Console.WriteLine("Numbers in ReadOnlySpan: " + string.Join(", ", numbers.ToArray()));
}

public static void PrintNumbersInNET9(params IEnumerable numbers)
{
    Console.WriteLine("Numbers in IEnumerable: " + string.Join(", ", numbers));
}

Call those methods just like below.


// Using params with a Array or List
var numbersList = new List { 6, 7, 8 };
ParamsCollection.PrintNumbers(numbersList.ToArray());
ParamsCollection.PrintNumbers(numbersList);

// Using params with ReadOnlySpan
ParamsCollection.PrintNumbersInNET9([6, 7, 8]);

// Using params with List
ParamsCollection.PrintNumbersInNET9(numbersList.Where(x => x > 6));

The aforesaid scenario where you have two method overloads: one accepting params IEnumerable<T> and another taking params ReadOnlySpan<T>. The method resolution works as follows:

When passing a sequence of values directly, the params ReadOnlySpan<T> overload is chosen.
If an array is provided as an argument, the params ReadOnlySpan<T> overload is also selected, since arrays can be implicitly converted to ReadOnlySpan<T>.
However, when a List<T> is passed, the params IEnumerable<T> overload is preferred, as List<T> implements IEnumerable<T> but does not have an implicit conversion to ReadOnlySpan<T>.

Code Screenshots

Summary

Params collection feature provides these following benefits.

Cleaner code: It reduces the number of calls to .ToArray() and .ToList()

Performance: Methods like .ToArray() and .ToList() inherently introduce additional resource overhead. However, the updated implementation now supports passing Span<> and IEnumerable<>, optimizing memory usage and enabling lazy execution. This enhancement improves efficiency while offering greater flexibility for performance-critical scenarios.

Thanks for your reading and as always share your feedback on this.

Semi Auto Properties in .NET9

2025-01-17T21:27:00.003+05:30

About

The series of features exploring in .NET 9 posts, This post, we are focusing on "Semi Auto Properties" feature in .NET9. Please refer the following links for other .NET 9 features discussed in my earlier posts.

Introduction

Semi Auto Properties is available in Preview feature of C#13. This feature really helps Enhanced readability and reduced boilerplate code while declaring properties in class files.

Lets understand further by exploring more following information.

Usually, In C#, We declare an auto-implemented property like

public int EmplSalary { get; set; },

The compiler automatically generates a backing field like (Ex: _empSalary) and internal getter/setter methods (void set_EmplSalary(int empSalary) and int get_EmplSalary()).

However, In our real-time project cases, we need to set some custom logic such as validation, default values, computations, or lazy loading in the property’s getter or setter, we typically need to manually define the backing field.

With C# 13 preview, this process is simplified by the introduction of the field keyword, which allows direct access to the backing field without the need for manual definition.

Edit the project file by adding <LangVersion>preview</LangVersion>. So, It supports field

property in project usage.

The following code gives more illustrative idea about usage.

Before .NET 9


private int _empSalary;

public int EmpSalary
{
    get => _empSalary;
    set
    {
        if (value <= 0)
            throw new ArgumentOutOfRangeException(nameof(value),
                "Salary must be greater than 0");
        _empSalary = value;
    }
}

In .NET 9


public int EmployeeSalary
{
    get => field;
    set
    {
        if (value <= 0)
            throw new ArgumentOutOfRangeException(nameof(value),
                "Salary must be greater than 0");
        field = value;
    }
}

Code Screenshot

Thanks for your reading and please share your feedback on comments.

Task.WhenEach in .NET9

2025-01-06T21:02:00.003+05:30

About

The series of features exploring in .NET 9 posts, This post, we are focusing on "Task.WhenEach" feature in .NET9. Please refer the following links for other .NET 9 features discussed in my earlier posts.

Introduction

Task.WhenEach is introduced in C#13 of .NET9. This is really helpful when we have list of tasks that completes in different time intervals and then we want to start other task as soon as it completes the current one.

The below code example illustrates the usage of this feature by comparing/understand the earlier version with current version as well.


public async Task TaskWhenEachFeature()
{
    // Before            
    var tasks1 = Enumerable.Range(1, 5)
       .Select(async i =>
       {
           await Task.Delay(1000);
           return $"Task is {i} done in earlier.";
       })
       .ToList();

    
    while (tasks1.Count > 0)
    {
        var completedTask = await Task.WhenAny(tasks1);
        tasks1.Remove(completedTask);
        Console.WriteLine(await completedTask);
    }

    // .NET 9 USAGE OF Task.WhenEach feature
    Console.WriteLine("==.NET9 - Task.WhenEach feature");
    var tasks2 = Enumerable.Range(1, 5)
       .Select(async i =>
       {
           await Task.Delay(2000);
           return $"Task In .NET9 {i} done";
       })
       .ToList();
    await foreach (var completedTask in Task.WhenEach(tasks2))
        Console.WriteLine(await completedTask);
}

Screenshots

Output

SearchValues Improvements in .NET9

2025-01-01T16:06:00.004+05:30

About

The series of features exploring in .NET 9 posts, This post, we are focusing on "SearchValues" improvements did in .NET9. Please refer the following links for other .NET 9 features discussed in my earlier posts.

Introduction

SearchValues was introduced in .NET8 to perform searching more efficiently compared to earlier method of using ICollection.Contains method. However, in .NET8, Its limited to set of characters or bytes.

So, .NET9 its upgraded to support string as well instead of only character.

Lets explore the usage of "SearchValues" usage in both .NET8 and .NET9 versions.

The below code example shows the usage of this feature in both .NET versions.

We can see that, .NET9 search supports string comparison type as well.


public static void SearchValuesFeature()
{
    var message = "Explore new feature of SearchValues improvements in .NET9".AsSpan();

    // .NET 8
    var charSearch = SearchValues.Create(['.','N', 'E', 'T']);
    Console.WriteLine(message.ContainsAny(charSearch));

    // .NET 9
    var wordSearch = SearchValues.Create([".NET9", "of"], StringComparison.OrdinalIgnoreCase);
    Console.WriteLine(message.ContainsAny(wordSearch));
}

Screenshots

Summary

This feature is defiantly used option in our day to day projects/development where we used to do search operations, data input filter scenarios, spam detection checks and many more.

Thanks for your reading!!

UUID v7 in .NET 9

2024-12-18T22:08:00.004+05:30

About

.NET 9 comes up with so many excited features as discussed in earlier posts. This post, we are focusing on UUID v7 feature.

Please refer the following links for other .NET 9 LINQ features

Introduction

The earlier versions of .NET, we've used Guid.NewGuid() (version 4) method generate UUIDs. It simply generates unique identifier which being used in our projects.

The present .NET 9 version supports UUID v7 format of code like Guid.CreateVersion7(). This generated UUID incorporated timestamp already in it. So, This is really very helpful when we stored this UUID in database level to Sort it based on creation time.

The structure of UUID format is as follows.

48-bit timestamp || 12-bit random || 62-bit random

48-bit timestamp: It represents the number of milliseconds since Unix epoch. so, It provides info about creation time.

12-bit random: It adds randomness to ensure uniqueness in within same millisecond.

62-bit random: It also ensures overall uniqueness by offering randomness of entropy.

Code Examples

Before .NET 9

var guid = Guid.NewGuid(); // v4 UUID

.NET 9

var guidv7 = Guid.CreateVersion7(); // v7 UUID

var guidv7 = Guid.CreateVersion7(); // v7 UUID

This by default inherits UtcNow timeformat.

Lets explore about Sort feature by creating multiple UUIDs custom way.

//Just added the guid by adding different time provider by add/subtract minutes to current Utc time.

var guidList = new List
{
    Guid.CreateVersion7(TimeProvider.System.GetUtcNow()),
    Guid.CreateVersion7(TimeProvider.System.GetUtcNow().AddMinutes(-10)),
    Guid.CreateVersion7(TimeProvider.System.GetUtcNow().AddMinutes(10)),
    Guid.CreateVersion7(TimeProvider.System.GetUtcNow().AddMinutes(-20))

};
//write the guids in whatever list contains.
foreach (var v7guid in guidList)
{
    Console.WriteLine(v7guid.ToString());
}

Console.WriteLine("=====================");
//Order the guidlist and then write list.
//The result you can identify guids are ordered based on creation time.
var sortedList = guidList.OrderBy(x => x).ToList();
foreach (var v7guid in sortedList)
{
    Console.WriteLine(v7guid.ToString());
}

Screenshots

Summary

We have explored UUID v7 feature in .NET 9and its advantages of inbuilt timestamp which can be really helpful to order created UUIDs in database level. So, lets start use in our project and get benefitted.

Stay tuned for more articles. Thanks for reading!!

.NET 9 Index in LINQ

2024-12-16T21:21:00.001+05:30

About

Index is one of feature introduced in .NET LINQ. By using this method, we can easily extract implicit index of IEnumerable.

The other .NET 9 LINQ features are as follows.

.NET 9 CountBy in LINQ

.NET 9 AggregateBy in LINQ

The Index method returns index and index of an item in following format.

Format: IEnumerable<(int Index, TSource Item)>

Scenario

Lets consider to display employee name in list and their respective order.

Employee class

public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
}

Setup Employee List with Sample Data

var employees = new List {
  new Employee(){ Id = 11, Name = "Ram" },
  new Employee(){ Id = 12, Name = "Bheem" },
  new Employee(){Id = 13, Name = "Lakshman"},
  new Employee(){Id = 14, Name = "Hanu"},
  new Employee(){Id = 15, Name = "Dev"},
  new Employee(){Id = 16, Name = "Nandan"},
  new Employee(){Id = 17, Name = "Krish"},
  new Employee(){Id = 18, Name = "Hash"},
};

  foreach ((int index, Employee emp) in employees.Index())
  {
      Console.WriteLine($"Index: {index}, Employee Name: {emp.Name}");
  }

Screenshots

The following code and output screenshots gives easy understanding and for your implementation.

Code

Output

Summary

This post explored about Index feature in LINQ introduced in .NET9.

Thanks for reading this and stay tuned for more articles.

.NET 9 AggregateBy LINQ

2024-12-15T19:47:00.006+05:30

About

In this post, we are exploring about AggregateBy LINQ method introduced in .NET 9. This is very helpful and being used in scenarios of aggregate operations such as sum, average and grouping of data based on custom conditions.

In Earlier post, Please look into about other feature discussed about CountBy in LINQ 9.

So, Lets go ahead to discuss/understand about AggregateBy in LINQ.

Scenario

Lets consider following scenario and understand implementation of this before and after .NET 9 approach.

"Get sum of employee merit score points based on job level"

Employee class

public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int YearJoin { get; set; }
    public int JobLevel { get; set; }
    public int MeritPoints { get; set; }
}

Setup Employee List with Sample Data

  var employees = new List {
  new Employee(){ Id = 11, Name = "Ram", YearJoin = 2015, JobLevel = 6, MeritPoints = 10 },
  new Employee(){ Id = 12, Name = "Bheem", YearJoin = 2012, JobLevel = 5, MeritPoints = 20 },
  new Employee(){Id = 13, Name = "Lakshman", YearJoin = 2015, JobLevel = 6, MeritPoints = 30},
  new Employee(){Id = 14, Name = "Hanu", YearJoin = 2016, JobLevel = 6, MeritPoints = 40},
  new Employee(){Id = 15, Name = "Dev", YearJoin = 2024, JobLevel = 6, MeritPoints = 50},
  new Employee(){Id = 16, Name = "Nandan", YearJoin = 2012, JobLevel = 5, MeritPoints = 60},
  new Employee(){Id = 17, Name = "Krish", YearJoin = 2012, JobLevel = 5, MeritPoints = 70},
  new Employee(){Id = 18, Name = "Hash", YearJoin = 2015, JobLevel = 6, MeritPoints = 80},
};

Before .NET 9

//BEFORE .NET 9 Example
// Aggregate MeritPoints by Job Level using GroupBy and Aggregate
var meritPointsByEmpJobLevel = employees
    .GroupBy(user => user.JobLevel) // Group users by their Job Level
    .Select(group => new
    {
        JobLevel = group.Key,
        TotalMeritPoints = group.Sum(user => user.MeritPoints)
    }
            ); // Aggregate Merit Points for each Job Level
// Print the results
foreach (var jobLevelAggregate in meritPointsByEmpJobLevel)
{
    Console.WriteLine($"Total merit points per each employee level " +
        $"{jobLevelAggregate.JobLevel} is {jobLevelAggregate.TotalMeritPoints}");
}

Aforesaid code example, we did the following steps.

1. Group the employees based on Job level.

2. Select the Job level as Key and Sum of Meri points on respective job level.

3. Display the results in fore ach loop based on select results.

.NET 9

var totalEmpMeritPointsByLevel = employees.AggregateBy(e => e.JobLevel, 
                                    seed: 0, (acc, meritPoints) => acc + meritPoints.MeritPoints);
foreach (var meritPointByLevel in totalEmpMeritPointsByLevel)
{
    Console.WriteLine($"Total merit points per each employee level " +
        $"{meritPointByLevel.Key} is {meritPointByLevel.Value}");
}

The aforesaid .NET 9 code example, we achieved all in one go with AggregateBy example. The code also very clean and crsip.

Syntax:

IEnumerable<(TKey Key, TAccumulate Aggregate)> AggregateBy(
    this IEnumerable source,
    Func keySelector,
    Func seedFactory,
    Func aggregator
);

Screenshots

Code

Output

Summary

In this post, we explored about AggregateBy LINQ feature with ease of use and code examples. Those are really helpful to improve developer productivity and ease of understanding and performance of applications.

Thanks for reading and Stay tuned for more articles!!

.NET 9 CountBy LINQ

2024-12-10T21:43:00.001+05:30

Introduction

.NET 9 is the latest version of Microsoft's released in Nov 2024. Its open-source development platform for building applications for web, mobile, desktop and cloud environments.

This release is pack of many new features, LINQ methods and performance improvements and many more.

About

In this post, we are focusing about one of new LINQ method introduced in .NET 9. Its very useful, comprehensive and easily can understand and can be used in our project as well :).

So, Lets start explore on this.

Scenario

Lets consider a easy scenario as "To get employees count based on the year joined".

Employee Class:

public class Employee

{

public int Id { get; set; }

public string Name { get; set; }

public int YearJoin { get; set; }

}

Setup Employee List with Sample Data

var employees = new List<Employee> {

new Employee(){ Id = 11, Name = "Ram", YearJoin = 2015 },

new Employee(){ Id = 12, Name = "Bheem", YearJoin = 2012 },

new Employee(){ Id = 13, Name = "Lakshman", YearJoin = 2015 },

new Employee(){ Id = 14, Name = "Hanu", YearJoin = 2016 },

new Employee(){ Id = 15, Name = "Dev", YearJoin = 2024 },

new Employee(){ Id = 16, Name = "Nandan", YearJoin = 2012 },

new Employee(){ Id = 17, Name = "Krish", YearJoin = 2012 },

new Employee(){ Id = 18, Name = "Hash", YearJoin = 2015 },

};

So, First let us understand - How we are doing currently (Earlier to .NET 9).

Before .NET 9

Approach is - Grouping and Counting

1. GroupBy: Groups the employees based on their value provided (Year).

2. Select(g => new {Key = g.Key, Value = g.Count()}}: project each group into anonymous object with two properties.

Key: The year joined.
Value: The count of occurrences of employees in the group.

Sample Code:

var empOccurences = employees

.GroupBy(c => c.YearJoin)

.Select(g => new { g.Key, Value = g.Count() });

foreach (var empInfo in empOccurences)

{

Console.WriteLine($"There are {empInfo.Value} users with the year joined {empInfo.Key}");

}

.NET 9

In .NET 9 -Its simplifies the process and streamlined code like below.

foreach (var empCount in employees.CountBy(user => user.YearJoin))

{

Console.WriteLine($"There are {empInfo.Value} users with the year joined {empInfo.Key}");

}

Screenshots

Code

Output

CountBy Benefits

Simplifies the code hence it improves readability and developer productivity.
Optimizes the performance by streamlining the grouping and counting process.
It makes data aggregation makes more efficient and concise.

I will come up with another LINQ method introduced in .NET 9 in upcoming post. Stay tuned!!

Thanks for your reading and provide your comments and suggestions as always.

AngularJS Core Directives: Include, Click and Repeat

2015-01-12T15:43:00.001+05:30

About

This article provides an idea of some more directives like ng-include, ng-click and ng-repeat in AngularJs.

This article is just a continuation of my previous article about Quick Start Of AngularJS. So, please read that to get the initial/basic idea of AngularJS.

ng-include

This is an AngularJS directive, it is very helpful to include the various files in a main page using the ng-include attribute.

For example, you have one page layout that contains a header, body, footer and so on. In that scenario, you can create various HTML files for a header and footer then you can include those in the main HTML file. Because of this implementation the page looks cleaner and the code/design is also separated.

Sample Application

The header.html file contains the following.


Header of the site

The footer HTML file contains the following.


Copyright Ramchand @2014

The main index.html file contains the following.

The previous index.html contains the ng-include attributes for header and footer divs with the respective HTML file path values that should be specified in single quotes.

Now, when you run the index.html file, the output looks as in the following.

You can run the application using Plunker tool at AngularJS include.

ng-click

This is also one of the directives, you can use this in one of the scenarios like when you click on a button if you do any operation then this would be useful.

Scenario: The form contains an input text box and Search button, whenever the user enters a value into a text box and clicks on the search button you need to display the user-entered value, if the user clicks on the search button without entering anything then we need to display a message.

The index.html file looks as in the following.

The DemoClick.js file contains the following lines of JavaScript code.

(function() {  
  var app = angular.module("DemoClickApp", []);  
  
  var DemoController = function($scope) {  
    $scope.Search = function(empname) {  
      if (empname)  
        $scope.result = "You have searched for " + empname;  
      else  
        $scope.result = "Please enter employee name";  
    };  
  };  
  app.controller("DemoController", DemoController);  
})();

Now, when you run the index.html file by default it looks as in the following.

If you click on the Search button without entering any value in the text box then the output screen displays an alert kind of message as "Please enter employee name" that looks as in the following.

Now, you can enter some value into a text box and click on the search box and then the displayed screen is as follows.

You can run the previous discussed example using the Plunker tool at AngularJS click.

ng-repeat

This directive is like a foreach loop in C#. By using this directive you can display a collection of items in a view (HTML page).

Scenario: You can display a list of employees using the ng-repeat directive in AngularJS.

  
  
  
  
    
    
    
    
  
  
  
  
  
List of Emplooyees
  
  
  
      
      
  
          Name  
          Designation  
          Location  
        
  
        
      
  
          {{emp.Name}}  
          {{emp.Designation}}  
          {{emp.Location}}

Name	Designation	Location
{{emp.Name}}	{{emp.Designation}}	{{emp.Location}}

The previous HTML file is self explanatory since it contains point-by-point details in comments format. The fifth point is that you have added something as a ng-repeat attribute with the value of "emp in employees". Here "employees" is the collection value that is obtained from the Employee.JS controller.

The Employee.js contains the following lines of JavaScript code.

(function() {  
  var app = angular.module("DemoRepeatApp", []);  
  
  var DemoController = function($scope) {  
    var sampleEmployees = '[' +  
      '{ "Name":"Ramchand" , "Designation":"SSE" , "Location":"Bhubhaneswar" },' +  
      '{ "Name":"Lakshman" , "Designation":"DBA" , "Location":"Noida" },' +  
      '{ "Name":"ABC" , "Designation":"Team Lead" , "Location":"Banglore" } ]';  
    $scope.employees = JSON.parse(sampleEmployees);  
  };  
  app.controller("DemoController", DemoController);  
})();

The following describes the Employee.js file:

Angular module created with the name DemoRepeatApp.
The variable DemoController is assigned for the Controller action.
The Controller contains a variable named "sampleEmployees" that contains a list of sample employess in JSON format.
Assign the JSON converted sample employees list to the $scope.employees object.

Now, you can run the index.html file and then the output will be displayed as in the following.

You can run the previous example using Plunker at AngularJS Repeat .

You can download the aforesaid examples at AngularJS Directives

Conclusion

This article provided an idea of core directives of ng-include, ng-click and ng-repeat in AngularJS.

Quick Start Of AngularJS

2015-01-12T15:22:00.001+05:30

About

Angular JS is the one of the finest JavaScript frameworks to create dynamic web applications by writing less code with an easy syntax in HTML files.

RoadMap

In this article you will get an idea of the following concepts.

Introduction
Prerequisites
Download Angular Js
Angular Js Editors
Angular Js Architecture
About ng-app and Binding Expressions
ng-controller
ng-model
ng-show and ng-hide

Introduction

Angular JS is the one of the best frontend frameworks for implementing any kind of dynamic web application using JavaScript and HTML for the following reasons.

It helps you to organize your JavaScript code by creating controllers, modules and so on.
The website creation is very fast, as fast as adding attributes to the controls.
It is compatible with jQuery as well.
It's suitable for testing the application since the way of writing JavaScript is organized.

Angular JS started as a Google project but now it is an open-source project. So it's available in GitHub and anyone can contribute to it.

The official site for Angular JS.

Until now, there are many applications developed using Angular JS. You can get a list of all those applications from the URL Buit With AngularJS.

In Angular JS web applications, using Directives you can tell HTML to trigger your JavaScript functions.

Angular JS provides many directives, even though most of the directives are understandable by the name itself. The directives start with “ng-”. Here ng refers to and is pronounced as Angular.

Angular JS has no other dependencies. So you just need to include the JavaScript file whereever required.

Prerequisites

To implement web applications using the frontend application framework, you just need to have some idea of the following concepts:

HTML
CSS
JavaScript

Download AngularJS

The Angular js files you can download from AngularJS. You can even use the CDN URL to access the JavaScript file.

The CDN URL is: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js

AngularJS Editors

There are many suitable editors available (online/offline) to implement or practice Angular JS applications. They are the following:

Plunker.
WebStorm.
JS Fiddler (JSFiddle ) and so on.

AngularJS Architecture

AngualrJS should be categorized as pinny needed MV* framework and it also supports Unit tests and both integrated end to end tests.

Model: the Model is used to restore the data and state of your application.

View: Where you actually render to the user the information they want.

It stands like any other Controller / Presenter / ViewModel and so on. Even though in most of the cases we will use the controller.

So, Controllers are the main components in Angular applications, Angular JS supports two-way binding. That means that whenever the user enters into the form fields they are instantly updated in Angular models.

So, let's start a sample application using Angular JS to get a brief idea of it.

Note: in these examples, I am using Angular Js 1.3.8, the latest version, since this version contains many features and at the same time, some of the features that are supported in 1.2.x would not be supported in the 1.3.8 version (for example, Global controller functions are not supported in 1.3.x by default).

ng-app and Binding Expressions

In this example, you will implement a basic application using Angular JS.

  
  
  
  
    
    
  
  
  
  
Welcome to Angular Application
  
  
  
      
    This div is controlled by Angular JS: {{ 1 + 2 }}  
    
  
      
    To Display Constants / Static ones in Angular JS: {{ '1 + 2' }}  
  
  
  
  
    Normal div doesn't handled by Angular JS: {{ 1 + 2 }}

The previously described HTML file contains five notified points as specified in the comments section of HTML.

The Angular JS script CDN reference added at the head of HTML file.

ng-app: The directive ng-app is added as an attribute to one of the div with an Id of AngularDiv. It is a special directive since whenever it is found inside a HTML page it starts the action of managing the page.

{{ }}: This format or notation is called Binding Expressions in Angular JS.

So, whenever you have defined some expression inside the Binding Expressions ({{ }}) that is controlled by AngularJS directive (ng-app) automatically it evaluates and displays the results in an HTML page.

If you want to display an expression within binding expressions ( {{ }} ) without evaluation then you need to enclose it with single quotes as described in the 4^th point of the HTML file.

The other div with the Id NormalDiv does not have an assigned attribute (ng-app). So it displays data normally without evaluating the data within the binding expressions.

Now, you can save the HTML file and run it in a browser and the output will be displayed as follows.

You can run the sample application using the Plnkr tool at AngularJs Starter .

Until now, you got an idea of the special directive named “ng-app” and how you can use the binding expressions to evaluate the data. Now, you can move to the next step of writing JavaScript code and trigger that code in the HTML file using Angular JS directives.

ng-controller

The primary responsibility of the controller is to create the scope object and that scope can communicate with the view in both directions. You can bind the properties and functions to the scope object.

  
  
  
  
    
    
    
    
  
  
  
  
{{ angularjs }}

The HTML file contains mainly the following 3 points:

Angular Js script file CDN path reference.
Demo.js file reference containing a few lines of JavaScript code.
ng-app refers to the module name (DemoApp), it refers to any controllers created under it that is part of that module. Ng-controller refers to the controller name (DemoController).

The Demo.js file contains the following lines of JavaScript code.

var WelcomeAngular = function($scope) {  
  $scope.angularjs = "Welcome to Angular Js";  
};  
  
var app = angular.module("DemoApp", [])  
app.controller('DemoController', WelcomeAngular);

The first step of JavaScript file contains one variable named WelcomeAngular. It refers to one function with the scope object. The scope object contains one property named angualrjs.

In the second step you are creating an Angular module named “DemoApp” to the variable “app” and then assigning a controller named “DemoController” to that app.

You can now run the HTML file and then you will see the output as “Welcome to Angular Js” that was specified in the JavaScript file to the property named angularjs in the scope object.

You can run the sample application using the Plnkr tool at AngularJs Controller.

ng-model

ng-model is also one of the directives, it can bind to the input, select or custom form controls using the property named ng-model.

  
  
  
  
    
    
  
  
  
  
Employee Search

  
    Employee Name:  
      
      
    
You entered employee name is: {{empname}}

Added the Angular JS CDN path.
ng-app directive was included in the body field. So the HTML body is under Angular JS.
ng-model is added to the input field with the value empname.

In this example, as you notified the only new one is ng-model with the value in the input field. So, whenever you have added the ng-model property with the value (empname) and where you are using that value (empname) automatically it populates by entering the text into the respective input field.

Initially, when you run the HTML file, it is displayed like the following.

Now, whenever you have entered some value into the TextBox those values are automatically shown in the screen as output asynchronously.

You can run the sample application using the Plnkr tool at AngularJs Model.

ng-show and ng-hide

ng-show and ng-hide are also directives. These are very helpful when you want to hide or show something based on a property or object that either contains a value or does not.

As you seen in the aforesaid model example, the string is always displaying like "you entered employee name is:". You can change it so it will only display whenever the user has entered a value into a text box field.

For example, when you search for employee details, you need to display some message when the user begins searching by entering some employee name.

  
  
  
  
    
    
  
  
  
  
Employee Search

  
    Employee Name:  
      
      
    
  
      
    Employee Search Started..!!!
You enetered employee name is: {{empname}}

The previously described HTML file contains the following two pre tags:

The first one contains the ng-show directive with the value empname. So, The pre tag will be displayed whenever you have entered some text into the input filed that has applied the ng-mode is empname.
The second one contains the ng-hide directive with the value !empname (here ! Indicates not). So, The pre tag will be hidden when the empname is empty.

Note: in both of the preceding cases you can use any one of the directives (ng-show or ng-hide) for simplicity. But for the purpose of understanding, I have used both directives.

Now, you can run the HTML file and by default it displays like the following.

Now, you can enter any of the text in that text box field and then the screen will have the results shown as follows.

You can run the sample application using the Plnkr tool at AngularJS Show Hide.

You can download the aforesaid all examples from this link AngularJS Examples.

Conclusion

I hope this article provides you an idea of the history and architecture of AngularJS, Binding Expressions and some of the directives like ng-app, ng-controller, ng-model, ng-show and ng-hide.

Skype Status Display For a User in MVC

2014-11-30T18:40:00.003+05:30

Scenario
This article explains how to display the user Skype status in the user profile in a MVC application. The administrator in a site wants to view the list of users with his/her Skype status and also wants to chat/call by clicking on the Skype status in the user profile.

Prerequisites

To display the Skype status in a public site, the Skype user must check (select) the privacy setting "Allow my online status to be shown on the Web". You can go to the settings by navigating from the Skype menu Privacy settings and check the "Allow my online status to be shown on the Web" as shown in the following screenshot.

Implementation

Step 1

Create a new project named UsersSkypeStatusInMVC and choose the template MVC. It then creates an MVC template project.

Step 2

Add a Controller named AdminController with the following procedure.

Right-click on the "Controllers" folder and select the Add option and click on the "Controller" link.
It opens a pop-up and then select the option MVC 5 Controller – Empty and then click on the "Add" button.
Again, it opens a popup and then provide the name as AdminController and click on the "Add" button.

Now, the controller is created with a default code.

Step 3

In this step, Add a Model named "UserModel" using the following procedure.

Right-click on the "Models" folder and select the "Add" option and click on the "Class...".
It opens a pop-up and then enter the name as "UserModel.cs" and click on the Add button.

After adding the model, replace the existing code in the file "UserModel.cs" with the following code.

namespace UsersSkypeStatusInMVC.Models    
{    
    ///     
    /// User Model    
    ///     
    public class UserModel    
    {    
        public int UserId { get; set; }    
        public string Name { get; set; }    
        public string Email { get; set; }    
        public string SkypeId { get; set; }    
        public string ProfileImagePath { get; set; }    
    
    }    
}

Step 4

This step, replace the existing code in the "AdminController.cs" file with the following code.

using System.Collections.Generic;    
using System.Web.Mvc;    
using UsersSkypeStatusInMVC.Models;    
    
namespace UsersSkypeStatusInMVC.Controllers    
{    
    public class AdminController : Controller    
    {    
        // GET: UsersProfile    
        public ActionResult UserProfiles()    
        {    
            List usersList = GetUsers();    
            return View(usersList);    
        }    
    
        ///     
        /// Get the list of sample users    
        ///     
        /// User List    
        private List GetUsers()    
        {    
            var usersList = new List    
            {    
                new UserModel    
                {    
                    UserId = 1,    
                    Name="Ramchand",    
                    Email = "ram@abc.com",    
                    SkypeId = "ramchand.repalle", // Skype Id    
                    ProfileImagePath = "Ramchand.jpg"    
                },    
                new UserModel    
                {    
                    UserId = 2,    
                    Name="Abc",    
                    Email = "chand@abc.com",    
                    SkypeId = "abctest",// Skype Id    
                    ProfileImagePath = "abc.jpg"    
                },    
                new UserModel    
                {    
                    UserId = 3,    
                    Name="def",    
                    Email = "def@abc.com",    
                    SkypeId = "ram",// Skype Id    
                    ProfileImagePath = "def.jpg"    
                }    
            };    
    
            return usersList;    
        }    
    }    
}

About Code

The GetUsers() method will provide a sample list of users.
You will call that method in the UserProfiles Action Result method and then send that list of users to the view.

Step 5

This step, add a view for the UserProfiles Action controller method by the following procedure:

Right-click on the View() method in the UsersProfile Action method and click on "Add View".
Enter the view name as "UserProfiles" and then click on the "Add" button.

Step 6

This step replaces the existing code in the "UserProfiles.csthtml" file design with the following code.

@model IEnumerable     
    
@{    
    ViewBag.Title = "User Profiles";    
}    

User Profiles
    
    
@foreach (var item in Model)    
{    
    var skypeId = @Html.DisplayFor(modelItem => item.SkypeId);    
    var profileImg = "../../Images/" + @Html.DisplayFor(modelItem =>     
                        item.ProfileImagePath);    
    

UserId:    
            @Html.DisplayFor(modelItem => item.UserId) 

Name:    
            @Html.DisplayFor(modelItem => item.Name) 

Email:    
            @Html.DisplayFor(modelItem => item.Email) 

Skype:    
                
                    
                
                
                    
                
        

    
        

}

About the Design

Added a namespace to get the list of users.
CSS styles are defined.
A foreach loop helps to display the list of users with respective details.
Skype: {SKYPE ID}?chat: This is the href tag, you can use to chat the Skype by clicking on that. For example: skype:ramchand.repalle?chat
Skype: {SKYPE ID}?call: This is the href tag, you can use to call the Skype by clicking on that. For example: skype:ramchand.repalle?call
JavaScript function SkypeUserStatus helps to assign the Skype status image.
SetInterVal has been used to call the SkypeUserStatus function periodically to get the current Skype status of a user.

Step 7

This step helps you about Skype Status URL information and other details. To display the Skype status of any user, you have to request the URL format as follows.

The format of the URL is: http://mystatus.skype.com/{SIZE OF ICON}/{SKYPE ID}

{SIZE OF ICON}: It indicates to display the size of the icon based on user Skype status.

For example: smallicon, mediumicon

{SKYPE ID}: It indicates the Skype Id of the user.

For example: ramchand.repalle

So, the example of the Skype status URL is http://mystatus.skype.com/mediumicon/ramchand.repalle.

You can get the status of the user by just clicking on the previously shown URL.

Step 8

Add a new folder named “Images” with sample images to the “UsersSkypeStatusInMVC” project. It helps display the sample image for the profile picture as mentioned in the "GetUsers()" method in AdminController.

Step 9

Now, build the application (F6), then run (hit F5) an application and navigate to the following URL: (http://localhost:57882/Admin/UserProfiles).

As in the preceding screenshots by clicking on the (Skype) icon it displays a popup to launch the application in Skype. You just click on that then it would open a Skype user window.

The Skype status images are displayed as described below.

The discussed project source code can be downloaded from the link Source Code.

Conclusion

I hope this article helps you to display the Skype user status with the user profile details in a MVC application.

Multilingual MVC Application With Customized JS Bundles Based on User Language

2014-11-30T16:45:00.000+05:30

About

This article shows how to create multilingual MVC applications with JS bundles based on various languages. Here, you will learn about multilingual MVC application implementation flow, the creation of customized JavaScript bundles with translated alert messages based on user language, custom HTML helper classes, how to set user language in a cookie based on his login, displaying resource translation values in a form and how to maintain names and values in resource files.

Scenario

You will implement an MVC application to be displayed in various languages based on the user selected language. The form content is being displayed from the resource file based on the name and respective language and it would need to display the alert kind of information from customized bundled JavaScript based on user language whenever the user has done a form submission or input validation and so on.

RoadMap

When implementing the previous sample MVC application, you will learn the following concepts.

Resource File creation with key, value pair combination for required language.
Resource Key value display in a form based on user language.
Cookie implementation in MVC.
Bundling and Minification.
Custom HTML helper class.
Customized Bundle creation.
Translate the JavaScript alert messages into user selected language.
Localized JavaScripts minified and bundled, It helps to increase the performance of form.

Step 1

Create a new project named “MultilingualMVCApp” and choose the template “MVC” then it creates an MVC template project.

Step 2

Add a new application folder named “App_GlobalResources” to maintain the resource files with key/value pair combinations for various languages. Right-click on the Project “MultiLingualMVCApp” and select on “Add” and then select “Add ASP.NET Folder” and then click on “App_GlobalResources” like the following.

Step 3

Create a resource file named “Notifications.resx” for the default language English by following the following screenshots. Right-click on the “App_GlobalResources” folder, select “Add” and then click on “Resource file” and specify the name as “Notifications” and then click on the “Ok” button.

Click on "Resources File" and provide the name as "Notifications" as shown in the following screenshot.

In the similar way, create another resource file named “Notifications.fr.resx” under the App_GlobalResources file. After completion of these aforesaid procedure, the Solution Explorer looks like the following.

Step 4

In this step, you will add sample resource keys with translation values for English and French languages. For that double click on the “Notifications.resx” file, then the displayed file has three columns named Name, Value and Comments.

Name: This name field is treated as the Resource Key value and it should be unique in the file and not be empty.

You can now enter the sample key and respective values as shown in the following screenshot for the default language (English).

In the same way, you can add the same key values, whichever were specified in the “Notifications.resx” with respective translated values for the French language in the “Notifications.fr.resx” file is as follows.

Note: Here, I have used the Google translator to translate the sample English content to French content.

In the same way, you can add various resource files for different languages as said and you can add multiple resource types to the resx files (like strings, images, icons and so on) based on your needs.

Step 5

You can now create one controller named “DemoController” with the following procedure. Right-click on the “Controllers” folder and select the “Add” option and click on the “Controller” link.

Click on the "Controller.." link and select the option “MVC 5 Controller – Empty” and then click on the “Add” button. Then, specify the name as “DemoController” then click on the “Add” button.

Now, the controller is created with the default action named “Index” like the following.

Step 6

Add a view to the Index action method by right-clicking on the View function and click on “Add View” and then click on the Ok button. The following screenshots help you do that.

Click on "Add View..." then it opens a popup like the following.

Now, click on the "Add" button and then it will create an Index.cshtml file.

Step 7

Replace the existing design with the following design format that contains a sample form to enter the user name, select the user preferred language and the submit button.

@{  
    ViewBag.Title = "Index";  
}  
  

Demo

@using (Html.BeginForm("Index", "Demo", FormMethod.Post))  
    {  
        Enter User Name  
          
        

Select Language:  
          
        

  
    }

Now, build the application (F6) and run the application (F5) with the following URL (http://localhost:49624/Demo/Index) then the displayed form looks like the following.

Step 8

In this step, write a piece of code for the post action of the submit button to set the user language code in the cookie, the user name in the TempData object (that helps to send data from one controller request to another) and then redirects to the home page.

    [HttpPost]  
     public ActionResult Index(FormCollection collection)  
     {  
         TempData.Add("LoggedInUser", collection["txtName"]);  
         string language = collection["ddlLanguage"];  
         SetCulture(language);  
      
         return RedirectToAction("Home");  
     }  
      
     ///   
     /// Set the culture based on culture code and set the   
     /// value in cookie  
     ///   
     ///   
     private void SetCulture(string cultureCode)  
     {  
      
         var cookieCultureLanguage = new HttpCookie("UserLanguage")  
         {  
             Value = cultureCode  
         };  
      
         Response.Cookies.Set(cookieCultureLanguage);  
      
         //Sets  Culture for Current thread  
         Thread.CurrentThread.CurrentCulture =  
         System.Globalization.CultureInfo.CreateSpecificCulture("en");  
      
         //Ui Culture for Localized text in the UI  
         Thread.CurrentThread.CurrentUICulture =  
         new System.Globalization.CultureInfo(cultureCode);  
      
     }

The cookie that you have set in the previous code using the method “SetCulture” helps to display the respective user-selected language translated values in a form from the resource file.

Step 9

In this step, add one controller action method named “Home” to the "DemoController.cs" file with the respective view named “Home.cshtml” file.

///   
/// Home Action Controller Method  
///   
///   
public ActionResult Home()  
{  
    return View();  
}

Then, right-click on the View() method in the Home action and then click on "Add View..". After clicking on “Add View” it opens a template then click on the “Add” button then it creates a “Home.cshtml” page with default design. You can leave the design as it is, in later steps you can add the respective design changes.

Step 10

Add a method named “Application_AcquireRequestState” to the Global.asax.cs file that helps to set the culture based on the user-selected language if the cookie exists else it sets the default culture to English.

///   
 /// Application AcquireRequestState  
 ///   
 ///   
 ///   
 protected void Application_AcquireRequestState(object sender,   
EventArgs e)  
 {  
  
     string culture;  
     HttpCookie cookie = Request.Cookies["UserLanguage"];  
     if (cookie != null && cookie.Value != null   
        && cookie.Value.Trim() != string.Empty)  
         culture = cookie.Value;  
     else  
         culture = "en";  
  
     //Default Language/Culture for all number, Date format  
     System.Threading.Thread.CurrentThread.CurrentCulture =  
     System.Globalization.CultureInfo.CreateSpecificCulture("en");  
  
     //Ui Culture for Localized text in the UI  
     System.Threading.Thread.CurrentThread.CurrentUICulture =  
     new System.Globalization.CultureInfo(culture);  
 }

Step 11

In this step, you will implement a customized JavaScript bundle translator class. It helps to bundle the JavaScript with the respective user-selected language translated messages if any exists in the JavaScript file like alert, input validation messages and so on.

So, first create a new folder named “ResourceHandler”. For that right-click on the project “MultiLingualMVCApp” then select “Add” and click on “Add New Folder” and provide the name as “ResourceHandler” and then add a class file “JSTranslator” under the newly created folder "ResourceHandler".

Replace the “JSTranslator.cs” file code with the following code.

    using System.Text.RegularExpressions;  
    using System.Web;  
    using System.Web.Optimization;  
      
    namespace MultiLingualMVCApp.ResourceHandler  
    {  
        public class JSTranslator : IBundleTransform  
        {  
            #region IBundleTransform  
      
            ///   
            /// IBundleTransform Process method  
            ///   
            /// Bundle Context  
            /// Bundle Response  
            public void Process(BundleContext context, BundleResponse response)  
            {  
                string translated = ScriptTranslator(response.Content);  
                response.Content = translated;  
            }  
     
            #endregion  
     
            #region Localization Of Js Bundle Flow  
      
            private static readonly Regex Regex =   
                new Regex(@"GetResourceValue\(([^\))]*)\)",  
                               RegexOptions.Singleline | RegexOptions.Compiled);  
      
            ///   
            /// Translated script based on JavaScript content  
            ///   
            ///   
            ///   
            private string ScriptTranslator(string text)  
            {  
                MatchCollection matches = Regex.Matches(text);  
                foreach (Match match in matches)  
                {  
                    object obj = HttpContext.GetGlobalResourceObject("Notifications",   
                        match.Groups[1].Value);  
                    if (obj != null)  
                        text = text.Replace(match.Value, CleanText(obj.ToString()));  
                }  
      
                return text;  
            }  
      
            ///   
            /// Format the text as Clean while displaying  
            /// in JavaScript notifications  
            ///   
            ///   
            ///   
            private static string CleanText(string text)  
            {  
                text = text.Replace("'", "");  
                return text;  
            }  
     
            #endregion  
        }  
    }

About JSTranslator.cs code

The JsTranslator class is inherited from the “IbundleTransform”.
The Process method is implemented, as it just gets the BundleResponse content and translates the JavaScript with user-selected language alerts, if any, using the ScriptTranslator method and will be assigned back to that content to the BundleResonse.
The Regex expression is the key term we used in script files, based on that formatted the regex expression.
The Regex Key Term example, you used in scripts is: GetResourceValue(ResourceKeyName)
The ScriptTranslator method first gets the MatchCollection object based on regex expression and then based on the Match collection key name get the translated value using the method “GetGlobalResourceObject”
The GetGlobalResourceObject takes the parameters of Resource file name and Resource Key name.
The CleanText method helps to clean if any characters that creates a problem when displaying in JavaScript.

So, you have now successfully added a custom JavaScript bundle class.

Step 12

In this step, you will add two JavaScript files with sample functions under the “Scripts” folder.

The first JavaScript file named “UserNotifications” file. It contains the following function.

function UserTermsNotification() {  
    alert('GetResourceValue(UserTermsDisplayNotification)');  
}

The second JavaScript file is named “UserOperations”. It contains the following functions.

function AddUserMessage() {  
    alert('GetResourceValue(UserAdded)');  
}  
  
function DeleteUserMessage() {  
    alert('GetResourceValue(UserDeleted)');  
}

Step 13

In this step, you will bundle the previously created JavaScript files in BundleConfig.cs (that exists in the App_Start folder) using a custom JavaScript bundle that you have created in the JSTranslator.cs file. So, add the following code block to the RegisterBundles method and also add the required namespaces; those are:

using System.Collections.Generic;
using MultiLingualMVCApp.ResourceHandler;

    using System.Web;  
      
    namespace MultiLingualMVCApp  
    {  
        public class HtmlHelpers  
        {  
            ///   
            /// Localized JavaScript bundle   
            ///   
            ///   
            ///   
            public static HtmlString LocalizedJsBundle(string fileName)  
            {  
                string culture;  
                var cookie = HttpContext.Current.Request.Cookies["UserLanguage"];  
                if (cookie != null && cookie.Value != null   
                    && cookie.Value.Trim() != string.Empty)  
                    culture = cookie.Value;  
                else  
                    culture = "en";  
                fileName = string.Concat(fileName, "-", culture);  
                var output = (HtmlString)System.Web.Optimization.Scripts  
                    .Render(fileName);  
                return output;  
            }  
        }  
    }

Step 14

In this step, you will implement the custom HTML helper class that helps to create a custom JavaScript bundle based on your needs. So, add a new class file named HtmlHelpers under the App_Start folder and then replace that with the following code.

using System.Web;  
  
namespace MultiLingualMVCApp  
{  
    public class HtmlHelpers  
    {  
        ///   
        /// Localized JavaScript bundle   
        ///   
        ///   
        ///   
        public static HtmlString LocalizedJsBundle(string fileName)  
        {  
            string culture;  
            var cookie = HttpContext.Current.Request.Cookies["UserLanguage"];  
            if (cookie != null && cookie.Value != null   
                && cookie.Value.Trim() != string.Empty)  
                culture = cookie.Value;  
            else  
                culture = "en";  
            fileName = string.Concat(fileName, "-", culture);  
            var output = (HtmlString)System.Web.Optimization.Scripts  
                .Render(fileName);  
            return output;  
        }  
    }  
}

In the aforesaid Steps 13 and 14, you have included the custom JavaScript bundle in the BundleConfig.cs file and created a custom HTML helper class to use that specified language bundle based on the user-selected language.

The Bundling and Minification concept is very helpful to reduce the network traffic and file size while loading the form since it minifies the multiple JavaScript files into one file and the file is being cached. If you change the file content then it automatically gets the fresh content with a new version number. So it helps to increase the page performance in all aspects.

Step 15

In this step, you update the “Home.cshtml” form design with the following design.

You are done with the multi-language MVC application implementation process with user language-specific JavaScript bundled minified files. So, build the application (F6) and hit the (F5) key to run the application with the following URL (http://localhost:49624/Demo/Index).

Enter the user name and select the preferred language as English then the form will be displayed like the following.

Now, click on the Submit button then it navigates to the home page like the following.

The preceding page is self-explanatory about the implemented functionality. In the similar way when you click on the "Add User" and "Delete User" buttons then it displays the alerts in the English language.

Step 16

In this step, again you navigate to this URL (http://localhost:49624/Demo/Index) and select the user language as French and check the respective outputs as shown below.

Now, click on the "Submit" button, then it navigates to the home page.

You can download the preceding discussed sample project at Source Code.

Conclusion

I hope this article provides an idea of the implementation of multilingual MVC application flow, creation of customized JavaScript bundles with translated alert messages based on user language, custom HTML helper classes, how to set user language in a cookie based on his login, Displaying Resource translation values in a form and how to maintain names and values in resource files.

Literals and Seperators in C# 6.0

2014-11-30T15:12:00.000+05:30

This feature is very helpful to write more readable code while initializing properties and variables for numerical values with new syntax for byte and long types.

Binary:
The new syntax for declaring binary property now, you can use 0b as a prefix.

public byte BinaryCode {get; } =  0b1010;

Long:

The new syntax for declaring long type property to provide ability to use underscore (_) as a separator. Its much easier to look at the value like billions or millions etc.

public long Number {get; } = 1_000_000_000;

Exception Filters in C# 6.0

2014-11-30T15:03:00.000+05:30

This feature helps to filter the exception messages by providing conditional statements which returns true or false at catch block.

Suppose, if you want to log the exception in catch block only if inner exception is not null. In that scenario, you can write the code like the below.

So, In the catch block if condition returns true then it enters into the catch block and it would log and throws the exception.

try  
{  
   //Some Exception Throws  
}  
catch(Exception ex) if(ex.InnerException != null)  
{  
   //Log the Exception and throw  
   throw;  
}  
finally  
{  
}

Conditional Access in C# 6.0

2014-11-30T14:57:00.000+05:30

This feature is very helpful to use in a scenario like to get the property value from the object only if object is not null.

For Example, you are considering delegate Action as the parameter to any of the method, You want to get the name from the Action Method only if Action is not null and Action.Method is not null.

You can easily get an idea by just looking the below code.

public void LogAction(Action action)  
{  
    //Before C# 6.0  
    var actionName = "Empty";  
    if (action != null && action.Method != null)  
    {  
        actionName = action.Method.Name;  
    }  
  
    //C# 6.0  
    var actionName = action?.Method?.Name ?? "Empty";  
  
}

As per the above code in C# 6.0, action is not null and Method is not null then only "Name" property value is assigned otherwise "Empty" value will be assigned.

ContentResult in MVC

2014-10-28T20:25:00.000+05:30

About

ContentResult is one of the ActionResult type in MVC. This is mostly used to display dynamic content to the user based on various conditions. So, you can return various types of content like plain text, xml, html etc.

In this article you are going to learn about the following things.

ContentResult and its properties

Content
ContentType
ContentEncoding

Return various Types of Content

Plain Text
Html
XML

ContentResult and its Properties

Content: Its used to send the content data in a string format.

ContentType: It helps to indicate the content type. The default content type for ContentResult is text/html; charset=utf-8.

ContentEncoding: It helps to indicate the content encoding type, the default encoding type for ContentResult is UTF-8.

Return Various Types of Content

In this scenario, you will get a more idea by creating sample application with the following these steps.

Step 1:

Create a new project with the name ContentResultDemo and choose the template as Empty as shown in the following screen shots.

Now, click on Ok button then the screen would display like the below.

Step 2:

After clicking on Ok button the project would be created. Then create a controller named as “ContentDemoController” like the below.

Now, click on "Controller" then the displayed screen is as follows.

Click on "Add" button then the output template window is as follows.

Enter the name as "ContentDemoController" as mentioned in the aforesaid screenshot and then click on "Add" button then controller would be created and its displayed like the below.

Step 3:

Now, Replace the default code in the ContentDemoController.cs file with the following code.

using System.Web.Mvc;

namespace ContentResultDemo.Controllers
{
    public class ContentDemoController : Controller
    {
        // GET: ContentDemo
        public ActionResult Index()
        {
            return Content("test content");
        }
    }
}

And then Build the application (hit F6) and run the application (hit F5) then navigate to the following Url (http://localhost:50589/ContentDemo/)

Note: The port address in the above Url might be a chance to changed at your end.

The output screen looks like below.

Till now, you have created one Index action method with sample test content in the ContentDemoController.cs file.

Step 4:

Add the following code in ContentDemo controller class file which helps to return sample content based on its content type.

        /// 
        /// Returns sample content based on its content type
        /// 
        /// content type
        /// As String
        public string SampleContent(int contentType)
        {
            switch (contentType)
            {
                case (int)ContentTypes.PlainText:
                    return "Plain Text";
                case (int)ContentTypes.Html:
                    return "
Name
Ramchand
Test

";
                case (int)ContentTypes.Xml:
                    return "" +
                           "Ramchand" +
                           "Srinivas" +
                           "";
                default:
                    return string.Empty;
            }
        }

        /// 
        /// Content Types enum
        /// 
        public enum ContentTypes
        {
            PlainText = 1,
            Html,
            Xml
        }

Name
Ramchand
Test

Plain Text:

To display the plain text by using ContentResult as return type, you have to add the below action method.

        /// 
        /// Returns Plain Content
        /// 
        /// 
        public ActionResult PlainContent()
        {
            return Content(SampleContent((int)ContentTypes.PlainText), 
                        "text/plain");
        }

Now, run the application (hit F5) and navigate to this Url (http://localhost:50589/ContentDemo/PlainContent) then the displayed output is like the below.

Html:

To display the Html output, add the following action controller method with this code

        /// 
        /// Returns Html Content
        /// 
        /// 
        public ActionResult HtmlContent()
        {
            return Content(SampleContent((int)ContentTypes.Html), 
                        "text/html");
        }

Now, run the application (hit F5) and navigate to this Url (http://localhost:50589/ContentDemo/HtmlContent) then the displayed output is like the below.

Xml:

To display the Xml output, add the below action method in the ContenDemoController.cs file

        /// 
        /// Returns Xml Content
        /// 
        /// 
        public ActionResult XmlContent()
        {
            return Content(SampleContent((int)ContentTypes.Xml), 
                        "application/xml");
        }

Now, run the application (hit F5) and navigate to this Url (http://localhost:50589/ContentDemo/XmlContent) then the displayed output is like the below.

As, you have observed in the above examples, the Content property for Content Result is only string. Even though while displaying at browser it would changes based on the content type which you have specified in the Content Result.

The whole code you have implemented in the ContentDemoController.cs file is as follows.

using System.Web.Mvc;

namespace ContentResultDemo.Controllers
{
    public class ContentDemoController : Controller
    {
        // GET: ContentDemo
        public ActionResult Index()
        {
            return Content("test content");
        }

        /// 
        /// Returns Plain Content
        /// 
        /// 
        public ActionResult PlainContent()
        {
            return Content(SampleContent((int)ContentTypes.PlainText), 
                        "text/plain");
        }

        /// 
        /// Returns Html Content
        /// 
        /// 
        public ActionResult HtmlContent()
        {
            return Content(SampleContent((int)ContentTypes.Html),
                        "text/html");
        }

        /// 
        /// Returns Xml Content
        /// 
        /// 
        public ActionResult XmlContent()
        {
            return Content(SampleContent((int)ContentTypes.Xml), 
                        "application/xml");
        }

        /// 
        /// Returns sample content based on its content type
        /// 
        /// content type
        /// As String
        public string SampleContent(int contentType)
        {
            switch (contentType)
            {
                case (int)ContentTypes.PlainText:
                    return "Plain Text";
                case (int)ContentTypes.Html:
                    return "
Name
Ramchand
Test

";
                case (int)ContentTypes.Xml:
                    return "" +
                           "Ramchand" +
                           "Srinivas" +
                           "";
                default:
                    return string.Empty;
            }
        }

        /// 
        /// Content Types enum
        /// 
        public enum ContentTypes
        {
            PlainText = 1,
            Html,
            Xml
        }

    }
}

Name
Ramchand
Test

Conclusion

I hope you got an idea about ContentResult and its properties and how can you send various types of content by just changing the ContentType property in ContentResult. Please provide your suggestions and comments if any.

JsonResult Type in MVC

2014-10-22T15:47:00.000+05:30

About

JsonResult is an ActionResult type in MVC. It helps to send the content in JavaScript Obect Notation (JSON) format.
History
To learn more about ActionResult and some of the other following action result types, please go through the following articles in my blog.

RoadMap
In this article, you will get an idea of the following things.

About JsonResult and its properties
- ContentEncoding
- ContentType
- Data
- JsonRequestBehavior
- MasJsonLength
- RecursionLimit
Sample project with various scenarios using JsonResult:

Send JSON content welcome note based on user type

Get the list of users in JSON Format

How to create JSON data at the client side and send it to the controller

How to handle a huge amount of JSON Data

Unit Testing of JsonResult

About JsonResult and its properties

The JSON format is an open standard format. The format of data looks very easy to understand and the data objects consist of attribute-value pairs.

ContentEncoding: It helps to indicate the content encoding type, the default encoding for JSON is UTF-8.

ContentType: It helps to indicate the content type. The default content type for JSON is application/json; charset=utf-8.

Note: ContentType and ContentEncoding are not necessary to mention when sending the data in JSON format as the HTTP headers are having a responsibility to tell the recipient what kind of content they're dealing with.

Data: This indicates what the content data is, that means what you will send in JSON format.

JsonRequestBehavior: This property has two options. Those are AllowGet and DenyGet. The default option is DenyGet. When you send data in JSON format, using Get Request, it's necessary to specify the property as AllowGet otherwise it shows the error as “The request would be blocked since the JSON data is considered as sensitive data information”.

MaxJsonLength: This helps to get or set the maximum JSON content length that you will send. The default value for this is 2097152 characters, that is equal to 4 MB of Unicode string data. You can even increase the size based if needed, for that you will get an idea later in this article.

RecursionLimit: Indicates the constraining number of object levels to process. The default value is 100. It means you can serialize the objects that are nested to a depth of 100 objects referencing each other. In a general scenario the default limit 100 is obviously sufficient when you deal with a JsonResult so there is no need to increase it even though you have the option to increase the limit if required.

Sample Project with Various Scenarios by using JsonResult
Create a new project with the name JsonResultDemo and choose the template as MVC as shown in the following screen shots.

Now, click on the OK button then the displayed screen is as in the following.

As in the preceding template, you need to select the “Add Unit Tests” option as well. So It helps to create a Unit Test project and then again click on the OK button then the project will be created and the startup application page displayed like the following.

Now, add a controller and provide the name as “JsonDemoController” as in the following.

Click on the Controller and then it wil open the popup window as in the following.

Now click on the “Add” button and then it opens a popup to enter the name. So enter the name as “JsonDemoController” as shown in the screen shot.

After adding the controller to the project the controller page looks like the following.

Until now, you are done with the creation of the sample project template with the addition of one controller named “JsonDemoController”.

Scenario 1: Send JSON Content welcome note based on user type

In this scenario, you will learn how to send a simple welcome note message in JSON format from the controller. Now, replace the existing code with the following code in the JsonDemoController.cs file.

using System;  
using System.Collections.Generic;  
using System.Text;  
using System.Web.Mvc;  
using System.Web.Script.Serialization;  
using JsonResultDemo.Models;  
  
namespace JsonResultDemo.Controllers  
{  
    public class JsonDemoController : Controller  
    {  
        #region ActionControllers  
  
        ///   
        /// Welcome Note Message  
        ///   
        /// In a Json Format  
        public JsonResult WelcomeNote()  
        {  
            bool isAdmin = false;  
            //TODO: Check the user if it is admin or normal user, 
            //(true-Admin, false- Normal user)  
            string output = isAdmin ? "Welcome to the Admin User" 
                            : "Welcome to the User";  
  
            return Json(output, JsonRequestBehavior.AllowGet);  
        }  
     }  
}

Then, build the application (F6) and then hit the F5 to run an application and then navigate to the following URL http://localhost:49568/JsonDemo/WelcomeNote (It might be a chance to get a different Port Id at your end).

Then the displayed screen looks like the following.

In this scenario, you now have an idea of how to send a simple string in JSON format.

Scenario 2: Get the list of users in JSON Format

In this scenario you will send a list of users in JSON format.

Step 1: Add a class file “UserModel.cs” like the following.

Click on “Class” and then the displayed link is as the following.

Enter the name as “UserModel.cs” and then click on the Add button.

Step 2: Update the code in UserMode.cs with the following code.

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
  
namespace JsonResultDemo.Models  
{  
    public class UserModel  
    {  
        public int UserId { get; set; }  
        public string UserName { get; set; }  
        public string Company { get; set; }  
    }  
}

Step 3: Add one method named GetUsers in the JsonDemoController.cs file that will return the list of sample users.

        
        ///   
        /// Get the Users  
        ///   
        ///   
        private List GetUsers()  
        {  
            var usersList = new List  
            {  
                new UserModel  
                {  
                    UserId = 1,  
                    UserName = "Ram",  
                    Company = "Mindfire Solutions"  
                },  
                new UserModel  
                {  
                    UserId = 1,  
                    UserName = "chand",  
                    Company = "Mindfire Solutions"  
                },  
                new UserModel  
                {  
                    UserId = 1,  
                    UserName = "Abc",  
                    Company = "Abc Solutions"  
                }  
            };  
  
            return usersList;  
        }

Step 4: Create one Action Controller method named GetUsersData with the following code in the JsonDemoController.cs file.

///   
/// Get tthe Users data in Json Format  
///   
///   
public JsonResult GetUsersData()  
{  
    var users = GetUsers();  
    return Json(users, JsonRequestBehavior.AllowGet);  
}

Step 5: Run the application with this URL http://localhost:49568/JsonDemo/GetUsersData then the output looks like the following.

Scenario 3 : Create JSON data at the client side and send content to the controller

In this scenario, you will create JSON data at the client side and then that data will be sent to the Controller action. The controller action request type is HttpPost.

Step 1: Create one Action controller method named Sample like the following in the JsonDemoController.cs file.

///   
/// Sample View  
///   
///   
public ActionResult Sample()  
{  
    return View();  
}

Step 2: Create a View file named “Sample.cshtml” by right-clicking on View() in the Sample action controller method then click on “Add View” in the Sample action like the following.

By clicking on Add View it opens a popup and deselects the "Use a layout page" option. It then should look as in the following.

Now, click on the OK button then the sample.cshtml file will be created.

Step 3: Replace it with the following cshtml code in the sample.cshtml file.

@{  
    Layout = null;  
} 
  
  
      
          
        Create Sample JSON Data and send it to controller  
      
      
        
  
            Create Sample User JSON Data and send it to controller

The following is a brief description of the Sample.cshtml file:

The HTML body contains a label, about, to describe the functionality and one input button with an onclick of the UpdateUserDetail() function.
The JavaScript part contains the jQuery reference and it contains two functions.
GetSampleUsersList() will return the sample users in a stringified JSON format.
UpdateUserDetail() sends the ajax request of post type for JsonDemoController with UpdateUserDetail action.

Step 4: A Create Action method named UpdateUsersDetail in the JsonDemoController as in the following and put a breakpoint in this method on the first line of code to help to trace the details.

///   
/// Update the user details  
///   
/// users list in JSON Format  
///   
[HttpPost]  
public JsonResult UpdateUsersDetail(string usersJson)  
{  
    var js = new JavaScriptSerializer();  
    UserModel[] user = js.Deserialize(usersJson);  
  
    //TODO: user now contains the details, you can do required operations  
    return Json("User Details are updated");  
}

Step 5: Build and run the application (hit F5) with the URL ( http://localhost:49568/JsonDemo/Sample ) then the resultant screen looks like the following.

Step 6: Now, click on the “Update User Detail” button as it appears in the aforesaid screenshot. Then the resultant screen looks like the following.

Step 7: Just review the preceding image, you can identify that you are able to send the JSON data to the controller action from the client side and as well as you have deserialized the JSON data and assigned that data to the UserModel entity.

Scenario 4: How to handle huge amount of JSON Data

In this scenario, you will get an idea of how to send a huge amount of JSON Data. Actually in certain scenarios you must send a huge amount of data from a controller to a view. In that case the following example will be helpful to you.

Step 1: Create one method named GetUsersHugeData() as in the following. It just helps to generate sample user data.

///   
/// Get the huge list of users  
///   
///   
private List GetUsersHugeData()  
{  
 var usersList = new List();  
 UserModel user;  
 for (int i = 1; i < 51000; i++)  
 {  
  user = new UserModel  
  {  
   UserId = i,  
   UserName = "User-"+i,  
   Company = "Company-"+i  
  };  
  usersList.Add(user);  
 }  

 return usersList;  
}

Step 2: Create an Action method named GetUsersHugeList() like the following in the JsonDemoController.cs file.

    ///   
    /// Get the huge list of Users  
    ///   
    ///   
    public JsonResult GetUsersHugeList()  
    {  
        var users = GetUsersHugeData();  
        return Json(users, JsonRequestBehavior.AllowGet);  
    }

Step 3: Now, build and run (hit F5) the application with the URL ( http://localhost:49568/JsonDemo/GetUsersHugeList ) then the error screen appears like the following.

Step 4: To fix the preceding error add the following code in the JsonDemoController file. This methods helps to update the MaxJsonLength property value to Int32.MaxValue.

///   
/// Override the JSON Result with Max integer JSON lenght  
///   
/// Data  
/// Content Type  
/// Content Encoding  
/// Behavior  
/// As JsonResult  
protected override JsonResult Json(object data, string contentType,  
    Encoding contentEncoding, JsonRequestBehavior behavior)  
{  
    return new JsonResult()  
    {  
        Data = data,  
        ContentType = contentType,  
        ContentEncoding = contentEncoding,  
        JsonRequestBehavior = behavior,  
        MaxJsonLength = Int32.MaxValue  
    };  
}

In the same way, you can increase the RecursionLimit property value. Also if you require JsonData with a depth (nested levels) greater than 100.

Step 5: Now, build and run (hit F5) the application with the URL ( http://localhost:49568/JsonDemo/GetUsersHugeList ) and then the huge data result appears instead of an error.

I have provided the formatted complete code for the JsonDemoController.cs file for what you have done until now in the aforesaid scenarios.

using System;  
using System.Collections.Generic;  
using System.Text;  
using System.Web.Mvc;  
using System.Web.Script.Serialization;  
using JsonResultDemo.Models;  
  
namespace JsonResultDemo.Controllers  
{  
    public class JsonDemoController : Controller  
    {  
        #region ActionControllers  
  
        ///   
        /// Welcome Note Message  
        ///   
        /// In a JSON Format  
        public JsonResult WelcomeNote()  
        {  
            bool isAdmin = false;  
            //TODO: Check the user if it is admin or normal user, (true-Admin, false- Normal user)  
            string output = isAdmin ? "Welcome to the Admin User" : "Welcome to the User";  
  
            return Json(output, JsonRequestBehavior.AllowGet);  
        }  
  
        ///   
        /// Get tthe Users data in JSON Format  
        ///   
        ///   
        public JsonResult GetUsersData()  
        {  
            var users = GetUsers();  
            return Json(users, JsonRequestBehavior.AllowGet);  
        }  
  
        ///   
        /// Sample View  
        ///   
        ///   
        public ActionResult Sample()  
        {  
            return View();  
        }  
  
        ///   
        /// Update the user details  
        ///   
        /// users list in JSON Format  
        ///   
        [HttpPost]  
        public JsonResult UpdateUsersDetail(string usersJson)  
        {  
            var js = new JavaScriptSerializer();  
            UserModel[] user = js.Deserialize(usersJson);  
  
            //TODO: user now contains the details, you can do required operations  
            return Json("User Details are updated");  
        }  
          
        ///   
        /// Get the huge list of Users  
        ///   
        ///   
        public JsonResult GetUsersHugeList()  
        {  
            var users = GetUsersHugeData();  
            return Json(users, JsonRequestBehavior.AllowGet);  
        }  
 
        #endregion  
 
 
        #region Methods  
  
        ///   
        /// Get the Users  
        ///   
        ///   
        private List GetUsers()  
        {  
            var usersList = new List  
            {  
                new UserModel  
                {  
                    UserId = 1,  
                    UserName = "Ram",  
                    Company = "Mindfire Solutions"  
                },  
                new UserModel  
                {  
                    UserId = 1,  
                    UserName = "chand",  
                    Company = "Mindfire Solutions"  
                },  
                new UserModel  
                {  
                    UserId = 1,  
                    UserName = "Abc",  
                    Company = "Abc Solutions"  
                }  
            };  
  
            return usersList;  
        }  
  
        ///   
        /// Get the huge list of users  
        ///   
        ///   
        private List GetUsersHugeData()  
        {  
            var usersList = new List();  
            UserModel user;  
            for (int i = 1; i < 51000; i++)  
            {  
                user = new UserModel  
                {  
                    UserId = i,  
                    UserName = "User-"+i,  
                    Company = "Company-"+i  
                };  
                usersList.Add(user);  
            }  
  
            return usersList;  
        }  
  
        ///   
        /// Override the Json Result with Max integer JSON lenght  
        ///   
        /// Data  
        /// Content Type  
        /// Content Encoding  
        /// Behavior  
        /// As JsonResult  
        protected override JsonResult Json(object data, string contentType,  
            Encoding contentEncoding, JsonRequestBehavior behavior)  
        {  
            return new JsonResult()  
            {  
                Data = data,  
                ContentType = contentType,  
                ContentEncoding = contentEncoding,  
                JsonRequestBehavior = behavior,  
                MaxJsonLength = Int32.MaxValue  
            };  
        }  
 
        #endregion  
    }  
}

You now have an idea of how to use a JsonResult type in MVC application with various scenarios. Now, it's time to test the controller action methods using the JsonDemoController.Test project.

Unit Testing the JsonResult in MVC

The main feature of MVC applications is it supports the Test Data Driven (TDD) approach. Since the Controller file is just a kind of class file, it's easy to implement the Test methods in the Test Project. Now you will learn how to test the JsonResult methods in the test project.

Step 1: Add a class file named “JsonDemoControllerTest.cs” to the JsonResultDemo.Tests projects like the following.

Click on “Class” to open a popup like the following and then update the name as “JsonDemoControllerTest.cs”.

Step 2: After clicking on the “Ok” button then the screen result looks like the following.

Step 3: Now, replace the existing code in the file JsonDeomControllerTest.cs with the following code.

using System;  
using System.Web.Mvc;  
using Microsoft.VisualStudio.TestTools.UnitTesting;  
using JsonResultDemo.Controllers;  
  
namespace JsonResultDemo.Tests.Controllers  
{  
    [TestClass]  
    public class JsonDemoControllerTest  
    {  
        [TestMethod]  
        public void WelcomeNote()  
        {  
            JsonDemoController controller = new JsonDemoController();  
  
            JsonResult result = controller.WelcomeNote();  
            string msg = Convert.ToString(result.Data);  
            // Assert  
            Assert.AreEqual("Welcome to the User", msg);  
        }  
    }  
}

Brief Note about TestMethod of WelcomeNote()

Create an object for JsonDemoController.
Save the result of JsonDemoController controller method “WelcomeNote” method result in the “result” parameter of the type JsonResult.
The string “msg” is assigned with the value from the Json Result (result.Data).
In this step, you are checking the expected output with the actual output using the Assert method. In a similar way the Assert Method provides other options like AreNotEqual, AreSame, IsNotNull and so on.

Step 4: Right-click on the WelcomeNote method and click on “Run Unit Tests” then the screen result looks like the following.

Step 5: You can also do the “Run Tests” by the clicking of (Ctrl +R, T). Then you can view the results in Test Explorer like the following.

Step 6: As you noticed in the Test Explorer screen shot it contains so many options like “Run All” and Run the selected/required options. You can try with those and will get an idea of it easily.

In a similar way, you can create more test methods and it will be helpful to check the functionality in various cases since it provides correct results or not.

Note: you can download the preceding discussed sample project from the link Source Code.

Conclusion

I hope this article gives you an idea of JsonResult, JsonResult Properties, the usage of JsonResult with various scenarios and how can you test the JsonResult using the Test Project.

Please provide your valuable suggestions and comments on this.

Prevent Partial view to access directly in MVC

2014-09-20T17:49:00.000+05:30

About:

As I discussed in earlier blog post, PartialView is mostly used as a type of user control. So, The partial view result should be used in other pages like a child Request and it should not be accessible by direct Route Url.

By Default, PartialViewResult controller will be accessible through Route Url. But, you can restrict or prvent access by just adding a one attribute above to that controller action method named as “[ChildActionOnly]”.

Example:

Now, you can check it out by the example, Just add the below lines of code in the controller action method in sample MVC application.

    public class DemoController : Controller
    {
        /// 
        /// Demo Partial Result
        /// 
        /// 
        public ActionResult DemoPartialResult()
        {
            return PartialView("_Demo");
        }
    }

Now, you create a partial view named as "_Demo.cshtml" with the template as "Empty (without model) " than add any sample text in that parital view.

Now, If you run the application it would accessible like the below.

But, If you add the attribute named as “[ChildActionOnly]” then it does not allow us to access directly from the URL. The code block looks like the below.

        /// 
        /// Demo Partial Result
        /// 
        /// 
        [ChildActionOnly]
        public ActionResult DemoPartialResult()
        {
            return PartialView("_Demo");
        }

Now,If you are trying to access from the URL, It shows the error like the below.

Event, if you can't access the Partial View result action method from ajax call as well.
For Example, The ajax call, you defined in the code like the below.

Now, If you are trying to access that page then you can identify the error in Console window of the browser is as follows.

Conclusion

I hope you got idea how to prevent Partial view Results directly accessing from URL or ajax calls in MVC. Please provide you valuable suggestions and comments if any.

Visual Studio Key Notes

2014-09-16T15:14:00.001+05:30

About:

The Visual studio editor is vast and provides a ton of features. As you are working with visual studio editor, you should know the few features for those helps you a lot to improve the productivity while developing a code.

So, In this post I am going to share with you about some of visual studio key points.

Features
Extensions
Web Essentials
code snippets
Help
Quick Launch
Refactoring

If you follow the above set of key points in visual studio along with some other, then while writing a code in visual studio is just like a “Communication or discussion between you and visual studio”.

Features:

Multiple Browsers set as Default
Show code Preview tool tip
Peek Definition

Multiple Browsers set as Default:

This feature is really very helpful when you get a chance to work on application, it should support various browsers.Normally, what you should do is run an application in one browser and then copy the same url to another browser to check the browser dependency or UI perspective or some other ways.

But, In Visual studio also provides an option to set “Multiple Browsers” set as default. So you can run the application from visual studio it would open in all browsers. So, The setting should be setup by the following way.

As, per the browser the default browser is “Google Chrome”. Click on Browse with button then the screen should display as below.

Now, Press the Ctrl button and click on “Firefox” then you are able to select two browser types (Just like select multiple list items from list box) and then hit on “Set as Default” button then the resultant screen would display is as follows.

Then close the window and hit a “ Ctrl + F5” button to run the application in two browsers (Google Chrome, Firefox) at a time.

Note: The debugging feature (hit F5) is allow only for single application only. This multiple browser feature would be useful especially to test the GUI display for various browsers.

Show Code preview tool tip:

This feature will be useful when code file contains hundreds of lines, In out of that you are going to search for particular block / piece of code.

So, Normally to achieve the aforesaid requirement, you can use find or method name search for that few key strokes are required,

Instead of that, while just moving the mouse to the vertical scroll bar location as it opens a small glance popup it would show the piece of code and just by clicking on that it would navigates to that particular code location is good right!!!..

Now, you can learn how can you setup this feature in visual studio 2013.

Steps:

Tools
Go to Options
Expand Text Editor
Expand C#
Select Scroll Bars
Go to the Behavior panel
Select the “Use map mode for vertical scroll bar”

The resultant window screen looks like as follows.

Note: I hope this feature will be helpful when you are working on big screen like extended monitor it would be useful, for normal small laptop screens you can go with existing vertical bar only.

Peek Definition:

As a coding practice and better maintainability will follow code ayers or design patterns. In such a scenario, some of the methods will be inherited from the other classes.

So, In that cases if you want to check the method details with out moving to that particular this Peek definition helps you.

You, just need to place a cursor on any of the method and click on “Alt + F12” it opens small popup contains the method details.

Extensions:

Visual studio supports the extensions which helps to achieve the required things those are not included or in a better way by creating visual studio extensions in (.vsix) file format.

You can install/manage the visual studio extensions from Visual studio itself,By Navigating to Tools and Extensions and Updates.. or else you can directly install extensions from Visual Studio gallery. Some of the extensions are as follows.

Spell checker
Go To Definition
Productivity Power Tools 2013

Spell checker:

Spell checker is one of the great tool as this would be very useful to get rid of some silly/typo mistakes while placing some comments in code level. As placing comments at code level is one of the best thing in code practices.

You can download the tool from this link Spell Checker or else you can directly install from visual studio as well.

Go To Definition:

Visual studio provides so many features like (F12) to go to the definition of code and (Alt+ F12) peek definition to view the code in current location window only with small popup also. Even though this extension provides in a other way to view the code.

If you press and hold the Ctrl key and just mouse over any definition then it turns into a hyper link, By clicking on that link it would navigate to that definition of the code block.

You can download that one from this link Go To Definition

Productivity Power Tools 2013:

The name itself indicates that this tool is very helpful to improve the productivity while writing the code in visual studio 2013. you can call this one as a package instead of extension as this comes with lot of options with customization settings even you can disable / change the setting as you desired.

you can check out description and get the details and download the extension from this link Power Tools.

Installed Extensions in a visual studio having a features like to disable or uninstall the extensions as well.

The Extensions are managed from Visual studio by following this steps.

Tools
Go To Extensions and Updates
select Installed option on left most corner from the opened pop up
It would show the list of installed extensions
Now, You can disable or Uninstall the required extension.

Web Essentials:

Web essentials is also one of the best one which will provide great flexibility while writing a code in visual studio editor.

LESS: Less css is kind of dynamic stylesheet language which is very helpful while designing css for any templates or forms. you can get more details from my blog.

ZenCoding: ZenCoding is the one of the greatest feature (at least I feel) in the Web essentials. It helps you a lot to write HTML code in fastest way even visual studio 2013 provides itself a lot of features like (automatically closes (or modify/update) the tag when you write start tag and etc). You can get additional details from my blog.

It also contains a great list of features like TypeScript and etc. you can get more idea about web essentials by checking this link Web Essentials. you can download the web essentials separately based on visual studio version, For Visual studio 2013 the link for visual studio gallery and official site link web essentials.

Code Snippets:

As a developer, Everyone have an idea of some basic C# code blocks like (if.. else, for, foreach, switch,while, creating constructor etc etc..)

But, Just think about it while choosing any one of the aforesaid code block, and just have a count of how many key strokes are used to write that block.

For Example, for writing single if condition like the below it would take minimum of 6 to 7 even visual studio provides automatic feature of closing of braces.

if()
{

}

But, If you have an idea of code snippets, you can achieve that one in only 4 key strokes. By typing “if” and then press “TAB” then visual studio will create if block for you.

The other example is, If you are having a class named as “Customer.cs” then you are going to create constructor for that class. By using code snippet you can just type “ctor” and then hit TAB.

Thats it!!!!... The constructor is ready with the code.

In the similar way for writing try..catch block, just write “try” and then hit TAB.

In the above scenario,The difficult thing is only you just need to have an idea on “ctor” will creates code snippet for constructor block.

Now, The question is how should you know these kind of things.

It is just simple, In any of the code block (c#) or even in .cshtml page block as well, Right Click and then click on “Insert Snippet” then the resultant screen would display like the below.

you can select or review the code snippet names by checking in “Visual C#” or “ASP.NET MVC4” or others and then habituate in the day to day coding style then definitely you could do better code in a productive manner.

Help:

As a developer, you can learn the things in a day to day code by exploring the things. In this manner, Help is needed to learn or understand the things, The same scenario, you could relate with visual studio editor code implementation.

For Example, if you want to get the details about a C# keyword “string”. Instead of searching in google or somewhere else , place a cursor on that keyword and hit “F1”.

The specialty of this search is sensitive framework dependent. Like , If you hit “F1” from the .Net Framework 4.5 application then the msdn help browser will open the result for .Net Framewoek 4.5 only.

The Visual studio provides offline base search also by changing the help preferences from visual studio.

Quick Launch:

This option is exists generally at right most corner of visual studio. Before discussing with you about this feature, just a few simple questions.

Have you ever searched in VS menus to for BreakPoints bar to get list of BreakPoints?
Have you ever searched in VS menus for Immediate window?
Have you ever searched in a VS for Solution explorer if its not in right side of editor?

The Quick Launch will helps you a lot to avoid these kind of simple and even some complicated setting with out remembering all those as visual studio is a vast and it contains tons of features.

Bu just typing, some related words in quick launch it would gives a result by clicking on that it would opens the required ones.

Few examples are mentioned below.

Refactoring:

Code Refactoring is also having its own importance while writing a code. Suppose if you have written some block of code as a initial code development. After certain moment, you have noticed that the same block of code will be required at some other location.

Then, Usually what you will do, Remove that block of code, create a method separately with that code then call that method in the required places where as desired.

The whole process will be managed by Visual studio Refactoring option.

You, Just need to do is only select the required code block, Right click and select the Refactoring option.

And then just click on "Extract Method" then it opens a popup like the below.

Now, By Clicking on "Ok" button then the code result will display is as follows.

Conclusion:

I hope the provided key notes on visual studio will help you to write code in a smart way with less pain.

Partial View Result Return Type in MVC 5 with sample Web application

2014-09-15T09:53:00.000+05:30

About:

PartialView is the one of the ActionResult type in MVC. This is also inherited from the ViewresultBase clas. You can use Partial View is kind of user control in MVC.

So, This PartialView is mostly used for to reduce the repetitive code and also for easy code maintainability.

How Can you Call/Display Partial View:

you can call or display partial view with in the view mainly in four types with the use of html helper methods.

Those are

1. Html.Partial
2. Html.RenderPartial
3. Html.Action
4. Html.RenderAction

I can discuss more about these types in a later post.

Example:

A customer having the details of customer Id, Customer Name and address like Present and Permanent address details.

Key Points to Cover:

Display the customer details using partial view
Edit, update the details using partial view
Create the customer details by using partial view
Delete the customer details by using partial view
How to use Partial view in a view more than once (As I discussed it is kind of user control in MVC)
Strongly typed Partial Views

Note: This demo is being prepared with Visual Studio 2013 and MVC 5.

you can download the sample project source from the link Download Project

Step 1:

I am going to create new project in Visual Studio 2013 application. Add a New project from the visual studion, then the displayed screen is as follows.

As, you can see in Visual Studio 2013, you are having only one type of Web application, But if you are selected in VS 2012 template it looks like below.

In this example, I am using Visual Studio 2013 with MVC5.

Step 2:

you can type the Name as “MvcPartialViewResultDemo” and then click on Ok button then the resultant screen displayed as below.

Here, you can select the project template as “MVC” and also select the “Add unit tests” at the left most corner of the the template then the Test project name displayed as “MvcPartialViewResultDemo.Tests”.

Its always better practice to select the Unit test project in MVC as it supports TDD (Test Data Driven) approach.

Step 3:

Click on Ok button, then it would create beautiful MVC application with addition of so many features like Login, Register, sample Layout with Responsive design approach (Bootstrap), claim based authentication template (Like login through gmail, facebook etc). You can simply say that this is the power of visual studio. The displayed project home screen is as follows.

Now, Just click on F5 button, to see the sample MVC application till now what you have created.

you, can just click on “Restore Down” button or just reduce the browser width then you can identify the resultant responsive design as follows.

So, Sample MVC web application is ready even with out writing single line of code.

Step 4:
The web application solution explorer looks like below.

The highlighted parts of solution explorer as Model, View and Controller, you mainly work on those following components in this example.

Now, you can add one class named as CustomerModel.cs in the Model folder by right click on Model folder then Add and choose the class.

By clicking on “class” the template looks like below.

Click on “Add” button then the class will be created. Now, you can replace that class file code with the below code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MvcPartialViewResultDemo.Models
{
    public class CustomerModel
    {
        public int CustmerId { get; set; }
        public string CustomerName { get; set; }
        public CustomerAddress PermanantAddress { get; set; }
        public CustomerAddress PresentAddress { get; set; }
    }
    public class CustomerAddress
    {
        public string DoorNumber { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string PinNumber { get; set; }
    }
}

Now, The Customer Model is ready in your application.

You can add a controller named as CustomerController.cs in the controller folder.
Right click on Controllers folder then Add and the controller

Click on “Controller” then the screen looks like below.

This above template provides various types of controllers, In that you can choose the template named as “MVC 5 Controller with read/write actions” then click on “Add” button then another popup will appear its asks you about controller name. So, name it as “CustomerController” like the below.

Now, Just click on “Add” button, It would create CustomerController.cs file.

Are you bit surprised!!! while checking the code as it generates so much of code with all read/write actions. This is the power of template while creating a customer controller what you have chosen.

Note: Even you can define your own level of changes in that controller template by defining custom CodeTemplates (T4 Templates) in your project folder as well.

The CustomerController.cs code file looks like below.

Step 6:

Now, you are going to add a partial view which helps to display Address details of a customer. Partial Views can be added with in the parent controller or a shared folder. As a part of coding practice the partial view can be prefixed with “_”.

Add a partial view by following the below steps

Go to Solution Explorer
Views folder
Inside Views folder right click on Shared folder
Click on Add and then View

The resultant screen looks like follows.

Now, click on “View” it opens a popup and apply the changes as per below screen

Changes:

View Name: _CustomerAddressDetails
Template Name: List
Model class: CustomerAddress

select the Create as a Partial view option and then click on “Add” button to creates the partial view. Now, Replace the “_CustomerAddressDetails.cshtml” code with the below code.

@model MvcPartialViewResultDemo.Models.CustomerAddress




            @Html.DisplayNameFor(model => model.DoorNumber)
        
@Html.DisplayFor(model => model.DoorNumber)
        

            @Html.DisplayNameFor(model => model.City)
        
@Html.DisplayFor(model => model.City)
        

            @Html.DisplayNameFor(model => model.State)
        
@Html.DisplayFor(model => model.State)
        

            @Html.DisplayNameFor(model => model.PinNumber)
        
@Html.DisplayFor(model => model.PinNumber)

Step 7:

You can add view to the controller action method named as Index to display the list of all customer details.

By Clicking on “Add View” It displays popup and choose the setting as mentioned in the screen.

Changes:

View name: Index
Template: List (As we are going to display list of customer details)
Model class: CustomerModel

Click on “Add” button then the view will be created and the displayed screen is as follows.

Now, update the Index.cshtml with the following design.

@model IEnumerable

@{
    ViewBag.Title = "Index";
}


Customer Details


    @Html.ActionLink("Create New", "Create")


    @*Headers*@
    
    
    @*Customer Data*@
    @foreach (var item in Model) {
        
    }


        
            @Html.DisplayNameFor(model => model.CustmerId)
        
        
            @Html.DisplayNameFor(model => model.CustomerName)
        
        
            @Html.DisplayNameFor(model => model.PresentAddress)
        
        
            @Html.DisplayNameFor(model => model.PermanantAddress)
        
        
    

            
                @Html.DisplayFor(modelItem => item.CustmerId)
            
            
                @Html.DisplayFor(modelItem => item.CustomerName)
            
            
                @Html.Partial("_CustomerAddressDetails",item.PresentAddress)
            
            
                @Html.Partial("_CustomerAddressDetails", item.PermanantAddress)
            
            
                @Html.ActionLink("Edit", "Edit", new { id=item.CustmerId }) |
                @Html.ActionLink("Details", "Details", new { id = item.CustmerId }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.CustmerId })

@Html.DisplayNameFor(model => model.CustmerId)	@Html.DisplayNameFor(model => model.CustomerName)	@Html.DisplayNameFor(model => model.PresentAddress)	@Html.DisplayNameFor(model => model.PermanantAddress)
@Html.DisplayFor(modelItem => item.CustmerId)	@Html.DisplayFor(modelItem => item.CustomerName)	@Html.Partial("_CustomerAddressDetails",item.PresentAddress)	@Html.Partial("_CustomerAddressDetails", item.PermanantAddress)	@Html.ActionLink("Edit", "Edit", new { id=item.CustmerId }) \| @Html.ActionLink("Details", "Details", new { id = item.CustmerId }) \| @Html.ActionLink("Delete", "Delete", new { id = item.CustmerId })

The Index.cshtml file displays as follows.

Step 8:

Now, open the CustomerController.cs file and add the code as follows to get the list of customer details.

Add a namespace as like below.

using MvcPartialViewResultDemo.Models;

to the CustomerController.cs file and then add the following method to CustomerController.cs file

public List GetCustomerDetails()
        {
            var customerList = new List();
            for (int i = 1; i <= 2; i++)
            {
                var customer = new CustomerModel
                {
                    CustmerId = i,
                    CustomerName = string.Concat("Customer", i),
                    PermanantAddress = new CustomerAddress()
                    {
                        DoorNumber = string.Concat("Permanent-D.No:4-xx-", i),
                        City = string.Concat("Permanent-City", i),
                        State = string.Concat("Permanent-State", i),
                        PinNumber = string.Concat("Permanent-Pin", i)
                    },
                    PresentAddress = new CustomerAddress()
                    {
                        DoorNumber = string.Concat("Present-D.No:4-xx-", i),
                        City = string.Concat("Present-City", i),
                        State = string.Concat("Present-State", i),
                        PinNumber = string.Concat("Present-Pin", i)
                    }
                };
                customerList.Add(customer);
            }
            return customerList;
        }

and then update the Index action method code as follows.

 // GET: Customer
        public ActionResult Index()
        {
            var customerDetails = GetCustomerDetails();
            return View(customerDetails);
        }

Now, you can build the application( Ctrl+Shift+B), After a few moments it should be “Build succeeded” then run the application by hitting F5 and then change browser URL (
http://localhost:60385/Customer/Index ) The output screen is as follows.

As of now, you are able to display the customer details. Now, you can work on Details of each specific customer.

Step 9:

Go to the CustomerController.cs file and add a “view” for the Action method Details.

The view template is as follows.

Click on “Add” button and then delete and update the design html is as follows.

@model MvcPartialViewResultDemo.Models.CustomerModel
@{
    ViewBag.Title = "Details";
}

Customer Details




            @Html.DisplayNameFor(model => model.CustmerId)
        
@Html.DisplayFor(model => model.CustmerId)
        

            @Html.DisplayNameFor(model => model.CustomerName)
        
@Html.DisplayFor(model => model.CustomerName)
        
        @Html.Partial("_CustomerAddressDetails", Model.PermanantAddress)
    
        @Html.Partial("_CustomerAddressDetails", Model.PresentAddress)
    

@Html.ActionLink("Edit", "Edit", new { id = Model.CustmerId }) |
    @Html.ActionLink("Back to List", "Index")

Step 10:

Now, Add the method GetCustomerById to the CustomerController.cs file is as follows.

public CustomerModel GetCustomerById(int customerId)
        {
            var customerDetails = GetCustomerDetails();
            var customer = (from cust in customerDetails
                where cust.CustmerId == customerId
                select cust).FirstOrDefault();
            return customer;
        }

Now, Update a details action method for CustomController.cs file.

// GET: Customer/Details/5
        public ActionResult Details(int id)
        {
            var customerModel = GetCustomerById(id);
            return View(customerModel);
        }

Build the solution and then hit the “F5” button to see the result by navigating to the URL http://localhost:60385/Customer/Details/1.

Step 11:

Now, Create another partial view to manage the edit/create operations for customer address. The flow for the screen shots is as below.

By Clicking on "Add" button "_CustomerAddress.cshtml" file would be created and then replace the design with the following below.


@model MvcPartialViewResultDemo.Models.CustomerAddress
    


@Html.ValidationSummary(true, "", new { @class = "text-danger" })
        


@Html.LabelFor(model => model.DoorNumber, htmlAttributes: new { @class = "control-label col-md-2" })
        


@Html.EditorFor(model => model.DoorNumber, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.DoorNumber, "", new { @class = "text-danger" })
        


@Html.LabelFor(model => model.City, htmlAttributes: new { @class = "control-label col-md-2" })
        


@Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })
        


@Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" })
        


@Html.EditorFor(model => model.State, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" })
        


@Html.LabelFor(model => model.PinNumber, htmlAttributes: new { @class = "control-label col-md-2" })
        


@Html.EditorFor(model => model.PinNumber, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.PinNumber, "", new { @class = "text-danger" })

Step 12:

Open CustomerController.cs file and update the Get Edit Action method with the below code.

// GET: Customer/Edit/5
        public ActionResult Edit(int id)
        {
            var customerModel = GetCustomerById(id);
            return View(customerModel);
        }

and then add a view for the Edit method like the below.

After that, update the Edit.cshtml with the following html design

@model MvcPartialViewResultDemo.Models.CustomerModel
@{
    ViewBag.Title = "Edit";
}

Edit
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
        
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
        


@Html.LabelFor(model => model.CustmerId, htmlAttributes: new { @class = "control-label col-md-2" })
        


@Html.TextBoxFor(model => model.CustmerId, new { @class = "form-control", disabled = "disabled", @readonly = "readonly" })
            


@Html.LabelFor(model => model.CustomerName, htmlAttributes: new { @class = "control-label col-md-2" })
        


@Html.EditorFor(model => model.CustomerName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CustomerName, "", new { @class = "text-danger" })
            


Permanent Address:
@Html.Partial("_CustomerAddress", Model.PermanantAddress)
        


Present Address:
@Html.Partial("_CustomerAddress", Model.PresentAddress)
        




            


}

@Html.ActionLink("Back to List", "Index")

Changes:
Disable the customer id
Include the _CustomerAddress.cshtml partial view

Now, update the Post method of Edit action in CustomerController.cs code as below.

Post method of Edit action controller code.

Build the application and hit F5, Navigate to http://localhost:60385/Customer click on any Edit link of the customer and then update the data like the below.

After updating the details by click on “Save” button it goes to the post action of Edit method and I have captured the field values while in debugging mode for reference.

As, you observed the Post method of Edit contains two parameters one for CustomerId and another for get the all form control values.

So, FormCollection is being used to get all the control values. As you are used one partial view two times in a form to get the permanent and present address details. The FormCollection values are comes with “,” separator.

Step 13:

Add a view named as “Create.cshtml” from the get action method “Create” in customerController.cs file is as follows.

And then update the design by including Partial views is as follows.

@model MvcPartialViewResultDemo.Models.CustomerModel
@{
    ViewBag.Title = "Create";
}

Create
@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
        

CustomerModel

@Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @*


@Html.LabelFor(model => model.CustmerId, htmlAttributes: new { @class = "control-label col-md-2" })
        


@Html.EditorFor(model => model.CustmerId, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CustmerId, "", new { @class = "text-danger" })
            

*@
        


@Html.LabelFor(model => model.CustomerName, htmlAttributes: new { @class = "control-label col-md-2" })
        


@Html.EditorFor(model => model.CustomerName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CustomerName, "", new { @class = "text-danger" })
            


Permanent Address:
@Html.Partial("_CustomerAddress")
        


Present Address:
@Html.Partial("_CustomerAddress")
        




            


}

@Html.ActionLink("Back to List", "Index")

After that, update the code in Post Create Action method is as follows.

// POST: Customer/Create
        [HttpPost]
        public ActionResult Create(FormCollection collection)
        {
            try
            {
                var customerModel = new CustomerModel
                {
                    CustmerId =  5, //Get the max+1 from customer list
                    CustomerName = collection["CustomerName"],
                    PermanantAddress = new CustomerAddress()
                    {
                        DoorNumber = collection["DoorNumber"].Split(',')[0],
                        City = collection["City"].Split(',')[0],
                        State = collection["State"].Split(',')[0],
                        PinNumber = collection["PinNumber"].Split(',')[0]
                    },
                    PresentAddress = new CustomerAddress()
                    {
                        DoorNumber = collection["DoorNumber"].Split(',')[1],
                        City = collection["City"].Split(',')[1],
                        State = collection["State"].Split(',')[1],
                        PinNumber = collection["PinNumber"].Split(',')[1]
                    }
                };
                // TODO: Add insert logic here
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

Now, you are ready with the Create functionality of Customers as well. Just hit F5 and then click on “Create New” customer link then fill the details as you required.

After entering the details, click on Save button to save the details.

As you noticed in the above image, you would get the all details then you just need to send that customer model object to the database call to save the details.

Step 14:

Add a view named as “Delete.csthml” from the get action method named as “Delete” in CustomerController.cs file.

And then update the design by including Partial views is as follows.

@model MvcPartialViewResultDemo.Models.CustomerModel
@{
    ViewBag.Title = "Delete";
}

Delete

Are you sure you want to delete this?





            @Html.DisplayNameFor(model => model.CustmerId)
        
@Html.DisplayFor(model => model.CustmerId)
        

            @Html.DisplayNameFor(model => model.CustomerName)
        
@Html.DisplayFor(model => model.CustomerName)
        
        
        @Html.Partial("_CustomerAddressDetails", Model.PermanantAddress)
        @Html.Partial("_CustomerAddressDetails", Model.PresentAddress)
    
@using (Html.BeginForm()) {
        @Html.AntiForgeryToken()
        


 |
            @Html.ActionLink("Back to List", "Index")
        
}

Update the code in get Delete action method is as follows.

 // GET: Customer/Delete/5
        public ActionResult Delete(int id)
        {
            var customerModel = GetCustomerById(id);
            return View(customerModel);
        }

Update the code in post delete action method is as follows.

// POST: Customer/Delete/5
        [HttpPost]
        public ActionResult Delete(int id, FormCollection collection)
        {
            try
            {
                if (id > 0)
                {
                    // TODO: Add delete logic here
                }
                return RedirectToAction("Index");
            }
            catch
            {
                return View();
            }
        }

Build the application and hit F5 button then navigate to the “http://localhost:60385/Customer/Index” and then click on delete link to delete the customer as you desired. The delete customer output is as follows.

As you observed the above image you are getting the customer id then you can perform the database call to delete the customer.

Conclusion:

I hope this above example gives you a brief idea on usage of partial views with a sample application of customer related operations(Details, Display, Create, Edit and Delete) and also you can get some idea how can you create sample application by using MVC.

Please provide your valuable suggestions and feedback if any.

ZenCoding and Lorem pixel generator in .NET

2014-09-10T00:48:00.001+05:30

ZenCoding

ZenCoding is the one of the greatest feature (at least I feel) in the Web essentials. It helps you a lot to write HTML code in fastest way even visual studio 2013 provides itself a lot of features like (automatically closes (or modify/update) the tag when you write start tag and etc).

You can use the ZenCoding by installing from Web Essentials site or visual studio gallery into Visual Studio.

Zen coding is very much easy to implement as you have some idea on CSS stuff. It uses the syntax like CSS selectors. The selectors are

Selector	Usage
#	Id
.	class
>	Child element
^	Climbs Up
*	Multiplication
+	Sibling element
[]	Custom Attribute
{}	Creates text for an element
$	Incremental number (starts with 1)
$$	Incremental number with padding(starts with 01)

In this ZenCoding, you only need to remember the selector and its usage, Based on that you can make “n” number of combinations while designing HTML based on your requirement. It saves the development time a lot.

Now, I am going to explain few combinations which helps you to gear up on usage of ZenCoding in your daily base development environment.

ZenCoding implementation, you have to type the expression and then by clicking on "TAB" then automatically that expression would be changed to HTML format.

The below provided examples each one contains three sections in a comments.

1. Requirement: It indicates the requirement to make a ZenCoding expression
2. Expression: ZenCoding Expression or syntax to achieve the requirement
3. Result: Result of the ZenCoding Expression

Scenario 1:

Scenario 2:

Scenario 3:

Scenario 4:
Note: This scenario,I have used $ for anchor id and $$ for anchor tag text. you can identify the difference in result.







Click here: 01
Click here: 02
Click here: 03
Click here: 04
Click here: 05

Scenario 5:








Click here: 01
Click here: 02
Click here: 03
Click here: 04
Click here: 05

Scenario 6:









Click here: 01
Click here: 02
Click here: 03
Click here: 04
Click here: 05



Section Items

footer Display

Lorem Pixel Generator

As part of ZenCoding, Lorem Pixel Generator is also one of the feature provided in Web Essentials. It helps to generate sample or random images from lorempixel site.

It generates image tag by typing expression and then hitting "TAB" button.

The default image tag will be generated with height and width of 30 pixels. you can change the height and width of the image as well. The code pattern is as follows.

you can display the random images of animals, cats and nature etc from lorempixel site.

The other expressions, you can use in Lorem Pixel is as follows;

Conclusion:

I hope you get some brief idea on ZenCoding and Lorem Pixel generator for those are part of html features in Web Essentials.Please provide your valuable suggestions and comments if any.

References:

1. Web Essentials html Features
2. Zen Coding Techniques by John Papa

2014-09-09T00:43:00.000+05:30

OTHERS

2014-09-09T00:02:00.001+05:30

MVC

LESS CSS in .NET

2014-09-07T21:45:00.002+05:30

Less css is kind of dynamic stylesheet language which is very helpful while designing css for any templates or forms.

As you are designing any template, For example, the color which you are using is same as header, body or font etc.

So, Normal css would look like as follows.

body {
  color: #808080;
}
header {
  color: #808080;
}
#TestId {
  color: #808080;
}

For the above example, if you need to change the color then need to update the color manually. But if you are using the LESS css then it would be very easy to update the color in a dynamic way.

Note: LESS format file is the part of Web essentials in Visual studio. you can get the web essentials from the link Web Essentials

Now, I am going to explain how to add LESS file and its implementation process in sample MVC application.

Add a new item to the Content folder then select LESS Style Sheet, mention the name as Demo.less then the output screen would look like below.

you can declare an variable named as for example @TemplateColor and assign the color value to that variable.

@TemplateColor: #808080;

After that , as you mentioned the above normal css and replace the color value with the variable like the below.

body {
    color: @TemplateColor;
}

header {
    color: @TemplateColor;
}

#TestId {
    color: @TemplateColor;
}

So, Now the complete sample LESS file is ready with the below format.

@TemplateColor: #808080;

body {
    color: @TemplateColor;
}

header {
    color: @TemplateColor;
}

#TestId {
    color: @TemplateColor;
}

After that, just save the file by pressing (Ctrl+S) then automatically the css and min.css will be ready in your solution.

Its very easy to change from one color to another by just updating the color for @TemplateColor variable instead of whole css.
Conclusion:

I hope this article gives you brief idea on LESS css with sample example.Please provide your valuable suggestions and comments if any.