ME.Dev

DotVVM CRUD application with Cloud Firestore

2020-01-02T13:48:00.001+02:00

In previous post we demonstrated how to use DotVVM to create CRUD application with Azure Cosmos DB as your data store.

In this post we will demonstrate how to do the same with Cloud Firestore by Google.
To know more about DotVVM Framework you can check its official website

What is Cloud Firestore?

Cloud Firestore is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. It keeps your data in sync across client apps through realtime listener and offers offline support for mobile and web apps.

You can know more about Cloud Firebase here.

Install DotVVM extension

refer to previous post and follow the steps.

To know more about the DotVVM extension visit its page on visual studio marketplace:https://marketplace.visualstudio.com/items?itemName=TomasHerceg.DotVVM-VSExtension2019

Now you are ready to start coding with DotVVM framework. DotVVM extension installs DotVVM sample project which we will use to demonstrate how it is easy to connect to Cloud Firestore database from DotVVM application.

Create Cloud Firestore Project

To use cloud Firestore as your database you need to create a project on Firestore.

Go to https://console.firebase.google.com/ and login with your google account or create new one.
Click on Add Project
Enter "dotvvm" as project name.
In next step, Disable Google Analytics for this project. It is recommended to enable it for real project.
Click on Create Project. it will take one or two mins to create your project. When it is ready click on continue.
From the left navigation pan, open database then click on Create database
In the popup window, select Start in test mode then click next.
Select the location of your database(you can keep the default selection) then Click Done.
Congratulation, your Cloud Firestore database is created and ready.

To be able to connect to your Firestore database from your application(server) you need to set the GOOGLE_APPLICATION_CREDENTIALS environment variable to point to JSON service account key file.

To setup your service account, go to https://cloud.google.com/docs/authentication/getting-started and follow the instructions.

DotVVM Web Application

In previous post you can find the complete steps for creating DotVVM web application. In this post we focus on code changes required to connect to Firestore database.

Uninstall entity framework Sql Server related nuget package
Microsoft.EntityFrameworkCore.SqlServer and Microsoft.EntityFrameworkCore
As we will connect to Cloud Firestore database not Sql Server database
Install Google.Cloud.Firestore nuget package. This package is required to run CRUD operations against your firestore database from your web application.
Open appsettings.json file and remove the connection string. keeping it will not harm but we need our code to be clean.
Delete DAL/StudentDbContext.cs file.

Open Startup.cs file and delete the following lines

services.AddEntityFrameworkSqlServer()
                .AddDbContext<Studentdbcontext>(options =>
                {
                    options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection"));
                });

Open DAL/Entities/Student.cs file and add the following using statement
```
using Google.Cloud.Firestore;
```

Decorate the Student class with [FirestoreData] attribute and each property with [FirestoreProperty] attribute. Also change the type of EnrollmentDate property to Timestamp instead of DateTime. The complete code of Student class will be

    [FirestoreData]
    public class Student
    {
        [FirestoreProperty]
        public int Id { get; set; }

        [FirestoreProperty]
        public string FirstName { get; set; }

        [FirestoreProperty]
        public string LastName { get; set; }

        [FirestoreProperty]
        public string About { get; set; }

        [FirestoreProperty]
        public Timestamp EnrollmentDate { get; set; }
    }

Those attributes are required and used to serialize/deserialize your entities from and to json objects. Timestamp is the Firestore datatype used to represent date/time values.

Open Services/StudentService.cs file and add the following private properties to StudentService class
```
private const string project = "dotvvm";
private const string collection = "students";
```
where project is the name of your Firestore project and collection is the name of your database collection where you will insert/retrieve records

Replace the GetAllStudentsAsync method with the following

public async Task<List<StudentListModel>> GetAllStudentsAsync()
{
     var studentsList = new List<Student>();
     FirestoreDb db = FirestoreDb.Create(Project);
     Query allStudentsQuery = db.Collection(Collection);

     QuerySnapshot allStudentsQuerySnapshot = await allStudentsQuery.GetSnapshotAsync();
     foreach (DocumentSnapshot documentSnapshot in allStudentsQuerySnapshot.Documents)
     {
         studentsList.Add(documentSnapshot.ConvertTo<Student>());
     }

     return studentsList.Select(
            s => new StudentListModel
                {
                    Id = s.Id,
                    FirstName = s.FirstName,
                    LastName = s.LastName
                }
            ).ToList();
}

Replace the GetStudentByIdAsync method with the following

public async Task<StudentListModel> GetStudentByIdAsync()
{
     FirestoreDb db = FirestoreDb.Create(Project);
     Query docRef = db.Collection(Collection).WhereEqualTo("Id", studentId).Limit(1);
     QuerySnapshot snapshot = await docRef.GetSnapshotAsync();
     if (snapshot.Count > 0)
     {
          Student student = snapshot.ElementAt(0).ConvertTo<Student>();
          return new StudentDetailModel()
          {
              About = student.About,
              EnrollmentDate = student.EnrollmentDate.ToDateTime(),
              FirstName = student.FirstName,
              Id = student.Id,
              LastName = student.LastName
          };
      }
      else
      {
           return null;
      }
}

Replace the UpdateStudentAsync method with the following

public async Task UpdateStudentAsync(StudentDetailModel student)
{
     FirestoreDb db = FirestoreDb.Create(Project);
     Query docRef = db.Collection(Collection).WhereEqualTo("Id", student.Id).Limit(1);
     QuerySnapshot snapshot = await docRef.GetSnapshotAsync();
     if (snapshot.Count > 0)
     {
           DocumentReference studentRef = db.Collection(Collection).Document(snapshot.ElementAt(0).Id);
           Dictionary<string, object> updates = new Dictionary<string, object>
           {
               { nameof(student.About), student.About},
               { nameof(student.EnrollmentDate), Timestamp.FromDateTime(student.EnrollmentDate.ToUniversalTime())},
               { nameof(student.FirstName), student.FirstName},
               { nameof(student.LastName), student.LastName}
           };
           await studentRef.UpdateAsync(updates);
     }
}

Replace the InsertStudentAsync method with the following

public async Task InsertStudentAsync(StudentDetailModel student)
{
     var entity = new Student()
     {
          Id = new Random().Next(1, int.MaxValue),
          FirstName = student.FirstName,
          LastName = student.LastName,
          About = student.About,
          //create Timestamp from DateTime value
          EnrollmentDate = Timestamp.FromDateTime(student.EnrollmentDate.ToUniversalTime())
     };

     FirestoreDb db = FirestoreDb.Create(Project);
     var Id = Guid.NewGuid().ToString();
     DocumentReference docRef = db.Collection(Collection).Document(Id);
     await docRef.SetAsync(entity);
}

Replace the DeleteStudentAsync method with the following

public async Task DeleteStudentAsync(int studentId)
{
     FirestoreDb db = FirestoreDb.Create(Project);
     Query docRef = db.Collection(Collection).WhereEqualTo("Id", studentId).Limit(1);
     QuerySnapshot snapshot = await docRef.GetSnapshotAsync();
     if (snapshot.Count > 0)
     {
         DocumentReference studentRef = db.Collection(Collection).Document(snapshot.ElementAt(0).Id);
         await studentRef.DeleteAsync();
     }
}

Run your application and if there is no error you will see the following page in your browser
Click on New Item and fill the form then click Add
Congratulation, you added your student to students Firestore collection
Go to your Firestore database, it should look like

notice that, Firestore is created a student collection and inserted your student entity as JSON document and also notice how it represents the EnrollmentDate value as timestamp.

Summary

In this article we demonstrated how to create a sample DotVVM web application, Cloud Firestore database and perform CRUD operations as we used to do with SQL Server database or any other relational database. We have done changes in the sample project code to twist it from using Entity Framework Code First approach (SQL Server) to use Google Cloud FireStore .Net SDK.

You can find the complete source code on github

DotVVM CRUD application with Entity Framework and Cosmos DB

2019-12-19T15:49:00.000+02:00

What is DotVVM?

DotVVM is open source MVVM framework for ASP.Net Core and OWIN and it is member of .NetFoundation. DotVVM is a free to use under Apache License but also have commercial extensions.

DotVVM lets you build interactive web UIs with just C# and HTML using MVVM pattern. DotVVM framework is shipped with many build-in controls like GridView, FileUpload, Validators, and more.

Why DotVVM?

There are many reason and business scenarios that DotVVM is suitable for and very helpful like:

Migrating legacy ASP.Net web forms application to .Net Core.

New ASP.Net applications that contains many forms with a lot of controls/components.

To learn more about DotVVM framework visit DotVVM.com.

What is Azure Cosmos DB?

Azure Cosmos DB is a NoSQL distributed and fully managed database service. Azure Cosmos DB provides different API for different NoSQL models like Document databases, Column databases, Graph databases and Key-Value database.

You can easily migrate your existing database on your prim to Azure Cosmos DB using Cosmos migration tool.

In this article we will go through a sample project to demonstrate how it is easy to use DotVVM framework in building your web application with Azure Cosmos DB as your data store.

Install DotVVM extension

Open Visual Studio 2019 (you can use Visual Studio 2017 as well)

Open Manage Extension window

Extensions à Manage Extensions à Online menu

In search box type DotVVM and click Download

Restart Visual Studio to complete DotVVM installation

You should find DotVVM in Extension menu.

To know more about the DotVVM extension visit its page on visual studio marketplace:https://marketplace.visualstudio.com/items?itemName=TomasHerceg.DotVVM-VSExtension2019

Now you are ready to start coding with DotVVM framework. DotVVM extension installs DotVVM sample project which we will use to demonstrate how it is easy to connect to Azure Cosmos DB from DotVVM application.

DotVVM Web Application

Create new project
In create new project window, filter project list by DotVVM and select DotVVM Web Application (.NET Core) and click next.
Enter “DotVVMCosmos” as project name, project path, and “DotVVMCosmos” as solution name then click create
Project name and solution name can be any value you want.
In “Customize Your DotVVM Project” window select:
- Select Bootstrap 3
- No Authentication
- Sample CRUD Page
- .NET Core 3.0 (you can target another .NET core version)
Then click Create Project.

Your project structure will be as shown

DotVVM sample project uses Entity Framework Code First approach and provides:

Sample entity (Student)
DbContext class (StudentDbContext)
Two model classes (StudentDetailModel, StudentListModel)
CRUD Service class (StudentService) : contains all methods required to do your CRUD operations

Create Azure Cosmos DB Account

You can use existing Azure subscription to create Azure Cosmos DB account. If you don’t have active azure subscription still you can try Azure Cosmos DB for free for 30 days.

Go to https://azure.microsoft.com/en-us/try/cosmosdb/
Sign in with your Microsoft account or GitHub account
Select SQL API
Microsoft will create Azure Cosmos DB Account for you and the overview page will look like
In left side menu click on Keys. From read-write keys tab, copy URI and Primary Key values and keep it.

Back to our DotVVM project to make the required modification to connect to Azure Cosmos DB.

Uninstall entity framework Sql Server related nuget package
Microsoft.EntityFrameworkCore.SqlServer and Microsoft.EntityFrameworkCore
As we will connect to Azure Cosmos DB not Sql Server database
Install Microsoft.EntityFrameworkCore.Cosmos nuget package
Open appsettings.json file and replace its content with the following
```
{
  "AppSettings": {
    "EndPoint": "<your cosmos db uri>",
    "Cosmoskey": "<your cosmos db primary key>",
    "DatabaseName": "DotVVM-Cosmos"
  }
}
```
Appsetting.json file contains the default connection string for Local DB but we will connect to Azure Cosmos DB so no need to keep default connection string in our code.

Open Startup.cs file and replace

services.AddEntityFrameworkSqlServer()
                .AddDbContext(options =>
                {
                    options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection"));
                });

