Difference between revisions of "DD Class2"
(→Web forms) |
m (Text replacement - "syntaxhighlight lang="csharp" line="1" " to "syntaxhighlight lang="csharp"") |
||
(28 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | |||
− | |||
=Web Forms= | =Web Forms= | ||
Line 14: | Line 12: | ||
− | + | ==GET and POST== | |
− | Html get | + | Html get sends and reads name value pairs form the querystring. |
http://iam.colum.edu/DD/classsource/class2/simpleGet.html [http://iam.colum.edu/DD/gbrowser.php?file=/classsource/class2/simpleGet.html - source] | http://iam.colum.edu/DD/classsource/class2/simpleGet.html [http://iam.colum.edu/DD/gbrowser.php?file=/classsource/class2/simpleGet.html - source] | ||
[http://iam.colum.edu/DD/gbrowser.php?file=/classsource/class2/simpleGet.aspx simpleGet.aspx - source] | [http://iam.colum.edu/DD/gbrowser.php?file=/classsource/class2/simpleGet.aspx 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 [http://iam.colum.edu/DD/gbrowser.php?file=/classsource/class2/simplePost.html - source] [http://iam.colum.edu/DD/gbrowser.php?file=/classsource/class2/simplePost.aspx 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. | ||
+ | |||
+ | <syntaxhighlight lang="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"]; | ||
+ | } | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | ==In class== | ||
+ | Make a post and catch page | ||
==Web forms== | ==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}} | {{Anatomy of an aspx page}} | ||
Line 31: | Line 75: | ||
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 | 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 | :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> | + | <syntaxhighlight lang="csharp"> |
public void Page_Load() | public void Page_Load() | ||
{ | { | ||
Line 46: | Line 90: | ||
} | } | ||
} | } | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | Postback also triggers .Nets internal event model and page level events will be called | ||
+ | |||
+ | |||
+ | |||
+ | ==Intro to MVC== | ||
+ | |||
+ | Create a new project | ||
+ | |||
+ | Routing engine | ||
+ | |||
+ | URLs map to Controllers | ||
+ | |||
+ | Views display HTML and javascript | ||
==Homework== | ==Homework== | ||
− | Read | + | 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 | |
− | + | Create: Post and catch in Web Forms and .NET MVC | |
+ | |||
+ | Watch http://iam.colum.edu/screenz/Video_Tutorials/OOP/OPPIntroToAspx/OPPIntroToAspx.html | ||
+ | |||
+ | |||
+ | MSDN Videos | ||
+ | |||
+ | *Lesson 2: Creating a Web Forms User Interface http://www.asp.net/learn/videos/video-13.aspx | ||
+ | *Lesson 3: Understanding More About Events and Postback http://www.asp.net/learn/videos/video-12.aspx | ||
+ | *How Do I: Use Validation Controls in ASP.NET? http://www.asp.net/learn/videos/video-193.aspx | ||
+ | |||
+ | *.NET MVC http://www.asp.net/mvc/videos/5-minute-introduction-to-aspnet-mvc | ||
+ | |||
+ | ==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 | ||
+ | |||
+ | |||
+ | |||
+ | [[Category:Data Design]] |
Latest revision as of 03:23, 9 February 2016
Contents
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
Protcol | Host | Port | Path | File | Fragment identifier | Querystring |
---|---|---|---|---|---|---|
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="" 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>
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.
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"];
}
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
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
}
}
Postback also triggers .Nets internal event model and page level events will be called
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
Create: Post and catch in Web Forms and .NET MVC
Watch http://iam.colum.edu/screenz/Video_Tutorials/OOP/OPPIntroToAspx/OPPIntroToAspx.html
MSDN Videos
- Lesson 2: Creating a Web Forms User Interface http://www.asp.net/learn/videos/video-13.aspx
- Lesson 3: Understanding More About Events and Postback http://www.asp.net/learn/videos/video-12.aspx
- How Do I: Use Validation Controls in ASP.NET? http://www.asp.net/learn/videos/video-193.aspx
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