Creating Tabbed Content With the ASP.Net Menu Control

A recent design required tabbed content on the section page of a website. After doing some research I came upon a solution for tabbed content using the ASP.Net Menu Control. By placing a Menu Control on the page along with a Multiview Control, it is possible to show the different items of the Multiview Control when menu items are selected.

The page markup looks like this:

<table border="0" width="100%">
<tr>
    <td width="151px">
    <asp:Menu
            ID="mnuTabbedContent"
            runat="server"
            Orientation="Vertical"            
            OnMenuItemClick="mnuTabbedContent_MenuItemClick"            
            >
        <Items>
            <asp:MenuItem ImageUrl="~/Images/greentab.png" 
                          ToolTip="Item 1" Text=" " Value="0">asp:MenuItem>
            <asp:MenuItem ImageUrl="~/Images/whitetab.png" 
                          ToolTip="Item 2" Text=" " Value="1">asp:MenuItem>
            <asp:MenuItem ImageUrl="~/Images/whitetab.png" 
                          ToolTip="Item 3" Text=" " Value="2">asp:MenuItem>
            <asp:MenuItem ImageUrl="~/Images/whitetab.png" 
                          ToolTip="Item 4" Text=" " Value="3">asp:MenuItem>
            <asp:MenuItem ImageUrl="~/Images/whitetab.png" 
                          ToolTip="Item 5" Text=" " Value="4">asp:MenuItem>
        Items>
    asp:Menu>
    td>
    <td width="521px">
    <asp:MultiView 
        ID="MultiView1"
        runat="server"
        ActiveViewIndex="0"  >
       <asp:View ID="Tab1" runat="server"  >
            <table cellpadding="0" cellspacing="0">
                <tr valign="top">
                    <td style="width:490px">
            ' Content 1
                    td>
                tr>
            table>
         asp:View>
        <asp:View ID="Tab2" runat="server">
            <table cellpadding="0" cellspacing="0">
                <tr valign="top">
                    <td style="width:490px">
            ' Content 2
                    td>
                tr>
            table>
        asp:View>
        <asp:View ID="Tab3" runat="server">
            <table cellpadding="0" cellspacing="0">
                <tr valign="top">
                    <td style="width:490px">
            ' Content 3
                    td>
                tr>
            table>
        asp:View>
        <asp:View ID="Tab4" runat="server">
            <table cellpadding="0" cellspacing="0">
                <tr valign="top">
                    <td style="width:490px">
            ' Content 4
                    td>
                tr>
            table>
        asp:View>
        <asp:View ID="Tab5" runat="server">
            <table cellpadding="0" cellspacing="0">
                <tr valign="top">
                    <td style="width:490px">
            ' Content 5
                    td>
                tr>
            table>
        asp:View>
    asp:MultiView>
    td>
tr>
table>

While the code to display the desired content is like this:

    Protected Sub mnuTabbedContent_MenuItemClick(ByVal sender As Object, ByVal e As MenuEventArgs) 
Handles mnuTabbedContent.MenuItemClick

    ' Show the Content
        MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value)

    ' Make All Tabs White
        mnuTabbedContent.Items(0).ImageUrl = "~/Images/whitetab.png"
        mnuTabbedContent.Items(1).ImageUrl = "~/Images/whitetab.png"
        mnuTabbedContent.Items(2).ImageUrl = "~/Images/whitetab.png"
        mnuTabbedContent.Items(3).ImageUrl = "~/Images/whitetab.png"
        mnuTabbedContent.Items(4).ImageUrl = "~/Images/whitetab.png"

    ' Make Selected Tab Green
        Select e.Item.Value
            Case 0 : mnuTabbedContent.Items(e.Item.Value).ImageUrl = "~/Images/greentab.png"
            Case 1 : mnuTabbedContent.Items(e.Item.Value).ImageUrl = "~/Images/greentab.png"
            Case 2 : mnuTabbedContent.Items(e.Item.Value).ImageUrl = "~/Images/greentab.png"
            Case 3 : mnuTabbedContent.Items(e.Item.Value).ImageUrl = "~/Images/greentab.png"
            Case 4 : mnuTabbedContent.Items(e.Item.Value).ImageUrl = "~/Images/greentab.png"
            Case Else : mnuTabbedContent.Items(e.Item.Value).ImageUrl = "~/Images/greentab.png"
        End Select

    End Sub