with

services.AddEntityFrameworkCosmos()
                .AddDbContext(options =>
                {
                    options.UseCosmos(Configuration.GetSection("AppSettings").GetValue("EndPoint"),
                        Configuration.GetSection("AppSettings").GetValue("Cosmoskey"),
                        databaseName: Configuration.GetSection("AppSettings").GetValue("DatabaseName"));
                });

Here we tell the .Net to use EntityFramework Cosmos Provider instead of EntityFramework Sql Server provider and adding our StudentDbContext and passing the required option to create a connection with our Cosmos DB instance.

Open DAL/StudentDbContext.cs file and add the following method to StudentDbContext class
```
protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            modelBuilder.HasDefaultContainer("Students");

            modelBuilder.Entity().ToContainer("Students");
        }
```
In first line we set the default Cosmos DB Container to be “Students”. In the second line we map the Student entity to Students Container. If we have other entities we need to map ‘em to the corresponding container as well.
Run your application and if there is no error you will see the following page in your browser
Click on New Item and fill the form then click Add
Congratulation, you added your student to Student Cosmos DB container
Go to your Cosmos DB web page and open Data Explorer, it should look like

Summary

In this article we demonstrated how to create a sample DotVVM web application and connect to Azure Cosmos DB NoSQL database and perform CRUD operations as we used to do with SQL Server database or any other relational database. We have done few changes in the sample project code to twist it from using Entity Framework Code First approach (SQL Server) to use Entity Framework Code First approach (Cosmos DB).
You can find the complete source code on github

Clean your JSON object before saving into Cloud Firestore database

2019-02-02T19:08:00.000+02:00

If you have a registration form and you are collecting user's inputs to json object like

user = {
  'first_name' : 'Amir',
  'middle_name':'',
  'last_name':'Ismail'
  'age' : 25,
  'address' : '',
  'phone':null
};

notice middle_name, address, and phone fields have no value (empty string and null). If you want to save this in Cloud Firestore database, these fields will be saved which is not recommended because you are losing one of the advantages of NoSQL document database which any document should contain only fields have value(except your business case requires that field to be exist in all documents even has no value).

To remove empty fields you have to check each input value and save only fields that have value. But if you have big form with many input fields or you have many forms checking each fields will be a nightmare and your code will be dirty.

So I tried to write a TypeScript function that takes any json object and build new object contains only fields have values.

export class AppUtils {

  static cleanObject(input: any): any {
      let output: any = {};
      //loop over object fields 
      for (var key in input) {
        //check if field have value or not
        if (input.hasOwnProperty(key) && input[key] != null && input[key] !== '') {
          //check if primitive type or object
          if (typeof (input[key]) === 'object') {          
            var subOutput = AppUtils.cleanObject(input[key]);
            
            if (Object.keys(subOutput).length !== 0) {
              output[key] = subOutput;
            }
          }
          else {
            output[key] = input[key];
          }
        }
      }
      return output;
  }
}

If we passed our user object to this function

let cleanObj = AppUtils.cleanObject(user);

the new object will be

cleanObj = {
  'first_name' : 'Amir',
  'last_name':'Ismail'
  'age' : 25
};

ASP.Net MVC : ActionLink with bootstrap icon

2018-10-22T22:28:00.001+02:00

How many times you wanted to add an icon to your action link?!. using Html.ActionLink method is not possible to add icon as it renders the link with just HtmlAttribute you provide.

ex :

@Html.ActionLink("My Link","actionName","controllerName",new {id = Model.Id},
new {style="margin:10px", @class="btn btn-info"});

this will be rendered as shown in

if I want to add icon using bootstrap css classes, I can not use HtmlHelper methods and have to use plain html tags like this


<a href="url-here" class="btn btn-info" style="margin:10px;">

        <i class="glyphicon glyphicon-pencil"></i>

        <span>My Link</span>

    </a>

this will be rendered as

so to simplify my .cshtml file and make it easy for developers to add icon to their action links, I have created an extension method IconActionLink that will replace the previous html sinppet and give the same result.

@Html.IconActionLink("My Link", "actionName", "controllerName", null, 
new { @class = "btn btn-info" }, "glyphicon glyphicon-pencil")

the big difference and most important is the icon css class parameter .

Nuget Package : https://www.nuget.org/packages/Mirosoft.Utilities.Mvc
Source code : https://github.com/miroprocessor/Mirosoft.Utilities.Mvc

AutoComplete using customized UIHint attribute in ASP.Net MVC

2016-08-13T11:59:00.000+02:00

In one project I worked on recently, I wanted to display list of suppliers which is very very long list, it was more than 6000 items. to display such number of items in dropdown list in a page of course will affect page load time.

The best solution was using Autocomplete jQuery plugin, it is light, powerful, and covers my needs but unfortunately I need to display that suppliers list in many pages for different view models.

One of possible solutions copy/paste autocomplete code snippet in each view.This solution didn't make me satisfied and I thought of course there is better way and more elegant to do it.

One possible alternative is Editor Template, in most cases we need the Id value not the item full details. for simplicity I'm using list of programming languages as a data source.

I override UIHint attribute to pass the URL of our datasource, the URL will be used as source for autocomplete jQuery plugin.

public class AutoCompleteUIHintAttribute : UIHintAttribute
{
   private readonly UrlHelper _urlHelper = new UrlHelper(Current.Request.RequestContext);
   public AutoCompleteUIHintAttribute(string url) :
        base("AutoComplete") //Editor template name
   {        
       DataSourceUri = url;
   }   
   public AutoCompleteUIHintAttribute(string action, string controller) :
        base("AutoComplete")
   {
        DataSourceUri = _urlHelper.RouteUrl(new { action = action, controller = controller });
   }
   public AutoCompleteUIHintAttribute(string action, string controller, string area) :
        base("AutoComplete")
   {
        DataSourceUri = _urlHelper.RouteUrl(new { action = action, controller = controller, area = area });
   }
   public string DataSourceUri { get; set; }
}

In customized attribute we have three overloads of its constructor, first one accepts the full url as string. We can use it if our datasource is external or remote datasource. Second accepts action name and controller name and third accepts same values plus area name, these can be used if our datasource inside the current web application.

In our view model what we need is just decorate the LanguageId property with the AutoCompleteUIHint attribute.

 public class MyTestModel
 {
     [DisplayName("Language")]
     //Here I used constructor that accepts action name and controller name
     [AutoCompleteUIHint("datasource","home")]
     public int LanguageId { get; set; }        
 }

in view, we just use EditorFor helper method

@Html.EditorFor(m => m.LanguageId)

in controller, we have action method return languages as JsonResult

public JsonResult DataSource(string term)
{
     //_datasource is a predefined list of programming languages
     var langauges = _dataSource.Where(x => x.Name.ToLower().StartsWith(term.ToLower()));
     return Json(langauges.Select(i => new
     {
         id = i.ID,
         value = i.Name
     }// autocomplete jquery plugin accepts result in this format(id & value)
     ), JsonRequestBehavior.AllowGet);
}

Now we should write HTML version of our editor template. Add new file with name AutoComplete.cshtml to Views/Shared/EditorTemplates folder then copy following code into new file.

@using AutoCompleteUIHint.Core;
@{
    //get the full qualified name of property decorated with our attribute
    var propertyName = ViewData.TemplateInfo.GetFullHtmlFieldName("");
    //javascript doesn't work properly with ids contain dot
    var propertyId = propertyName.Replace(".", "_");
    //generate random Id in case our view contains many instances
    var textBoxId = Guid.NewGuid().ToString();
}

@functions{
    //generate text box for autocomplete feature
    private MvcHtmlString TextBox(string name)
    {
        var tagBuilder = new TagBuilder("input");
        tagBuilder.MergeAttribute("id", textBoxId);
        tagBuilder.MergeAttribute("type", "text");

        return MvcHtmlString.Create(tagBuilder.ToString());
    }
    //genarete hidden field to keep selected value(id) of selected language ID
    private MvcHtmlString Hidden(string name)
    {
        var tagBuilder = new TagBuilder("input");
        tagBuilder.MergeAttribute("type", "hidden");
        tagBuilder.MergeAttribute("id", name.Replace(".", "_"));
        tagBuilder.MergeAttribute("name", name);

        return MvcHtmlString.Create(tagBuilder.ToString());
    }

    //get url of datasource, that has been generated from Attribute constructor
    private string GetUrl()
    {
        var attribute = ViewData.ModelMetadata.ContainerType
                        // Get the property we are displaying for (LanguageId)
                        .GetProperty(ViewData.ModelMetadata.PropertyName)
                        // Get all attributes of type AutoCompleteUIHintAttribute
                        .GetCustomAttributes(typeof(AutoCompleteUIHintAttribute), false)
                        // Cast the result as AutoCompleteUIHintAttribute
                        .Select(a => a as AutoCompleteUIHintAttribute)
                        // Get the first one or null
                        .FirstOrDefault(a => a != null);

        return attribute?.DataSourceUri;
    }
}
// render text box
@Html.Raw(TextBox(textBoxId))
// render hidden field
@Html.Raw(Hidden(propertyName))

<script>
    $(function () {
        $("#@textBoxId").autocomplete({
            source: '@Url.Content(GetUrl())',// datasource url 
            minLength: 1,// type at least 1 character
            select: function (event, ui) {
                $('#@propertyId').val(ui.item.id);// set hidden field value with the id of selected language.
            }
        });
    });
</script>

when we run our application and start typing we get the following result

when select a language and click submit button, you will get selected language ID and Name

Your feedback are very welcome and you can download full code here

References

Custom DataAnnotations Attribute like UIHint

5 Tips to Improve ASP.NET Application Performance

2013-04-04T23:32:00.000+02:00

Web application is designed to handle hundreds and thousands of requests per seconds so to handle these requests effectively and successfully it is important to resolve any potential performance bottlenecks. Now we will state some tips that improve the performance of your web application.

1 - Cache Commonly used objects

You can cache commonly used objects in ASP.Net using Cache class that provides an extensive caching mechanism that storing resources and allow you to:

Define an expiration for a cached object either by specified a TimeSpan or a fixed DateTime.
Define priority for cached objects. when there is a memory lack and objects need to be freed.
Define validity for a cached object by adding dependacies
Attach callbacks to cached objects,so when an objects is removed from cache the callback is invoked.

you can add objects to cache by adding it to cache Dictionary

Cache["Mykey"] = myObject;

or using Insert method of Cache class

Cache.Insert("MyKey",myObject, Cache.NoAbsoluteExpiration, TimeSpan.FromMinutes(60), dependacies : null );

2 - Using Asynchronous Pages,Modules and Controllers
When IIS passes a request to ASP.NET, the request is queued to the thread pool and a worker thread is assigned to handle this request. the worker thread is limited so any new request will be queued to be handle after the current requests handled. If a request need to do some I/O operation like retrieving data from a database or calling web service that mean you need to reduce the request time.

You can change I/O operation in your web page by making it as Asynchronous Page. In ASP.NET you can do that by firstly marking the page as async

<%@ Page Async="true"....

then create new PageAsyncTask object and pass it the delegates for the begin, end, and timeout methods. After creating PageAsyncTask object, call the Page.RegisterAsuncTask method to start the asynchronous opertaion.

public partial class MyAsyncPage : System.Web.UI.Page
{
   private SqlConnection _sqlConnection;
   private SqlCommand _sqlCommand;
   private SqlDataReader _sqlReader;

