For those unfamiliar with CouchDB, it is a free and open source document-oriented database written in the Erlang programming language. It is designed for local replication and to scale vertically along a wide range of devices. Provides a RESTful JSON API than can be accessed from any environment that allows HTTP requests.

ExtJS is a cross-browser JavaScript library for building rich internet applications, using techniques such as AJAX, DHTML and DOM scripting.

I wanted to communicate to my CouchDB backend from HTML/Javascript frontend using Ext.data.Store (stores load data via a Proxy, and also provide functions for sorting, filtering and querying the model instances contained within it.) … one of the coolest features I love about ExtJs.

Since CouchDB runs on port 5984 (not on port 80) and I was IIS 7 as a webserver (runs on port 80) and because of the Same Origin Policy, browsers reject requests to load a document or script unless the protocol, port and host are identical to the source of the current page. Therefore I was unable to talk with CouchDB database. There is one approach using Ext.data.ScriptTagProxy(used to load data from a domain other than the one your application is running on) but I didn’t like this approach because it messes up my code.

I wanted to use IIS web server as a reverse-proxy server that receives web requests and forwards them to CouchDB for processing. Whenever I’d issue a GET request for “/couchdb/[database]/_design/products/_view/list” reverse-proxy server receives the request and forwards to CouchDB for processing … the re-written url would look like this: “http://localhost:5984/[database]/_design/products/_view/list”

The following figure illustrates a typical configuration for a reverse-proxy scenario:

Application Request Routing and URL Rewrite to the rescue

To implement the reverse-proxy server you need to install:

1. URL Rewrite  Module
2. Application Request Routing

Then open IIS Manager and:

1. Navigate to “Application Request Routing” feature
   
   

2. Check the “Enable Proxy”
   
   
3. Under system.webServer section in web.config add the following lines:

   <system.webServer>		
           <rewrite>
               <rules>
                   <rule name="Reverse Proxy to CouchDB" stopProcessing="true">
                       <match url="^couchdb/(.*)" />
                       <action type="Rewrite" url="http://localhost:5984/{R:1}" />
                   </rule>
               </rules>
           </rewrite>
   </system.webServer>

So as you can see, we have added a new rule which matches all web requests that begin with couchdb and we rewrite them to http://localhost:5984/[whatever comes after couchdb].

By using IIS as reverse proxy for CouchDB, http://localhost/couchdb is equivalent to http://localhost:5984.

Hope this helps and saves you a couple of hours to figure it out.

I’m not sure whether you can achieve this without creating a data context wrapper, because for each query you have to combine two logical expressions, the expression that comes from repository and p => p.Active == true.

I thought it was worth sharing with you this.

Assuming that we have the following State entity:

This is how I would d solve this … I would simply have a generic class which is responsible for building expressions and issuing queries to the database.

 
    /// <summary>
    /// A generic class that executes queries againts a data context
    /// </summary>
    /// <typeparam name="Context">The Database context</typeparam>
    /// <typeparam name="T">The entity</typeparam>
    public class DataContextWrapper<Context> where Context : DataContext, new()
    {
        Context DataContext;
 
 
        /// <summary>
        /// The connection string
        /// </summary>
        string ConnectionString
        {
            get
            {
                //usually this comes from configuration file (web.config / app.config)
                return "[ConnectionString]";
            }
        }
 
        /// <summary>
        /// Class constructor that instantiates a new DataContext object and associates the connection string
        /// </summary>
        public DataContextWrapper()
        {
            DataContext = new Context();
            DataContext.Connection.ConnectionString = ConnectionString;
        }
 
 
        protected virtual IEnumerable<T> GetItems<T>([Optional] Expression<Func<T, bool>> query) where T : class, new()
        {
            //get the entity type
            Type entity = typeof(T);
 
            //get all properties
            PropertyInfo[] properties = entity.GetProperties();
 
            Expression<Func<T, bool>> isRowActive = null;
            //we are interested in entities that have Active property ==> to distinguish active rows
            PropertyInfo property = entity.GetProperties().Where(prop => prop.Name == "Active").SingleOrDefault();
 
            //if the entity has the property
            if (property != null)
            {
                //Create a ParameterExpression
                //if the query is specified then we need to use a single ParameterExpression for the whole final expression
                ParameterExpression para = (query == null) ? Expression.Parameter(entity, property.Name) : query.Parameters[0];
 
                var len = Expression.PropertyOrField(para, property.Name);
                var body = Expression.Equal(len, Expression.Constant(true));
                isRowActive = Expression.Lambda<Func<T, bool>>(body, para);
            }
 
            if (query != null)
            {
                //combine two expressions
                var combined = Expression.AndAlso(isRowActive.Body, query.Body);
                var lambda = Expression.Lambda<Func<T, bool>>(combined, query.Parameters[0]);
                return DataContext.GetTable<T>().Where(lambda);
            }
            else if (isRowActive != null)
            {
                return DataContext.GetTable<T>().Where(isRowActive);
            }
            else
            {
                return DataContext.GetTable<T>();
            }
 
        }
 
    }

