Skip to main content

ASP.NET Anti-pattern - redone in AngularJs

I came across this code today. This is the ultimate anti-pattern for ASP.NET and jQuery.

The idea here is that when a user clicks on the cdbDriverConsent checkbox; if the customer account is "inProbation", the "probationBox" will slide down with further instructions.

The problem is, when looking at strictly the markup. There is absolutely no way of knowing that this is what is happening.

The markup looks like this:


In the code behind the OnItemDatabind function grabs the checkbox and assigns a jQuery click handler: 

        protected void dgDIR_OnItemDataBound(object sender, DataGridItemEventArgs e)
        {
            if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
            {
			...
                if (IsOnProbation())
                {
                    var cbDriverConsent = e.Item.FindControl("cbDriverConsent") as CheckBox;
                    var jsString = @"$('#probationBox').slideToggle('slow', function() {
                                    // Animation complete.
                                    });";
                    if (cbDriverConsent != null)
                        cbDriverConsent.Attributes.Add("onClick", jsString);
                }
				...
            }


Pretty insane way to bury functionality.

Here is how I re-wrote this using AngularJs 

	

		...
		
		...
	

	

		...


and the angular script that handles the click event. 

    $scope.driverConsent = function ($event) {
        var checkbox = $event.target;
        $scope.showProbationBox = (checkbox.checked && $scope.isOnProbation);
    };


The key to note here is how clean and descriptive the markup is on this. It is very clear from the markup itself that clicking the checkbox has implications.

Comments

Post a Comment

Popular posts from this blog

Sorting an ICollection

Have you ever wanted to sort an ICollection? It took me awhile to figure this one out so I thought I should blog it. I originally posted this quite awhile ago. Since then I have discovered a much easier way to sort a collection. Here's an update on sorting collections using LINQ. Much simpler: var orderedList = customer.Users .OrderBy(x => x.UserType) .ToList(); And here is my original post on the subject. You decide which one looks easier. private IList<EventReqFormSection> GetSections() { ICollection<EventReqFormSection> sections = EventReqFormSection.GetByEventReqFormId(_businessObject.Id, ObjectManager); // sort by Display Sequence List<EventReqFormSection> sortedValues = new List<EventReqFormSection>(sections); sortedValues.Sort(new EventReqFormSection.DisplaySequenceSort()); return sortedValues; } The above function retrieves an ICollection puts it into a List object and calls the sort method usin...
2 comments
Read more
This blog is complete rubbish. Who knew the blogger release was going to fubar my blog so badly? Sigh... Well. I did kind of ignore this for about the last 4 years so it's my fault. I don't know if I have the energy to try repair my previous posts, or if I should just delete them all and start fresh?
Post a Comment
Read more

Viewing the contents of an Oracle cursor in Toad

Prefix your cursor variable with a colon ":" begin event_api.get_activity_data(1, null,'2013', null, null, null,:pResultSet); end; Toad will prompt you for the type. Select CURSOR And voila! You will have the cursor dumped into a data grid within Toad!
Post a Comment
Read more