   IAsyncResult BeginAsyncOp(Object sender, EventArgs e, AsyncCallback cb, Object state)
   {
       // this method will be executed in the original worker thread, 
       //so don't do any lengthy operation here
       _sqlcommand = CreateSqlCommand(_sqlConnection);
       return _sqlCommand.BeginExecuteReader();
   }
   void EndAsyncOp(IAsyncResult asyncResult)
   {
       _sqlReader = _sqlCommand.EndExecuteReader(asyncResult);
       // read the data and build page contents
       .............
   }
   void TimeoutAsyncOp(IAsyncResult asyncResult)
   {
       _sqlReader = _sqlCommand.EndExecuteReader(asyncResult);
       // read the data and build page contents
       .............
   }
   public override void Dispose()
   {
       if(_sqlConnection != null)
       {
           _sqlConnection.Close();
       }
   }
   protected void btnClick_Click(Object sender, EventArgs e)
   {
       PageAsyncTask task = new PageAsyncTask( new BeginEventHandler(BeginAsyncOp),
                                               new EndEventHandler(EndAsyncOp),
                                               new TimeoutEventHandler(TimeoutAsyncOp),
                                               state : null);
       RegisterAsyncTask(task); 
   }
}

There is another way to create async pages is by using completion events.

public partial class MyAsyncPage2 : System.Web.UI.Page
{
   protected void btnGetData_Click(Object sender , EventArgs e)
   {
       Services.MyService serviceProxy = new Services.MyService();
       serviceProxy.GetDataCompleted +=Services.GetDataCompletedEventHandler(GetData_Completed);
       serviceProxy.GetDataAsync();
   }
   void GetData_Completed(Object sender,Services.GetDataCompletedEventArgs e)
   {
       //Extract the result from the event args and build the page's content
   }
}

In ASP.NET MVC you can create such mechanisme by creating Asynchronous Controller. To create such contoller you need to follow these four steps:

Create a Controller class that inherits from the AsyncController type.
Implement a set of action methods for each async operation according to the following convention, where xx is the name of the action: xxAsync and xxCompleted.
In the xxAsync method, call the AsyncManager.OutstandingOperations.Increment method with the number of asynchronous operations you are about to perform.
In the code which executes during the return of the async operation, call the AsyncManager.OutstandingOperations.Decrement method to notify the operation has completed.

The following code shows you how to implement these steps:

public class MyController : AsyncController
{
   public void IndexAsync()
   {
       AsyncManager.OutStandingOperations.Increment();       
       MyService serviceProxy = new MyService();
       serviceProxy.GetDataCompleted += (sender , e) => { 
                                        AsyncManager.Parameters["result"] = e.Value;
                                        AsyncManager.OutStandingOperations.Decrement();
                                        };
       serviceProxy.GetHeadlinesAsync();
   }
   public ActionResult IndexCompleted(MyData result)
   { 
       return view("Index",new MyViewModel { TheData = result });
   }
}

3 - Turn off ASP.NET Tracing and debugging

before deploying your web application turn of tracing feature by setting it to false in web.config file

<configuration>
    <system.web>
        <trace enabled="false" />
    </system.web>
</configuration>

While development phase you need to enable debugger to debug your code by setting it to true in web.config file. Neglecting change it again to false before deploying will affect your web application performance by facing many problems:

Scripts that are downloaded using the WebResources.axd handler, by setting debug to false responses from that handler will be returned with caching headers, allowing browsers to cache the responses for future use.
Request will not timeout when debug is set to true. By setting it to false will enable ASP.NET to define timeouts for requests according to the HttpRuntime.Execution Timeout configuration settings.
JIT optimization will not be applied to the code when running with debug = true. JIT can efficiently improve the performance of your ASP.NET application without requiring you change your code.
The compilation process does not use batch compilation when using debug = true. without batch compilation an assembly will be created for each page and control causing web application to load so many of assemblies during runtime. When debug set to false batch compilation is used, generating a single assembly for the user control and a several assemblies for pages.

in case you fear to forget setting debug to false when deploying your application, you can force all ASP.NET applications in a server to ignore the debug setting by adding the following configurations in the server's machine.config file

<configuration>
    <system.web>
        <deployment retail="true" />
    </system.web>
</configuration>

4 - Disable View State
View state is used to allow ASP.NET to keep the state of the page between postbacks performed by user. View state data is stored in HTML output inside hidden field. If your page displays many controls that contains a huge data, the view state field will be big enough to affect the response time of your page. if your page just display data without need any postback so it will be better to disable the view state of the whole page by set EnableViewState to false

<%@ Page EnableViewState="false".......%>

or disable view state of some controls in your page

<Asp:GridView ID="MyGrid" runat="server" DataSource="MyDataSource" EnableViewState="false" />

if you don't want to use view state in all pages of your web application it recommended to disable view state for whole web application by setting it to false in your web.config file

<system.web>
    <pages enableViewState="false" ....../>
</system.web>

5 - Pre-Compiling ASP.NET Application
When compiling an ASP.NET application project, a single assembly is created to hold all application's code but web pages(.aspx) and user controls(.ascx) not compiled and be deployed as it is. In the first request ASP.NET dynamically compiles the web pages and user control and places the compiled files in the ASP.NET temporary files folder.
To reduce the time of first request the web application can be pre-compiled, including all code, pages, and user controls, by using the ASP.NET compilation tool (Aspnet_compiler.exe). Running this tool in production servers can reduce the delay users experience on first requests.

Open a command prompt in your production server.
Navigate to the %windir%\Microsoft.Net folder
Navigate to either the Framework or Framework64 according to the configuration of web application's application pool.
Navigate to framework version's folder.
Enter the following command to start the compilation

Aspnet_compiler.exe  -v  /FullPathOfYourWebApplication

Android : How to change progress bar color at runtime programmatically?

2012-09-06T15:49:00.000+02:00

I faced this problem while creating one of my android applications(in fact, it is my first application :) ). Lets consider we want to create an android application to calculate the commitments progress of a certain category for http://area51.stackexchange.com/ website (note we will display a progress bar with one color red or green for simplicity).

Each time we run this application it calculate the commitment percentage and display a red progress bar if it is less than 50% or green one if it equal or greater than 50%. For learning purpose we will insert the number of total required committed users and the number of committed users and calculate the progress of commitment process.

Now lets write our code. If it is your first android application you can refer to this post to know how to create an android application.

How to create the full layout of this simple application is beyond this post, we will concentrate on the progress bar. The following code snippet is the definition of a progress bar and setting its properties in the layout xml file of the main activity

<progressbar 
   android:id="@+id/myprogressbar" 
   android:layout_alignparenttop="true" 
   android:layout_centerhorizontal="true" 
   android:layout_height="wrap_content" 
   android:layout_margin="20dp" 
   android:layout_width="fill_parent" 
   android:max="100" 
   style="android: attr/progressBarStyleHorizontal;
"/>

android:max is the max value of the progress bar and we set its style with the built-in android style of horizontal progress bar.

To change the progress bar with colors you want you need to create a layer-list xml file and save it into res/drawable folder of your project. This xml file will contains the new style of the progress bar that will be attached to it at run time.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@android:id/background">
        <shape>
            <gradient
                    android:startColor="#000001"
                    android:centerColor="#0b131e"
                    android:centerY="0.75"
                    android:endColor="#0d1522"
                    android:angle="270"
            />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <gradient
                    android:startColor="#00ff00"
                    android:centerColor="#00dd00"
                    android:centerY="0.75" 
                    android:endColor="#00bb00"
                    android:angle="270"
                />
            </shape>
        </clip>
    </item>
</layer-list>

This is the new drawable of the red progress bar, you can replace values with red font with the color you want. In our example you need to create another one for green progress bar.(In the end of this post there is a link for downloading the full project of this example).

Now we prepared the required files that we need to change the progress bar color and it is time to apply this new style programmatically when the user click the calculate button.

public void Calculate(View view)
{
  if(view.getId()==R.id.btncalc)
  {
     EditText etcomusers = (EditText)findViewById(R.id.comusersnumber);
     double commiteduser =Double.parseDouble(etcomusers.getText().toString());
      
     EditText ettotcomusers = (EditText)findViewById(R.id.totalcomusersnumber);
     double totalcommiteduser =Double.parseDouble(ettotcomusers.getText().toString());
      
    int percent = (int) ((commiteduser/totalcommiteduser)*100);
      
    ProgressBar myprogressbar = (ProgressBar)findViewById(R.id.myprogressbar);
      
    Resources res = getResources();
    Rect bounds = myprogressbar.getProgressDrawable().getBounds();
      
    if(percent >= 50)
    {
     myprogressbar.setProgressDrawable(res.getDrawable(R.drawable.greenprogressbar));
    }
    else
    {
     myprogressbar.setProgressDrawable(res.getDrawable(R.drawable.redprogressbar));
    }
    myprogressbar.getProgressDrawable().setBounds(bounds);
    myprogressbar.setProgress(percent);
  }
}

first section of code for getting the entered values and calculate the committed users percentage. Before changing the progress bar color we need to get the Bounds of the current progress drawable to be applied after setting the new ProgressDrawable with new color. If comitted users percentage is greater than 50% we set the ProgressDrawable with the green one else we set it with the red then we set the Bounds and Progress of the progress bar(the length of colored bar).

You can download sample code here

ASP.Net MVC : Conditional Validation using ValidationAttribute

2012-08-05T17:21:00.001+02:00

In ASP.Net MVC we can validate each input field by decorating the corresponding property in the model class with some validation attributes like Required, MaxLength, MinLength,...etc.

Sometime we need to validate a property according to another property value for example if we have a registration form and we need the user enter his age if he is a male and age not required if the user sex is female. So if we decorated the Age property with Required attribute it will show error message even if the user is female, so we need to bypass this check with females.

Assume our registration form will contains three fields, name, sex and age, and its model will be as follows

public class RegisterationModel
{
    [Required(ErrorMessage = "*")]
    public String Name { get; set; }

    [Required(ErrorMessage = "*")]
    [Display(Name = "Gender")]
    public Sex Sex { get; set; }

    [RequiredIf("Sex", Sex.Male, "enter your age")]
    public Int32? Age { get; set; }
}
public enum Sex
{
    Female = 1,
    Male = 2
}

Note we decorated the Age property with RequiredIf attribute, that we will create and it inherits ValidationAttribute class and override IsValid method.

The RequiredIf attribute accepts three pramaters in its constructor, first parameter is the name of the property will affect the validation (Sex property), second parameter is the value of that property that make the Age is required(Male), and third parameter is the error message that will be displayed if the validation failed.

public class RequiredIfAttribute : ValidationAttribute
{
    private String PropertyName { get; set; }
    private String ErrorMessage { get; set; }
    private Object DesiredValue { get; set; }

    public RequiredIfAttribute(String propertyName, Object desiredvalue, String errormessage)
    {
        this.PropertyName = propertyName;
        this.DesiredValue = desiredvalue;
        this.ErrorMessage = errormessage;
    }

    protected override ValidationResult IsValid(object value, ValidationContext context)
    {
        Object instance = context.ObjectInstance;
        Type type = instance.GetType();
        Object proprtyvalue = type.GetProperty(PropertyName).GetValue(instance, null);
        if (proprtyvalue.ToString() == DesiredValue.ToString() && value == null)
        {
            return new ValidationResult(ErrorMessage);
        }
        return ValidationResult.Success;
    }
}

In the IsValid method we get the current instance of RegisterationModel class using ValidationContext object and get the value of the Sex property then compare it with the desire value(Male) which make the Age is required. If the current value of Sex property equal the desired value then IsValid will return new ValidationResult object with the supplied error message.

Unfortunately this technique is working in server side only. You can download sample code here

Restrict non-ajax requests using ActionMethodSelectorAttribute

2012-08-01T15:56:00.000+02:00

In ASP.Net MVC each coming request is routed to a certain action method inside some controller and with JQuery it became piece of cake to call this action method using ajax. In some scenarios we need to restrict the incoming requests to be ajax request only, fortunately ASP.Net MVC represent a new method to Request object called IsAjaxRequest() that return true if the current request come from ajax call and return false if current request is normal request(typing url in address bar of a browser, click a link to this page,..etc).

