Web Development

Load Web Control via Drop Down Bar

When you have a lot of information on one web page you can organize that data into groups. You can then program your page so that only a specific group of information is displayed at one time. Then add a drop down menu to your page and program it so that when a user makes a selection that specific web control will be loaded into the page.

STEP 1: Place each group into a separate web control (.ascx file) like this:

<%@ Control Language="VB" AutoEventWireup="false" 
Inherits="ADKIT_ro_Jedi1200" %>

<div style="margin-left:20px;">
  <h1>Residential Opener: Jedi 1200</h1>
<p>Jedi™ 1200 Opener ADKIT Kit files: </p>

<div class="divlist">
<a href="/docs/Jedi-1200-Sales-Letter.pdf">Sales Letter</a>
<a href="/docs/Jedi-1200-ADKIT-Letter.pdf">ADKIT Letter</a>
<a href="/docs/Jedi-1200-Features-Benefits.pdf">Features</a>
<a href="/docs/Jedi-1200-Brochure.pdf">Brochure</a>
<a href="/docs/Jedi-1200-Warranty.pdf">Warranty</a>
<a href="/docs/Jedi-1200-FAQ.pdf">FAQ</a>
<a href="/docs/Jedi-1200-Press-Release.pdf">Press Release</a>
<a href="/docs/Jedi-1200-Presentation.pdf">Presentation</a>
<a href="/docs/Jedi-1200-Specs.pdf">Part Specs</a>

STEP 2: Register each of your web controls at the top of the page.

<%@ Page Language="VB" MasterPageFile="~/Site3c.master" AutoEventWireup="false" CodeFile="ADKITKits.aspx.vb" Inherits="ADKITKits" title="ADKIT Kits" %>

<%@ Register TagPrefix="WebC" TagName="ADKITCOABC" Src="ADKIT-co-ABC.ascx" %>
<%@ Register TagPrefix="WebC" TagName="ADKITCODEF" Src="ADKIT-co-DEF.ascx" %>   
<%@ Register TagPrefix="WebC" TagName="ADKITCOGHI" Src="ADKIT-co-GHI.ascx" %>   
<%@ Register TagPrefix="WebC" TagName="ADKITCOJKL" Src="ADKIT-co-JKL.ascx" %>   
<%@ Register TagPrefix="WebC" TagName="ADKITROJedi1200" Src="ADKIT-ro-Jedi1200.ascx" %>   
<%@ Register TagPrefix="WebC" TagName="ADKITROJedi1500" Src="ADKIT-ro-Jedi1500.ascx" %>   
<%@ Register TagPrefix="WebC" TagName="ADKITROMaster1000" Src="ADKIT-ro-Master1000.ascx" %> 
<%@ Register TagPrefix="WebC" TagName="ADKITROMaster1200" Src="ADKIT-ro-Master1200.ascx" %> 
<%@ Register TagPrefix="WebC" TagName="ADKITOacc" Src="ADKIT-opener-accessories.ascx" %> 

STEP 3: Inside the body of your .aspx page, place the call to your web control inside of a placeholder:

<asp:Content ID="Content2" ContentPlaceHolderID="CustomContent" Runat="Server">
       <asp:Panel ID="pnlCOABC" runat="server">
         <WebC:ADKITcoABC id="ADKITcoABC" runat="server"> </WebC:ADKITcoABC>
          <asp:Panel ID="pnlCODEF" runat="server">
         <WebC:ADKITcoDEF id="ADKITcoDEF" runat="server"> </WebC:ADKITcoDEF>
        <asp:Panel ID="pnlCOGHI" runat="server">
         <WebC:ADKITcoGHI id="ADKITcoGHI" runat="server"> </WebC:ADKITcoGHI>
      <asp:Panel ID="pnlCOJKL" runat="server">
         <WebC:ADKITcoJKL id="ADKITcoJKL" runat="server"> </WebC:ADKITcoJKL>

<asp:Panel ID="pnlROJedi1500" runat="server">
  <WebC:ADKITROJedi1500 id="ADKITROJedi1500" runat="server"> 
<asp:Panel ID="pnlROJedi1200" runat="server">
  <WebC:ADKITROJedi1200 id="ADKITROJedi1200" runat="server">
<asp:Panel ID="pnlROMaster1200" runat="server">
  <WebC:ADKITROMaster1200 id="ADKITROMaster1200" runat="server">
