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





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

<August 2022>
SunMonTueWedThuFriSat
31123456
78910111213
14151617181920
21222324252627
28293031123
45678910

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



@copyright 2019 by Randy Scott randyscott777.com randyscott777@gmail.com