We can use that method to deny any request come from ajax call or vise versa.

public class HomeController
{
   public ActionResult Index()
   {
      if(Request.IsAjaxRequest())
      {
        //Do something
      }
      else
      {
        //Do something else
      }
   }
}

As we see if we need to make this check many times in our project, we will rewrite the same if statement for each action we need it be called via ajax only, but is there another way to do this check with elegant manner?. One of elegant ways that will save rewriting this if statement is creating a new attribute that will decorate actions to deny any request except ajax request.

To create such attribute you must override IsValidForRequest method of ActionMethodSelectorAttribute class. All what you have to do is create a new class, its name will be the name of the new attribute, and it will inherit ActionMethodSelectorAttribute class, in the overriden IsValidForRequest method you can put your logic, in our case denying non-ajax requests.

[AttributeUsage(AttributeTargets.Method, AllowMultiple = true, Inherited = true)]
    public class OnlyAjaxRequestAttribute : ActionMethodSelectorAttribute
    {
        public override Boolean IsValidForRequest(ControllerContext context, MethodInfo info)
        {
            return context.HttpContext.Request.IsAjaxRequest();
        }
    }

Now the attribute is ready for decorating the action method

public class HomeController
{
   [OnlyAjaxRequest]
   public ActionResult Index()
   {
      //Do something
   }
}

Now you can decorate any action with this attribute to deny normal request.
You can find the full source code https://github.com/miroprocessor/Mirosoft.Utilities.Mvc

How to create android application?

2012-07-02T19:45:00.001+02:00

We have already showed how to prepare your machine to develop your android application now it is the time to check if we prepared our machine successfully and we can write our first android application or not.

We will start learning developing android application by writing a simple application that will display "Hello World" sentence (the most famous example to start learning new tech). Follow the next steps to create your first android application:

Lunch Eclipse and select File > New > Project you will find a list of available projects templates select android project template then click next, you will see window like this

Application Name : the name of your applications that will be appear on application list of your device(mobile or tablet)
Project Name : the name that will be appear in your eclipse work-space.
Packaeg Name : it will be used as identifier for your application and must be unique across all applications.
Build SDK : specify which sdk version you will target.
Minimum required SDK : specify min sdk version required for running your application.
In configure launcher icon window, configure the launcher icon of your application or use the default configuration then click next.
In Create Activity window check Create Activity chekbox and select BlankActivity and click next.
In New Blank Activity window, specify the activity name, layout name, and title. this window will appear with default values, for now we will use these default values. Click finish button to create your android project.
In Package explorer you will find your HelloAndroid project, expand src folder and open MainActivity.java file replace the code inside MainActivity class with the following code
```
@Override
public void onCreate(Bundle savedInstanceState)
{
  super.onCreate(savedInstanceState);
  TextView tv = new TextView(this);
  tv.setText("Hello World!");
  setContentView(tv);
}
```
if import android.widget.TextView; statement doesn't exist, add it.

Now we have finished creating our first android application that will display "Hello, world". To run this application we need to create launch configuration and we need also a virtual device on which to run it instead of lunching it on real android device. Follow the following steps :

select Run > Run configuration, in run configuration window double click Android Application in left pane and rename the configuration HelloAndroidConfig, click browse and select HelloAndroid project and leave Launch Default Activity selected.
Click Apply and then Run. Now Eclipse is ready for running your application but you did not create the virtual device yet so it will fire error message "No compatible targets were found. Do you wish to a add new Android Virtual Device?" click yes.
In Android Virtual Device Manager window click new to create one. In Create new Android virtual Device window, name it HelloAndroid2.3.3 and in target field select Android 2.3.3 - API Level 10, in SD Card select size and type 10 (10 MB) and leave the remaining fields with its default values.
Click Create AVD. it will be displayed in Android Virtual device Manager window. close it by click X in the upper right corner.
Select Run > Run to run your application, eclipse will start the virtual device (emulator) with your first android application.

Previous steps are the main steps to create any android application, you can take this post as a reference for creating android application, configuring your launch configuration and to create android virtual device(emulator) in the future.

In the next posts we will explore in details what does code we added in this post mean and know more about android framework.

Fundamental components of android application

2012-06-21T16:22:00.000+02:00

This post is a one of some posts about android platform I will write to explore this platform and learn you(and me) developing android applications for mobiles and tablets devices. You don't have to own android mobile to create android application, what is you really need is a tool (Emulator) to test and debug your application.

You can refer to this post where I showed how to prepare your machine to be able to create your android application. That post was written before releasing Ice Cream Sandwich version (android 4.x) but it does not matter, just you should download the latest version of all tools you have to install.

My reference for writing these posts is Pro Android 4 book.

In this post we will explore the key components of android framework which we must understand before delving into coding process.

View:
views are user interface(UI) elements such as buttons, labels, text fields, or any other UI element. Views also can contain other views. Anything you see is a view.

Activity:
Any android application contains at least one activity, each activity represent one screen in you application. An activity is a thing that helps user to do one thing (view, create, or editing data). An activity contains one or more views and also sometimes does not contain any view.

Fragment:
Fragments are like sub-activity and an activity can display one or more fragments on the screen at the same time. We use fragments when there are many functionality in one activity.

Intent:
It defines an intention to do something like starting a service, lunching an activity, or dial a phone number..etc. Intents also used by the system to notify your application of specific events. It can be explicit or implicit and you can provide specific information about what should handle the intention. Intents loosely couple the action and action handler.

Content Provider:
It is a standard mechanism for sharing data among mobile application on a device without exposing the underlying storage, structure and implementation. By using content providers you can make your application use data from other applications.

Service:
It is a background process that can run for long time. There are two types of services in android

Local service: that is only accessible by the application host it.
Remote service: the service that is accessed remotely by other applications on the same device(mobile or tablet).

AndroidManifest.xml:

like web.xml in J2EE and like web.config in ASP.Net, it defines the contents and behavior of your application. It lists all activities, services, permission, features of your application.

Android Virtual Device(ADV):

it allows developers to test their application without need to android device. it can be created in various configuration to emulate different types of real devices.

In the next posts we will cover these components in more details.

Load partial page in jquery and ASP.Net MVC

2012-05-24T16:30:00.000+02:00

In this post I will show you how much ASP.Net MVC and JQuery are making up a dangerous duet and how you can do big tasks in simple way with little efforts. We can take a look at a live example of what we will do in this post. In stackoverflow website specially users page and tags page you will find a text box to search users/tags. the page is loaded with some users info sorted with default setting. if you start to write something in that text box, the users collection will be filtered by the name you entered in ajax manner and ordered alphabetically(ascending).

The issue here is how using the same piece of code that produce the whole page when it be loaded in first time to filter the users when you type some letters in the text box and update just the part that display the users data. Here the magic of ASP.Net MVC and JQuery come to the scene.

Lets start to build our page first then start to filter our users collection. I will not show you how to create new ASP.Net MVC project this is beyond of scope of this post. I will concentrate on the pieces of code that serve the purpose of this post.

In the HomeController class we will add Index() method that will display all users into a view but we will add an optional string parameter called name that I will use to filter users collection.

public class HomeController
{
   public ActionResult Index(String name = "")
   {
      List<user> users = GetUsers()
                           .Where(u => u.Name.ToLower().StartWith(name.ToLower()) 
                                    || String.IsNullOrEmpty(search)).ToList();
      return view(users);
   }
}

Note, in Where method we select users who their name starts with the value of name variable or select all users if name variable is empty string and return the result into strongly typed view like this

@model List<user>
.
.
.
<body>
<center>
    <div>
        Find :
        <input type="text" name="search" id="search" />
    </div>
    </center>
    <br />
    <div id="usersdiv">
        <table align="center" width="30%" cellspacing="0">
            <tr>
                <td style="border-bottom: 1px solid #000">
                    ID
                </td>
                <td style="border-bottom: 1px solid #000">
                    Name
                </td>
                <td style="border-bottom: 1px solid #000">
                    Age
                </td>
            </tr>
            @foreach (var user in Model)
            {
                <tr>
                    <td style="border-bottom: 1px solid #000">@user.ID
                    </td>
                    <td style="border-bottom: 1px solid #000">@user.Name
                    </td>
                    <td style="border-bottom: 1px solid #000">@user.Age
                    </td>
                </tr>
            }
        </table>
    </div>
</body>

Till now we just display all users into a view that contains an extra textbox for filtering users. Now we will start to add the required scripts that will actually do filter by an ajax call to the Index method, the method that has been called when page loaded. in the head tag of our view we will add the following scripts

<script src="@Url.Content("https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
         $('#search').keyup(function () {
             $('#usersdiv').load('/home?name=' + $(this).val());
         });
    });
</script>

First we load jquery library itself then we declare the script that will run after loading all DOM objects of the page. We attach keyup event to the textbox to filter the users list each time we type something into textbox. load function is a jquery function that load data from the server and place the returned HTML into the matched element(using ajax call). Notice the argument that load function accept, it the url of the current page with query string(name). We set the query string paramter to the value of the textbox, that is the reason we attached keyup event not another event, keypress event for example, to get the last value of the textbox.

If we run this code as it is, that means we will load the whole html of our view into the div element with id usersdiv. But what we need is to update just the part that displays the users list. Here the magic of jquery come, we can select certain part of returned html by appending a selector to the url parameter as follows

$('#usersdiv').load('/home?name=' + $(this).val() + ' #usersdiv');

Of course you can use any valid jquery selector
Now we can filter the users list using jquery without writting any extra piece of code in server side and without reloading the whole page.
Thanks for the awesome duet, ASP.Net MVC and JQuery.

you can download the full source code here

Generic CheckBoxList in ASP.Net MVC

2012-04-26T17:52:00.001+02:00

In ASP.Net web forms you can easily create a list of check boxes and bind it into a data collection using CheckBoxList control and specify which property will be the text of each check box and which one will be the value of the check box. You even don't need to write it, you can drag it from tools window, drop it into your page and set its properties and style with wizards that Visual studio provide.

But in ASP.Net MVC there is no any server controls like that exists in web forms, all what we have is a helper methods to create HTML tags. In ASP.Net MVC we have two helpers methods for creating a check box, Html.CheckBox and Html.CheckBoxFor that will be rendered as just one check box. If we want to create many check boxes or check boxes list we can call it inside a loop as follows

@foreach (var item in MyCollection)
{
   @Html.CheckBox("checkBoxName", new {value=item.checkBoxValue })@item.CheckBoxText<br />
}

Here is a generic extension method for create a check boxes list in an elegant manner.

public static MvcHtmlString CheckBoxList<T>(this HtmlHelper helper,
                                               String name,
                                               IEnumerable<T> items,
                                               String textField,
                                               String valueField,
                                               IEnumerable<T> selectedItems=null)
{
  Type itemstype = typeof(T);
  PropertyInfo textfieldInfo = itemstype.GetProperty(textField,typeof(String));
  PropertyInfo valuefieldInfo = itemstype.GetProperty(valueField);

  TagBuilder tag;
  StringBuilder checklist = new StringBuilder();
  foreach(var item in items)
  {
      tag = new TagBuilder("input");
      tag.Attributes["type"] = "checkbox";
      tag.Attributes["value"] = valuefieldInfo.GetValue(item,null).ToString();
      tag.Attributes["name"] = name;
      if (selectedItems != null && selectedItems.Contains(item))
      {
          tag.Attributes["checked"] = "checked";
      }
      tag.InnerHtml = textfieldInfo.GetValue(item,null).ToString();
      checklist.Append(tag.ToString());
      checklist.Append("<br />");
  }
  return MvcHtmlString.Create(checklist.ToString());
}

