In my previous article (part 1), I shared what an n-Tier architected application is and why you should familiarize yourself with the concepts behind them.  In this article, I will take this a step further and show you how you can create a simple n-Tier architected ASP.NET application using Visual Studio 2010.  I won’t create all the CRUD (create, read, update, delete) operations for the business objects, but it should give you a strong start to creating a simple multi-tiered ASP.NET application.

When we are finished, your Visual Studio solution will have the following layers:
1) SalesSystem.Web - ASP.NET website
2) SalesSystem.Presentation - Presentation Controllers
3) SalesSystem.BusinessObjects – Business Logic Layer (Objects)
4) SalesSystem.Core – Core Utility Objects

We will start by creating an empty Visual Studio solution and then adding projects to it.  Each project acts as a logical layer (tier).  Projects can reference each other via the use of project references.  When you build the Visual Studio solution, it will build each project for you automatically.  Before I show how to create an empty solution and add projects (logical layers/tiers) to it, here’s a brief explanation of what each project will do.

SalesSystem.Core – I used this project to contain generic utilities, functions, extensions, helpers, etc which can be used across any new application you may develop.  Think big.  You don’t want to reinvent the wheel if you don’t have to.  I thought I may be developing more web applications in the future, so a common task is reading connection strings from the web.config.  So I wrote a utility object for the web.config and put a base class to be inherited on all web pages in there too.  This project/assembly is used by each of our other tiers.

SalesSystem.BusinessObjects – I made this project to house all of my business objects.  I didn’t take the time to create an official DataAccess Layer… but business objects often are made to interact with one particular data source type.  In this case I am interacting with a SQL Server and the connection string to run the queries on is passed in via a connection string to still maintain a dynamic and flexible approach.  Regardless of merging the business objects in with data access routines, I am able to use these business objects going forward easily as long as the application (whatever type it is) supports CRUD operations on a SQL Server.

SalesSystem.Presentation – Okay, this project may be a bit confusing for most.  I made another tier/layer to act as the liason between the UI and business objects.   I have a couple of reasons for this.  First, it makes calls simpler from ASP.NET page code behinds.  An ASP.NET page can have one controller which does a myriad of tasks (page centric) on many types of objects.  Second, it will help with automated unit testing in the future if we decided to take it to that level.  Your presentation layer should essentially be presenting the UI and capturing data from the user.  The less “clutter” you can put in the presentation the better.  So using presentation controllers can assist here.

SalesSystem.Web – This project is the presentation layer and we are using an ASP.NET website to do this.  Our objective in this layer is to simplify the logic down to presenting and capturing data from the user.  Any business object acquisition or saving should be done through the controller.  This makes the UI code much cleaner and simpler.

Here’s what the final solution will look like:

Step 1: Create an Empty Solution – First we want to create an empty Visual Studio solution so we can add our projects (layers/tiers) to it.  Below is a screenshot on how to do this.

Step 2: Add Projects to the Solution – Next we want to add projects for each tier we want to our solution.  We have 4 layers that we want to develop, so we’ll add 4 projects to the solution which will facilitate logical layers.  Each layer may be a different project type.  For instance, the presentation tier (SalesSystem.Web) will be an ASP.NET web project.  However our core, presentation controller, and business projects will all be windows class libraries as they simply have .NET classes in them.  Below are screenshots to help facilitate how to add the projects to our empty solution.

Step 3: Add Project References – The final step to getting your ASP.NET n-Tier architected solution to work is to setup project references to each tier can communicate, consume, and/or interact with each other.  Think of project references as “inheritance”.  If you need to use a tier’s (project’s) functions or data types, you need to add a project reference (or inherit) from it.

SalesSystem.Web References - We know that SalesSystem.Web will need to make calls to the SalesSystem.Presentation controllers which will return objects from SalesSystem.BusinessObjects.  So the SalesSystem.Web will need project references to both projects.  It will also need a project references to SalesSystem.Core because that is our core project which we have our core objects & utilities that we can use everywhere.

SalesSystem.Presentation References – This tier doesn’t care about the UI.  It makes calls to the business object layer.  Therefore it only needs a reference to SalesSystem.BusinessObjects.  Again, add a reference to SalesSystem.Core as well.

SalesSystem.BusinessObjects References – This tier is only concerned with its own business objects and interacting with the database.  It doesn’t care about what presentation layer is employed to use them… so the only references you need is to SalesSystem.Core.

