jQuery UI - DatePicker was not working for me

Hi,

Recently I came across a problem, where a text box was not getting converted into jQuery UI DatePicker control. After spending an hour I realized the mistake. It was happening because of using existing html controls as template to render same set of controls to render data like repeater control in ASP.NET.

There was set of controls defined as template as shown below:

<div class='template"'>
        <div class='row'>
            <div class='label'>
                From Date</div>
            <div class='text'>
                <input type="text" id='from-date' class='date-control' />
            </div>
        </div>
        <div class='row'>
            <div class='label'>
                To Date</div>
            <div class='text'>
                <input type="text" id='to-date' class='date-control' />
            </div>
        </div>
    </div>

While loading a page, in jquery load event, datepicker function was called to render all controls having class 'date-control' as datepicker control.

This function call was converting the date-control textboxes into datepicker which were part of the template.

Then when we used these converted controls as template, we were not able to convert those control as datepicker control.

Because as per jQuery UI api, those were the controls converted into datepicker. To make this work correctly we had to change the css class of to something else and we could call datepicker function to make those textboxes as datepicker.

Hope this will help somebody having similar problem.

Sachin Pawar

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.

Using PartCover 4.x to find code coverage

After struggling alot and reading so many blogs, to use PartCover 4.0 to find code coverage, at last I was able to configure PartCover 4.0 to find out code coverage for Automated Unit Tests written using Gallio - Automation platform for .NET.

As I am currently working on SharePoint 2010 Technologies, it forced me to use 64 bit windows OS. Along with 64 bit OS, .NET Framework 4.0 framework was another challenge as I started using the framework when it was in Beta version. But thanks to Shaun Wilde who has taken great efforts to prepare PartCover for .NET CLR 4.0.

Please find the url as below, those who want to download PartCover 4.0.

https://github.com/sawilde/partcover.net4

Below are the steps to configure PartCover 4.0 on 64 bit OS and to find coverage for Unit Tests written using Gallio.

1. Create C# Class Library project, name it as ‘Mathematics’


2. Rename class1.cs file to Arithmetic.cs and add following method in it
   
   
   public int Divide(int dividend, int divisor)
   {
   

   if (divisor == 0)

   return 0;

   else

   return dividend / divisor;

   }
   
   Here I would like to write automated unit test for Divide method to cover both if and else part.


3. Now create another C# Class Library project to write unit test. Name this project as ‘Mathematics.Tests’


4. Rename class1.cs file to ArithmeticTestFixture.cs


5. Add reference to Gallio 3.2 and MBUnit 3.2 assemblies in the test project. To refer these assemblies you need to install Gallio. You can download Gallio from following URL
   
   http://www.gallio.org/Downloads.aspx


6. Add reference to Mathematics project


7. Delete all contents from the ArithmeticTestFixture.cs file and copy following code into it.
   
   
   
   • using MbUnit.Framework;
   • namespace Mathematics.Tests
   • {
     • [TestFixture]
     • public class ArithmeticTestFixture
     • {
       • [Test]
       • public void DivideTest()
       • {
         • int dividend = 4;
         • int divisor = 2;
         • int expected = 2;
         • Arithmetic arithmetic = new Arithmetic();
         • int actual = arithmetic.Divide(dividend, divisor);
         • Assert.AreEqual(expected, actual); //Test else condition
         • expected = 0;
         • divisor = 0;
         • actual = arithmetic.Divide(dividend, divisor);
         • Assert.AreEqual(expected, actual); //Test if condition
         }
         
       }
       
     }
     
   
   


8. Compile both project


9. Before we find percentage of code covered by the unit tests using PartCover, we need to make it to work on 32 bit OS. To do this:
   
   
   
   1. Run ‘Command Prompt’ as an administrator. Another headache of using vista/windows server 2008 :):)
   
   
   2. Set directory to folder in which CorFlags.exe resides. It should be “C:\Program Files (x86)\Microsoft SDKs\Windows\v7.0A\Bin” for Windows Server 2008. It is path for latest Windows SDK installed on the machine.
   
   
   3. Now we need to force PartCover executables to work on 32 bit. To do this run following commands on command prompt
      CorFlags.exe “C:\Program Files (x86)\PartCover\PartCover .NET 4.0\ PartCover.Browser.exe” /32BIT+ /FORCE
      
      CorFlags.exe “C:\Program Files (x86)\PartCover\PartCover .NET 4.0\ PartCover.exe” /32BIT+ /FORCE
      
   
   
   This will force both PartCover and PartCover browser to work on 32 bit.
   


10. We also need to force ‘Gallio.Echo.exe’ to work on 32 bit. We need to do this because we are going to use it run our unit tests. Run the following command to do this

CorFlags.exe “C:\Program Files\Gallio\bin \ Gallio.Echo.exe” /32BIT+ /FORCE


11. Now run PartCover.Browser.exe as an administrator


12. Click on File => Run Target option to open ‘Run Target Settings’ dialog as below:
    
    
    
    1. Set ‘Executable File’ as C:\Program Files\Gallio\bin \ Gallio.Echo.exe
    
    
    2. Set Working Directory to Debug or Release folder in Bin directory of Mathematics.Tests project based on the configuration
    
    
    3. Specify the name of the test assembly in ‘Working Arguments’ as below:
       Mathematics.Tests.dll
       
    
    
    4. In ‘Rules’ text box enter following rule to find code coverage for Arithmetic class in Mathematics assembly
       
       +[Mathematics]Mathematics.Arithmetic
       
       Common form for rules is
       
       +[<Assembly Name>]<Namespace>
       
       
       Regexp can contains digits, letters, asterisks and pluses. Asterisk means zero or more letters and digits in template, plus means inner state of classes.
       
       Please refer PartCover Console Manual for more details.
       
       
       
    
    
    5. Click on ‘Start’ button to find the code coverage.
    
    
    6. After PartCover finishes executing tests you will receive error message as
       
       
    
    
    7. Now open Properties window of ‘Mathematics.Test ‘ project
    
    
    8. Go to Build tab and set Platform target to ‘x86’ as shown below.
       
       
    9. Save the properties and rebuild the project
    
    
    10. Come back PartCover again and click ‘Go to inputs’ on the error message box (if you have not closed it) or else click on File => Run Targets option to open Run Target Settings again
    
    
    11. Again hit Start button. Now you will see the code coverage for Arithmetic class as below
    
    
    
    I hope this will help to people who are new or facing problem in finding code coverage using PartCover 4.0 and Gallio on 64 bit Windows OS.