In the first three lines we get the type of the data collection then get the property info of text field and value field that will be used to create each check box. We enumerate over the input data collection and use TagBuilder class to create input tag and set its attributes like type,name, and value. We check the selectedItems collection to set checked attribute of our check box.
Say we have a list of users that we display it as checkboxlist to select some users, we can use our helper method as follows

@Html.CheckBoxList("SelectedUsers", AllUsersList, "Name", "ID")

To get the values of checked users we have two scenarios:

Strongly typed model scenario:
The model must have property with the same name that we provided to our helper method.
```
class MyModel
{
   //Note you can define it as array of strings, dates or any primitive data type 
   //according to the type of the property of value field.
   Public Int32[] SelectedUsers{get; set;}
}
```
when we post the view, the model binder will bind the values of selected check boxes into the property with the same name.
Not Strongly typed model scenario:
In this case, our action method that will handle our request(decorated by HttpPost attribute) should be defined to accept a FormCollection parameter that will contain key with the same name we provided to our helper method
```
[HttpPost]
public ActionResult ActionMethodName(FormCollection myForm)
{
  String selectedusers = myForm["SelectedUsers"];
  //Note this will return the selected users ids as comma separated string.
}
```

You can download sample code here

Generic Lambda Expression to sort collections of different types

2012-04-18T14:47:00.001+02:00

Suppose you have many collections with different types that you want to sort, of course you can do it by OrderBy or OrderByDescending extension methods but you have to specify the order criteria every time you call these methods. If the order criteria is determined in runtime, then you have to build a separate function to each order criteria of each type. To clear what I want to tell you suppose you have two classes, Employee and Department.

public class Employee
{
    public String Name { get; set; }
    public Int32 Age { get; set; }
    public DateTime HiringDate { get; set; }
}

public class Department
{
    public String DepartmentName { get; set; }
    public String Code { get; set; }
}

And you want to order the employee collection by one of its properties (Name,Age,or HiringDate) and order department collection by one of its properties.

OrderBy and OrderByDescending methods need Func<TSource,TKey> as selector to compare the collection items and order them. So the issue here is, How do you create a generic Func<TSource,TKey> to be passed to OrderBy or OrderByDescending methods? The answer is, by using Expression.Lambda method.

We will create a generic method with one string argument which will be the name of the property that we will order by and the return will be Lambda expression will be passed to OrderBy or OrderByDescending.

public Func<T, Object> GetExpression<T>(String sortby)
{
    var param = Expression.Parameter(typeof(T));
    var sortExpression = Expression.Lambda<Func<T, Object>>(Expression.Convert(Expression.Property(param, sortby), typeof(Object)), param);
    return sortExpression.Compile();
}

The GetExpression method do the following:

Create ParameterExpression object by calling Expression.Parameter method which accepts the type of the collection we want to sort.
Create the Lambda expression tree.
Compile the lambda expression by calling Expression.Compile method and return a delegate that represent the lambda expression.

To test GetExpression method we can call OrderBy extension method of Employee collection or Department collection as follows

employees.OrderBy(GetExpression("Age"));
departments.OrderBy(GetExpression("Code"));

First line will order employees by according to their ages and the second line will order departments by its codes.

you can download the full source code here

How to fire RowCommand event of nested GridView?

2012-04-04T17:24:00.001+02:00

In ASP.Net you can use a Repeater or GridView controls to simply display any data collection came from any data source(database,XML file,...etc). Sometimes each item of that collection has a property that is another collection and to display it you will use another Repeater or another GridView(nested Repeater or nested GridView).

To edit, delete or to execute a command on any GridView row you use OnRowCommand event to handle it, but what about the commands on the child(nested) GridView rows. In case of nested Repeater you can set the OnItemCommand event of the child Repeater. You can find many articles explain how to do that. The problem which my friend faced is handling the OnRowCommand event of nested GridView. We googled it but we didn't find a lot of article that explain how to handle it, so I write this post to help any one facing the same issue.

Assume we have a set of Inventories, each Inventory have a set of products. To display All inventories with all products of each one, we will use a GridView for inventories main properties and a nest GridView to list the products of each inventory.

class Inventory
{
    public String Name { get; set; }
    public Int32 Id { get; set; }
    public List<Product> Products { get; set; }
}
class Product
{
    public String Name { get; set; }
    public Int32 Id { get; set; }
    public Int32 Quantity { get; set; }
}

The following image shows our GridView. Note the third column lists the products of an inventory, the forth column in the products grid is button to delete the corresponding product. This is the command that we want to execute.

We will bind the GridView of products inside the OnRowDataBound event of the parent GridView.

protected void inventoriesGrid_RowDataBound(Object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        GridView productsGrid = e.Row.FindControl("productsGrid") as GridView;
        productsGrid.DataSource = (e.Row.DataItem as Inventory).Products;
        productsGrid.DataBind();
        //productsGrid.RowCommand += new GridViewCommandEventHandler(productsGrid_RowCommand);
    }
}

In this event we do the following for each row of inventories GridView

Check the RowType, it must be DataRow.
Finding the child GridView by its ID property.
Set the DataSource property of products GridView to the product list of current inventory.
Call DataBind method of products GridView.

If you uncommented the commented line, that will wire the RowCommand event of products GridView to productsGrid_RowCommand event but when you will run your code this event will never be fired. Why???. To answer this question we have two scenarios :

If you bind the parent GridView every time you load the page, so you re-fire its RowDataBound event every time and re-wire the RowCommand of child GridView again and again. That changes the view state of the child GridView and its RowCommand will not be fired( in PostBack ASP.Net read the old view state which is changed while binding the parent grid).
If you bind the parent grid in first time you request the page(the current request is not a post back) so the RowDataBound will not fired while post back. You think that will solve the problem, No that will not solve it because the RowCreated event of parent GridView be fired every request even if it is postback. That means you need to re-wire the RowCommand of child GridView again.

The best place to wire the RowCommand of child GridView is to write this code inside the RowCreated event of parent GridView because this event be fired after the Page_Load and before handling post back event. This guarantee the RowCommand of child GridView is wired to the same event before handling it.

Again you need to find the child GridView by its ID property but this time inside the RowCreated event of the parent GridView.

protected void inventoriesGrid_RowCreated(Object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        productsGrid = e.Row.FindControl("productsGrid") as GridView;
        productsGrid.RowCommand += new GridViewCommandEventHandler(productsGrid_RowCommand);
    }
}

The RowCommand event of child GridView (products) its self

protected void productsGrid_RowCommand(Object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName == "deleteitem")
    {
        //Do whatever you want
    }
}

you can download the full source code here

Safe ASP.Net MVC application against cross site attacks - 2

2012-03-26T19:26:00.000+02:00

Session Hijacking:
ASP.Net identifies users by session ID cookie which called ASP.Net_SessionId by default, and if we use Forms Authentication, then a second cookie is used called .ASPXAUTH. If an attacker can obtain these cookies, then they can include them in a request to our server and impersonate one of our users. The browser by default preventing the javascript from a site to access cookies of another site. But if the attacker has been able to inject a script into one of our pages, then the browser believes that the script is part of our application and grands access to the session cookies.

We can protect our site by keeping a record of each client IP address when a session starts, we can deny any requests that originate from a different IP. But you should avoid this technique when you deal with the public internet.

We can mark a cookie with the HttpOnly flag, and the browser will hide its existence from javascript but will continue to send it via all HTTP requests. By default ASP.Net marks ASP.Net_SessionId and .ASPXAUTH as HttpOnly. Of course you can apply HttpOnly to your session cookies when you create them.

Cross-Site Request Forgery (CSRF):
Unfortunately, anyone can mount a devastating attack by enticing our users to visit an HTML page which is hosted in external domain. When the exploit page loads, it simply sends a valid form submissions to our post-handling action method. The exploit can easily hide its actions, for example by submitting the POST request using Ajax.

There are two main strategies to defend against CSRF attacks:

Validate the incoming HTTP Referrer header: If we check it and find it referencing an unexpected third-party domain, we know that it's a cross site attack.
Require some user-specific token to be included in sensitive requests.

A better option is to have our server generate a secrete user-specific token, put it in hidden field and then check that the token is present and correct when the form is submitted. Fortunately, MVC Framework has a ready made implementation for this technique.

You can detect and deny CSRF attacks by combining Html.AntiForgeryToken() helper and its ValidateAntiForgeryToken filter that decorate the target action method. Html.AntiForgeryToken() will render a hidden field with name __RequestVerificationToken and in the same time it will give the user a cookie whose name begins with __RequestVerificationToken. This cookie will contain the same random value as the corresponding hidden field. This value remains constant throughout the the visitor's browsing session. We must validate incoming form submissions by decorating the target action method with ValidateAntiForgeryToken attribute. If the values of incoming hidden field does not match the value of the cookie, The MVC Framework will throw an exception and block the request.

The MVC anti-forgery system has the following features too:

The cookie name has a suffix that varies according to the name of your application's virtual directory.
Html.AntiForgeyToken() accepts optional path and domain parameters that controls which URLs are allowed to see the cookie.
The __RequestVerificationToken hidden field value will also contain the user name of logged user obtained from HttpContext.User.Identity.Name (if user logged in). ValidateAntiForgeryToken attribute will match the random value and also will match the logged user name.

The MVC anti-forgery system has a few limitation:

Legitimate users' browsers must accept cookies, or ValidateAntiForgeryToken attribute always throw an exception an block the request.
It works only with forms submitted as POST requests not GET requests. That should not cause any problem because GET request must not change any data, just read.
If you have any weak point in your application, XSS attackers can use it to get the random token generated by Html.AntiForgeyToken().

Build your MVC application securely:

Don't write any public method inside a controller class that will not be an action method. By default any public method is an action method, other methods should be wrote in model section. If you have to write a method that will not be an action, make sure it will be private or make it public but you must decorate it with NonAction attribute.
Prevent Model Binding to change sensitive data by using Bind attribute to set up white/black list that restrict which properties model binding is allowed/not allowed to populate.

1 2

Safe ASP.Net MVC application against cross site attacks - 1

2012-03-26T16:27:00.000+02:00

Do you trust user input?!!!!!!!. If your answer is YES, stop reading and do something else. If your answer is NO, I think reading this article may help you to make your site more secure. All user's inputs can be a back door for attacker to attack your site. User's inputs that we will categorize as un-trusted inputs are :

Incoming URLs including Request.QueryString[] values
Form post data (Request.Form[] values including values from hidden fields and disabled fields)
Cookies
Data in HTTP Headers (such as Request.UserAgent and Request.UrlReferrer).

Your site could be attacked by altring the query string, form values, or cookies data. The solution is not to prevent request manipulation but to check that each request is a legal request for the logged-in visitor.

Cross-Site Scripting and HTML Injection:
If an attacker can get our site to return some javascript to our visitors, then the attacker's script can take control of our visitors' browsing session and by this the attackers can collect the personal information(passwords, credit card details) of our visitors. There are two main ways an attacker follow to get this:

Persistently: by entering formed malicious input into some feature and hoping we will store it into our database and then issue it back to other visitors.
Non-persistently or Passively : by finding a way of sending malicious data in a request to our application and having our application echo that data back in it is response. The attacker then finds a way to trick a victim into making such a request.

Razor HTML Encoding:
The Razor view engine helps protect us against XSS attacks by encoding any data that we refer to using the @ tag to make it safe to display as HTML. This means when we request an URL with a javascript code as a query string, Razor processes the query string value and replaces the special characters and rendering javascript code as a simple text.

Razor view engine treats the contents of MvcHtmlString objects as if they were encoded, even when that is not the case. We can use Html.Raw helper method to include our HTML into the web page without it being encoded.