Here is how you add a project reference:

Step 4: Code – I’m not going to go into detail on how to code the tiers.  Instead I am attaching the solution which includes the code in each tier to acquire customer sales from the AdventureWorks database using our n-Tiered solution.  The end deliverable is an ASP.NET website which a page’s codebehind class makes a call to our presentation controller tier which makes calls to our business objects and back out again.

Summary - Imagine taking this application to the next level and offering a Windows WPF UI option.  We could reuse the same presentation controllers, core, and business object tiers.  We would simply replace the ASP.NET web presentation tier and most of our work would already be done.  If a call to the database was broke, we’d fix it in one business object and be done.  One place, one time.  We wouldn’t have to be searching through all code-behind files trying to locate every instance of the problem.  If you had a UI designer/coder, they could be designing the look of the web pages while you focused on the business objects and back-end tiers (parallelism).  There are many reasons why applications are constructed like this.

Hopefully this helps you get a good start to understanding n-Tier architected applications and how you can accomplish this in Visual Studio using logical layers with VS projects and project references.

n-Tier Architecture – Part 1
n-Tier Architecture – Part 2

SalesSystem_Soln.zip (792.10 kb)

Throughout my career, I’ve been a guest speaker and judge at local universities.  I’ve also interviewed many job seekers over the past several years.  As a result, I’ve noticed some areas of weakness new developers have when being thrown out into the “real world” of programming.  You’d be amazed at how many new programmers do not have experience with n-Tier architected applications.

So what is n-Tier architecture?  N-Tier architecture refers to an architecture which breaks up an application into separate layers (tiers).  A tier encapsulates methods, objects, properties, interfaces, technologies, etc to perform a set of predefined tasks.  Each tier is separate and thus can reside on other servers, networks, assemblies, namespaces, classes, etc.

For an example, let’s say we have a Silverlight application.  The Silverlight XAP is the presentation layer.  Our Silverlight application then consumes a web service which creates objects which run queries on our SQL Server.  The web service creates the business objects which are part of our business logic layer.  The objects then query the database through the data access layer.

There are many advantages to breaking up the application into tiers (layers) like this:
1) Avoid changing or recompiling other layers if one layer needs changed.
2) Reduction of complexity.
3) Promotes parallel development
4) Easier to maintain.
5) Works much better with automated testing.
6) Easier to scale.
7) Promotes code/tier reuse.
8) Helps with adoption of new technologies.

In our Silverlight example, we had the presentation tier implemented using Silverlight on the client’s web browser.  The web service, objects, and database interaction were done on the server.  Because these layers were “distributed” among multiple machines, they can be referred to as “physical” layers.  On the other hand, layers separated by assemblies or sets of classes can be thought of as “logical” layers.

Now that we know the basics as to what an n-Tier architected application is, in my next article I will show you how to create an n-Tier enabled ASP.NET web application using logical layers in Visual Studio 2010.

n-Tier Architecture – Part 1
n-Tier Architecture – Part 2

Today I decided to make a small ASP.NET MVC application which would add, edit, delete, and list US states which resided in a SQL Server Express database.  I am a veteran in ASP.NET Web Forms development, so I wanted to see what MVC is like.  I create business objects/models everyday, so understanding models was easy enough.  The tricky part for me was creating and understanding how controllers and views interact with each other.

First Impressions:
1)  I liked the clean separation between controller/view/models.  Basically this is required when using MVC.  I’ve already been accustomed to separating layers, so this wasn’t new to me, but seeing how the MVC Framework has this built in was refreshing.
2)  When I created a new MVC Web Application, it automatically prompted to create a Test project.  I thought that was pretty neat.  I’m not experienced in creating automated test yet, but I’m sure I’ll get there soon and just seeing the parallelism with MVC and testing was impressive.
3)  REST (Representational State Transfer) URLs was interesting.  Apparently you can configure how requests are mapped to controllers in the Global.asax.  I didn’t get into this much as I took the defaults, but simply editing a state looked like such: “/states/Edit/1”.  No more mapping to a template/resource.
4)  You can generate a view straight from the controller by right-clicking when you return an ActionResult.  Visual Studio will then prompt/ask you what kind of view you want to make and you can also have it create a strongly typed view so that you can access the model’s properties.  So the framework can assist in starting a view pretty quickly for you.
5)  Not having view state and post backs was really nice.  The rendered HTML was very clean.
6)  I was confused at times as to how the framework knew what to pass to controller routines on a form post and also how id’s work.  What if you have more than 1 property that makes up the id?  I imagine this would come with time.

