Jaime del Palacio

Testing code that uses Dapper 1.10

Fri, 20 Jul 2012 19:26:20 GMT

Dapper is a wonderful and simple .NET library to execute SQL statements against your database, what's now called a Micro-ORM. I have a project that uses Dapper for some specific queries and (as you always should) have it cover by tests.

This was my test code (using Moq):

1: public void SomeTest()

   2:  {

   3:      DataTable dt = SetupDummyClassDT();

   4:      _command.Setup(a => a.ExecuteReader()).Returns(dt.CreateDataReader());

5:

   6:      string calledCommand = "";

   7:      _command.SetupSet(cmd => cmd.CommandText)

   8:          .Callback(cmd => calledCommand = cmd)

   9:          .Verifiable();

10:

  11:      _target.Single<DummyClass>(1);

12:

  13:      Assert.AreEqual("select * from dummyclass where Id = @Id", calledCommand);

  14:  }

_command is a Moq object and _target is my class under test (a repository class that takes care of creating the SQL command for the class)… This was all ok until this morning that I upgraded to Dapper 1.10 and some of my tests broke. Why!!

The problem, turns out, was that internally dapper needs to add parameters to the IDbCommand.Parameters collection and this was null in my IDbCommand stub (_command), so stubbing the Parameters collection takes care of that; but Dapper creates the parameters calling CreateParameter on the IDbCommand, so we need to stub that too to return a new IDbDataParameter, and problem solve. My test ended up like this:

public void SomeTest() {
    // setup
    DataTable dt = SetupDummyClassDT();
    _command.Setup(a => a.ExecuteReader()).Returns(dt.CreateDataReader());

    // we need to setup the parameters list and the CreateParameter method
    // so dapper can do its magic without crashing
    Mock<IDataParameterCollection> paramsList = new Mock<IDataParameterCollection>();
    _command.SetupGet(a => a.Parameters)
        .Returns(paramsList.Object);
    _command.Setup(a => a.CreateParameter())
        .Returns(new Mock<IDbDataParameter>().Object);

    string calledCommand = "";
    _command.SetupSet(cmd => cmd.CommandText)
        .Callback(cmd => calledCommand = cmd);

     // act
    _target.Single<DummyClass>(1);

    // assert
    Assert.AreEqual("select * from dummyclasses where id = @id", calledCommand);
}

This is really knowing too much about the internals of Dapper, but that's how I ended up. An alternative approach to test this would be to create a virtual method Query<T> in the repository that calls Dapper's Query<T> method, and in testing using a subclass of the repository and override that method to get the command that I'm trying to execute.

A way to organize your javascript code

Wed, 23 Mar 2011 20:26:00 GMT

I while back I got tired of having to include bootstrapping code on all my html (aspx) pages; you know, including some sort of $(document).ready(…) to bind the correct set of handlers for the page, so I came up with a basic routing/bootstrapper to handle this in a more generic way.

The basic idea is to have an object that takes care of calling the correct method on the correct object to initialize the bindings (and anything else that needs to happen on page load) based on the URL of the page, a routing engine :).

Let’s say I’m using ASP.Net MVC, then I could organize my code so that I have one js object per controller and inside it a function for each of the actions to do the actual bootstrapping:

The controller object

        1: (function () {

       2:     myApplication.controllers.home = function() {

       3:         /* controller initialization */

       4:         this.init = function() {

       5:             alert('Hello from the controller.init function for the Home controller');

       6:         }

       7:         /* index action init function */

       8:         this.index = function() {

       9:             alert('hello from index action in the home controller');

      10:         }

      11:     }

      12: })();

Now when the user hits my “/Home/Index” URL, I need to call the appropriate methods on the controller object, and here it is:

The basic routing object

       1: /*---------------------------------------------------------*/

       2: /* The routing strategy */

       3: (function (app, $) {

       4:     var st = {

       5:         strategies: {

       6:             mvc: {

       7:                 defaultController: 'home',

       8:                 defaultAction: 'index',

       9:                 controller: function controllerFromUrl() {

                    // match urls in the form ../controllerName/actionName or ../controllerName

                    var ctl = document.location.href.match(/http[s]?:\/\/[\w\:\.\-\d]+\/([\w\d\-]+)[\/|$]/i);

                    return ctl ? ctl[1].toLowerCase() : this.defaultController;

                },

                action: function actionFromUrl() {

                    // match urls in the form ../controllerName/actionName or ../controllerName

                    var act = document.location.href.match(/http[s]?:\/\/[\w\:\.\-\d]+\/[\w\d\-]+\/([\w\d\-]+)/i);

                    return act ? act[1].toLowerCase() : this.defaultAction;

                }

            }

        }

    };

  

    window.myApplication = $.extend(app, st);

})(window.myApplication || {}, jQuery);

  

  

  

/*--------------------------------------------*/

/* The basic routing object */

  

(function (app, $) {

    var opts = {

        routingStrategy: app.strategies.mvc

    };

  

    var theApp = {

        activeController: undefined,

        controllers: {},

        run: function () {

            this.initController();

            this.initAction();

        },

        initController: function () {

            var activeControllerName =  opts.routingStrategy.controller(); /*getCurrentControllerName*/

            if (activeControllerName && this.controllers[activeControllerName]) {

                this.activeController = new this.controllers[activeControllerName]();

                this.activeController.init();

            }

        },

        initAction: function () {

            var activeActionName = opts.routingStrategy.action(); /*getCurrentActionName*/

            if (activeActionName && this.activeController && this.activeController[activeActionName]) {

                 this.activeController[activeActionName]();

            }

        }

    };

  

    /* pusblish the routing object */

    window.myApplication = $.extend(app, theApp);

  

})(window.myApplication || {}, jQuery);

  

  