Request Validation:
The goal of request validation is to stop potentially dangerous data ever reaching the application. If the user tries to submit data that looks like it might be HTML, Then ASP.Net throws an exception.This happens before the request is passed to the MVC Framework, so our application never receives the data the user has sent. But The problem with Request Validation is that it rejects any data even slightly resembling an HTML tag, and this can include valid data.

In ASP.Net MVC Framework, request validation is enabled by default. You can disable it by decorate your controller/action method by ValidateInput attribute and passing false to it. If you decorate the controller with it, that means you enabled/disabled request validation for all action methods within this controller(of course not recommended). If you decorate the action method by that attribute, that means you enabled/disabled request validation for all posted data/model properties. Also you can disable request validation for a specific property by decorate it with AllowHtml attribute.

JavaScript String Encoding and XSS:
So what if we want to accept javascript code from the user, i.e post a question on stackoverflow. of course we don't want to refuse it or disable request validation totally. Fortunately, the Ajax helper class has method called JavaScriptStringEncode, which encodes a string so that it safe to display and escapes characters so that JavaScript will understand it. In such case we have to use Html.Raw method around the result generated by the Ajax helper method. If we don't do this, then Razor HTML encodes the result, and we are back where we started.

1 2

5 tips to get started LINQ in C#

2012-03-18T16:27:00.000+02:00

1-LINQ is not just for Iteration :

LINQ (Language integrated Query) is not just for queries a collection of objects, but it will be better if you think about it as a data iteration engine. If you called a method that return data of some type that you needed to convert to another datatype before passing it to another method. Assume you have a method A() that return Array of integers and you need to pass this array to method B() that accepts array of string. You should iterate over array items, one by one, to convert it.But with with LINQ you can do that with just one line of code.

Int32[] nums = {23 , 45 , 65 , 23};
String[] numbers = nums.Select(i => i.ToString()).ToArray();

2-Use the var keyword:

If you are confused about the type of the sequence result of your query and want to get your code to compile use var keyword. Your query will return an IEnumerable sequance of some type but you don't know exactly what is that type so the best choice is using var keyword.

3-Use the Cast or OfType operators for legacy code:

Before introducing Generics collections which enforce the collection to contain items have the same type. The legacy code used ArrayLists which need to explicit cast each item to deal with. We can cast these old collections to be queried by LINQ by using Cast operator or OfType operator.

Cast operator requires all items in the collection to be of the correct type. If any item is unable to be cast to the specified datatype, an exception will be thrown.

ArrayList arrayList = new ArrayList();
arrayList.Add("Item 1");
arrayList.Add("Item 2");
arrayList.Add("Item 3");

IEnumerable<string> items = arrayList.Cast<string>().Where(n => n.Length == 6);

OfType operator will only items with the specified type will be stored in the output IEnumerable<T> sequence and no exception will be thrown.

IEnumerable<string> items = arrayList.OfType<string>().Where(n => n.Length == 6);

4-Don't assume a query is Bug-Free:

In LINQ the query is being called, declared, or defined but not performed. The query actually will take place the first time a result from it is used. in many cases you face a bug in a code that uses the query result and you assume the bug is in that block of code not in the query itself or its result. No the case is your query result causes the bug and you should check the query result first to fix it.

5-Take advantage of Deferred queries:

As we mentioned in tip #4, the query will not performed till you use its result so you can make a query initialization method that get gets called once for the lifetime of the scope and to construct all the queries there. Then you could enumuerate over a particular sequence to get the latest version of the query results as well

Design Patterns Series 21 - How to create your own pattern?

2012-02-26T12:59:00.001+02:00

By this post we finish our design pattern series. This post gives you a guide for how to build your own pattern in ten easy steps. Just follow along, and you are on the route to fame and fortune.

If you don't see an established design pattern where you think there should be one?. You can create your own design pattern, and you can publicize that pattern, getting it into design pattern repositories around the world.

Remember, design patterns are supposed to make solutions easier. Don't create a design pattern just for the sake of creating a new pattern if it's not going to be helpful. After all, patterns are supposed to be tools, not hindrances.

Pattern Catalog Style :

The best way to start anything is with a guide of some kind, and for design patterns, that guide is the Pattern Catalog Style. There are ten sections in a pattern catalog style :

Intent
Motivation
Applicability
Structure
Participants
Collaborations
Consequences
Implementation/Sample Code
Known Uses
Related Patterns

In the Gang Of Four, each of the 23 patterns is written in a catalog style, with each of these ten topics carefully covered for each pattern in the Gang Of Four book.

1- Intent
The Intent design pattern catalog entry describes the pattern and what it is supposed to do. This is a short overview of the pattern that someone is supposed to be able to read and understand to know if the pattern solves her problem.

When you write the intent of a pattern, keep it simple, even if it means not including every little detail. This is an overview of your patten, sort of like the descriptions in TV guide, that lets readers know if they are going to interested in your pattern.

2- Motivation
The motivation section of design pattern catalog entry lists a scenario that describes the problem the pattern is supposed to solve, using a concrete scenario.

3- Applicability
The applicability section of pattern's catalog entry describes scenarios where a pattern can be applied. You usually provide a set of condition - and if a problem meets those conditions, your pattern is a good candidate to solve it.

4- Structure
The structure section usually shows a diagram indicating how the pattern works.

5- Participants
The participants section lists the classes and objects that take part in the pattern,as well as their roles. To create the objects, for instance, you might want to make sure they all use the same methods - so you should have an interface. And you should list the classes that implement that interface, as well as the client code that attempts to use them.

6- Collaborations
The collaboration section entry indicates how the participants work together.

7- Consequences
The consequences section lists both the good and the bad effects of the pattern. Your pattern, being the most advanced and excellent one the world has yet seen, may not have any apparent drawbacks, but think hard on this point - it would not be good if you steered someone into using your pattern if that pattern's going to cause him problems.

8- Implementation/Sample Code
The Implementation/Sample Code section outlines the techniques you use when implementing this pattern and/or sample code.

9- Known Uses
The Known Uses section gives some real-world examples where the pattern has been used.

10- Related Patterns
The related patterns sections lists other patterns that might be related to this one.

Congratulations - you have created your own new pattern. All you have got to do now is to submit your own pattern catalog entry to a design pattern repository such as the Portland Pattern Repository, as hosted by Cunningham & Cunningham at http://www.c2.com

Design Patterns Series 20 - Double Buffer, Recycle Bin, and MVC Patterns

2012-02-21T11:24:00.001+02:00

In this post we will explore the last three patterns in our design patterns list, Double Buffer Pattern, Recycle Bin Pattern, and Model/View/Controller (MVC) Pattern.

Double Buffer Pattern :

Double Buffering is used to avoid screen flicker when you are displaying graphics. The idea is that you perfrom your multi-step graphics creation off-screen in a buffer and then flash the results on the screen when they're complete. The process is called Double Buffering because the screen display buffer is one buffer and the buffer in which the images are prepared is the second buffer.

Use a Double Buffer when generating revised datasets for an asynchronous processor. When the new data is complete and self consistent, redirect the asynchronous processor to the alternate buffer.

Recycle Bin Pattern :

If your code uses many objects and the object-creation process is time - and resource - intensive, you might want to use the Recycle Bin Pattern. The idea is that when you're done with an object, you toss it into the recycle bin, and when you need an object of the same kind again, you can grab it out of the recycle bin.

You can store freed resources in a local bin so that subsequent requests for these resources can reuse the ones in the bin. A client requests resources through the bin. The bin will reuse an existing one if available or create a new one if necessary. The recycle bin may request more resource than actually needed to optimize performance. When the use of the resource is complete, it should be returned to the bin.

Model/View/Controller (MVC) :

The Model/View/Controller, or MVC, represents a good design insight : separating the code used for presentation from that which works on and handles data.

Model : Implements the data crunching of the application. This is the core code that does the application's internal work. The Model does not know anything about the view or the controller - you just pass it data and it goes from there, returning its result.
View : Implements the presentation layer that interacts with the user. When the user starts interacting with an online application, the web page(s) they see are part of view. TheView also takes data supplied to it (usually from the controller) and displays it.
Controller : Acts as the boss of the application and it is responsible for routing data to the right model and view components. The Controller oversees the model and the view by reacting to the data the user sends.

The MVC Pattern is "A tried of three modules linked by Observer Pattern , all residing within RepresentationLayer. The View drives a presentation within GUILayer, and elements within the View observe the Model. Elements within the Controller observe the View and the Model, and elements within the Model observe the Controller. The Model fronts data objects within the LogicLayer. This pattern decouples changes to how data are manipulated from how they are displayed or stored, while unifying the code in each component."

Now we explored most famous design patterns and in the next and last post in this series we will know how to create our own design pattern.

Design Patterns Series 19 - Circular Buffer Pattern

2012-02-14T12:41:00.001+02:00

Circular Buffer Pattern :

Circular Buffer is perfect when one part of your code stores data and another part reads that data asynchronously. Makes very efficient use of memory.

A Circular Buffer is a memory allocation scheme where memory is reused when an index, incremented modulo the buffer size, writes over a previously used location. A Circular Buffer makes bounded queue when separate indices are used for inserting and removing data. The queue can be safely shared between threads (or processors) without further synchronization so long as one processor en-queues data and the other de-queues it.

You store data items in the various locations in a ring buffer and keep track of reading and writing operations by labeling one location the Head and one the Tail.

When you store an item in the Circular Buffer you store the item at the tail location, and the tail advances to the next location.

When you read an item, you read the item at the current head location, and the head advances to the next position.

By writing to the tail and reading from the head, two streams can store and read data from the same circular buffer at the same time. The following code sets up an array holding the number of items you pass to the constructor.

public class CircularBuffer
{
    private String[] Buffer { get; set; }
    private Int32 Head { get; set; }
    private Int32 Tail { get; set; }

    public CircularBuffer(Int32 itemsCount)
    {
        Buffer = new String[itemsCount];
        Head = 0;
        Tail = 0;
    }
    .
    .
    .
}

The Store() method stores an item and advances the tail.

public Boolean Store(String data)
{
    if (!BufferIsFull)
    {
        Buffer[Tail] = data;
        Tail++;
        if (Tail == Buffer.Length)
        {
            Tail = 0;
        }
        return true;
    }
    return false;
}
private Boolean BufferIsFull
{
    get
    {
        if (Tail + 1 == Head)
        {
            return true;
        }
        if ((Tail == Buffer.Length - 1) && Head == 0)
        {
            return true;
        }
        return false;
    }
}

And the Read() method reads the item at the head location, and advances the head.

public String Read()
{
    if (Head != Tail)
    {
        String data = Buffer[Head];
        Head++;
        if (Head == Buffer.Length)
        {
            Head = 0;
        }
        return data;
    }
    return String.Empty;
}

Now you implemented the Circular Buffer and to test it you just want to create an instance of CircularBuffer class and call Store() and Read() methods many times in random order.

var buffer = new CircularBuffer(5);
Console.WriteLine("Stroing : Item0");
buffer.Store("Item0");
Console.WriteLine("Reading : {0}", buffer.Read());
Console.WriteLine("Stroing : Item1");
buffer.Store("Item1");
Console.WriteLine("Stroing : Item2");
buffer.Store("Item2");
Console.WriteLine("Reading : {0}", buffer.Read());
Console.WriteLine("Stroing : Item3");
buffer.Store("Item3");
Console.WriteLine("Reading : {0}", buffer.Read());
Console.WriteLine("Stroing : Item4");
buffer.Store("Item4");
Console.WriteLine("Reading : {0}", buffer.Read());
Console.WriteLine("Reading : {0}", buffer.Read());
Console.WriteLine("Stroing : Item5");
buffer.Store("Item5");
Console.WriteLine("Stroing : Item6");
buffer.Store("Item6");
Console.WriteLine("Reading : {0}", buffer.Read());
Console.WriteLine("Reading : {0}", buffer.Read());

