FindControl: Recursive DFS, BFS, and Leaf to Root Search with Pruning October 24, 2011
Posted by codinglifestyle in ASP.NET, C#, CodeProject, jQuery.Tags: ASP.NET, BFS, DFS, extension methods, FindControl, jQuery, pruning, tree
add a comment
I have nefarious reason for posting this. It’s a prerequisite for another post I want to do on control mapping within javascript when you have one control which affects another and there’s no good spaghetti-less way to hook them together. But first, I need to talk about my nifty FindControl extensions. Whether you turn this in to an extension method or just place it in your page’s base class, you may find these handy.
We’ve all used FindControl and realized it’s a pretty lazy function that only searches its direct children and not the full control hierarchy. Let’s step back and consider what we’re searching before jumping to the code. What is the control hierarchy? It is a tree data structure whose root node is Page. The most common recursive FindControl extension starts at Page or a given parent node and performs a depth-first traversal over all the child nodes.
Search order: a-b-d-h-e-i-j-c-f-k-g
/// <summary>
/// Recurse through the controls collection checking for the id
/// </summary>
/// <param name="control">The control we're checking</param>
/// <param name="id">The id to find</param>
/// <returns>The control, if found, or null</returns>
public static Control FindControlEx(this Control control, string id)
{
//Check if this is the control we're looking for
if (control.ID == id)
return control;
//Recurse through the child controls
Control c = null;
for (int i = 0; i < control.Controls.Count && c == null; i++)
c = FindControlEx((Control)control.Controls[i], id);
return c;
}
You will find many examples of the above code on the net. This is the “good enough” algorithm of choice. If you have ever wondered about it’s efficiency, read on. Close you’re eyes and picture the complexity of the seemingly innocent form… how every table begets rows begets cells begets the controls within the cell and so forth. Before long you realize there can be quite a complex control heirarchy, sometimes quite deep, even in a relatively simple page.
Now imagine a page with several top-level composite controls, some of them rendering deep control heirachies (like tables). As the designer of the page you have inside knowledge about the layout and structure of the controls contained within. Therefore, you can pick the best method of searching that data structure. Looking at the diagram above and imagine the b-branch was much more complex and deep. Now say what we’re trying to find is g. With depth-first you would have to search the entiretly of the b-branch before moving on to the c-branch and ultimately finding the control in g. For this scenario, a breadth-first search would make more sense as we won’t waste time searching a complex and potentially deep branch when we know the control is close to our starting point, the root.
Search order: a-b-c-d-e-f-g-h-i-j-k
/// <summary>
/// Finds the control via a breadth first search.
/// </summary>
/// <param name="control">The control we're checking</param>
/// <param name="id">The id to find</param>
/// <returns>If found, the control. Otherwise null</returns>
public static Control FindControlBFS(this Control control, string id)
{
Queue<Control> queue = new Queue<Control>();
//Enqueue the root control
queue.Enqueue(control);
while (queue.Count > 0)
{
//Dequeue the next control to test
Control ctrl = queue.Dequeue();
foreach (Control child in ctrl.Controls)
{
//Check if this is the control we're looking for
if (child.ID == id)
return child;
//Place the child control on in the queue
queue.Enqueue(child);
}
}
return null;
}
Recently I had a scenario where I needed to link 2 controls together that coexisted in the ItemTemplate of a repeater. The controls existed in separate composite controls.
In this example I need to get _TexBoxPerformAction’s ClientID to enable/disable it via _ChechBoxEnable. Depending on the size of the data the repeater is bound to there may be hundreds of instances of the repeater’s ItemTemplate. How do I guarantee I get the right one? The above top-down FindControl algorithms would return he first match of _TextBoxPerformAction, not necessarily the right one. To solve this predicament, we need a bottom-up approach to find the control closest to us. By working our way up the control hierarchy we should be able to find the textbox within the same ItemTemplate instance guaranteeing we have the right one. The problem is, as we work our way up we will be repeatedly searching an increasingly large branch we’ve already seen. We need to prune the child branch we’ve already seen so we don’t search it over and over again as we work our way up.
To start we are in node 5 and need to get to node 1 to find our control. We recursively search node 5 which yields no results.
Next we look at node 5’s parent. We’ve already searched node 5, so we will prune it. Now recursively search node 4, which includes node 3, yielding no results.
Next we look at node 4’s parent. We have already searched node 4 and its children so we prune it.
Last we recursively search node 2, which includes node 1, yielding a result!
So here we can see that pruning saved us searching an entire branch repeatedly. And the best part is we only need to keep track of one id to prune.
/// <summary>
/// Finds the control from the leaf node to root node.
/// </summary>
/// <param name="ctrlSource">The control we're checking</param>
/// <param name="id">The id to find</param>
/// <returns>If found, the control. Otherwise null</returns>
public static Control FindControlLeafToRoot(this Control ctrlSource, string id)
{
Control ctrlParent = ctrlSource.Parent;
Control ctrlTarget = null;
string pruneId = null;
while (ctrlParent != null &&
ctrlTarget == null)
{
ctrlTarget = FindControl(ctrlParent, id, pruneId);
pruneId = ctrlParent.ClientID;
ctrlParent = ctrlParent.Parent;
}
return ctrlTarget;
}
/// <summary>
/// Recurse through the controls collection checking for the id
/// </summary>
/// <param name="control">The control we're checking</param>
/// <param name="id">The id to find</param>
/// <param name="pruneClientID">The client ID to prune from the search.</param>
/// <returns>If found, the control. Otherwise null</returns>
public static Control FindControlEx(this Control control, string id, string pruneClientID)
{
//Check if this is the control we're looking for
if (control.ID == id)
return control;
//Recurse through the child controls
Control c = null;
for (int i = 0; i < control.Controls.Count && c == null; i++)
{
if (control.Controls[i].ClientID != pruneClientID)
c = FindControlEx((Control)control.Controls[i], id, pruneClientID);
}
return c;
}
Now we have an efficient algorithm for searching leaf to root without wasting cycles searching the child branch we’ve come from. All this puts me in mind jQuery’s powerful selection capabilities. I’ve never dreamed up a reason for it yet, but searching for a collection of controls would be easy to implement and following jQuery’s lead we could extend the above to search for far more than just an ID.
CustomValidator and the ValidationSummary Control April 26, 2010
Posted by codinglifestyle in ASP.NET, jQuery, Uncategorized.Tags: jQuery, validators
3 comments
ASP.NET validators can be tricky at times. What they actually do isn’t particularly hard, but we have all had issues with them or quickly find their limits when they don’t meet our requirements. The CustomValidator control is very useful for validating outside the constraints of the pre-defined validators: required fields, regular expressions, and the like which all boil down to canned javascript validation. CustomValidators are brilliant as you can write your own client-side functions and work within the ASP.NET validation framework. They are also unique in that they allow for server-side validation via an event.
However, there is a common pitfall when used in combination with the ValidationSummary control. Normally, I would avoid using ShowMessageBox option as I believe pop-ups are evil. However, where I work this is the norm and the problem is the CustomValidator’s error isn’t represented in the summary popup.
When the ASP.NET validators don’t live up to our requirements we really must not be afraid to poke around Microsoft’s validation javascript. It contains most of the answers to the questions you read about on the net (to do with ASP.NET validation… it isn’t the new Bible/42). Quickly we identify the function responsible for showing the pop-up. ValidationSummaryOnSubmit sounds good, but as the name implies it occurs only on submit. However my validator failed after submit and now I need the popup to show what errors occurred. I could see from the script window that this function could be called but programmatically registering the startup script wasn’t working. So I used a jQuery trick to call the function after the DOM had loaded.
So drumroll please, there is the information you want to copy and paste in to your CustomValidator event:
if (!args.IsValid)
{
ScriptManager.RegisterStartupScript(this, this.GetType(), “key”, “$(function() { ValidationSummaryOnSubmit(‘MyOptionalValidationGroup’)});”, true);
}
Now my server-side validation will bring up the ValidationSummary messagebox.
A day with The Gu! MVC 2, VS2010 and ASP.NET v4.0 September 29, 2009
Posted by codinglifestyle in ASP.NET, C#, jQuery, linq, Visual Studio 2010.Tags: ASP.NET v4.0, beta, MVC, VS2010
2 comments
Yesterday I went to Dublin to attend a talk by Scott Guthrie. I knew from reputation Scott was a good speaker so it was great to see him in action. I think most of the Microsoft development world is familiar with Scott’s blog. I’ve exchanged emails with him in the past and he has always done a great job following up. He is a very down to earth guy, very at ease at the podium, and very comfortable the material.
We started the talk with a beginner’s look at MVC 2 and then looked at .NET v4 and VS 2010. Some of this information was a recap of TechEd (see my earlier post), but there was plenty of new information which I’ll recap here.
MVC 2
Scott’s talk was about some of the improvements of the next version of MVC which will be baked in to VS2010. But thankfully, he covered the whole concept in a very demonstration-oriented way. He built upon each concept in a way that left me with a good grasp of the basics.
First, he reiterated that webforms is not going away. MVC is just an alternative presentation layer built upon the same core .NET libraries we know and love. Because there is no designer, no .NET controls, and no code behind (as such) you are much more in control of the generated HTML.
What MVC offers is that control, URL mapping, js integration, and testability. If you’ve ever worked on a messy web app and wished for more structure MVC may be for you. It offers a clean separation of your data layer (model), your html (view), and your business logic (controller).
Right, enough of this verbose carrying-on, time for bullet points!
· MVC 1 was an extra for VS2008 built on ASP.NET v3.5. MVC2 will be baked in to VS2010 and built on ASP.NET v4.0. It will be backwards compatible with MVC1 apps so upgrades should be a snap.
· Controller
o URL Mapping – this is not just a cool feature but fundamental to MVC
§ http://localhost/galway maps to a controller class called galway
· .index is the default action method
§ http://localhost/galway/hooker maps to an action method inside controller Galway
§ http://localhost/galway/hooker/beer maps to the action method hooker and passes the string parameter “beer”. Note this is an alternative to query string parameters.
· These parameters can be strongly typed to string, int, even classes
§ Routing rules go in to gloal.asax.cs
· Operates like an HTTPHandler but is baked in to ASP.NET
· Order routing rules as you see fit. One falls through to another and ultimately to a default
· Can use regular expressions and constraints in your rules
o We can start playing with a controller without a View or Model and directly return some html from controller (think webservice)
o Controller action methods can return an action result type to return a View, redirect, etc.
o To communicate with View we can
§ store information in a ViewData[“key”] dictionary to pass to View
§ store information in a Model and pass this class to View
o Action Filters decorator attributes can be specified on the controller class or an action method to specify which roles / authorization required to use
o Tip: Use a service layer to keep direct data layer queries out of controller
· View
o Offers separation of UI from business logic and just renders the UI
o Remember, no designer or ASP.NET controls. Just you, html, and <%inline code%>.
o HTML. Helper with many built-in templates to generate common controls like checkboxes and textboxes with validation
§ Create your own View templates to have custom scaffolding like a table for a DB list
o Html.EditorFor gives Linq type intellisense to meaning we aren’t binding to a “string” in our model
§ Smart in that Booleans render as checkboxes, etc.
§ EditorTemplates can be used to custom render anything can be shared across entire site or used for just one View
o Html.DisplayFor gives read-only view of data
· Model
o A data entity with logic.
§ Can be LinetoSQL, ADO.NET, your own entity class, whatever
o Can decorate properties with attributes to specify common validators
§ Required, range, etc.
§ Very powerful, dynamic, should greatly ease pain of validating form data
§ Automatically adds a CSS class you can customize to get a red background, whatever
§ Can have server and client side validation
· Client side requires an extra js plug-in but worked seamlessly in demo
· Unit testing is crucial component of MVC and a test project is automatically created for you with every MVC website
o Use AAA method
§ Arrange
· Create a controller
§ Act
· Get the result of (controller.Index(0) as ViewResult)
§ Assert
· Assert if result.IsNotNull
o Dependency injection
§ In the constructor pass DB service layer or fake data. Use an interface for flexibility.
VS2010 & .NET v4.0
· Beta 2 out shortly
· IDE improvements
o Ctrl-, – quick nav via types
o Highlight all references
o Tip: Download CodeRush Xpress for these features in VS2008)
· Better intellisense support
o camel case (i.e. DB matches DataBind)
o Matching (i.e. bind matches DataBind)
o Consume first mode for TDD (test driven development)
§ Ctrl + Alt + Space to toggle
o Much improved javascript support
§ XML documentation (place under function()) for better intellisense for your own libraries
· Debug History and dumping a crash covered again (see previous post)
· .NET 4 is a new CLR unlike 3.0 and 3.5
o In IIS you will see v4.0 as a selectable framework
· Upgrading to VS2010 hopefully just changes solution file (like VS2005 > VS2008) so painless enough to upgrade
· Multi-target support from .NET v2.0 on up
· Lots of project templates including a new online template gallery (web starter kits?)
· Controls to have ClientIDMode property
o Static – is what it is. Call it “bob” and you are guaranteed to get document.getElementByid(“bob”)
o Predictable – new default… no more ctrl001_ prefixing
o Auto – current
o Inherit
· CSS rendering support
o Big upgrades including alternatives to tables for .NET controls
· ViewState – off by default. Force developers to think when we really need it.
· URL routing like MVC for WebForms (connotical)
· SEO (Search Engine Optimization)
o Page.Description and Page.Keywords to generate <meta> tags
§ Idea: Place in master page, tie-in to DB, allow client to change as required
o New SEO plug-in for II7 will crawl site and indentify issues that reduce search relevancy
§ Can increase search traffic 30-40%
· ScriptManager support CDN allowing you to specify URL for AJAX and jQuery direct from http://ajax.microsoft.com. Will actually phantom redirect to very local source but browser histories across many site will use standard Microsoft url meaning high probability of being cached
· New controls
o QueryExtender search control – search a grid
o Chart control
· Validation like MVC for GridView, FormView, ListView
o Auto reflect on class for validation decorator attributes and dynamically render validators with client and server-side validation
· Output/object cache providers (aka customizable I’m sure)
· Pre-start application
o Keep your application up, cached, and ready vs. IIS default behavior which shuts down when not in use
· Performance monitoring
· <%: Html encoded string %>
· Deployment (see previous post)
Well that wraps it up. Please see my earlier post from Tech-Ed and download my PowerPoint presentation which covers a lot of the upcoming features in VS2010.
Cascading Dropdown Lists with jQuery (parent / child select options) March 9, 2009
Posted by codinglifestyle in ASP.NET, C#, CodeProject, Javascript, jQuery.Tags: bitwise, cascading, child, control, dropdown, enum, Javascript, jQuery, ListItem
add a comment
Recently I was tasked with merging 3 similar screens in to one. I took stock of the commonalities and decided a Category and Subcategory dropdown list would suffice. As you’d expect the contents of the Subcategory dropdown depend on the selected Category. Obviously I wanted to avoid postbacks so I first looked to the Ajax Control Toolkit’s CascadingDropDown extender to link the parent to the child. In my case, there were only a dozen subcategories so a webservice seemed like overkill.
After attending Tech-Ed 2008 and seeing Microsoft throwing its weight behind jQuery I decided to have a look. So what follows is my first foray in to jQuery and I’m quite pleased with the results.
First, we define an enum in the codebehind which can be used for bitwise operations.
public enum Category
{
Invoice = 1,
Order = 2,
Shipment = 4 //Fourth item would be 8, then 16, 32, …
}
Next I wanted to be able to use the enum to specify the Category (only specifying one) and Subcategory items (bitwise OR any combination).
_DropDownCategory.Items.Add(GenerateListItem(“Orders”, Category.Order, false));
_DropDownCategory.Items.Add(GenerateListItem(“Invoices”, Category.Invoice, false));
_DropDownCategory.Items.Add(GenerateListItem(“Shipments”, Category.Shipment, false));
_DropDownSubcategory.Items.Add(GenerateListItem(“Purchase Orders”, Category.Invoice | Category.Order | Category.Shipment, false));
_DropDownSubcategory.Items.Add(GenerateListItem(“Quote Number”, Category.Order, false));
_DropDownSubcategory.Items.Add(GenerateListItem(“Customer Project Number”, Category.Shipment, true));
…
The enum was converted to a number and added as a custom attribute to the new list item in GenerateListItem():
li.Attributes.Add(“Category”, ((int)eCat).ToString());
Enter jQuery, first we’re going to need to keep a copy of all the available Subcategory items. Each time we change the Category we will be showing a subset of this array which we must keep separate in memory.
var optSubCat = null;
$(function() {
//Make a copy in memory of all the subcat options
optSubCat = $(“#_DropDownSubcategory”).children().clone();
//Default subcat to “Orders”
ddSubcategoryUpdate(2);
});
Then we need an event to fire when the Category is changed.
$(function() {
$(“#_DropDownCategory”)
.bind(“change”, function(event) {
var eCat = this[this.selectedIndex].attributes(“Category”).value;
ddSubcategoryUpdate(eCat);
});
});
Note how jQuery allows us to wire up DOM events after the fact to our .NET controls. Here we add an onchange event dynamically rather than injecting this via the codebehind which forces us to put javascript code in the wrong place. All we’re doing is pulling the value of the enum from the selected Category and then passing it to a function which will update the Subcategory items.
function ddSubcategoryUpdate(eCat) {
//Remove all items from drop down
$(“#_DropDownSubcategory”).children().remove();
//For each subcat item: test if it belongs in eCat, if so add it
$(optSubCat).each(function() {
if (($(this).attr(“Category”) & eCat) > 0) {
$(“#_DropDownSubcategory”).append($(this).clone()[0]);
}
});
}
And finally, in the if statement we see we test each Subcategory item previously saved in memory to see if it matches the enum value of the Category.
What we’ve ended up with is a very powerful yet simple mechanism for cascading dropdowns using enums in our codebehind. It’s easier to wire up than what the Ajax Control Toolkit provides, its all script so the UI looks good, and while this could have been done in straight javascript it demonstrates the power and simplicity of the jQuery library.
Coding Lifestyle 