Creating Rounded Corners and Building the Table in ASP.Net Code

I have worked with a number of rounded corner solutions over the past 6 months since the interns that do design at work love rounded corners. I think the best method we have developed is to slice an image into 8 small images and then build a table surrounding content that shows the corners desired. I like to use Paint.Net to create the 8 images of 15px by 15px each. As you can imagine the images are top_left, top, top_right, left, right, etc.

The table code is like so:

<table cellpadding="0" cellspacing="0">
        <tr id="header">
            <td width="15px" height="15px"><img alt="gray_topleft" src="gray_topleft.png" />td>
            <td height="15px" style="background-image:url('gray_top.png'); background-repeat:repeat-x;">td>
            <td width="15px" height="15px"><img alt="gray_topright" src="gray_topright.png" />td>
        tr>
        <tr id="body">
            <td width="15px" style="background-image:url('gray_left.png'); background-repeat:repeat-y;">td>
            <td>td>
            <td width="15px" style="background-image:url('gray_right.png'); background-repeat:repeat-y;">td>
        tr>
        <tr id="footer">
            <td width="15px" height="15px"><img alt="gray_bottomleft" src="gray_bottomleft.png" />td>
            <td height="15px" style="background-image:url('gray_bottom.png'); background-repeat:repeat-x;">td>
            <td width="15px" height="15px"><img alt="gray_bottomright" src="gray_bottomright.png" />td>
        tr>
table>

With our web solution we also need to create a user control that will be included within other user controls. For that reason we cannot use the html as it is but need to transform the html into VB.net controls and add them to the user control object. Here is an example of the above html code in VB.Net.

        Dim objTable As New Table
        objTable.CellPadding = 0
        objTable.CellSpacing = 0

        Dim objHeaderRow As New TableRow
        Dim objHeaderCell1 As New TableCell
        Dim objHeaderCell2 As New TableCell
        Dim objHeaderCell3 As New TableCell

        objHeaderCell1.Width = 15
        objHeaderCell1.Height = 15
        objHeaderCell1.Style.Add("background-image", "url('../Themes/Images/gray_topleft.png')")
        objHeaderCell1.Style.Add("background-repeat", "no-repeat")

        objHeaderCell2.Height = 15
        objHeaderCell2.Style.Add("background-image", "url('../Themes/Images/gray_top.png')")
        objHeaderCell2.Style.Add("background-repeat", "repeat-x")

        objHeaderCell3.Width = 15
        objHeaderCell3.Height = 15
        objHeaderCell3.Style.Add("background-image", "url('../Themes/Images/gray_topright.png')")
        objHeaderCell3.Style.Add("background-repeat", "no-repeat")

        objHeaderRow.Cells.Add(objHeaderCell1)
        objHeaderRow.Cells.Add(objHeaderCell2)
        objHeaderRow.Cells.Add(objHeaderCell3)

        Dim objBodyRow As New TableRow
        Dim objBodyCell1 As New TableCell
        Dim objBodyCell2 As New TableCell
        Dim objBodyCell3 As New TableCell

        objBodyCell1.Width = 15
        objBodyCell1.Style.Add("background-image", "url('../Themes/Images/gray_left.png')")
        objBodyCell1.Style.Add("background-repeat", "repeat-y")

        Dim objBodyContainer As New MessageContainer
        BodyTemplate.InstantiateIn(objBodyContainer)
        objBodyCell2.Controls.Add(objBodyContainer)
        objBodyCell2.Style.Add("background-color", "#E4E2E2")

        objBodyCell3.Width = 15
        objBodyCell3.Style.Add("background-image", "url('../Themes/Images/gray_right.png')")
        objBodyCell3.Style.Add("background-repeat", "repeat-y")

        objBodyRow.Cells.Add(objBodyCell1)
        objBodyRow.Cells.Add(objBodyCell2)
        objBodyRow.Cells.Add(objBodyCell3)

        Dim objFooterRow As New TableRow
        Dim objFooterCell1 As New TableCell
        Dim objFooterCell2 As New TableCell
        Dim objFooterCell3 As New TableCell

        objFooterCell1.Width = 15
        objFooterCell1.Height = 15
        objFooterCell1.Style.Add("background-image", "url('../Themes/Images/gray_bottomleft.png')")
        objFooterCell1.Style.Add("background-repeat", "no-repeat")

        objFooterCell2.Height = 15
        objFooterCell2.Style.Add("background-image", "url('../Themes/Images/gray_bottom.png')")
        objFooterCell2.Style.Add("background-repeat", "repeat-x")

        objFooterCell3.Width = 15
        objFooterCell3.Height = 15
        objFooterCell3.Style.Add("background-image", "url('../Themes/Images/gray_bottomright.png')")
        objFooterCell3.Style.Add("background-repeat", "no-repeat")

        objFooterRow.Cells.Add(objFooterCell1)
        objFooterRow.Cells.Add(objFooterCell2)
        objFooterRow.Cells.Add(objFooterCell3)

        objTable.Rows.Add(objHeaderRow)
        objTable.Rows.Add(objBodyRow)
        objTable.Rows.Add(objFooterRow)

        Me.Controls.Clear()
        Me.Controls.Add(objTable)

