Page 1 - Basic Controls

Master Page - create a master page

Menu (inc) - uses 2 includes for CSS and Javascript

Menu (ddl) - menu uses a drop down list

Slider - changes background color in order to show text

PlaceHolder -

Upload - to upload images

Rotator - rotates 4 images

Include - include parts of a web page

Calendar - this control has functions for a month calendar

UpdatePanel - does a partial render, thus reducing flicker???

Page2 - has a variety of controls for lists

Page3 - has some controls in the AJAX toolkit

Page4 - has a some tips and techniques

Create a Master Page

Add - New Item - Web Form Master Page - Name: Site1.master

Add whatever content, normally CSS and a menu

Add - Web Form with Master Page

Note: The 'Page' directive will have MasterPageFile="~/Site1.Master"

[asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    add any other CSS and Script here in the header section
[/asp:Content>
[asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    add whatever content here
[/asp:Content>

see ChildForm1.aspx

Menu via Include

CSS

[% Response.WriteFile("MenuStyleCss.inc"); %]

[% Response.WriteFile("MenuToggleJS.inc"); %]

............

Click here

HTML

[div class='topnav' id='myTopnav' style='font-size:16px; font-weight:bold'> [a href='#homeContainer'>Home [/div>

Menu using DDL

This example developes the menu in Site1.master

Add the style to the header after the title and before Content2 placeholder

Add the following menu structure before the Content2 placeholder

[ul class="top-level" >  
    [li> [a href="Default.aspx" style="margin-left:15px">My Journey[/a>
         [ul class="second-level">
             [li> [a href="Default.aspx#masterPage">Create a Master Page[/[a> [/[li>
             [li> [a href="Default.aspx#menuInclude">Menu via Include[/[a> [/[li>
             [li> [a href="Default.aspx#menuList">Menu via List[/[a> [/[li>
        [/ul>
    [/[li>
[/ul>

see example on ChildForm1.aspx

Timed Slider for Background Color

HTML

div id='sliderBackDiv'

C#

ClientScript.RegisterStartupScript(this.GetType(), 'script', 'setInterval(nextBackColor, 5000);', true);

Javascript

window.onload(setup);
function setup() { sliderCounter = 0;}
function nextBackColor() {
sliderCounter++;
var sliderBack = document.getElementById('sliderBackDiv');
if (sliderCounter % 3 == 0) sliderBack.style.backgroundColor = 'lightgray';

Upload Definition

In ASPX:

asp:FileUpload

asp:Button OnClick='btnUpload_Click'

asp:Label

In C#

btnUpload_Click() {

if (FileUpload1.HasFile) uploadLabel.Text = FileUpload1.FileName;

Upload Execution

name tbd

Rotator for Pictures

HTML

img id='img1,img2,img3'

C#

Register...

Javascript

var temp = getElementById('img1').src;
getElementById('img1').src = getElementById('img2').src;
getElementById('img2').src = getElementById('img3').src;
getElementById('img3').src = getElementById('img4').src;
getElementById('img4').src = temp.src;

Include Code

.inc File

Right click solution, Add, ???
Any css, javascript, or HTML code'

HTML

[% Response.Write(somefile.inc) %]

See Menu CSS section's click here

Calendar Definition

aspx's HTML:

Calendar with the following options:

- BorderWidth

TODO - Display the selected date

Calendar Control

December 2024

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Popup for Calendar

Note: This is not modal

The popup for calendar is from javascript

The popup returns the date selected as a session variable, however a button is needed to get it

Place Holder

A placeholder is similiar to a div, but can add controls to it from C#

Update Panel

This will re-display the date/time every second

By specifiying an update panel it will only partially render it,

thereby reducing the flicker otherwise resulting a total render.

Note: MaintainScrollPositionOnPostback="true" Page directive was needed