Note we passed 5 as an argument of the constructor and stored 7 items that means we stored two items more than the capacity of our buffer but actually we overwrote the first two items. So the out put will become:

Stroing : Item0
Reading : Item0
Stroing : Item1
Stroing : Item2
Reading : Item1
Stroing : Item3
Reading : Item2
Stroing : Item4
Reading : Item3
Reading : Item4
Stroing : Item5
Stroing : Item6
Reading : Item5
Reading : Item6

you can download the full source code here

Design Patterns Series 18 - More Design Patterns

2012-02-08T14:42:00.001+02:00

This Post will discover more than one design pattern. They are all good patterns, but some are not used these days. And some are just plain hard to implement, like the Interpreter Pattern.

Abstract Factory Pattern :

The Abstract Factory Pattern describes a factory of factories, or, more properly thought of, an abstract specification for an actual object factory. Here's the problem: sometimes you might need more than one factory to create objects of a similar nature.

An Abstract Factory is usually implemented as an abstract class that real, concrete factories extend. That unifies what the concrete factories do, while allowing leeway to fit differing requirements.

The Abstract Factory Pattern should "provide an interface for creating families of related or dependent objects without specifying their concrete classes."

Prototype Pattern :

The Prototype Pattern says that when it takes a lot of resources, or a lot of code, to create an object, you should consider simply copying an existing object and customizing it instead.

In code, all you have to do is set up a prototypical object and keep calling the Clone method on it - no need to create your object from scratch in your code every time - and then add some customization to the new object as needed.

The Prototype Pattern should "Specify the kinds of objects to create using a prototypical instance, and create new objects by copying this prototype."

Bridge Pattern :

The inspiration here is that when you have an abstraction that can vary, and that's tied to an implementation that can also vary, you should decouple the two.

The Bridge Pattern should "Decouple an abstraction from its implementation so that the two can vary independently ." Interpreter Pattern :

This is heavy-duty pattern. It is all about putting together your own programming language, or handling an existing one, by creating an interpreter for that language.

To use this pattern, you have to know a fair bit about formal grammars to put together a language. As you can imagine, this is one of those patterns that doesn't see a lot of everyday use because creating your own language is not something many people do.

The Interpreter Pattern should "Given a language, define a representation for its grammar along with an interpreter that uses the representation to interpret sentences in the language."

Momento Pattern :

Here is the problem. The client code has total access to the database, so if someone flubs an operation, the database is in danger.

The Memento Pattern is designed to "Without violating encapsulation, capture and externalize an object's internal state so that the object can be restored to this state later."

More than just a save-state undo command, the idea here is to "capture and externalize an object's internal state" for backup. You might do that with a save-state object accessible from both the client code and the database.

The solution, however violates the database's encapsulation, and the Memento Design Pattern starts off by saying, "without violating encapsulation...". So What do you do? You make the save-state object private to the database.

Visitor Pattern :

With the Visitor Pattern , you can add a new operation to a structure of objects, like a Composite structure, without changing the objects in the structure. A visitor object moves from object to object in the structure, visiting each one and capturing its state. When the visitor has captured all the data it needs from the objects in the structure it's visiting, you can call the methods of the visitor.

The Visitor Pattern should "Represent an operation to be preformed on the elements of an object structure. Visitor lets you define a new operation without changing the classes of the elements on which it operates."

In practice, you usually use a traverser object of some kind that can move around the object structure whose data you want, feeding data to the Visitor object. The Traverser moves the Visitor object from item to item in the Composite.

Design Patterns Series 17 - Mediator Pattern

2012-02-01T15:51:00.000+02:00

The Mediator Pattern :

The Mediator Pattern supports coordination between objects. it makes the coupling looser by having all objects report state changes to the mediator and take commands from the mediator.

When you use a mediator, you are encapsulating the interaction between objects. Each object no longer has to know in detail how to interact with the other objects. The coupling between objects goes from tight and brittle to loose and agile.

You can use the Mediator Pattern to "define an object that encapsulate how a set of objects interact. Mediator promotes loose coupling by keeping objects from referring to each other explicitly, and it lets you vary their interaction independently."

The Mediator Pattern should your first choice as a possible solution any time you have a set of objects that are tightly coupled. If every one of a series of objects has to know the internal details of the other objects, and maintaining those relationships becomes a problem, think of the Mediator Pattern. Using a mediator means the interaction code has to reside in only one place, and that makes it easier to maintain.

Using a mediator can hide a more series problem: If you have multiple objects that are too tightly coupled, your encapsulation may be faulty. Might be time to rethink how you have broken your program into objects.

The Mediator Pattern is something like a multiplexed Facade Pattern where, instead of supplanting the interface of a single object, you are making the multiplexed interface among multiple objects easier to work with.

Suppose we are working on a e-booking site, the site consists of four pages, home page, availability page, booking page,and exit page. The user can go form one page to another page without be restricted by certain path. He may go from availability page to exit page or from home page to exit page directly.

For example, The home page asks the user if he wants to book or exit,when the user do his selection, passes the matching state change to the mediator object to decide which page will be displayed. To give each page access to the mediator, we pass the mediator object to its constructor.

Each page should know its mediator and the user response(action) and have a Go() method to go to the next page, So we will create a base class, Page class, for all pages to inherit.

Page Class

public abstract class Page
{
    public Page(Mediator mediator)
    {
        Mediator = mediator;
        Response = "n";
    }
    protected Mediator Mediator { get; set; }
    protected String Response { get; set; }

    public abstract void Go();
}

Note, we passes the mediator object to the constructor and instantiate Response property with "n" for No. Now we will create four classes, one for each page. Each class will inherit Page class and implement its own Go() method.

Home Class

public class Home : Page
{
    public Home(Mediator mediator)
        : base(mediator)
    { }

    public override void Go()
    {
        Console.Write("Do You want to get Avaialability [y/n]?");
        try 
        {
            Response = Console.ReadLine();
        }
        catch
        {}
        if (Response.Equals("y", StringComparison.CurrentCultureIgnoreCase))
        {
            Mediator.Handle("Home.Availability");
        }
        else
        {
            Mediator.Handle("Home.Thanks");
        }
    }
}

Inside the Go() method we ask the user what he want to do. This question will differ from one page to another, in the home page it may go to availability page or to exit page so according to his response we call the Handle() method of mediator object and pass it the state or the path that user selected.

In the availability page he/she will choose to go to booking page or to exit page.

Availability Class

public override void Go()
{
    Console.Write("Are you ready to book [y/n]?");
    try 
    {
        Response = Console.ReadLine();
    }
    catch
    {}
    if (Response.Equals("y", StringComparison.CurrentCultureIgnoreCase))
    {
        Mediator.Handle("Availability.Booking");
    }
    else
    {
        Mediator.Handle("Availability.Thanks");
    }
}

In the booking page he/she will choose to book and exit or exit without booking.

Booking Class

public override void Go()
{
    Console.Write("Do You want to book Now[y/n]?");
    try 
    {
        Response = Console.ReadLine();
    }
    catch
    {}
    if (Response.Equals("y", StringComparison.CurrentCultureIgnoreCase))
    {
        Console.WriteLine("Thanks for your booking");
    }
    Mediator.Handle("Booking.Thanks");
}

Now there is no any pages to go so we will ask him to visit our site again.

Exit Class

public override void Go()
{
    Console.WriteLine("Please visit us again");
}

Now we will create our Mediator class and its Handle() method but the mediator should have a method that will take the user to home page so we will add another method beside Handle method call GetHome().

Mediator Class

public class Mediator
{
    private Page Page { get; set; }

    public void Handle(String path)
    {
        switch (path)
        {
            case "Home.Availability":
                Page = new Availability(this);
                Page.Go();
                break;
            case "Availability.Booking":
                Page = new Booking(this);
                Page.Go();
                break;
            case "Home.Exit":
            case "Availability.Exit":
            case "Booking.Exit":
                Page = new Exit(this);
                Page.Go();
                break;
        }
    }
    public Page GetHome()
    {
        return new Home(this);
    }
}

As you see the Handle method accepts the path selected by the user and set the page object with the appropriated page object to go to. To test our mediator just we will create an instance of Mediator class and go to the home page.

Mediator mediator = new Mediator();
Page homepage = mediator.GetHome();
homepage.Go();

Just the user went to home page, he will be asked if he want to get availability or not.

Do You want to get Avaialability [y/n]?

Here's a user who doesn't want to get availability.

Do You want to get Avaialability [y/n]?n
Please visit us again

Here's a user who really want to get availability.

Do You want to get Avaialability [y/n]?y
Are you ready to book [y/n]?

Here's a user who's not ready to make booking.

Do You want to get Avaialability [y/n]?y
Are you ready to book [y/n]?n
Please visit us again

Here's a user who's ready to make booking.

Do You want to get Avaialability [y/n]?y
Are you ready to book [y/n]?y
Do You want to book Now[y/n]?

Here's a user who's will not book now.

Do You want to get Avaialability [y/n]?y
Are you ready to book [y/n]?y
Do You want to book Now[y/n]?n
Please visit us again

Here's a user who made a booking.

Do You want to get Avaialability [y/n]?y
Are you ready to book [y/n]?y
Do You want to book Now[y/n]?y
Thanks for your booking
Please visit us again

As you can see, the mediator is able to coordinate all the pages. When something happens, a page lets the mediator know, and the mediator takes the appropriate next step.

you can download the full source code here

Design Patterns Series 16 - Command Pattern

2012-01-31T15:32:00.000+02:00

Today we will discover another pattern from our design patterns list, The Command Pattern

The Command Pattern :

The Command Pattern lets you package complex commands into a single one. Rather than having to preform the multiple steps needed to execute each command every time, you can create a bunch of ready-to-use command objects, each of which can handle multiple steps internally. Each command is already configured with its target and the action it's supposed to perform, so a set of command objects can act as a ready-made toolkit, already configured and all set to operate on the target objects they're supposed to handle.

The Command Pattern says you should encapsulate all the separate actions into objects configured for specific targets. This gives you a number of objects that act like a set of tools, ready to be used.

In other words, the idea here is encapsulation. You are encapsulating a set of complex actions, targeted at a particular target, into an easily handled object. When you want to execute a command, you no longer have to take all the separate steps.You just use the specific prebuilt, preconfigured command object, and it does the work.

You use the Command Pattern to "Encapsulate a request as an object, thereby letting you parameterize clients with different requests, queue or log requests, and support undo-able operations."

In simple terms, the target of a command object is called its receiver. When you create a command object, you typically pass it the receiver it's supposed to work on so it can access that receiver. When you want to execute a command, typically you pass it to an object that acts as an invoker. The invoker calls the methods of the command object or undo action.

You use the Command Pattern when you have got a complex set of commands that get annoying. When the interface to those commands is so complex that it gets in the way, it makes sense to encapsulate those commands.

The inspiration behind this design pattern is that it takes encapsulation to another level. Programmers often use encapsulation to extract a set of methods and data and wrap them in an object to simplify their code. But you don't usually think of encapsulating commands. By preconfiguring those commands to handle the receiver of their actions and bundling complex steps into single, easy-to-handle objects, you end up with a prebuilt toolkit, ready to use. To best understand how we create a Command Pattern and how it works, Suppose our company has three servers in Asia, in Europe, and in USA. We have to monitor these three servers and fix any issue as soon as possible. Assume the commands we run are shutting down the server, run diagnostics tools, and reboot the server. Before running any command we should connect to the server first and after running it we should disconnect.

First thing we will do is, creating the receiver that is what a command object works on. In our example that is one of the three servers. Each server acts as a receiver of the command object's actions. We will create an IReceiver interface which will be implemented by each receiver(each server).

IReciever interface

public interface IReciever
{
    void Connect();
    void Diagnostics();
    void Reboot();
    void Shutdown();
    void Disconnect();
}