ASP.Net Form Issues Solved

I was working on a ASP.Net form this week that created several issues that I need to research to solve. Radio Buttons on the page were making all other controls undetectable within the code. Validation text was wrapping from next to the validated control to underneath the control. And the Reset button on the page was causing validation to occur which is not desirable.

Radio Button List

I was able to solve the issue of radio buttons on the page affecting all other controls by wrapping the buttons into a radio button list.

"rdSpecificInvoiceInfo" runat="server">
     "rdSpecificInvoiceInfoY" runat="server" value="Yes" />
     "rdSpecificInvoiceInfoN" runat="server" value="No" />

Validation Text Wrapping

The second issue was solved by adding a style tag to the validation control itself.

"white-space:nowrap" 
ID="rfvYourName" visible="False" runat="server" ErrorMessage="Your Name is Required" 
Font-Bold="True" Font-Italic="False" ControlToValidate="txtYourName" 
Enabled="True">

No Validation on Reset

The reset button was the simplest but most difficult to solve. I found one article detailing the use of validation groups which did nothing but waste time in the implementation. Finally I found some information online about setting one property on the button, CausesValidation.

"bReset" CausesValidation="False" CssClass="form_control" 
runat="server" ToolTip="Reset" Width="60" Text="Reset" />

Shoemoney Offers Tools and Training

If you liked the recent post on getting great back links with good page rank then you should take a look at Shoemoney Tools and the corresponding free training called ShoemoneyX. And one of the best internet marketing gurus, Jeremy Shoemaker, is now offering an inexpensive 9 day trial for $3.95 to his exclusive marketing toolset.

I have subscribed to his toolset on and off for the past 6 months and really like his backlinker checker which produces more results and more accurate results than the two tools I mentioned in the backlink article. The training I have been working through in my spare time and have found the material very good.

Wordpress Plugins for Better Posting

On a site that I am the administrator for, there is a writer who likes to not add site tags to an article but instead adds Technorati tags from within Live Writer to a post prior to publishing. If you have ever used Live Writer and inserted these tags to a post then you know that the tags created are bad. They link to pages that do not exist cause they use the directory structure /tags/ instead of the correct directory /tag/ for each link.

Auto-tags

Today I found two plugins that will solve these issues for the writer who refuses to change. The first is called Auto-tags. This plugin works with two different services, Yahoo! and tagthe.net, to add a preselected number of tags automatically to each post that is published to the website. It searches the content of the post for the most relevant tags and adds them. What could be better than automatically tagging posts?

Search and Replace

The second Wordpress plugin is call Search and Replace.You have probably already figured out what the purpose of this plugin is just from the name. But it searches the Wordpress database in a number of different ways that you specify for certain text and then replaces the text. Great for my Technorati tag issue. I tried it today and it found 26 posts that needed to have tags corrected. Now all the search engines love the site once again. At least that’s the hope.

Page Ranked Links with Affiliate Tools

There’s a number of decent articles on the Internet about getting back links to your website by requesting links, writing good content, and leaving comments. But if you’re getting back links on terrible sites that aren’t indexed or have page ranks that look like goose eggs then you are probably wasting your time. I have been there and didn’t like the feeling.

