Pages

Tuesday, December 29, 2009

Cyber Security Related News

Hey everyone, I wanted to share with you two cyber security related news articles. They're pretty interesting and the most interesting part about both articles are the methods that both attackers used to commit their crimes.

Feel free to post your comments, I'm interested in your reactions to the articles.

Saturday, December 12, 2009

Search and filter items of an ASP.NET GridView control using jQuery

Hey everyone, today I wanted to share with you how search and filter items of an ASP.NET GridView control using jQuery. Lets begin with the reason why I decided to right this post. Every fall , a co-worker and myself provides technical support for a firm-wide application where we manage individual attorney profiles which consists of their security rights and language setting. The main module we use to manage attorney profiles is an aspx page that has a GridView control filled with a list of all attorneys within the firm, which is close to 2000 employees. On a typical day we get requests to change an attorney's language setting or modify their security rights, which at first can be tedious because we need to scroll down the page just to find one user out of 2000. So after a while, I got tired of doing this and came up with a way to search for users easily within a GridView control. Let's take a look on how I did this.

Some of code for this post comes from a previous article that I read called 'Search and Filter Items of ASP.NET Drop Down List using jQuery', I encourage to check it out when you can. Let's begin with the interface. Take a look at 'Figure 1', in my example I'm using the Northiwind database where I'm displaying all product information including the supplier names. Pretty simple interface, a TextBox and GridView control. The TextBox is used to type in the product name that you're looking for.

Figure 1
When a user begins to type into the TextBox, the application filters the GridView to show products where the product name contains or beings with the prefixed text typed into the TextBox control .Look at Figure 2.

Figure 2
Notice that the GridView has shrunk based on the prefixed text in the TextBox control. Notice at the top of the GridView appears text that displays the number items that matched your keyword search. Look at Figure 3.

Figure 3
Now that we have seen the interface, let's take a look at the code behind. Take look at 'Figure 4' where it shows the page's html markup. As you can see I have a GridView and SqlDataSource controls. The GridView.DataSource property uses to the SqlDataSource control as its data source to retrieve product information and the SqlDataSource.SelectCommand property has a select statement that retrieves all product information from the Northwind.Products table.

Figure 4

Let's move onto the jQuery code. Take a look at 'Figure 5', the first half of this code retrieves references to all controls on the page. The $gridView variable contains a reference to the GridView control and the $employeeTextBox variable contains a reference to the TextBox control. Next, we have a $headerItems variable which contains the GridView header row and the $employeeItems variable is all rows besides the GridView header row,which includes the product name. Just as a side note, I'm using the 'filter' method in jQuery for both the $headerItems and $employeeItems variables to retrieve rows that have a 'scope' attribute value of 'col' for the $headerItems variable and retrieve rows that have an anchor control with a 'id' attribute value of 'lnkBtn' for the $employeeItems variable . As you can see the anchor controls displays the product name which I will use for filtering. I have to do it this way because the GridView control is represented as an html table through the browsers, so by using jQuery I can take advantage of jQuery's DOM functionality to extract the 'tr' rows that I need from the GridView. 'Figure 6' shows you the 'View Source' view of a GridView how it displays in your browser.The next line set's the focus to the TextBox control and then finally I'm attaching a keyup event where I'm calling the searchGV function, so every time the user types in a character, the searchGV is called.

Figure 5

Figure 6
The searchGV function performs the filtering based on the text coming from the TextBox control. Figure 7 shows the entire implementation. The first line removes all rows from the GridView control, then we're using regular expression to provide a search term to find all matching product names within the $employeeItems variable. The .grep function bascially finds all matching text and returns them to an array. Next we build the GridView header row since it was removed by the first line and re-add it back to the GridView control, then we check if the arr.length is greater then zero.If true, then we display the number of items found to a span element, then using the .each function we can iterate through the arr object and append each item to the GridView control.


Figure 7

That's it. I hope you enjoy this post and let me know if you liked it or not. Below is a link to the sample solution for you to download.


Thank You Again,