12 – Passing Data between pages: Forms, Sessions, & Query Strings
Session Aims & Objectives To introduce the fundamental ideas involved in passing data between pages Highlight modular design techniques, and demonstrate them in ASP Objectives, by end of this week’s sessions, you should be able to: pass data between pages, using: Self Posting Query Strings Session Variables use procedures, functions, parameters, and modules (shared C# files) in ASP.Net
Example: Logon v2 (design) Restrict access to home page
Example: Logon v2 (code) <%@ Page Language="C#" %> <script runat="server"> void btnLogon_Click(Object s, EventArgs e){ String un; String pw; un = txtUserName.Value; pw = txtPassWord.Value; if(un == "mark" && pw == "soft051"){ Response.Redirect("home.htm"); }else{ msg.InnerText = "Login details incorrect."; } </script> <html> <head><title></title></head> <body> <form runat="server"> Please logon:<br /> <input id="txtUserName" type="text" runat="server" /><br /> <input id="txtPassWord" type="text" runat="server" /><br /> <input id="btnLogon" type="submit" value="Logon" runat="server" onserverclick="btnLogon_Click" /> <p id="msg" runat="server"></p> </form> </body> </html> Logon2.aspx <html> <head><title>My Home page</title></head> <body> <p> Welcome to my home page.<br /> <img src="YouAreHere.jpg" /> </p> </body> </html> Home.htm
Example: Logon (Fixed Problem) View Source – shows client-side script: No server-side code
Example: Logon (Problem 2) User can type home page url (address) directly (bypassing logon page)
Solution Need way for: password page to tell home page that user logged in OK
Technique: Dead-Drop Variables 2 Spies wish to pass message between each other without actually meeting Arrange a dead-drop location one spy leaves message at location other spy visits location later to pick up message Variables used as dead-drop containers
Example: Logon v3 (code) LogonOK True <%@ Page Language="C#" %> <script runat="server"> bool LogonOK; void btnLogon_Click(Object s, EventArgs e){ String un; String pw; LogonOK = false; un = txtUserName.Value; pw = txtPassWord.Value; if (un == "mark" && pw == "soft051"){ LogonOK = true; Response.Redirect("home3.aspx"); }else{ msg.InnerText = "Login details incorrect."; } </script> <html> <head><title></title></head> <body> <form runat="server"> Please logon:<br /> <input id="txtUserName" type="text" runat="server" /><br /> <input id="txtPassWord" type="text" runat="server" /><br /> <input id="btnLogon" type="submit" value="Logon" runat="server" onserverclick="btnLogon_Click" /> <p id="msg" runat="server"></p> </form> </body> </html> Logon3.aspx <%@ Page Language="C#" %> <script runat="server"> bool LogonOK; void Page_Load(){ if(LogonOK == false){ Response.Redirect("Logon3.aspx"); } </script> <html> <head><title>My Home page</title></head> <body> <p> Welcome to my home page.<br /> <img src="YouAreHere.jpg" /> </p> </body> </html> Home3.aspx Does not work: always redirect to logon Variables do not persist between pages
Example: Logon v3 (Error) Variables – don't persist between pages
Passing Data (temporary) Session object used to pass information between pages: exists for current session persist between pages clears if user closes browser clears after 20 mins of inactivity no need for declaration Session["Thing"] = 91; Put 91 into Thing
Maintaining State: Session Object <%@ Page Language="C#" %> <script runat="server"> void btnSend_Click(Object s, EventArgs e){ Session["MSG"] = "Meet in SMB109"; } void btnClear_Click(Object s, EventArgs e){ Session.Abandon(); </script> <html> <head><title></title></head> <body> <form runat="server"> <input id="btnSend" type="submit" value="Send" runat="server" onserverclick="btnSend_Click" /> <input id="btnClear" type="submit" value="Clear" runat="server" onserverclick="btnClear_Click" /> <p><a href="Display.aspx">Display</a></p> </form> </body> </html> Send.aspx Session variable all variants no declaration Abandon method deletes all session variables
Maintaining State: Session Object <%@ Page Language="C#" %> <script runat="server"> void Page_Load(){ if(Session["MSG"] != null){ parMsg.InnerText = Session["MSG"].ToString(); }else{ parMsg.InnerText = ""; } </script> <html> <head><title></title></head> <body> <p id="parMsg" runat="server"></p> </body> </html> Display.aspx read session variable, and display in parMsg
Example: Message Using Session variable: MSG Meet in BGB202 Send.aspx <%@ Page Language="C#" %> <script runat="server"> void btnSend_Click(Object s, EventArgs e){ Session["MSG"] = "Meet in SMB109"; } void btnClear_Click(Object s, EventArgs e){ Session.Abandon(); </script> <html> <head><title></title></head> <body> <form runat="server"> <input id="btnSend" type="submit" value="Send" runat="server" onserverclick="btnSend_Click" /> <input id="btnClear" type="submit" value="Clear" runat="server" onserverclick="btnClear_Click" /> <p><a href="Display.aspx">Display</a></p> </form> </body> </html> Send.aspx <%@ Page Language="C#" %> <script runat="server"> void Page_Load(){ if(Session["MSG"] != null){ parMsg.InnerText = Session["MSG"].ToString(); }else{ parMsg.InnerText = ""; } </script> <html> <head><title></title></head> <body> <p id="parMsg" runat="server"></p> </body> </html> Display.aspx
Questions: Session Variables Write a line of C# code to put the number 74 into a session variable called id. Write C# code that displays 'Hello' in parMsg if the session variable called id is equal to 74 Session["id"] = 74; if (Session["id"] == 74){ parMsg.InnerText = "Hello"; }
Passing Data (temporary) Query Strings Useful for passing information between pages via links
Maintaining State: Query Strings Data added to end of URL (address): http://localhost/page.aspx?Surname=Bob ASP code can use this data: Request.QueryString["Surname"] would return the value "Bob" Query String
Example: Date-Time Menu.aspx <html> <head> </head> <body> <p>What background colour do you want for you date information? <br><a href=DateTime.aspx?Colour=yellow>Yellow</a> <br><a href=DateTime.aspx?Colour=cyan>Light Blue</a> </body> </html> Menu.aspx <%@ Page Language="C#" %> <script runat="server"> void Page_Load(){ String colour; colour = Request.QueryString["Colour"]; PageBody.Style.Add("background-color", colour); parD.InnerHtml = "The date is " + DateTime.Now.ToString("dd MMM yyyy") + "."; parT.InnerHtml = "The time is " + DateTime.Now.ToString("HH:mm") + "."; } </script> <html> <head><title></title></head> <body id="PageBody" runat="server"> <p id="parD" runat="server"></p> <p id="parT" runat="server"></p> </body> </html> DateTime.aspx
Reference: Server Object Model Request object: calling web page QueryString: used to get data from address (?) Response object: web page sent back Redirect: used to navigate to other page Session object: store data between pages Abandon: clears session data
Passing Data (persistent) Cookies (not covered in this module) stored on users’ (client) hard drive persists between sessions Database/file (covered in next lecture) stored on server hard drive
Example: Apples (analysis) SPECIFICATION User Requirements help young children learn to count from 1 to 10 Software Requirements Functional: computer selects number between 1 and 10 computer displays that number of apples user (child) types digits computer compares digits to number of apples Non-functional should be easy to use and interesting
Example: Apples v2 (design) Functionality: computer selects number between 1 and 10 computer displays that number of apples user types digits computer compares digits to number of apples
Data Representation Stored data vs. display display: seven images of apples (easier for people to understand) Stored data: 7 (easier to process) <img src=‘apple.gif /> int numApples; h = ""; for(a=1; a<=numApples; a++){ h = h + "<img src='Apple.gif'>"; } quest.InnerHtml = h;
Example: Apples v2 (code) Apples.aspx <%@ Page Language="C#" %> <script runat="server"> Random r = new Random(); long n; String h; void btnStart_Click(Object s, EventArgs e){ long a; n = r.Next(1,11); h = "How many apples are there?<br />"; for (a=1;a<=n;a++){ h = h + "<img src=Apple.gif>"; } quest.InnerHtml = h; Session["numApples"] = n; void btnCheck_Click(Object s, EventArgs e){ n = (long)Session["numApples"]; if (Int32.Parse(txtAns.Value) == n){ msg.InnerHtml = "Correct, well done!"; }else{ msg.InnerHtml = "Sorry, please try again."; </script> <html> <head><title></title></head> <body> <form runat="server"> <p id="quest" runat="server"></p> <input id="btnStart" type="submit" value="Start" runat="server" onserverclick="btnStart_Click" /> <input id="txtAns" type="text" runat="server" /> <input id="btnCheck" type="submit" value="Check" runat="server" onserverclick="btnCheck_Click" /> <p id="msg" runat="server"></p> </form> </body> </html> void btnStart_Click(Object s, EventArgs e){ long a; n = r.Next(1,11); h = "How many apples are there?<br />"; for (a=1;a<=n;a++){ h = h + "<img src=Apple.gif>"; } quest.InnerHtml = h; Session["numApples"] = n;
Example: Apples v2 (code) Apples.aspx <%@ Page Language="C#" %> <script runat="server"> Random r = new Random(); long n; String h; void btnStart_Click(Object s, EventArgs e){ long a; n = r.Next(1,11); h = "How many apples are there?<br />"; for (a=1;a<=n;a++){ h = h + "<img src=Apple.gif>"; } quest.InnerHtml = h; Session["numApples"] = n; void btnCheck_Click(Object s, EventArgs e){ n = (long)Session["numApples"]; if (Int32.Parse(txtAns.Value) == n){ msg.InnerHtml = "Correct, well done!"; }else{ msg.InnerHtml = "Sorry, please try again."; </script> <html> <head><title></title></head> <body> <form runat="server"> <p id="quest" runat="server"></p> <input id="btnStart" type="submit" value="Start" runat="server" onserverclick="btnStart_Click" /> <input id="txtAns" type="text" runat="server" /> <input id="btnCheck" type="submit" value="Check" runat="server" onserverclick="btnCheck_Click" /> <p id="msg" runat="server"></p> </form> </body> </html> void btnCheck_Click(Object s, EventArgs e){ n = (long)Session["numApples"]; if (Int32.Parse(txtAns.Value) == n){ msg.InnerHtml = "Correct, well done!"; }else{ msg.InnerHtml = "Sorry, please try again."; }
Problem Solving Strategies bottom-up Create a detailed solution first Then look for best solution refactoring – process of: changing internal design of code, without altering what it does top-down plan overall design fill in details in practice mixed – novices favour bot-up, experts top-down
Example: Apples v2 Difficult to see dependencies for lines far apart long n; String h; void btnStart_Click(Object s, EventArgs e){ long a; n = r.Next(1,11); h = "How many apples are there?<br />"; for (a=1;a<=n;a++){ h = h + "<img src=Apple.gif>"; } quest.InnerHtml = h; Session["numApples"] = n;
Example: Apples v2.5 Put dependent lines close together long n; String h; void btnStart_Click(Object s, EventArgs e){ long a; n = r.Next(1,11); Session["numApples"] = n; h = "How many apples are there?<br />"; for (a=1;a<=n;a++){ h = h + "<img src=Apple.gif>"; } quest.InnerHtml = h;
Example: Apples v3 (design) Functionality: computer selects number between 1 and 10 computer displays that number of apples user types digits computer compares digits to number of apples and displays number of apples typed by user
Example: Apples v3 (code) Apples.aspx <%@ Page Language="C#" %> <script runat="server"> Random r = new Random(); long n; String h; void btnStart_Click(Object s, EventArgs e){ long a; n = r.Next(1,11); Session["numApples"] = n; h = "How many apples are there?<br />"; for (a=1;a<=n;a++){ h = h + "<img src=Apple.gif>"; } quest.InnerHtml = h; void btnCheck_Click(Object s, EventArgs e){ n = (long)Session["numApples"]; h = ""; for (a=1; a<=Int32.Parse(txtAns.Value); a++){ if (Int32.Parse(txtAns.Value) == n){ msg.InnerHtml = h + "Correct, well done!"; }else{ msg.InnerHtml = h + "Sorry, please try again."; </script> <html> <head><title></title></head> <body> <form runat="server"> <p id="quest" runat="server"></p> <input id="btnStart" type="submit" value="Start" runat="server" onserverclick="btnStart_Click" /> <input id="txtAns" type="text" runat="server" /> <input id="btnCheck" type="submit" value="Check" runat="server" onserverclick="btnCheck_Click" /> <p id="msg" runat="server"></p> </form> </body> </html> copy + paste void btnCheck_Click(Object s, EventArgs e){ long a; n = (long)Session["numApples"]; h = ""; for (a=1; a<=Int32.Parse(txtAns.Value); a++){ h = h + "<img src='Apple.gif'>"; } if (Int32.Parse(txtAns.Value) == n){ msg.InnerHtml = h + "Correct, well done!"; }else{ msg.InnerHtml = h + "Sorry, please try again.";
Modular Design (Apples v4) What do lines do (group summary)? n = r.Next(1,11); Session["numApples"] = n; h = "How many apples are there?<br />"; for (a=1;a<=n;a++){ h = h + "<img src='Apple.gif'>"; } quest.InnerHtml = h; Pick Num. of Apples Display Question
Modular Design (top level) Top level reads like English algorithm: Dim n As Long Dim html As String Sub btnStart_Click(Object s, EventArgs e){ PickRandomNumberOfApples(); DisplayQuestion(); } void btnCheck_Click(Object s, EventArgs e){ n = (long)Session["numApples"]; DisplayApplesUser(); DisplayFeedback();
Modular Design (detail) Procedures contain (hide) detail: void PickRandomNumberOfApples(){ n = r.Next(1,11); Session["numApples"] = n; } void DisplayQuestion(){ h = "How many apples are there?<br />"; h = h + DisplayApples(n); quest.InnerHtml = h; void DisplayApplesUser(){ h = DisplayApples(long.Parse(txtAns.Value)); String DisplayApples(long num){ long a; String s; s = ""; for (a=1; a<=num; a++){ s = s + "<img src=Apple.gif>"; return s; void DisplayFeedback(){ if (Int32.Parse(txtAns.Value) == n){ msg.InnerHtml = h + "Correct, well done!"; }else{ msg.InnerHtml = h + "Sorry, please try again."; void DisplayQuestion(){ h = "How many apples are there?<br />"; h = h + DisplayApples(n); quest.InnerHtml = h; } void DisplayApplesUser(){ h = DisplayApples(long.Parse(txtAns.Value)); String DisplayApples(long num){ long a; String s; s = ""; for (a=1; a<=num; a++){ s = s + "<img src=Apple.gif>"; return s;
Tutorial Exercise: Message LEARNING OBJECTIVE: pass data between pages using session variables, and (form) self-posting Task 1: Get the message example working (from the lecture) Task 2: Change the send.aspx page so that when you click the buttons it gives some feedback as to what has happened. hint: add a paragraph
Tutorial Exercise: Logon LEARNING OBJECTIVE: pass data between pages using session variables, and (form) self-posting Task 1: Type in the code for the Logon v3 example (from the lecture) NOTE: this will not work properly (variables do not persist between pages) Task 2: Modify this to use a session variable to 'remember' whether the logon was successful. Note: It should not be possible to view the source code Note: It should not be possible to bypass the logon
Tutorial Exercise: Date LEARNING OBJECTIVE: pass data between pages using query strings Task 1: Get the Date-Time example (from the lecture) working Task 2: Modify your page to provide another choice of background colour.
Tutorial Exercise: Apples LEARNING OBJECTIVE: pass data between pages using session variables, and (form) self-posting Task 1: Type in the code for the Apples example (from the lecture) Task 2: Change it so that it disables the buttons appropriately Task 3: Change it so that it clears the text box and feedback as a new question begins Task 4: Add a score facility. when the page loads, the score should be 0 when the answer is correct, the score should increase by 1 when the score goes over 10, a congratulations message should be shown, and the score reset to 0