Now we will create three classes for our three receivers, AsiaServer class, EuroServer class, and USAServer class. All classes will implement IReciever interface methods, that for simplicity will print out a message.

AsiaServer class

public class AsiaServer : IReciever
{
    public void Connect()
    {
        Console.WriteLine("You are connect to Asia Server.");
    }

    public void Diagnostics()
    {
        Console.WriteLine("The Asia server dignostics check out OK.");
    }

    public void Reboot()
    {
        Console.WriteLine("Rebooting The Asia Server.");
    }

    public void Shutdown()
    {
        Console.WriteLine("Shutting down The Asia Server.");
    }

    public void Disconnect()
    {
        Console.WriteLine("You are disconnected from Asia Server.");
    }
}

EuroServer and USAServer classes will be as AsiaServer class with changing the messages that will print correspondingly. you can download the full source from here.

Commands are preconfigured to perform various actions. To make them do their thing, you typically call an Execute() method. In our example we have three commands so we will create a class for each command, ShutdownCommand class, RebootCommand class, and RunDiagnosticsCommand class. Each of these can perform the action corresponding to its name, and each of these can be configured to work with a specific receiver. First we will create a base class contains two methods, Execute() method to execute the command, and Undo() method to undo the command, and IReceiver object that is the receiver will be handled.

Command class

public abstract class Command
{
    protected IReciever Receiver { get; set; }

    public abstract void Execute();
    public abstract void Undo();
}

Now will create our commands classes that inherit Command class. We will pass the receiver that it will work on into its constructor.

ShutdownCommand class

public class ShutdownCommand : Command
{
    public ShutdownCommand(IReciever receiver)
    {
        Receiver = receiver;
    }
    public override void Execute()
    {
        Receiver.Connect();
        Receiver.Shutdown();
        Receiver.Disconnect();
    }
    public override void Undo()
    {
        Console.WriteLine("Undoing......");
        Receiver.Connect();
        Receiver.Reboot();
        Receiver.Disconnect();
    }
}

RunDiagnosticsCommand class

public class RunDiagnosticsCommand : Command
{
    public RunDiagnosticsCommand(IReciever receiver)
    {
        Receiver = receiver;
    }
    public override void Execute()
    {
        Receiver.Connect();
        Receiver.Diagnostics();
        Receiver.Disconnect();
    }
    public override void Undo()
    {
       Console.WriteLine("Can't Undo....");
    }
}

Note the Undo() Method, it just displays a message because actually we can't undo the diagnostics process just we run it.

RebootCommand class

public class RebootCommand : Command
{
    public RebootCommand(IReciever receiver)
    {
        Receiver = receiver;
    }
    public override void Execute()
    {
        Receiver.Connect();
        Receiver.Reboot();
        Receiver.Disconnect();
    }
    public override void Undo()
    {
        Console.WriteLine("Undoing......");
        Receiver.Connect();
        Receiver.Shutdown();
        Receiver.Disconnect();
    }
}

That gives you the receivers and the command classes that act on those receivers. Now we will create the Invoker class that actually puts the commands to work. You typically load a command object into the invoker and tell the invoker to run it. Sometimes you may not need to use the invoker and want to dispense with the invoker altogether and just call the execute method. But the invoker can also keep track of multiple commands in a log or a queue, which make undoing a sequence of commands possible.

The Invoker class starts with a collection of commands to be available when undoing, AddCommand() method for add a new command to the command collection, Run() method that will call the execute method of the command, and Undo() method to call the undo method of the command.

Invoker class

public class Invoker
{
    private List Commands { get; set; }
    private Int32 Position { get; set; }

    public Invoker()
    {
        Commands = new List();
        Position = -1;
    }

    public void AddCommand(Command command)
    {
        Commands.Add(command);
        Position++;
    }
    public void Run()
    {
        Commands[Position].Execute();
    }
    public void Undo()
    {
        if (Position >= 0)
        {
            Commands[Position].Undo();
        }
        Position--;
    }
}

To test our command pattern we need to prepare the receivers objects, servers objects in our example.

AsiaServer asia = new AsiaServer();
EuroServer euro = new EuroServer();
USAServer usa = new USAServer();

Then prepare the commands

ShutdownCommand shutdownasia = new ShutdownCommand(asia);
RunDiagnosticsCommand diagnosticeuro = new RunDiagnosticsCommand(euro);
RebootCommand rebootusa = new RebootCommand(usa);
ShutdownCommand shutdowneuro = new ShutdownCommand(euro);

Note we pass the recevier object to the command that will work on it.

Create the invoker object ,add commands to invoker, and call run method of invoker object or undo method

invoker.AddCommand(shutdownasia);
invoker.Run();
Console.WriteLine("***********************************************");
invoker.AddCommand(rebootusa);
invoker.Run();
Console.WriteLine("***********************************************");
invoker.AddCommand(shutdowneuro);
invoker.Run();
Console.WriteLine("***********************************************");
invoker.AddCommand(diagnosticeuro);
invoker.Run();

Note we add a command and call run method directly, because the run method will run the last command we added.The result of these commands will be

You are connect to Asia Server.
Shutting down The Asia Server.
You are disconnected from Asia Server.
***********************************************
You are connect to USA Server.
Rebooting The USA Server.
You are disconnected from USA Server.
***********************************************
You are connect to Euro Server.
Shutting down The Euro Server.
You are disconnected from Euro Server.
***********************************************
You are connect to Euro Server.
The Euro server dignostics check out OK.
You are disconnected from Euro Server.

If we call the undo method of the invoker it will undo the last action, but we will call it twice to undo the last two actions

invoker.Undo();
Console.WriteLine("***********************************************");
invoker.Undo();

And the result will be

Can't Undo....
***********************************************
Undoing......
You are connect to Euro Server.
Rebooting The Euro Server.
You are disconnected from Euro Server.

Note the fisrt line of the output that because the last command we run was RunDiagnosticsCommand.

That is what the Command Pattern is all about - encapsulating commands. As mentioned earlier, this encapsulation is a little different from the usual, where you end up with an object that you can think of as a noun. Here, you think of the resulting object more as a verb. And when you use an invoker, you can handle whole sequences of commands and undo them if needed.

you can download the full source code here

Design Patterns Series 15 - State Pattern

2012-01-23T19:10:00.002+02:00

This Post will be about The State Pattern where an object keeps track of its internal state, and can change its behavior based on that state.

The State Pattern :

The State Design Pattern will "Allow an object to alter its behavior when its internal state changes. The object will appear to change its class." In other words your code should keep track of an internal state. Any part of the code can check what the current state is and react accordingly.

When you use the State Pattern, any part of your code can check what state is current. That clarify and centralize the workings of very large pieces of code because you have control over what far-flung code segments do, just by changing the current state.

In general, The State Pattern is useful when you have got a lot of code that's getting more and more murky and complex. If you can compartmentalize the working of what you are trying to do into a set of independent states, you can compartmentalize your code.

To use State Pattern in your code, instead of giving each state its own constant, it's better idea to give each state its own class. That way, you can call all methods on a state object anywhere in your code. All you have to do is load the correct state object into a generic variable and call various methods of that variable.

To imagine how the State Pattern can help us and when we can use it, Assume we want to make a system for car renting agency. The renting process contains four steps(states), Request a car, Check available cars, Make a rent, and give the car to the client. So the action will be taken depending on which step(state) of the renting process.

To Start building our system using State Pattern we will create an abstract class(RentCar) with all methods we need in renting process.

RentCar class

public abstract class RentCar
{
    public abstract void RequestCar();
    public abstract void CheckRequest();
    public abstract void CarRental();

    public abstract void SetState(State state);

    public abstract State GetWaitingState();
    public abstract State GetRequestCarState();
    public abstract State GetCarRentedState();
    public abstract State GetNoAvailableCarsState();

    public Int32 AvailableCars { get; set; }
}

The first three methods for renting process, SetState() method for changing the current state, the next four methods to get corresponding state object, and the AvailableCars property to hold the number of available car in the agency.

Now it's time to create the renting process itself by create a class that inherit RentCar class and implement its methods.

Rent Class

public class Rent : RentCar
{
    private State waitingState;
    private State requestCarState;
    private State carRentedState;
    private State noAvailableCarsState;
    private State myState;

    public Rent(Int32 carsCount)
    {
        AvailableCars = carsCount;
        waitingState = new WaitingState(this);
        requestCarState = new RequestCarState(this);
        carRentedState = new CarRentedState(this);
        noAvailableCarsState = new NoAvailableCarsState(this);
        myState = waitingState;
    }
}

Note the constructor accepts the number of availabe cars, instantiates four state objects, one for each state, and set the current state, myState, to WaitingState object.

public override void RequestCar()
{
    Console.WriteLine(myState.GotCarRequest());
}
public override void CheckRequest()
{
    Console.WriteLine(myState.CheckRequest());
}
public override void CarRental()
{
    Console.WriteLine(myState.CarRental());
    Console.WriteLine(myState.ReceiveCar());
}

public override void SetState(State state)
{
    myState = state;
}

public override State GetWaitingState()
{
    return waitingState;
}
public override State GetRequestCarState()
{
    return requestCarState;
}
public override State GetCarRentedState()
{
    return carRentedState;
}
public override State GetNoAvailableCarsState()
{
    return noAvailableCarsState;
}

We override methods of RentCar class and implements all required methods to complete the rental process, setting current state, and getting current state of the Rent object.
As we mentioned earlier, it's better to give each state its own class. We will create an abstract class, State, to be the base for all states objects.

State Class

public abstract class State
{
    protected State(RentCar rentcar)
    {
        RentCar = rentcar;
    }
    public abstract String GotCarRequest();
    public abstract String CheckRequest();
    public abstract String CarRental();
    public abstract String ReceiveCar();

    public RentCar RentCar { get; set; }
}

The constructor accepts an instance of RentCar that its state changes and we have four methods for four different states. The implementation of these four methods will differ from one state to another, so We will create four classes for our four states.

WaitingState Class

public class WaitingState : State
{
    public WaitingState(RentCar rentcar)
        :base(rentcar)
    {
    }
    public override String GotCarRequest()
    {
        RentCar.SetState(RentCar.GetRequestCarState());
        return "We have recieved your request";
    }
    public override String CheckRequest()
    {
        return "You have to submit a request";
    }
    public override String CarRental()
    {
        return "You have to submit a request";
    }
    public override String ReceiveCar()
    {
        return "You have to submit a request";
    }
}

This class represents the waiting state of our object so the client can only make a request to rent a car, just he made that request we set the current state to RequestCarState. If the client called another method first, the system must refuse his action because the current state is WaitingState and the only allowed action is making a request.

The same thing with the other three states that will be represented by three classes, RequestCarState class, CarRentedState class, and NoAvailableCarsState class. You can refer to source code to see their implementation.

To test our car rental system, we just need to instantiate an instance of Rent class passing it the total number of available cars then call RequestCar(), CheckRequest(), and CarRental() methods respectively.

Rent _rent = new Rent(10);
_rent.RequestCar();
_rent.CheckRequest();
_rent.CarRental();

The result we be according to the available cars in the agency(in the example we assumed the total available car is 10). If there is available cars to be rent the output will be

We have recieved your request
Your request was approved
Renting you a car...
Here are your car

If there is no available cars to be rent the output will be

We have recieved your request
Sorry, your request wasn't approved
You have to submit a request
You have to submit a request

You have simplified the code in the Rent dramatically by offloading it to State objects. The code in the Rent doesn't have to change to handle different states; only the State object itself changes. And each new State object has its own built-in methods to handle any requests made of it, appropriately, for the state it represents. By encapsulating how you handle each state in separate State objects, the code is easier to modify and maintain.

you can download the full source code here