As you can see, we have a method IEnumerable GetItems([Optional] Expression> query) which has an optional argument where you can pass lambda expressions.

And for every query, if the entity has the Active member, we append p => p.Active == true to the query. In this way we only specify it once, and we make sure that every method on our repositories, return only active records.

This is how a simple repository would look like:

/// <summary>
/// States Repository
/// </summary>
public class StatesRepository : DataContextWrapper<DEMODataContext>
{
    /// <summary>
    /// Get all active states
    /// </summary>
    /// <returns>All active states</returns>
    public IEnumerable<State> GetStates()
    {
        return base.GetItems<State>();
    }
 
    /// <summary>
    /// Get all active states
    /// </summary>
    /// <param name="pattern">State pattern</param>
    /// <returns>All active states tha contain the given pattern</returns>
    public IEnumerable<State> GetStates(string pattern)
    {
        return base.GetItems<State>(s=>s.Description.Contains(pattern));
    }
 
}

The usage:

StatesRepository repo = new StatesRepository();
var activeStates = repo.GetStates();

And

var filtered = repo.GetStates("Al");

Hope this helps.

So here we go …

What is MEF?

Managed Extensibility Framework (MEF) is a new library in the .NET Framework 4 and in Silverlight 4 that simplifies the design of composable systems that can be extended by third parties after they have been deployed. It is all about enabling dynamic composition of components across your application, adding/removing classes/components from your running system dynamically without any changes to the running code.

MEF is most useful with dynamic dependencies known only at run-time and it is optimized for discovering unknown parts of the system. It is built for open systems – scenarios in which the complete set of components that make up an application is defined at run-time.

You can read more about MEF here:

• Managed Extensibility Framework Overview
• MEF on CodePlex
• Building Composable Apps in .NET 4 with the Managed Extensibility Framework
• Glenn Block (the former PM of MEF team and now PM on the WCF team working on Microsoft’s future HTTP and REST stack).
• Nicholas Blumhardt – the founder of Autofac
• Hamilton Verissimo aka hammett –  founder of the Castle Project
• MEF Samples
• Extending NerdDinner: Adding MEF and plugins to ASP.NET MVC - by Scott Hanselman

Each application that I’ve built, whether it’s web or desktop app., it is consisted of one or more components each responsible for doing some particular job, manage products, generate reports etc. Before MEF, I would simply reference the assembly and call it directly from the code.  This is what I’ve always been doing and probably all of you. But as much as you try, yes you can make your code reusable and all that stuff, but you cannot avoid dependencies. Eventually, you are probably going to deploy more assemblies that you are paid for.

And by introducing dependencies you end up with:

• tight coupling of software components
• software becomes hard to maintain
• difficult to isolate when testing

