DI Patterns :: in ASP.NET MVC - Introduction

As innovative developer, I always loved to learn and implement design principles and patterns. DI patterns are one of it.

DI Patterns as well defined by "Mark Seemann" in his book "Dependency Injection in .NET":
It is set of design principles and patterns which enable to write loosely coupled code.  

I bet, you would love to read "How to explain Dependency Injection to a 5-year old" (unfortunately closed article) article on the stackoverflow.

ASP.NET MVC in its way, has provided various ways to write loosely coupled  web applications. In the ASP.NET MVC, we can use DI patterns by

1. Writing our own Controller Factory by Implementing IControllerFactory interface
2. Writing custom Controller Factory by  deriving from DefaultControllerFactory
3. Writing custom Dependency Resolver by implementing IDepedencyResolver interface.
4. Writing custom ControllerActivator by implementing IControllerActivator.

 DI containers is library which provides DI functionality. There are plenty of DI containers available and can be used based on our needs. Ninject, Windsor, Spring.NET, Unity are few of them.

I will keep posting more on the above mentioned ways to use DI patterns in ASP.NET MVC.

objectbuilder - A jQuery Plugin

An objectbuilder is a jQuery plugin, which constructs JavaScript object by reading values of HTML controls. It uses name attribute value of control to name the property of the object and value of the control to set value of the property of the object.

It can be used in conjunction with Data Annotations feature of ASP.NET MVC to prepare JavaScript object that can be posted back to using Ajax functionality.

It has toObject method to create a JavaScript object. It accepts xpath expressions to use find and use the controls to prepare JavaScript object. It also accepts parent object name. Below are details about  default options the toObject method:

defaults =

{

    parent:'', //name of parent object name. Default value is empty

    selectors:''  //selectors to be used for preparing JavaScript object. Default is empty.

} 

How to use it: 

Let us take look at following html. It contains following controls.

1. FirstName textbox (name='FirstName')
2. LastName textbox (name='LastName')
3. Primary Address Country - textbox (name="Addresses[0].Country")
4. Alternate Address Country textbox (name=Addresses[1].Country")

<table cellpadding="2" cellspacing="0">
        <thead>
            <tr>
                <th colspan="2">
                    jQuery Object Builder - Employee and It's Addresses
                </th>
            </tr>
            <tr>
                <td colspan="2">
                    Personal Details
                </td>
            </tr>
            <tr>
                <td>
                    <label>
                        First Name:</label>
                </td>
                <td>
                    <input type="text" name="FirstName" value="Sachin" />
                </td>
            </tr>
            <tr>
                <td>
                    <label>
                        Last Name:</label>
                </td>
                <td>
                    <input type="text" name="LastName" value="Pawar" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    Primary Address
                </td>
            </tr>
            <tr>
                <td>
                    <label>
                        Country</label>
                </td>
                <td>
                    <input type="text" name="Addresses[0].Country" value="India" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    Alternate Address
                </td>
            </tr>
            <tr>
                <td>
                    <label>
                        Country</label>
                </td>
                <td>
                    <input type="text" name="Addresses[1].Country" value="India" />
                </td>
            </tr>
        </thead>
    </table>

Now, in order build JavaScript object using the objectbuilder, I will run following jQuery.

var object = $.objectbuilder.toObject({ selectors: 'input[type=text]', parent: 'employee' });

It will give an object with following hierarchy:

object

   |__ employee

          |___ FirstName = 'Sachin'

          |___ LastName = 'Pawar'

          |___ Adressess

                |___ [0]

                |      |

                |      |__ Country = 'India'

                |___ [1]

                       |

                       |__ Country = 'India'

You can find the plugin and sample HTML code at:

https://github.com/sachin-a-pawar/jquery-objectbuilder.git

Please let me know if you have suggestions.