$(function () {

    myApplication.run();

});

The way this works is by keeping a list of controllers and match the current URL’s controller name to the controller object and call the init() function on it, then match the action part of the URL a function inside the controller object and, if it exists, call it.

I’ve separated the part that decides the name of the controller and the action to a different object (routing strategy) so you could create a different strategy to decide the controller and action (ie. if you are not using MVC, you could use the name of the aspx page as the controller and something else for the action).

The advantage of this approach is that I could have one file for each of my js controllers neatly organized and then, during my build process combine all of them into one and minimize it.

After using this approach for a while, someone pointed out to me that this is a similar approach to Paul Irish's unobstructive DOM-ready execution which uses the body id and class attributes as the basis for selecting the what to initialize, it’s also a very good way to handle the same problem, take a look at it also.

So have fun with it!

Source code on GitHub

Unit testing a legacy ASP.NET application. A personal journey – part 1

Sat, 17 Oct 2009 20:09:00 GMT

These series of posts will cover my journey into getting a legacy (i.e. no unit tests) ASP.NET web application under automated unit test coverage, the goals, decisions, techniques and pitfalls we got into as we rolled out this initiative.

The context

One of the products of the company I work for is a SaaS application that was developed in ASP.NET in the early days of v2.0. As a SaaS provider we are always making improvements to the application and adding new functionality as our clients and the market requires.

The application is not that big, it has about 500k lines of code but it’s data intensive and makes extensive use of strongly typed data sets and table adapters as the data layer and extensive use of ASP.NET server controls in the presentation layer.

Why did we wanted to do this?

As our application is constantly changing and being developed, we constantly ran into the all too familiar problems and growing pains:

- Bugs were being introduced into one part of the system when we changed other parts of the system

- We always broke a couple of features (always the same ones) whenever we added a new feature

- Developers duplicating a bunch of code because they didn’t want to change/break existing code

- Growing list of manual test cases that sometimes (ok most of the time) where not all executed resulting in publishing the application with trivial bugs

- Manual testing is painful!

- We wanted to refactor a bunch of ugly large methods, but we were afraid to break something

How did we start doing it

When we decided to start adding unit tests, the first thing we did was to compile everything under .net 3.5, since some of the tools we wanted to use depended on 3.5. Also, we decided on the tools that we would be using:

Tools and Infrastructure

We decided to go with the following set of tools

- MSTests as the test framework, since it was already in the IDE and cover our initial test requirements (IDE integration, CruiseControl integration, existing experience in our team)

- StructureMap as a DI container. Simple, effective, no cost

- Moq as our mocking framework. Simple, effective, no cost

- Include unit testing in our continuous integration process. Obviously there’s no point in having tests if your not going to use them!

- TestDriven.net and nConver to track our progress

Processes

- We would start with our business layer and extend to the presentation and custom DAL code as possible.

- Any new feature would have to include unit tests (and promote the use of TDD for those features)

- Any bug, would have to be first reproduced by a unit test and then fixed making the test pass

- Code review any new test not just to catch errors but to spread the knowledge on what and how to write tests

Armed with these tools and processes we set off into writing our first test. To figure out what king of problems we would have in breaking dependencies, we picked one of the simple business classes that manage Categories in our application and set off to write a test for the Delete method.

The original method looked like this:

   1: public bool Delete(int categoryId)

   2: {

   3:     CategoriesDataTable dt = Adapter.GetCategoryById(categoryId,

   4:         CompanyBLL.GetCurrentCompanyId());

5:

   6:     if (dt.Count != 1)

   7:         return false;

8:

   9:     CategoriesRow r = dt[0];

  10:     r.Delete();

  11:     return Adapter.Update(dt) == 1;

  12: }

Simple enough. We ask the instance of the TableAdapter for the category to make sure it exists in the database, we mark it as deleted and update the DataTable into the database. The problem comes with the dependencies on the Adapter (a property that holds the instance of the TableAdapter) and the call to the static method CompanyBLL.GetCurrentCompanyId()

To break these dependencies we had to do a few things:

1. First STOP CALLING STATIC METHODS! We knew this was going to bite us every time, because it was used this way all over the application, so it was a good time to have a better solution, we created a RequestContext class that implemented an IRequestContext interface to abstract all the per request data that every class in the business layer needed and it started like this:

   1: public interface IRequestContext

   2: {

   3:     int CurrentCompanyId { get; }

   4: }

Afterwards we added some other methods to abstract the parts of the HttpContext that we were using like IsUserInRole, etc. but this was enough for our first case.

2. Then we created a new constructor for the CategoriesBLL class to inject the dependencies and modified the default constructor to create the concrete classes that we were using in production:

   1: public CategoriesBLL(IRequestContext context, CategoriesTableAdapter adapter)

   2: {

   3:     m_context = context;

   4:     m_adapter = adapter;

   5: }

6:

   7: public CategoriesBLL()

   8:     : this(new WebRequestContext(), new CategoriesTableAdapter())

   9: {

  10: }

I know, poor man’s dependency injection, but we wanted to change as little as possible to be able to get our test running. Later on we would use StructureMap to resolve the dependencies and get rid of the extra constructor.

3. Now we could change the Delete method to use the injected instances instead of the static method

   1: public bool Delete(int CategoryId)

   2: {

   3:     CategoriesDataTable dt = m_adapter.GetCategoryById(CategoryId,

   4:         m_context.CurrentCompanyId);

5:

   6:         if (dt.Count != 1)

   7:         return false;

8:

   9:     CategoriesRow r = dt[0];

  10:     r.Delete();

  11:     return Adapter.Update(dt) == 1;

  12: }