And most importantly, you cannot add new components without modifying the existing source code, because you may not have access to the source code for the components, they might have been developed by third party companies / developers.

But with MEF you can avoid that, because it  provides a way to discover software components implicitly, via composition. (more on this later.)

Consider for example Visual Studio 2010, everyone can develop extensions and make them available for download so other developers can install them in their development environment, but you don’t have access in the source code of VS. But you do it based on some shared contracts and some pre-defined conventions. In this way, VS knows how to load them and make them available to you.

Where is MEF used?

MEF is used by Microsoft internally … it is not some patterns & practices given to you as an example on how to build applications. They actually use this and have things that rely on MEF. In the following post you can see the applications of MEF - http://codebetter.com/glennblock/2010/06/03/mef-has-shipped.

I’ve followed the development of MEF on codeplex since MEF Preview 5 and I am very glad to say that it has truly matured since then. I can only say that it has seriously changed my thinking on solving complex problems.

In future I’m planning to write a series of posts where I’m going to cover the main concepts of MEF and show you how you can build extensible web applications using MEF and Asp.Net MVC.

So stay tuned!

But when trying to change the collation I came across the following error:

The database could not be exclusively locked to perform the operation.

Apparently you cannot change the database collation if the accessibility of the database is set to MULTI_USER (which is by default).

Therefore if you want to change the database collation, you must do the following:

• Set the restrict access of the database to  SINGLE_USER (note the you might kill all the active sessions)
• Change the collation of database to whatever you want it, in my case SQL_Latin1_General_CP1251_CS_AS
• And switch back the restrict access of the database to MULTI_USER

You can accomplish this either by executing the following t-sql in you sql management studio:

ALTER DATABASE [database_name] SET SINGLE_USER WITH ROLLBACK IMMEDIATE
ALTER DATABASE [database_name] COLLATE [desired collation]
ALTER DATABASE [database_name] SET MULTI_USER

or from SQL Management Studio by choosing the database properties:

Sometimes the simplest issues can cause you a real headache.

Each day we grow as developers and also in 2010 we’ll be here to continue to share our experience on solving complex programming problems and inspirational highlights.

Happy New Year 2010

A big thank you for all your support – we could not do it without you (our readers).

Back at my studies (Computer Sciences in SEE-University) I had the chance to read C# 3.0 Design Patterns by Judith Bishop, a great book which covers the full set of 23 patterns that were originally proposed in Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides’s Design Patterns: Elements of Reusable Object-Oriented Software in 1994. By reading this book, I’ve acquired skills in: programming design patterns, basic UML modeling notation, ability to select appropriate patterns for given scenarios and advanced language features of C# 3.0. I highly recommend this book.

The strategy pattern enables a client to choose which algorithm to use from a range of supported algorithms and gives it a simple way to access it for ex. you have an News syndication service and you want to give you users the ability to grab those news in RSS or ATOM. In this case the scenario was to choose whether to process xml or text files.

Design

The key players for strategy patterns are as follows:

1. Context - Contains an IStrategy object’s algorithm in which we’re working on
2. IStrategy - Defines an interface common to all the strategies
3. TextFileImporter, XmlFileImporter - Classes that include algorithms that implement the IStrategy interface

Below you have the UML diagram:

Strategy Pattern UML Diagram

Implementation

The IStrategy interface is used to define a contract that is shared between TextFileImporter and XmlFileImporter.

namespace FileImporter.BusinessLogic
{
    ///
    /// A common interface to all supported file types
    ///
    public interface IStrategy
    {
        XDocument ImportOrders();
    }
}

Both TextFileImporter and XmlFileImporter classes implement IStrategy interface and they have a constructor which takes the file path as parameter.

namespace FileImporter.BusinessLogic
{
    public class TextFileImporter:IStrategy
    {
        private string _path;
 
        public TextFileImporter(string path)
        {
            this._path = path;
        }
 
