Ramchand's Blog

Tuesday, 4 February 2025

.NET 9 Features

Params Collections in .NET9

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.

Friday, 17 January 2025

Semi Auto Properties in .NET9

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.

Monday, 6 January 2025

Task.WhenEach in .NET9

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

Wednesday, 1 January 2025

SearchValues Improvements in .NET9

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

Wednesday, 18 December 2024

UUID v7 in .NET 9

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

Monday, 16 December 2024

.NET 9 Index in LINQ

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.

Sunday, 15 December 2024

.NET 9 AggregateBy LINQ

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

Tuesday, 10 December 2024

.NET 9 CountBy LINQ

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.

Monday, 12 January 2015

AngularJS Core Directives: Include, Click and Repeat

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

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.

Sunday, 30 November 2014

Skype Status Display For a User in MVC

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.

Menu

Tuesday, 4 February 2025

About

Introduction

Before .NET 9

.NET 9

Code Screenshots

Summary

Friday, 17 January 2025

About

Introduction

Before .NET 9

In .NET 9

Code Screenshot

Monday, 6 January 2025

About

Introduction

Screenshots

Output

Wednesday, 1 January 2025

About

Introduction

Screenshots

Summary

Wednesday, 18 December 2024

About

Introduction

Code Examples

Screenshots

Summary

Monday, 16 December 2024

About

Scenario

Employee class

Setup Employee List with Sample Data

Code

Output

Summary

Sunday, 15 December 2024

About

Scenario

Employee class

Setup Employee List with Sample Data

.NET 9

Screenshots

Summary

Tuesday, 10 December 2024

Monday, 12 January 2015

List of Emplooyees

Welcome to Angular Application

{{ angularjs }}

Employee Search

Employee Search

Sunday, 30 November 2014

Prerequisites

Implementation

User Profiles

Conclusion