<asp:Panel ID="pnlROMaster1000" runat="server">
  <WebC:ADKITROMaster1000 id="ADKITROMaster1000" runat="server">
<asp:Panel ID="pnlADKITOacc" runat="server"> 
  <WebC:ADKITOacc id="ADKITOacc" runat="server"> 
<br />
  <asp:Panel ID="pnlDocMenu" runat="server"> 
 <div id="navcontainer">
       <a href="/DownloadShopDrawings.aspx">
           Shop Drawings</a></li>
       <a href=" /InstallationInstructions.aspx">
           Installation Instructions</a></li>
        <a href="/price-books.aspx">
          Price Books</a></li>
         <li><a href="/parts-list.aspx">Parts List</a></li>
         <li><a href="/view-all-specs.aspx">SPECS</a></li>
        </div> </asp:Panel>      

STEP 4: Add a dropdown men control onto your page and list all of the available options. Be sure to add AutoPostBack=”True” to the
dropdown menu control so that the page is updated with each post back.

<h1>NEW PRODUCT ADKIT KITS</h1><p> </p>

   <p>Select which ADKIT Kit you want to view: 
                <asp:DropDownList ID="ddlADKITKits" runat="server" AutoPostBack="True">
                   <asp:ListItem Selected="True"></asp:ListItem>
                    <asp:ListItem>- -Commercial Operators - -</asp:ListItem>
                    <asp:ListItem>- -  Residential Openers - - </asp:ListItem>
                    <asp:ListItem>Jedi 1500 Screw</asp:ListItem>
                    <asp:ListItem>Jedi 1200 Belt and Chain</asp:ListItem>
                    <asp:ListItem>Master 1200 Screw</asp:ListItem>
                    <asp:ListItem>Master 1000 Belt and Chain</asp:ListItem>
                   <asp:ListItem>- -  Opener Accessories - -</asp:ListItem>
                    <asp:ListItem>Opener Accessories</asp:ListItem>

STEP 5: Program your page (in this case it’s programmed in VB.NET) so that first all of the placeholders are not visible. Then add code to display a specific web control based on the selection of the drop down bar.

Partial Class ADKITKits
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, 
ByVal e As System.EventArgs) Handles Me.Load
        'Check for authorization

        If Not Session("userid") Is Nothing Then
            'User is logged in

        End If

     'now code the options:
        If Not Page.IsPostBack Then
            pnlDocMenu.Visible = False
            pnlCOABC.Visible = False
            pnlCODEF.Visible = False
            pnlCOGHI.Visible = False
            pnlCOJKL.Visible = False
            pnlROJedi1500.Visible = False
            pnlROJedi1200.Visible = False
            pnlROMaster1200.Visible = False
            pnlROMaster1000.Visible = False
                       'Opener Accessories
            pnlADKITOacc.Visible = False

            pnlDocMenu.Visible = True
        End If

    End Sub

    Protected Sub ddlADKITKits_SelectedIndexChanged(ByVal sender As Object, 
ByVal e As System.EventArgs) Handles 


        Dim SelectedList As String = ddlADKITKits.SelectedValue.ToString

  'start by clearing them all out

        'Comm Openers
        pnlCOABC.Visible = False
        pnlCODEF.Visible = False
        pnlCOGHI.Visible = False
        pnlCOJKL.Visible = False

        'Resi Openers
        pnlROJedi1500.Visible = False
        pnlROJedi1200.Visible = False
        pnlROMaster1200.Visible = False
        pnlROMaster1000.Visible = False
               'Opener Accessories
        pnlADKITOacc.Visible = False

'now show the web control based on the user's selection in the drop down menu:

        Select Case SelectedList
            'all the commercial operators:
            Case "ABC"
                pnlCOABC.Visible = True
            Case "DEF"
                pnlCODEF.Visible = True
            Case "GHI"
                pnlCOGHI.Visible = True
            Case "JKL"
                pnlCOJKL.Visible = True
           'all the residential openers:
            Case "Jedi 1500 Screw"
                pnlROJedi1500.Visible = True
            Case "Jedi 1200 Belt and Chain"
                pnlROJedi1200.Visible = True
            Case "Master 1200 Screw"
                pnlROMaster1200.Visible = True
            Case "Master 1000 Belt and Chain"
                pnlROMaster1000.Visible = True
                      'the accessories
            Case "Residential Opener Accessories"
                pnlADKITOacc.Visible = True
            Case Else
                'pnlCorporate.Visible = True
        End Select
    End Sub
End Class

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s