        #region IStrategy Members
 
        public XDocument ImportOrders()
        {
            XDocument doc = XDocument.Load(_path);
            return doc;
        }        
 
        #endregion
    }
 
    public class XmlFileImporter:IStrategy
    {
        private string _path;
 
        public XmlFileImporter(string path)
        {
            this._path = path;
        }
 
        #region IStrategy Members
 
        public  XDocument ImportOrders()
        {
            XDocument doc = new XDocument();
            doc = XDocument.Load(_path);
            return doc;
        }        
 
        #endregion
    }
}

Here the context FileImporter points to a strategy and delegates to it. If a TextFileImporter is passed to the constructor than the TextFileImporter algorithm will take place and vise versa.

namespace FileImporter.BusinessLogic
{
    public class FileImporter
    {
        private IStrategy _strategy;              
 
        public FileImporter(IStrategy strategy)
        {
            _strategy = strategy;
        }
 
        public void ImportOrders()
        {
            XDocument xmlDoc = _strategy.ImportOrders();
            SqlHelper.InsertOrders(xmlDoc);
        }
    }
}

And here is where the decision making process takes place. Here the client can choose whether to use the XmlFileImporter or TextFileImporter. This is a code snippet from a windows service (more on this on later posts) which monitors a given directory and whenever a new file is created, it checks what type of file is (.xml or .txt) and based on the file extension if uses an appropriate strategy.

private void watcher_Created(object sender, System.IO.FileSystemEventArgs e)
{
    if (File.Exists(e.FullPath))
   {
        FileImporter.BusinessLogic.FileImporter importer = null;
        string ext = e.Name.Substring(e.Name.IndexOf('.'), 4).ToLower();
 
        switch (ext)
       {
             case ".xml":
                   importer = new FileImporter.BusinessLogic.FileImporter(new XmlFileImporter(e.FullPath));
                   break;
             case ".txt":
                   importer = new FileImporter.BusinessLogic.FileImporter(new TextFileImporter(e.FullPath));
                   break;
             default:
                   break;
        }
        if (importer != null)
        {
              Thread thr = new Thread(new ThreadStart(importer.ImportOrders));
              thr.Start();
        }
   }
}

Hope this helps

So I drank my coffee and started brainstorming on how I could accomplish this task the best way I could, always keeping in mind that I would have to finish it during the day. The task was peace of cake, I could do it in two hours, but the challenge was on UI. How to make it more dynamic (allowing users to enter multiple previous job positions, multiple phone numbers, multiple addresses etc.) and give users a greater experience on using the app. I wanted to accomplish this with no postbacks at all.

So in this case, the answer to life, the universe, and everything for me it was jQuery.

You’ve probably heard about jQuery, The Write Less, Do More JavaScript Framework. For those who didn’t have the chance to get their hands into jQuery, let me summarize it for you:

• It’s a lightweight JavaScript framework (less than 20 KB)
• Access DOM element using CSS selectors.
• Needless to check for null objects
• Uses chains of actions
• MVC JavaScript Architecture
• Simple and very clean … the SPARTAN WAY
• CSS 3.0 compliant
• Cross-Browser
• Extensible (support for plugins)
• And a great community support

And without further ado, let’s do that voodoo that we do do so well.

Below you have a screenshot of the above scenario.

As you can see, the job position and company name are added based on user desire and are appended dynamically to the DOM. Initially I’ve defined only the FamilyName and the FirstName of the applicant. Then I’ve defined the container workContainer in which after the DOM is ready, are initialized the first controls
[ updated ]

