DD Class2

esse quam videri
Revision as of 01:49, 17 September 2012 by Jeff (talk | contribs) (→‎Homework)
Jump to: navigation, search

Web Forms

Review of web forms

HTML and HTTP

Http is a stateless protocol. There is mo mechanism built in to the protocol that allows the server to remeber clients or requests. An http simply responds to http verbs GET, POST, PUT, DEL, TRACE etc. contained in RFC 2068 HTTP/1.1

regular html forms post information using forms in 2 ways with a get or a post http request.

Get

Get send information to the server using the URI. Limited to 1024 character in some browsers and servers.

Example http://iam.colum.edu/oop/classsource/class9/simpleGet.html simpleGet.html - source

The simpleGet.html pages form has the action of 'simpleGet.aspx' this mean that when the form is submitted the browser will request the 'simpleGet.aspx' with whatever parameters are in the form. Since the method = get these pararmeters will show up are query string parameters

URI and querystring parameters

URI - Universal Resource Identifier http://src.doc.ic.ac.uk/computing/internet/rfc/rfc1630.txt RFC1630

Http URI

ProtcolHostPortPathFileFragment identifierQuerystring
http://info.cern.ch:8000/imaginary/test/file.html#link?test=yes

Post

Post posts the variables in the HTTP Header.

Example http://iam.colum.edu/oop/classsource/class9/simplePost.html simplePost.html - source 

FirstName:
LastName:
Header Name 	Value HttpMethod 	GET
Connection 	keep-alive
Keep-Alive 	300
Accept 	text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Charset 	ISO-8859-1,utf-8;q=0.7,*;q=0.7
Accept-Encoding 	gzip,deflate
Accept-Language 	en-us,en;q=0.5
Cookie 	ASP.NET_SessionId=ezfgw255ix0zd5yogj3eawej
Host 	imdev
Referer 	http://imdev/infod/jeff/
User-Agent 	Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1


REST

Representational state transfer

https://www.ibm.com/developerworks/webservices/library/ws-restful/

http://www.infoq.com/articles/rest-introduction

HTML forms

http://www.w3.org/TR/html4/interact/forms.html#h-17.4

Input Types

Input type from w3c http://www.w3.org/TR/html4/interact/forms.html#h-17.4

Text

creates a text entry box
<input type="Text" id="txtText1" />

Password

same as text but hides characters 'note the password is not hashed or encrypted when is it is sent to the web server; it is only masked in the web browser'
<input type="Password" id="passwd1" />


CheckBox

creates checkboxes
chkbxTest1<input type="Checkbox" id ="chkbxTest1" name="chkbxTest1" />
chkbxTest1<input type="Checkbox" id ="chkbxTest2" name="chkbxTest2" />

chkbxTest1 chkbxTest2

Radio

creates radio button. Radio buttons are grouped by name
rbTest1<input type="radio" id="rbTest1" name="rbTest1" />
rbTest2<input type="radio" id="rbTest2" name="rbTest1" />
rbTest3<input type="radio" id="rbTest3" name="rbTest1" />

rbTest1 rbTest2 rbTest3

Image

submit button. Default value is Submit Query can be changes with Value attribute.
<input type="Submit" Name="Submit" id="Submit1" />
<input type="Submit" Name="Submit" id="Submit2" Value="My Submit" />

Reset

rest button. Default value is Submit Query can be changes with Value attribute.
<input type="Reset" Name="Reset" id="Reset1" />
<input type="Reset" Name="Reset" id="Reset2" Value="Reset All Values" />

Button

button. 
<input type="Button" Name="Button" id="Button" />
<input type="Button" Name="Button" id="Button2" Value="Don't Panic" />

Image

Graphical submit button. Should provide alt tag
<input type="Image" src="msdn.jpg" Name="ImageSubmit" id="ImageSubmit" />


Hidden

hah ha can't see this
<input type="Hidden"  Name="Hidden1" id="Hidden1" value="Hide me" />

File

file uses multi part header
<input type="File"  Name="File1" id="File1" />
<input type="File"  Name="File2" id="File2" value="InitalFile.txt" />

Select Type Select

makes a dropdown list. 


<select name="selectTest">
     <option selected value="Component_1_a">Select1</option>
     <option value="Component_1_b">Select2</option>
     <option value="Component_1_c">Select3</option>
     <option value="Component_1_d">Select4</option>
</select>

<select multiple size="4" name="selectTest2">
     <option selected value="Component_1_a">Select1</option>
     <option value="Component_1_b">Select2</option>
     <option value="Component_1_c">Select3</option>
     <option selected value="Component_1_d">Select4</option>
     <option value="Component_1_e">Select5</option>