And at last we had something we could write a test against. Our first test!

   1: [TestMethod]

   2: public void DeleteCategory_WithExistingCategory_ShouldReturnTrue()

   3: {

   4:     // create a valid datatable with one category with id = 1

   5:     var dt = CreateAValidCategory(1);

6:

   7:     // set up the mock/stub objects

   8:     m_adapter.Setup(a=>a.GetCategoryById(1)).Returns(dt).Verifiable();

   9:     m_context.SetupGet(a => a.CurrentCompanyId).Returns(1).Verifiable();

10:

  11:     bool res = bll.Delete(1);

12:

  13:     Assert.IsTrue(res);

  14:     m_context.VerifyAll();

  15:     m_adapter.Verify(a=>a.Update(It.IsAny(CategoriesDataTable)), Times.Once());

  16: }

And it passed! Well nice but no cigar, this was the first stab at it and we already started to learn a lot about how we were going to have to change our code base in order to make things testable. After a few more refactors / tests we got to grips with how, in general, we would have to refactor our business layer code base to make it testable, and I can say that it was a fairly simple thing to do once we got going, and the team was really excited about the whole thing, they finally were able to refactor code with a good level of confidence.

Probably the best reference on testing legacy code is Michael Feathers’ book Working Effectively with Legacy Code also he’s article Working Effectively With Legacy Code

In the next post I’ll write on how we incorporated StructureMap into the application and injected the dependencies on the aspx and ascx classes to call the business logic and start removing the poor man’s DI.

Custom HTML Dropdown control (part 2) - The server control

Sun, 01 Mar 2009 19:47:00 GMT

In this part we are going to take the custom DropDown html control that we created in part 1 and create an ASP.NET server control so we can use it in our Web Forms.

The control in part 1 was a fully working drop down control that behaves very close to the regular <select> html control but, if you set a specific width to the control, it expands the list of options to show the full width of the options in IE6 & 7 (which does not happen with the regular select html control).