Overall I enjoyed the initial experience and it seemed very structured.  I feel that one day doesn’t do it justice as MVC is a bit more complex than web forms.

Helpful Resources:
1)  Scott Guthrie’s NerdDinner.com Chapter:  Scott Guthrie wrote a chapter in Professional ASP.NET MVC 1.0 in which he walks you through step-by-step in creating an MVC web application.  You can download the chapter in PDF and also download the source code if needed.
2)  Simple E-Commerce Storefront Application: This is another Scott Guthrie example, however this example has some nice architecture diagrams that go along with it to explain what’s going on a bit more.

MVCTest_Soln.zip (891.39 kb)

ASP.NET MVC Overview Part 1 (General ASP.NET MVC Overview)
ASP.NET MVC Overview Part 2 (Advantages of MVC and Web Forms)
ASP.NET MVC First Impressions

In Part1, I discussed the basics of what the MVC pattern is and how Microsoft has incorporated MVC into ASP.NET.  In this segment, I am going to discuss some general advantages of ASP.NET Web Forms and ASP.NET MVC.  Neither flavor of ASP.NET will be the superior choice in all circumstances.  Therefore knowing the advantages to each will help.

I’ve found through my development career that there’s never a right or wrong way to do something.  Scott Guthrie posted recently the following which is very true, “Great developers using bad tools/frameworks can make great apps.”  The same principal applies to bad developers using great tools/frameworks… inevitably they will create bad applications.  Just because one framework may shine better in certain situations may not mean its better.  If the developers using the superior technology cannot grasp or develop it properly, its full potential will not be realized.  So keep these principals in mind when evaluating the two.

Advantages of ASP.NET MVC
1) Separation of model, view, controller results in reduction of complexity, promotes parallel development, and easier to maintain.
2) Enables full control over rendered HTML (leaner html rendering).
3) Works much better with automated testing as all core contracts are interface based.  You can run unit-tests without having to run the controllers under an ASP.NET process.
4) Does not use view state or postbacks (no view stage = quicker load times).
5) Framework is very extensible and pluggable.
6) Supports existing markup (aspx, master pages, ascx, inline expressions).
7) Supports existing session, caching, authentication, etc.
8) Easy integration with javascript frameworks.
9) Follows the design of a stateless web.

Advantages of ASP.NET Web Forms
1) Commonality between windows forms development in that it uses the event model.
2) Usage of view state and server forms helps manage state more easily.
3) Promotes RAD more so than MVC as more controls/components are available.
4) Less complex than MVC and generally requires less code.
5) More mature as it’s been around since the 1990’s.

ASP.NET MVC Overview Part 1 (General ASP.NET MVC Overview)
ASP.NET MVC Overview Part 2 (Advantages of MVC and Web Forms)
ASP.NET MVC First Impressions

In this article, I will show you how to manually sort the GridView WebControl and display sort direction arrows.  The GridView has built-in sorting capabilities, however if we want visual feedback as to what column is being sorted and to what direction, we have to perform this ourselves.  While extending the GridView WebControl would be optimal, I'm going to show a quick way to get it done without creating a new GridView control.  Maybe in a future post I'll show how we can create a custom GridView control with sort arrows.  Here is a picture of what our final sorted GridView will look like.

Here is the HTML markup of our GridView:

<asp:GridView 
  ID="GridView1" 
  runat="server" 
  AutoGenerateColumns="False" 
  DataKeyNames="CustomerID" 
  CssClass="gridview" 
  RowStyle-CssClass="gridview_itm" 
  AlternatingRowStyle-CssClass="gridview_aitm" 
  HeaderStyle-CssClass="gridview_hdr" 
  PagerStyle-CssClass="gridview_pgr">
  <Columns>
    <asp:TemplateField>
      <HeaderTemplate>
        <asp:LinkButton ID="CustomerID_SortLnkBtn" runat="server" Text="Customer ID:" ToolTip="Click to Sort Column" CommandName="Sort" CommandArgument="CustomerID" CausesValidation="false" />
        <asp:ImageButton ID="CustomerID_SortImgBtn" runat="server" Visible="false" ToolTip="Click to Sort Column" CommandName="Sort" CommandArgument="CustomerID" CausesValidation="false" />
      </HeaderTemplate>
      <ItemTemplate><%#Eval("CustomerID")%></ItemTemplate>
    </asp:TemplateField>
                
    <asp:TemplateField>
      <HeaderTemplate>
        <asp:LinkButton ID="CompanyName_SortLnkBtn" runat="server" Text="Company Name:" ToolTip="Click to Sort Column" CommandName="Sort" CommandArgument="CompanyName" CausesValidation="false" />
        <asp:ImageButton ID="CompanyName_SortImgBtn" runat="server" Visible="false" ToolTip="Click to Sort Column" CommandName="Sort" CommandArgument="CompanyName" CausesValidation="false" />
      </HeaderTemplate>
      <ItemTemplate><%#Eval("CompanyName")%></ItemTemplate>
    </asp:TemplateField>
                
    <asp:TemplateField>
      <HeaderTemplate>
        <asp:LinkButton ID="ContactName_SortLnkBtn" runat="server" Text="Contact Name:" ToolTip="Click to Sort Column" CommandName="Sort" CommandArgument="ContactName" CausesValidation="false" />
        <asp:ImageButton ID="ContactName_SortImgBtn" runat="server" Visible="false" ToolTip="Click to Sort Column" CommandName="Sort" CommandArgument="ContactName" CausesValidation="false" />
      </HeaderTemplate>
      <ItemTemplate><%#Eval("ContactName")%></ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

The first step is to acquire customers from the Northwind database in the form of a DataTable.  We will then acquire a DataView object from our DataTable, and sort the view.  Once the data in our DataView has been sorted, we will then bind the GridView to the sorted DataView.  To accomplish the data retrieval, sorting, and data binding, I've created the following method:

Private Sub GridView1_DataBind()
    Dim dt As DataTable = New DataTable()

    'fill our datatable w/ customers from the DB
    Using conn As New SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings("NorthwindConnectionString").ConnectionString)
        Dim sql As String = "SELECT [CustomerID], [CompanyName], [ContactName] FROM [Customers] WITH (NOLOCK)"
        Dim cmd As SqlCommand = New SqlCommand(sql, conn)
        Dim reader As SqlDataReader = Nothing

        Try
            conn.Open()
            reader = cmd.ExecuteReader(CommandBehavior.CloseConnection)
            dt.Load(reader)
        Finally
            If Not reader Is Nothing AndAlso Not reader.IsClosed Then
                reader.Close()
            End If
        End Try
    End Using

    If dt.Rows.Count > 0 Then
        'get a dataView object from our dataTable of customers
        Dim dv As DataView = dt.DefaultView

        'if the user has elected to sort the gridview
        If Not String.IsNullOrEmpty(Me.SortBy("GridView1")) Then
            'get the sort expression and apply it to our dataView
            Dim sortExpr As String = Me.SortBy("GridView1") & " " & IIf(Me.SortDirection("GridView1") = WebControls.SortDirection.Ascending, "ASC", "DESC").ToString()
            dv.Sort = sortExpr
        End If

        'bind the dataView to our GridView
        Me.GridView1.DataSource = dv
        Me.GridView1.DataBind()
    End If
End Sub

The logic is pretty straight forward.  Take note to line 28.  I am using 2 properties to store what column I am sorting by and what direction it is being sorted.  I persist the values in the ViewState and I also pass what GridView I either want to retrieve or store values for.  This allows me to have more that 1 sorting GridView on my page at a time using the same 2 properties.  Here's the code for the 2 properties to assist us with sorting.

''' <summary>
''' Gets or sets the column name to be sorted.
''' </summary>
''' <param name="GridViewID">The unique ID of the GridView.</param>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Private Property SortBy(ByVal GridViewID As String) As String
    Get
        Dim o As Object = ViewState(GridViewID & "_SortBy")
        If Not o Is Nothing Then
            Return o.ToString()
        Else
            Return String.Empty
        End If
    End Get
    Set(ByVal value As String)
        ViewState(GridViewID & "_SortBy") = value
    End Set
End Property