Page Rank Searches

With four affiliate tools in two different categories you can find bank links that have good page rank and therefore are worth the time to pursue. The first category is Page Rank searching. I have found two good tools within this category, they are SEO Chat’s Page Rank Search and SERP Analytics Google Search. With these two tools you can find sites with great rankings by keywords that you are focusing on in your writing. And you can search good sites for pages that rank higher than others by using the ‘site:’ directive. SERP Analytics sometimes stops working after too many searches as Google flags your IP as a spam source. It is necessary to wait an hour or so when this happens and search Google one more time entering a CAPTCHA keyword to begin to get Google search results again.

Backlink Checkers

The other category of tools that can help in finding good link locations are back link checkers. iWebTool Backlink Checker and BRL Backlink Checker Tool are both very good. Once you find sites that rank well for keywords that you are targeting, you can use these tools to locate the best links the sites are receiving that give them the prominent search positions. iWebTool can also stop working after a number of searches so you will have to switch services at some point or wait until the tool is available again.

Developing a Software Design with Access

We had the need for a quick software interface design this past weekend and came up with Microsoft Access as an easy way to layout the forms and add comments which will eventually become the help topics. We could have also utilized Visio or Visual Studio 2008 but the quickness and ease of Access Forms made the process simple. We didn’t use any wizards but opened blank forms widows and began dropping text box and labels as needed.

Grid Control Look-A-Like

Buttons were just as simple with all the text available through the graphical interface itself. We expanded text boxes on the far right to add in directions and help information for the developer. Creating a grid was the most difficult part but by using a series of list boxes on top of one another, the design greatly resembled a compiled and running grid control.

Paint.Net and Screenshots

Plus saving the work and creating screenshots with Paint.Net was super simple. Editing is just as easy with the ability to open the Access mdb file, modify a form, save it, and capture it to an image using the Windows Print Screen facility and Paint.Net. This was the first step in a software development project we have begun with a freelance developer from outside the country. I will keep you updated on the progress of the project and present the final product to you in mid-August.

DotNetNuke Module Development

If you are looking to get started developing DotNetNuke (DNN) custom modules, a couple of good resources are available to aid in the endeavor. DNN Creative Magazine offers a number of of video tutorials on module development which you can access once you create an account with the magazine’s website. Another good source I found was presented by ADEF with an introduction in addition to using LINQ, DAL+, and Creating a Full Complete Module.

I had hoped to hire out the development of a number of DNN custom modules through the online freelance service, eLance.com. But my first project posting related to software development did not return the kind of developers I was seeking. I am now looking to either spend the time myself to developed the modules or seek out additional resources for this development. I have heard good things about ODesk.com, therefore that will be my next stop in my DNN Module Development project.

AJAX Toolkit at ASP.Net

If you are not familiar with the AJAX Toolkit available at Asp.Net then you should take a look. You can download the toolkit from this site but also take a look at a number of samples in action. The AlwaysVisibleControl is an interesting one that will take an area of code and allow it to hover over the page in a certain predefined area. The DragPanel is very nice also, allowing a listbox or other control to be drug around the page and docked in temporary locations.

ModalPopup

The ModalPopup is a feature that a number of blogs are now utilizing to collect user data when you arrive at their page. If you have a newsletter that you believe your guests would be interested in receiving, you can popup a modal window and make them interactive with the window before they access any other part of your site. A little annoying but useful for building a newsletter email list.

WAP Requirement

It’s quite amazing the number of affects that are available within the toolkit. The Rating example, Reorderlist, and Resizeable control are quite impressive. There’s a rounded corners solution and a slideshow. We will probably implement the slide show example for a recent news area that we have on our site at work. There is one perquisites for using the toolkit and that is having VS 2005 Web Application Projects (WAP) update installed. It is available for download on the AJAX Toolkit Codeplex site.

Selecting the Top 2 Meeting Dates from Separate Records

I wrote this short SQL Server code today to select the top 2 meeting dates and combine them into a single record. Using a temporary table it was possible to select the first date as one column and then select the second date as a second column. These records will be placed into a grid with the first record representing meeting dates and the second record showing agendas. Therefore the Union All was used to duplicate the first record.