To create a server control for our drop down, we are going to inherit from the regular DropDownList control to get all its databinding functionality and we are going to override some of the rendering members to emit a different html markup. We also going to implement IPostBackDataHandler to manage the post back data. So our class declaration will be:

   1: public partial class DropDownSelect : DropDownList, IPostBackDataHandler

   2: {

The Markup

Then we override the RenderBeginTag to emit the same markup as we created it in part 1:

   1: public override void RenderBeginTag(HtmlTextWriter writer)

   2: {

   3:     // render the wrapper div for the full control

   4:     writer.WriteBeginTag("div");

   5:     writer.WriteAttribute("ID", ClientID);

   6:     writer.WriteAttribute("Name", this.UniqueID);

   7:     if (!string.IsNullOrEmpty(CssClass))

   8:     {

   9:         writer.WriteAttribute("class", "controlWrapper " + CssClass);

  10:     }

  11:     else

  12:     {

  13:         writer.WriteAttribute("class", "controlWrapper");

  14:     }

  15:     writer.Write(">");

16:

  17:     // textbox, arrow and hiiden value field

  18:     RenderTextBoxSpan(writer);

  19: }

20:

  21: private void RenderTextBoxSpan(HtmlTextWriter writer)

  22: {

  23:     writer.WriteBeginTag("div");

  24:     writer.Write(">");

25:

  26:     writer.WriteBeginTag("span");

  27:     if (!string.IsNullOrEmpty(CssClass))

  28:     {

  29:         writer.WriteAttribute("class", "textBoxWrapper " + CssClass);

  30:     }

  31:     else

  32:     {

  33:         writer.WriteAttribute("class", "textBoxWrapper");

  34:     }

35:

  36:     writer.Write(">");

37:

  38:     // text box

  39:     writer.WriteBeginTag("input");

  40:     writer.WriteAttribute("ID", this.ClientID + "_ddText");

  41:     writer.WriteAttribute("Name", this.UniqueID + "$ddText");

  42:     writer.WriteAttribute("type", "text");

  43:     writer.WriteAttribute("readonly", null);

44:

  45:     if (!string.IsNullOrEmpty(CssClass))

  46:     {

  47:         writer.WriteAttribute("class", "ddTextBox " + CssClass);

  48:     }

  49:     else

  50:     {

  51:         writer.WriteAttribute("class", "ddTextBox");

  52:     }

  53:     writer.WriteAttribute("style", "width:" + Width.ToString());

54:

  55:     // set the value in the textbox if we have any

  56:     ListItem item = this.Items.FindByValue(SelectedValue);

  57:     if (item != null)

  58:     {

  59:         writer.WriteAttribute("value", item.Text);

  60:     }

61:

  62:     writer.Write(" />");

63:

  64:     // open dropdown arrow

  65:     writer.WriteBeginTag("img");

  66:     writer.WriteAttribute("src", Page.ClientScript.GetWebResourceUrl(

  67:         typeof(DropDownSelect), "DropDownSelect.Images.downArrow.gif"));

  68:     writer.WriteAttribute("align", "texttop");

  69:     writer.WriteAttribute("ID", this.ClientID + "_btnOpenDropDown");

  70:     writer.WriteAttribute("class", "arrowImg");

  71:     writer.Write(" />");

72:

  73:     writer.WriteEndTag("span");

74:

  75:     // clearing div so the listbox does not show in the wrong place

  76:     writer.WriteBeginTag("div");

  77:     writer.WriteAttribute("style", "clear:both;");

  78:     writer.Write(">");

  79:     writer.WriteEndTag("div");

80:

  81:     // ending textbox wrapper div

  82:     writer.WriteEndTag("div");

83:

  84:     // hidden value field

  85:     writer.WriteBeginTag("input");

  86:     writer.WriteAttribute("Id", this.ClientID + "_ddValue");

  87:     writer.WriteAttribute("Name", this.UniqueID);

  88:     writer.WriteAttribute("type", "text");

  89:     writer.WriteAttribute("style", "display:none;");

  90:     if (item != null)

  91:         writer.WriteAttribute("value", item.Value);

  92:     writer.Write(" />");

93:

  94:     // listbox wrapper div

  95:     writer.WriteLine();

  96:     writer.WriteBeginTag("div");

  97:     writer.WriteAttribute("ID", this.ClientID + "_listBox");

  98:     writer.WriteAttribute("class", "listBox");

  99:     writer.WriteAttribute("tabindex", "0");

 100:     writer.Write(">");

 101:     writer.WriteLine();

 102:

 103:     // opening ul... the rest is rendered in the RenderContents()

 104:     writer.WriteFullBeginTag("ul");

 105: }

Nothing really special here, we created the same markup as in part 1 up to where the data for the options has to be inserted... and that's the job of the RenderContents member so we override that one too, and create a <li> for each option:

   1: protected override void RenderContents(HtmlTextWriter writer)

   2: {

   3:     ListItemCollection items = this.Items;

4:

   5:     for (int j = 0; j < items.Count; j++)

   6:     {

   7:         ListItem item = items[j];

8:

   9:         writer.WriteBeginTag("li");

  10:         writer.WriteAttribute("itemVal", item.Value, true);

  11:         writer.WriteAttribute("itemIndex", j.ToString(), true);

12:

  13:         if (item.Selected)

  14:         {

  15:             writer.WriteAttribute("selected", "selected");

  16:         }

17:

  18:         if (item.Attributes != null && item.Attributes.Count > 0)

  19:         {

  20:             item.Attributes.Render(writer);

  21:         }

22:

  23:         if (this.Page != null)

  24:         {

  25:             this.Page.ClientScript.RegisterForEventValidation(

  26:                 this.UniqueID, item.Value);

  27:         }

28:

  29:         writer.Write(">");

  30:         HttpUtility.HtmlEncode(item.Text, writer);

  31:         writer.WriteEndTag("li");

  32:         writer.WriteLine();

  33:     }

  34: }

Note that we are using the Items collection from the DropDownList base control so all the functionality for databinding, and accessing the items collection still works the same, we are just emitting new html. Then we need to render the closing html tags for our control, and that is done in the RenderEndTag member:

   1: public override void RenderEndTag(HtmlTextWriter writer)

   2: {

   3:     // end of the ul of items

   4:     writer.WriteEndTag("ul");

5:

   6:     // end of the listbox div

   7:     writer.WriteEndTag("div");

8:

   9:     // end of the control div

  10:     writer.WriteEndTag("div");

  11: }

In part 1, we needed to re-hook all the javascript events on every postback, in this part I've upgraded the code to use jquery 1.3.2 and the new .live event hook functionality, which means we don't have to re-hook all the javascript events, we just need to initialize the control once. We emit the script for that in the PreRender step:

   1: protected override void OnPreRender(EventArgs e)

   2: {

   3:     base.OnPreRender(e);

4:

   5:     // we need to register a script to initialize the dropdown and for a

   6:     // strange quirk in IE with the css of the dropdown, we need to hide all

   7:     // list boxes on every post back

   8:     if (!Page.IsPostBack)

   9:     {

  10:         string script = @"

  11:         var dd = new listBoxInstance('" + this.ClientID + @"', " +

  12:               this.AutoPostBack.ToString().ToLower() + @");

  13:        dd.doInit();

  14:         ";

15:

  16:         ScriptManager.RegisterStartupScript(this, this.GetType(),

  17:             "registerDropDownHandlers" + this.ClientID, script, true);

18:

  19:         script = @"var prm = Sys.WebForms.PageRequestManager.getInstance();

  20:         prm.add_endRequest(EndRequest);

  21:         function EndRequest(sender, args)

  22:         {

  23:             $('div[id*=_listBox]').css('display','none');

  24:         }";

25:

  26:         ScriptManager.RegisterStartupScript(this, this.GetType(),

  27:             "closeDropDowns", script, true);

  28:     }

  29: }

Now, you may notice that we are registering a closeDropDown script also, the problem is that in IE there's a strange behavior when you set the initial state of the list of options (the listbox) to display:none: when you display it, it does not stretches correctly and does not show the overflow scrolls correctly, so we just hide it on every postback.

The Postback data

The only extra thing we need to do is handle the postback data in our control by implementing the IPostBackDataHandler interface

   1: public new bool LoadPostData(string postDataKey, NameValueCollection postCollection)

   2: {

   3:     // get the new selected value from the postback data collection

   4:     // and if it's different from the current one, select it onto our property

   5:     // and return true, so we get a RisePostDataChangedEvent call

   6:     string newSelectedValue = postCollection[postDataKey];

   7:     if (newSelectedValue != null)

   8:     {

   9:         if (newSelectedValue != SelectedValue)

  10:         {

  11:             SelectedValue = newSelectedValue;

  12:             return true;

  13:         }

  14:     }

15:

  16:     return false;

  17: }

18:

  19: public new void RaisePostDataChangedEvent()

  20: {

  21:     this.OnSelectedIndexChanged(EventArgs.Empty);

  22: }

23:

When our control generates a postback, we get called on the LoadPostData with the values of the postback, so if the selected value has changed, we change it and return true, so the framework calls the RaisePostDataChangedEvent

One last thing we need to do and that has to do with the way DropDownList control handles the SelectedValue and SelectedIndex properties. Before we bind the data to our control using the base class, we need to remember our SelectedValue and set it back after the binding. During the binding step, the DropDownList control uses an internal cache for selected items that we (at the derived class) don't have access, so it will try to set the SelectedValue from that cache and there's where we loose our selection, so we do:

   1: protected override void PerformDataBinding(IEnumerable dataSource)

   2: {

   3:     // for some reason (it has to do with the cachedSelectedIndex in the DropDownList)

   4:     // we need to preserve the selectedValue before the databind and then re-set it

   5:     // after the call to the base PerformeDataBinding

   6:     string selectedValue = SelectedValue;

   7:     base.PerformDataBinding(dataSource);

   8:     SelectedValue = selectedValue;

   9: }

And that's it for the server control class. I've also updated the javascript to use jquery 1.3.2 and the live events:

   1: // Initializes the dropdown and hooks the events

   2: function init() {

   3:     var baseId = this.baseClientId;

   4:     var shouldPostBack = this.autoPostBack;

   5:     var $baseDiv = $('#' + baseId);

   6:     var $items = $('div[id*=_listBox] ul li', $baseDiv);

   7:     var $listBox = $('div[id*=_listBox]', $baseDiv);

   8:     var $ddText = $('input[id*=_ddText]', $('#' + baseId));

   9:     var $ddValue = $('input[id*=_ddValue]', $baseDiv);

  10:     var $btn = $('img[id*=_btnOpenDropDown]', $('#' + baseId));

11:

  12:     var minWidth = $ddText.outerWidth() + $btn.outerWidth();

  13:     var offset = $ddText.eq(0).offset().left - 1;

  14:     $listBox.css("display", "none");

  15:     FixIeHeight($items.length, $listBox)

16:

  17:     $btn.live("click", function() {

  18:         var $baseDiv = $('#' + baseId);

  19:         var $listBox = $('div[id*=_listBox]:hidden', $baseDiv);

20:

  21:         if ($listBox.length > 0) {

  22:             $listBox.css("left", offset).css("min-width", minWidth);

  23:             $listBox.show();

  24:             $listBox.scrollTop(0).focus();

  25:             BindHoverAndBlur(baseId);

  26:             return false;

  27:         }

  28:     });

29:

  30:     $items.live("click", function(e) {

  31:         HideItemList(baseId);

  32:         var $baseDiv = $('#' + baseId);

  33:         var $ddText = $('input[id*=_ddText]', $baseDiv);

  34:         var $ddValue = $('input[id*=_ddValue]', $baseDiv);

35:

  36:         $ddText.val($(this).text());

  37:         $ddValue.val($(this).attr("itemVal"));

  38:         $ddText.select();

  39:         if (shouldPostBack)

  40:             setTimeout('__doPostBack(\'' + baseId.replace(/_/g, '$') + '\',\'selectedindexchanged\')', 0);

  41:     });

42:

  43:     $ddText.live("click", function() {

  44:         $('img[id*=_btnOpenDropDown]', $('#' + baseId)).click();

  45:     });

46:

  47: }

48:

  49: function listBoxInstance(clientId, autoPostBack) {

  50:     this.baseClientId = clientId;

  51:     this.wasBlur = false;

  52:     this.autoPostBack = autoPostBack;

  53:     this.doInit = init;

  54: }

55:

  56: function BindHoverAndBlur(baseId) {

  57:     var $baseDiv = $('#' + baseId);

  58:     var $listBox = $('div[id*=_listBox]', $baseDiv);

59:

  60:     // very ugly way to detect IE6... we should use jQuery.support

  61:     // but haven't found a way to detect the anything:hover feature support

  62:     if( isIe6()) {

  63:         var $items = $('div[id*=_listBox] ul li', $baseDiv);

  64:         $items.hover(

  65:             function() { $(this).addClass("highLight"); },

  66:             function() { $(this).removeClass("highLight"); }

  67:         );

  68:         FixIeHeight($items.length, $listBox);

  69:     }

  70:     $listBox.blur(function(e) {

  71:         HideItemList(baseId);

  72:         this.wasBlur = true;

  73:         return false;

  74:     });

  75: }

76:

  77: function FixIeHeight(itemsCount, div) {

  78:     if (isIe6()) {

  79:         var h;

  80:         if (itemsCount > 10)

  81:             h = "10em";

  82:         else

  83:             h = "auto";

  84:         div.css("height", h);

  85:     }

  86: }

87:

  88: function HideItemList(baseId) {

  89:     var $listBox = $('div[id*=_listBox]:visible', $('#' + baseId));

  90:     if ($listBox.length > 0)

  91:         $listBox.hide(10);

  92: }

93:

  94: function isIe6() {

  95:     if ($.browser.msie && $.browser.version.substr(0) <= 6)

  96:         return true;

  97:     return false;

  98: }

99:

You'll notice that I embedded the css, image and javascript in the same package so you just need one dll for the whole thing to work.

You can download the full server control code here

Improvements

Some improvements could still be made to the control:

- I don't really like the fact that I had to include some browser specific code in the javascript to work around some IE6 bugs/missing functionality

- Still fills a bit sluggish when you have a lot of options in the drop down, so some optimizations may improve this.

LiveJournal Tags: asp.net,dropdown,custom server control

Custom HTML Dropdown control (part 1)

Sat, 22 Nov 2008 18:23:00 GMT

My problem stated with the fact that if you set a width to a dropdown (select) control, IE clips the contents of a drop down list when expanded.

IE 7

Firefox 3

To solve this, I decided to create my own custom dropdown control and as a bonus be able to add some more custom functionality like ComboBox features, more visual effects, etc.

The basic principle is to have two text boxes (one for the selected text and another one hidden for the selected value), a down arrow button to show the list of options and a div that shows the options. All this peppered with some javascript (using jquery to ease things up) to control the behavior.

The Text boxes & button

   1: <div>   2:     <span class="textBoxWrapper">   3:         <input type="text" id="ddText" class="ddTextBox" readonly>   4:         <img src="gfx/downArrow.gif" id="btn" align="texttop" class="arrowImg">   5:     </span>   6: </div>   7: <input id="ddValue" type="text" style="display:none;">

The first textbox (ddText) will hold the selected text, the second textbox (ddValue) will hold the value attribute of the selected item (if any) so it can be retrieved from the server side; and all these is wrapped in a span and a div. We need outer div to be able to make the span floated and having the whole control work as expected.

The list of options

   1: <div id="listBox" class="listBox" style="display:none;" tabindex="0">   2:     <ul>   3:         <li value="1">Item 1 with a lot of stuff to make it bigger</li>   4:         <li value="2">Item 2 a little shorter</li>   5:         <li value="3">Item 3</li>   6:         <li value="4">Item 4</li>   7:         <li value="5">Item 5</li>   8:         <li value="6">Item 6</li>   9:         <li value="7">Item 7</li>  10:         <li value="8">Item 8</li>  11:     </ul>  12: </div>

The list of options is a regular div with an unorder list to hold the options. The only two special things about this code are the tabindex="0" property of the div that will help us workaround a problem with the OnBlur event on firefox not firing, and the non-standard "value" attribute of the list items.

With all these code we'll have the following control:

Styling the control

The wrapper and text boxes

   1: .textBoxWrapper {   2:     border:solid 1px #7F9DB9;   3:     padding:0;   4:     white-space:nowrap;   5:     height:1em;   6: }   7: .ddTextBox {   8:     border:solid 0px white;   9:     width:120px;  10:     padding-left:.2em;  11:     cursor:arrow;  12: }  13: .arrowImg {  14:     margin:1px;  15: }

The wrapper simple has a solid border with no padding and the white-space:nowrap will prevent the img from wrapping below the textbox.

Nothing special in the ddTextBox, we just remove the border (since we added the border to the span wrapped around the textbox and down arrow), set the width as desired and add some padding to make it look good, and we end up with this:

The styles for the list of options look like this:

   1: .listBox {   2:     height:100px;   3:     overflow-y:auto;   4:     overflow-x:hidden;   5:     border:solid 1px black;   6:     background-color:white;   7:     white-space:nowrap;   8:     float:left;   9:     position:absolute;  10: }  11: .listBox ul {  12:     margin:0px;  13:     padding:0px;  14:     list-style-type:none;  15: }  16: .listBox ul li {  17:     cursor:arrow;  18:     padding-left:.2em;  19:     padding-right:1.3em;  20: }  21: .highLight {  22:     background-color:#316ac5;  23:     color:white;  24: }

The special things here are the overflow-y:auto to show the scroll bar if the content is greater than the defined height, and the float:left and position:absolute so it shows on top of the other elements on the page as expected. The rest of the classes are to format the <ul> and <li> elements and to highLight the options when we hover over them.

And that's all its needed to format our drop down for now

The script

Now all the magic happens in a set of javascript functions to handle the different events for our control:

   1: <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>   2: <script type="text/javascript">   3:     $(document).ready(function() {   4:         var $items = $('#listBox ul li');   5:         var $listBox = $('#listBox');   6:     7:         $('#btn').click(function() {   8:             var minWidth = $('#ddText').outerWidth() + $('#btn').outerWidth();   9:             $listBox.css("left",$('#ddText').eq(0).offset().left).css("min-width",minWidth);  10:             if($listBox.css("display")=="none") {  11:                 $listBox.show("fast", function() {  12:                     $listBox.scrollTop(0).eq(0).focus();  13:                 });  14:             }  15:             else {  16:                 $listBox.hide("fast");  17:             }  18:         });  19:    20:         $items.click(function(e) {  21:             $('#ddText').val($(this).text());  22:             $('#ddValue').val($(this).attr("value"));  23:             $listBox.hide("fast");  24:         });  25:           26:         $('#ddText').click(function() {  27:             $('#btn').click();  28:         });  29:    30:         $items.hover(function() {  31:                 $(this).addClass("highLight");  32:             }, function() {  33:                 $(this).removeClass("highLight");  34:             }  35:         );  36:    37:         $listBox.blur(function(e) {  38:             $listBox.hide("fast");  39:         });  40:     });  41: </script>

When the btn.click event fires (the user click on the down arrow) we need to adjust the position of the listbox to be be below the textbox and show the div

When the user selects and item, we'll get the selected text and selected value and set them to the corresponding textBoxes, and hide the list box

When the hover event happens on the options we simple swap in and out the highLight class.

When the the user clicks on anything else on the page outside the list box (onblur) we need to hide the listbox without making a selection.

And that's it! we have a fully functional drop down that corrects the IE clipping problem and is ready to extend as we want (ie. combobox functionality, finer control over style, autocomplete, etc.).

In the next part we'll convert this into a server control to bind it to some server data and maybe we can add some combo box functionality.

For the complete source click here

EDIT: Next part is The Server Control

MySql and Tableadapters

Sat, 03 May 2008 23:23:00 GMT

Update (5/5/2008): You can download the Visual Basic version of the code here

I think writing data access code is one of the most boring and tedious tasks in computer programming, so I welcome any help I can get to avoid doing it. That's were TableAdapters come in. Now if you want to use MySql as your database of choice using the MySql Connector/Net, you have a little problem with the auto-generated Tableadapters: they don't have an update/insert/delete commands so you cannot update/insert/delete (depending on what version of the connector you are using, you may get the insert command but not the update). This is due to a bug that is supposed to be fixed in version 5.2.2 (for VS2008). Anyway this is a workaround until MySql get's the connector fixed.

The trick is that the TableAdapter classes that Visual Studio/the Connector generates are marked as partial classes, sp we can extend the class and add the functionality that is missing (aka Update/Insert/Delete) ourselves. Since we are going to be adding some code by hand to the TableAdapter, the first thing we need to do is tell Visual Studio not to generate the Update commands by going into the advance options of the main query of the TableAdapter and uncheck the "Generate Insert, Update and Delete statements"

Now we need to create a partial class that will be named exactly the same as our generated class. For example, if my table adapter is called Products, the class that is generated will be called ProductsTableAdapter and will be in the namespace MyDataSetTableAdapters where MyDataSet is the name of your xsd data set.

The class will have at least two new methods. The first one I'll call PrepareCommands and will be in charge of setting up the CommandBuilder so we get the update/insert/delete commands sorted out:

    public partial class productsTableAdapter
    {
        private bool m_isInitialized = false;

        private void PrepareCommands()
        {
            if (!m_isInitialized)
            {
                this.ClearBeforeFill = true;
                // get the table name from the generated table mappings
                string tableName = Adapter.TableMappings[0].DataSetTable;
                // create a generic select command
                Adapter.SelectCommand = new MySql.Data.MySqlClient.MySqlCommand(
			"Select * from " + tableName, Connection);
                // now just by creating the commandbuidler associated with the adapter, we
                // get the update, insert and delete commands
                MySql.Data.MySqlClient.MySqlCommandBuilder cb = 
			new MySql.Data.MySqlClient.MySqlCommandBuilder(Adapter);
                m_isInitialized = true;
            }
        }

Note that I'm checking if the TableAdapter hasn't been initialized before, since creating a CommandBuilder is very expensive (it actually has to query the database with the SelectCommand to get the schema) so we only want to do the PrepareCommands when is absolutely necessary.

The next method we need is an Update that takes a typed dataTable as a parameter, in our case a MySqlDS.productsDataTable

        [System.Diagnostics.DebuggerNonUserCodeAttribute()]
        [System.ComponentModel.Design.HelpKeywordAttribute("vs.data.TableAdapter")]
        public virtual int Update(MySqlDS.productsDataTable dataTable)
        {
            // call prepare commands to make sure we have the 
            // insert/update/delete commands set up 
            PrepareCommands();

            int res = 0;
            MySqlConnection conn = null;
            try
            {
                // open the connection just in case it was not open by the time
                // we get called
                if( Adapter.SelectCommand.Connection.State != ConnectionState.Open )
                {
                    // if we are opening the connection then we should close it! 
                    // so we store it in a local connection
                    conn = Adapter.SelectCommand.Connection;
                    conn.Open();
                }
                res = this.Adapter.Update(dataTable);
            }
            finally
            {
                // if we open the connection we should close it
                if (conn != null && conn.State != ConnectionState.Closed)
                    conn.Close();
            }
            // we are done!
            return res;
        }

And that's it, we have a MySql TableAdapter that can add, update and delete and we had to do minimal coding on the data access side. Just one thing, we could do with just that one Update method or we could add overloaded Update methods with DataTabe, DataRow and DataRow[] using the Adapter.Update method.

So until we get a production level 5.2.2 Connector/Net from MySql we need to use some workarounds to make it work for us.

UpdateProgress and disable a control on postback with multiple UpdatePanels

Sat, 03 May 2008 19:15:12 GMT

A few months ago, while upgrading an application to use ajax, I needed to show some feedback to the user on long running actions while disabling some of the controls on the page. Looking around for a solutions, I found a couple of good articles on Matt Berseth's blog about UpdateProgress animations that look promising so I decided to create an extender control to do just that. After I created the extender I found out that Matt had a similar extender as well. Anyway the basic requirements were:

- It must disable a group of controls specified at design time
- It must be able to provide feedback to the user (i.e. show a "Loading..." indicator)
- It must work on FireFox IE6 and IE7
- It must work for nested UpdatePanels
- It must work for strange css layouts (ie. positioning absolute/relative)

The basic principle is to create a div that covers the group of controls that we want to disable, the same way the modal popup works (this could be a div, gridview, list, updatepanel, etc.), show it on the client side's beginRequest event and then hide it on the endRequest event.

The first thing we need to do is to create the div element that will covert our target control and set some initial properties for it. We do this in the initialize function of our extender.

        this._backgroundElement = $get("loadingExtenderBackgroundElement");
        if( this._backgroundElement == null ) {
            // create a new div to place on top of the control we are updating...
            this._backgroundElement = document.createElement('div');
            this._backgroundElement.id = 'loadingExtenderBackgroundElement';
            this._backgroundElement.style.display = 'none';
            this._backgroundElement.style.left = '0px';
            this._backgroundElement.style.top = '0px';

            // just define a zIndex big enough to sit on top of all the other elements
            // on the page
            this._backgroundElement.style.zIndex = 10000;
            if (this._updatingCssClass) {
                this._backgroundElement.className = this._updatingCssClass;
            }

Note that we first check if we have created a div already, so we don't end up with lots of divs in our code. Next we need to set the position style for the div; usually we'd want to use 'fixed' so no matter what the scroll position is, we get the div position correctly, but IE6 doesn't support the fixed position so we change it for absolute

            // now since IE6 does not support the fixed position style, then we need to hack it a bit
            // to get it to show correctly on top of the element
            if( Sys.Browser.agent == Sys.Browser.InternetExplorer && Sys.Browser.version < 7 ) {
                this._backgroundElement.style.position = 'absolute';
            }
            else {
                this._backgroundElement.style.position = 'fixed';
            }

and we add our div to the form element so we don't have to worry about offsetParent stuff.

document.forms.item(0).appendChild(this._backgroundElement);

Now that we have our background div, we will change the zIndex and relative position in the DOM of the "loading..." div.

        if( this._loadingDiv ) {
            var upDiv = $get(this._loadingDiv);
            if( upDiv.parentNode != document.forms.item(0) ) {
                if( upDiv.parentNode.removeChild(upDiv) ) {
                    document.forms.item(0).appendChild(upDiv);
                }
            }
            upDiv.style.zIndex = this._backgroundElement.style.zIndex + 1;
        }

Finally we have to setup the handlers for the beginRequest, endRequest and pageLoaded

        // register the beginRequest and endRequest events using the AjaxToolbox.BehaviorBase            
        this.registerPartialUpdateEvents(); 
        this._pageLoadedHandler = Function.createDelegate(this, this._pageLoaded);
        this._pageRequestManager.add_pageLoaded(this._pageLoadedHandler);

Now all that is left to do is, on the beginRequest, position and size the background div above the targetControl, show it and show and center the "Loading..." div; and hide everything on the endRequest event. The problem is that if we have two updatepanels on our page we'll still get called even if our targetControl is not being updated, so we will use the sender parameter of the beginRequest to determine the source of the postback, then we will try to $get our targetControl within the child control tree of the panel that is updating and if we get something back, it means that we are part of the updating panel and we need to disable our targetControl. The beginRequestHandler goes something like:

        // find out who cased the postback and if the element is a child of the update panel
        var upId = this.getUpdatingElement(sender);
        // the ip comes as a UniqueID and we need to compare it the ControlID (you know the ctl001$myctl vs ctl001_myctl problem)
        var callingId = null;
        if( upId != null )
            callingId = upId.replace(/\$/g,'_');
        // only do all this if the element is part of the updaing panel
        var element = $get(this.get_element().id, $get(callingId));
        if(  element == null )
            return ;
            
        // so we are part of the update... show our panels

Now we just need to show and position our divs

        var progressDiv = $get(this._loadingDiv);
        if( typeof(progressDiv) != 'undefined' )
        {
            // is important to show it before we get the bounds, otherwise, we'll get 0,0 for the width and height
            progressDiv.style.display = 'block';
            
            var progBounds = Sys.UI.DomElement.getBounds(progressDiv);
            // now center the progress div onto the control
            var x = bounds.x + Math.round( ((bounds.width - progBounds.width) / 2));
            var y = bounds.y + Math.round( ((bounds.height - progBounds.height) / 2));
            Sys.UI.DomElement.setLocation (progressDiv, x, y);        
        }
        // show the div that covers the element
        this._backgroundElement.style.width = bounds.width + 'px'; // important to add the 'px' for fireFox
        this._backgroundElement.style.height = bounds.height + 'px';
        Sys.UI.DomElement.setLocation (this._backgroundElement, bounds.x, bounds.y);
        this._backgroundElement.style.display = 'block';

And that's it, in the endRequest we just hide everything and we are done.

        if( typeof(this._loadingDiv) != 'undefined') {        
            var progressDiv = $get(this._loadingDiv);
            progressDiv.style.display = 'none';
        }
        else
            alert('cant find progress div');
        this._backgroundElement.style.display = 'none';

As you can see, we just have to add some checks here and there to be able to handle multiple UpdatePanels on the same page. Hope this helps someone save some coding time.

To download the sample with the extender click here

Compatibility of bit type between SqlServer 2000 and SqlServer 2005

Tue, 29 Jan 2008 17:42:00 GMT

Yesterday I had to debug an issue of a product that we are deploying to a production server. We were developing using SqlServer 2005 (express) and the hosting company uses SqlServer 2000 and as soon as we deploy, we got the following exception on one of the operations:

"Syntax error converting the varchar value 'true' to a column of data type bit"

After some debugging (a couple of hours) and after deploying some special debugging versions, we found the issue. In SqlServer 2005, the following query is perfectly legal:

SELECT UserId, Name FROM Users WHERE IsActive = 'true'

(where IsActive is a bit type)

As it turns out, this is not a valid query in SqlServer 2000, throwing above exception. Because of the single quote, SqlServer 2000, interprets the 'true' as a varchar and cannot cast it as bit, so you need to change it to:

SELECT UserId, Name FROM Users WHERE IsActive = 1

This query is valid in SqlServer 2005 and in SqlServer 2000.

This may be something widely known, but it wasn't to me, so I hope this helps you save some debugging time.

Kick-off

Fri, 25 Jan 2008 00:28:00 GMT

First of all, thanks to Joe Stagner and all the asp.net crew for giving us the opportunity to contribute to this community. I'll be posting on different topics of Web Development and specially on Web Applications development. I'll try to post as often as possible so check back.

I little about me. I've been programming professionally for more than 15 years on different areas ranging from game development to process automation to web applications. I'm currently COO at a Mexican software (SaaS) company and directly involved in the development/design of new products for our Software as Service model.