<% using (Html.BeginForm("Result", "Home"))
       { %>
        <fieldset>
            <legend>Your Information</legend>
            <table>
                <tr>
                    <td align="right" valign="top">
                        Family Name:
                    </td>
                    <td align="left" valign="top">
                        <%=Html.TextBox("FamilyName", "", new { @class = "txt", style = "width: 200px" })%>
                    </td>
                </tr>
                <tr>
                    <td align="right" valign="top">
                        First Name:
                    </td>
                    <td align="left" valign="top">
                        <%=Html.TextBox("FirstName", "", new { @class = "txt", style = "width: 200px" })%>
                    </td>
                </tr>
                <tr>
                    <td align="right" valign="top">
                        ...
                    </td>
                    <td align="left" valign="top">
                        ...
                    </td>
                </tr>
                <tr>
                    <td align="right" valign="top">
                        ...
                    </td>
                    <td align="left" valign="top">
                        ...
                    </td>
                </tr>
                <tr>
                    <td align="right" valign="top">
                        Work Experience?
                    </td>
                    <td align="left" valign="top">
                        <div id="workContainer">
                        </div>
                    </td>
                </tr>
            </table>
            <%= Html.AntiForgeryToken() %>
            <p>
                <input type="submit" value="Apply For this Job" />
            </p>
        </fieldset>
    <%} %>

<script type="text/javascript">            
	//wait until DOM is ready
	$(function() {
 
		//prepare initial controls
		$('<table id="tblWork"><thead><tr><th>Position</th><th>Company</th><th>&nbsp;</th></tr></thead><tbody><tr><td><input type="text" name="position" /></td><td><input type="text" name="company" /></td><td>&nbsp;</td></tr></tbody></table>')
			.append('<a href="#" id="addAnother" class="add">Add Another</a>')
			.prependTo('#workContainer');                    
 
		//atach an event handler to the addAnother link
		$("#addAnother").click(function() {
			  //get the whole table                                           
			  var $tblWork = $("table#tblWork");                      
 
			  //add row at the end of the table
			  $("table#tblWork tr:last").after('<tr><td><input type="text" name="position" /></td><td><input type="text" name="company" /></td><td>&nbsp;</td><td><a href="#" class="delete">Remove</a></td></tr>');
 
			  //find all links with "delete" class and atach the handler
			  $tblWork.find('a.delete').click(function() {              
				//remove the current table row                                      
				$(this).parent().parent().remove();
			  });                      
 
		});            
	});            
 
</script>

The classes defined in this project are Applicant and WorkExperience.

namespace jQueryLifeSaviour.Entities
{
    public class WorkExperience
    {
        public string Position { get; set; }
        public string Company { get; set; }
    }
}

namespace jQueryLifeSaviour.Entities
{
   public class Applicant
    {
        public string FamilyName { get; set; }
        public string FirstName { get; set; }
        public List<WorkExperience> Experience { get; set; }
    }
}

And here is the action which occurs after you click on Apply for this job button.

/// Get user input posted by view.
/// Accepts only POST HTTP Methods,
/// although in this case the GET would be just fine since we are not dealing with sensitive data
///The collection of posted form elements
/// The current view (in this case Result)
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Result(FormCollection form)
{
     //create a new intance of Applicant class
     Applicant obj = new Applicant
     {
          FamilyName = form["FamilyName"],
          FirstName = form["FirstName"],
          Experience = new List<WorkExperience>()
     };
 
     //hold all input fields regarding company info
     string[] companies = form.GetValues("company");
 
     //hold all input fields regarding job position
     string[] positions = form.GetValues("position");
 
     //iterate through posted work experience and fill the WorkExperience list
     for (int i = 0; i < positions.Length; i++)
     {
          obj.Experience.Add(new WorkExperience
          {
               Position = (positions[i]),
               Company = companies[i]
          });
      }
      ViewData["Applicant"] = obj;
      return View();
}

I’ve been using jQuery for a while and it made me realize that life is so much easier when using jQuery. With jQuery, JavaScript is no more “the necessary evil”, it’s even fun to code with.

You can download the full project here. This demo is developed on ASP.NET MVC 1.0 Framework, so you must install it in prior, otherwise you want be able to open it.