''' <summary>
''' Gets or sets the sort direction.
''' </summary>
''' <param name="GridViewID">The unique ID of the GridView.</param>
''' <value></value>
''' <returns></returns>
''' <remarks></remarks>
Private Property SortDirection(ByVal GridViewID As String) As SortDirection
    Get
        Dim o As Object = ViewState(GridViewID & "_SortDirection")
        If Not o Is Nothing Then
            Return DirectCast(o, SortDirection)
        Else
            Return WebControls.SortDirection.Ascending
        End If
    End Get
    Set(ByVal value As SortDirection)
        ViewState(GridViewID & "_SortDirection") = value
    End Set
End Property

We have the sort by and sort direction properties (storing/persistance mechanisms).  We have the data retrieval, sorting of the data, and data binding method in place.  Now what we have to do is think about what events we need to account for.  First, on initial page load we'll want to fetch customer data and bind it to our GridView.  We'll only want to bind our GridView the first time the page loads and not subsequent postbacks.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        'bind the gridview on page first load
        GridView1_DataBind()
    End If
End Sub

Now we are ready to make the magic happen.  We want to handle the GridView's RowDataBound event and either show or hide our up/down arrows if the user has elected to sort a column.

Private Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
    'if the row being dataBound is the header row - toggle sort image visibility/directions
    If e.Row.RowType = DataControlRowType.Header Then
        ToggleSortArrows(e.Row, "GridView1")
    End If
End Sub

Private Sub ToggleSortArrows(ByVal headerRow As GridViewRow, ByVal gridViewID As String)
    Dim sortImgBtn As ImageButton = Nothing

    'loop through each cell in the header row
    For Each tc As TableCell In headerRow.Cells
        'loop through each control in the cell
        For Each c As Control In tc.Controls
            'if the control is an image button and is our sort image button
            If TypeOf c Is ImageButton AndAlso c.ID.EndsWith("SortImgBtn") Then
                sortImgBtn = DirectCast(c, ImageButton)

                'if the image button is in the column being sorted
                If Me.SortBy(gridViewID) = sortImgBtn.ID.Split(CChar("_"))(0) Then
                    'show the image button and set its image url (sorted column)
                    sortImgBtn.Visible = True
                    If Me.SortDirection(gridViewID) = WebControls.SortDirection.Ascending Then
                        sortImgBtn.ImageUrl = "~/img/uparrow.gif"
                    Else
                        sortImgBtn.ImageUrl = "~/img/dnarrow.gif"
                    End If
                Else
                    'hide the image button (not a sorted column)
                    sortImgBtn.Visible = False
                End If
            End If
        Next
    Next
End Sub

Basically what we are doing is detecting if the row being DataBound is the header row or not.  If it is, we want to loop through each cell in the header row and get a handle on the column's associated sort image.  We use the ID of the sort image to acquire what column it represents and compare it to our SortBy property.  If it matches, then we want to show the appropriate sort direction image.  We hide the other sort images in non-sorted columns.

The only task we have left to account for is how to fire our sorting event.  Take a quick look at our GridView HTML markup.  The header row has both a LinkButton and ImageButton that raise a GridView command event to which we pass the column name that the user wants to sort by.  We then handle the event in our code behind.

Private Sub GridView1_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles GridView1.RowCommand
    If e.CommandName.ToUpper = "SORT" Then
        InitializeSort(e.CommandArgument, "GridView1")
        GridView1_DataBind()
    End If
End Sub

Private Sub InitializeSort(ByVal sortBy As String, ByVal gridViewID As String)
    If Me.SortBy(gridViewID) = sortBy Then
        If Me.SortDirection(gridViewID) = WebControls.SortDirection.Ascending Then
            Me.SortDirection(gridViewID) = WebControls.SortDirection.Descending
        Else
            Me.SortDirection(gridViewID) = WebControls.SortDirection.Ascending
        End If
    Else
        Me.SortBy(gridViewID) = sortBy
        Me.SortDirection(gridViewID) = WebControls.SortDirection.Ascending
    End If
End Sub

Once we capture our sort row command, we initialize our SortBy and SortDirection properties.  We either toggle the direction of the sorted column or the sorted column is a new column to be sorted to which we default the column to be sorted Ascending.

I hope this article helped a bit.  It's a quick way to get a GridView sorted with visual indicators (sort arrows) without creating a new custom GridView control.

GridViewSorting_Soln.zip (90.61 kb)