</select>



Text Area TextArea

multiple line of text 
<textarea name="thetext" rows="20" cols="80">
  First line of initial text.
  Second line of initial text.
</texteara>

Template:HtmlForms



GET and POST

Html get sends and reads name value pairs form the querystring.

http://iam.colum.edu/DD/classsource/class2/simpleGet.html - source simpleGet.aspx - source

Html posts send data by adding to the http header forms collection. This data is not usually displayed in the web browser.

http://iam.colum.edu/DD/classsource/class2/simplePost.html - source simplePost.aspx - source

Reading GET and POST values with ASPX

Request.QueryString["Name"]

will search for a name called 'Name' in the QueryString collection and return its value

Request.Form["Name"]

will search for a name called 'Name' in the Forms collection and return its value

Request["Name"]

will search for a name called 'Name' in the QueryString and Forms collection and return its value
It's a good idea to check is the vlaue you are checking is of type string before you try to use it. 
If you try to read a name value pair that doesn't exist the value will be null and you will get 
a null value exception.

<csharp> string strLastName = ""; //declare a string variable and initialize it to ""

//Make sure the Form value exists and is a string if(Request.Form["LastName"] is string ) 

   {
       strLastName = Request.Form["LastName"];
   }

//Make sure the QueryString values exists and is a string if(Request.QueryString["LastName"] is string ) 

   {
       strLastName = Request.QueryString["LastName"];
   }

//either POST or GET in the example if(Request["LastName"] is string ) 

   {
       strLastName = Request["LastName"];
   }

</csharp>

In class

Make a post and catch page

Web forms

http://iam.colum.edu/DD/classsource/class2/htmlForms.html

http://iam.colum.edu/DD/classsource/class2/aspForms.aspx


Anatomy of an aspx page

Page Directive The page directive must be on the first line of an aspx page. It consists of Name/Value Pairs and sets parameters that will be used throughout the execution of the page ie. the language.

<%@ Page language="c#" debug="True" trace="False"%>

C# Code may be embedded in the page using script tags similar to javascript

<script language="c#" runat="server"> </script>

Notice the runat attribute is set to 'server'. This is what makes the code execute on the server rather than be parsed by the client.

Console applications start executing in the main method

<csharp>public static void Main() {}</csharp>

The .Net Framework can also execute on the web. Rather than having a Main method a web page starts it's execution with a method called Page_Load

<csharp>public Page_Load { }</csharp>

There are actually several method that are executed in an aspx page.

http://samples.gotdotnet.com/quickstart/aspplus/

Asp.net web form often post back to that same page. Using the .Net event model the postback can fire events which causes changes on the page

Page.IsPostBack

the PostBack proprtey is from the page class. It hold a bolean value of if that page has posted back to itself or now. It os often used in pageload

<csharp> public void Page_Load() { 

  if(!(Page.IsPostBack))
  {
      //only run this is the page has posted back to itself
  }
  else
  {
      //run this the first time the page is hit
  }

} </csharp>

Postback also triggers .Nets internal event model and page level events will be called

Basic Events

Button and controls can cause PostBack and can register their own events like OnClick


Labels and Panels

demo labels and innerHtml on regular html tags

Control Loops

List Controls

List Controls .Items check .Checked to find Checked controls

Looping through the Items collection in a ListControl. Example In Class!!!

Dynamically Addiing Contols

<csharp> //Adding Controls at run time Button b = new Button(); b.ID = "Button2"; b.Text = "Added Button"; b.Click += new EventHandler(b_Click); Panel1.Controls.Add(b); </csharp>

Intro to MVC

Create a new project

Routing engine

URLs map to Controllers

Views display HTML and javascript

Homework

Read Chapter 2 and 3 in Beginning Data Design (BDD)

READ http://ofps.oreilly.com/titles/9781449320317/ch_MvcForWebFormsDevs.html

READ http://ofps.oreilly.com/titles/9781449320317/ch_WebArchitecture.html


Watch http://iam.colum.edu/screenz/Video_Tutorials/OOP/OPPIntroToAspx/OPPIntroToAspx.html


MSDN Videos

Links

http://www.w3schools.com/html/html_forms.asp

http://ofps.oreilly.com/titles/9781449320317/ch_MvcForWebFormsDevs.html

http://ofps.oreilly.com/titles/9781449320317/ch_WebArchitecture.html

Retrieved from "http://imamp.colum.edu/mediawiki/index.php?title=DD_Class2&oldid=20993"