mypages.valdosta.edu · Web viewLab 5 – CS 3340. To make this document easier to read, it is recommend that you turn off spell checking and grammar checking in Word: Choose: File,

Lab 5 – CS 3340

To make this document easier to read, it is recommend that you turn off spell checking and grammar checking in Word:

1. Choose: File, Option, Proofing2. At the very bottom, check: “Hide spelling errors…” and “Hide grammar errors…”

Lab Objectives

1. Understand how postback works with a single page2. Understand how session memory works with a single page3. Understand how postback works when you leave a page and return4. Understand how to use session memory across multiple pages.5. Use a query string to pass information between pages

Lab Organization

There are 6 stages to complete Lab 5.

Stage Description1 Understanding Postback2 Understanding Session Memory3 Understanding Postback, Multiple Pages4 Using Session Memory across Multiple Pages5 Using a QueryString to Pass Information Between Pages6 Package Assignment for Submission

Follow the directions below to complete the lab.

Stage 0 – Understanding Postback

(Optional) Watch the 19 minute video, Postback in asp.net. The description:

This video will introduce you the what goes on "under the covers" when your ASP.NET application’s browser and server interact.

This is a very well-done video that touches on information from the HTML Forms tutorial you went through and some of the things I’ve briefly mentioned in class. I encourage you to watch this video, but it is not required.

1

https://channel9.msdn.com/Blogs/ASP-NET-Site-Videos/submit-and-postback

Stage 1 – Understanding Postback

(Read, no action required) There is a difference between the “first” time a page is requested and a postback.

a. First time – The user types in a URL, request is sent to the server, the page is located, run, and the resulting HTML is sent to the browser.

b. Postback – The user interacts with the page and eventually interacts with a control (e.g a button) that causes the page to postback to itself. This means that all the form data (e.g. value typed in a text box, item selected in a dropdown, etc) is sent back to the server to the same page on the server. In .NET, you always postback to the same page you are viewing.

c. Postback – Postbacks continue until (a) server-code transfers control to another page, (b) the user navigates to another page (or logs out), (c) or the session times-out due to inactivity for a certain amount of time.

Here, we will explore this difference. We will also observe that the contents of controls on a web page are persisted between postbacks.

1. Create your lab05 project (solution folder must be named lab05_lastName).

2. Add a web form named, postback.

3. Add a ListBox and set the ID to lbxNames. Stretch it extra tall.

4. Add a Button beside it and set the ID to btnDisplay

5. Add a TextBox below and set: (a) ID to txtMessage, (b) TextMode to MultiLine and then stretch it larger.

6. Add this code to Page_Load

lbxNames.Items.Add(new ListItem("Dave", "11"));lbxNames.Items.Add(new ListItem("Paul", "44"));lbxNames.Items.Add(new ListItem("Anna", "3"));

7. Run (the button is not active yet)

8. Create an event handler for the button’s click event which displays the text and value of the selected item from the listbox in the multiline text box.

9. Run, select a name, press the button. Repeat several times. Note that every time you press the button, the three names are appended onto the existing list in the listbox.

10. (Read, no action required) Why are items added to the listbox every time you press the button?

a. Remember that every time the button is pressed, the page is posted-back to the server where two things occur: Page_Load is executed, which adds the three names to the listbox btnDisplay_Click is executed

2

b. Important Point : The values in a control persist between postbacks.

Thus, each time Page_Load executes it adds to the listbox.

c. In web programming, a session begins when a user requests a page, the page is delivered, the user interacts with the page, posting back to the server over and over until the user has completed the task they set out to do. At this point the session is considered over (either explicitly by the user logging out, or the user navigating to another site, or leaving the computer altogether, in which case, the session times out.

d. It is frequently useful for the programmer to be able to detect whether it is the first request for a page ( i.e. the session is beginning), or the request for a page is a postback (i.e. the session is onoing).

e. Every time a page is requested (either the first time, or a post back), an instance of the page is created in memory on the server. In other words, an instance of the code-behind file is created. The instance of the page itself can be referenced by this (the same as Java), or with the more common alias, Page. The page class has a property, IsPostBack that returns true if a post-back occurs or false if it is the first time on the page. To detect whether it is the first time on the page or a postback we can use code like this:

protected void Page_Load(object sender, System.EventArgs e) {if (!Page.IsPostBack) {

// First time on page}else {

// Postback}

}

Thus, to correct this problem, we only want to build the listbox the first time we visit the page, not on postbacks.

11. Fix the problem above so that the page works correctly.

Stage 2 – Understanding Session Memory

You are going to write a page that allows the user to enter a number and press an “Add” button, repeatedly. Each time the button is pressed, the current number is added to the sum of the previous numbers and then the new sum is displayed. To accomplish this, we need to “remember” the previous sum between postbacks. The solution we illustrate is to use session memory.

1. Add a web form named, session1.

2. Add a TextBox and set the ID to txtNum.

3. Add a Button beside it and set the (a) ID to btnAdd, (b) Text to “Add”

4. Add a TextBox below and set: (a) ID to txtMessage, (b) TextMode to MultiLine and stretch it larger.

3

5. Do the following:

a. Add a click event-handler for the button (empty, we’ll add the code shortly).b. Add an instance variable to the page, sum which will hold the sum of the numbers entered.c. Add code to the click event to add the current number to the sum and display the new sum.

public partial class session1 : System.Web.UI.Page {

int sum;protected void Page_Load(object sender, EventArgs e) {}

protected void bthAdd_Click(object sender, EventArgs e) {int curNum = Convert.ToInt32(txtNum.Text);sum += curNum;txtMessage.Text += "Current Num=" + curNum + ", Sum=" + sum + "\n";txtNum.Focus();txtNum.Attributes["onfocus"] = "this.select();";

}}

6. Run, type a number in, Enter, repeat several times. Notice that it does not work correctly.

7. (Read, no action required) Important Points:

a. When a request for a page is made (either the first time or a post back), as stated earlier, an instance of the page is created. After the code is executed, and the output is converted to HTML and sent back to the browser, the page object is destroyed. Thus, all instance variables defined in the page are destroyed when the page is sent back to the browser. Thus, the sum is not remembered across postbacks.

b. The internet programming paradigm is stateless, e.g. all variable values are destroyed when the page is sent back to the browser. However, we can explicitly tell the page to store any variables we want in Session memory. Session is memory that is allocated on the Server which can be used to store information between postbacks. Thus, when the page posts back to the server we can program the page to retrieve any variables we have stored in Session.

c. To put a value in Session, we associate it with a key which we use to retrieve it later. For example, to put a value in Session:

Session.Add("key", value);

And to retrieve it later:

Type value = (Type)Session["key"];

or

Type value = Convert.ToType(Session["key"]);

Note that values stored in Session are stored as Objects so we must cast (or convert) them when we retrieve them.

4

8. Next, we fix the problem above using session memory. Do the following:

a. Add this code to Page_Load

if (!Page.IsPostBack) {Session.Add("Sum", 0);

}else {

sum = Convert.ToInt32(Session["Sum"]);}

Note: the first time the page is accessed, we put “Sum” into session, initializing it to 0. On postbacks, we retrieve the value of “Sum” and store it in the instance variable, sum.

b. Add this line to the end of the click event:

Session.Add("Sum", sum);

Important Point: Anytime you change a variable that you want stored in Session you should immediately store it in Session. You will forget to do this and it will haunt you!

c. Run the page and verify that the cumulative sum of the numbers entered is correct.

5

Stage 3 – Understanding Postback, Multiple Pages

In this example we will see how “first time” (e.g. !Page.IsPostBack) changes when we navigate to a different page in our website, and then later return.


a. Add a web form named, pback1.

b. Open the page in Source mode and replace everything except the page directive (the first line) with:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <form id="form1" runat="server"> <div> <p><strong>Postback Multipage Example</strong></p> <p>This page illustrates when it is the first time on the page or postback and what happens when you navigate to a new page and then back. You should look carefully at the code for this page and for "Page 2" (pback2.aspx).</p> <p> <asp:Button ID="btnSubmit" runat="server" onclick="btnSubmit_Click" Text="Submit/Postback" /> <asp:Button ID="btnLoadPage" runat="server" onclick="btnLoadPage_Click" Text="Reload" /> <asp:Button ID="btnPage2" runat="server" onclick="btnPage2_Click" Text="Page 2" /> </p> <p> <asp:TextBox ID="txtMessage" runat="server" EnableViewState="False" Height="224px" TextMode="MultiLine" Width="384px"></asp:TextBox> </p> </div> </form></body></html>

6

c. Open the code behind file, pback1.aspx.cs and replace the class (everything between the namespace line and the last “}”) with:

public partial class pback1 : System.Web.UI.Page { string nline = System.Environment.NewLine; protected void Page_Load(object sender, System.EventArgs e) { // First time on page if (!Page.IsPostBack) { txtMessage.Text += nline + "***First time on page" + nline; } // Postback else { txtMessage.Text += nline + "***Post-back" + nline; } }

protected void btnSubmit_Click(object sender, System.EventArgs e) { txtMessage.Text += "***Submit callled" + nline; }

protected void btnLoadPage_Click(object sender, EventArgs e) { // Reload the page. Response.Redirect(Request.RawUrl); }

protected void btnPage2_Click(object sender, EventArgs e) { // Go to page 2. Response.Redirect("pback2.aspx"); } }

d. Study the code above carefully.

7


a. Add a web form named, pback2.


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <form id="form1" runat="server"> <div> <p><strong>Postback Multipage Example - Page 2</strong></p> <p> <asp:Button ID="btnSubmit" runat="server" onclick="btnSubmit_Click" Text="Submit/Postback" /> <asp:Button ID="btnPage1" runat="server" onclick="btnPage1_Click" Text="Page 1" /> </p> <p> <asp:TextBox ID="txtMessage" runat="server" Height="182px" TextMode="MultiLine" Width="279px"></asp:TextBox> </p> </div> </form></body></html>

8

c. Open the code behind file, pback2.aspx.cs and replace the class (everything between the namespace line and the last “}”) with:

public partial class pback2 : System.Web.UI.Page { string nline = System.Environment.NewLine; protected void Page_Load(object sender, EventArgs e) { // First time on page if (!Page.IsPostBack) { txtMessage.Text += nline + "***First time on page" + nline; } // Postback. else { txtMessage.Text += nline + "***Post-back" + nline; } } protected void btnSubmit_Click(object sender, EventArgs e) { txtMessage.Text += "***Submit callled" + nline; } protected void btnPage1_Click(object sender, EventArgs e) { // Go to page 1 Response.Redirect("pback1.aspx"); } }



a. Run pback1.aspx

b. Note the message in the text area (“First time on page”)

c. Press the “Submit/Postback” button

d. Note:i. Page_Load is called and a postback is detected and a message is displayed, “Post-back”

ii. Then, the btnSubmit_Click event is executed which displays the message, “Submit called”

e. Press the “Submit/Postback” button several more times and observe the output.

f. Go back to VS and open the code behind file, pback1.aspx.cs and find the btnPage2_Click event code:

protected void btnPage2_Click(object sender, EventArgs e) { // Go to page 2. Response.Redirect("pback2.aspx");}

Notice that we use the ASP.NET Response object to load a page:

Response.Redirect("pback2.aspx");

g. Return to the browser where pback1.aspx is running. Press the “Page 2” button and control is transferred to pback2.aspx. Note the message in the text area (“First time on page”)

9

h. Press the “Submit/Postback” button several times and observe the output.

i. Press the “Page 1” button and control is transferred to pback1.aspx. Note the message in the text area (“First time on page”).

Thus, when you leave a page and return, it is the first time on the page, i.e. it is not a postback.

j. Press the “Submit/Postback” button several times and observe the output.

k. Go back to VS and open the code behind file, pback1.aspx.cs and find the btnLoadPage_Click event code:

protected void btnLoadPage_Click(object sender, EventArgs e) { // Reload the page. Response.Redirect(Request.RawUrl);}

Notice that we redirect to: Request.RawUrl which is simply the page we are on. We are asking the server to reload the page which will, in effect, be the first time on the page.

l. Return to the browser where pback1.aspx is running and press the “Reload” button and observe that it is now the “First time on the page”.

m. Repeat the steps above, or simply experiment making sure you understand how postback works with multiple pages and what it means to reload a page.

10

Stage 4 – Using Session Memory across Multiple Pages


a. Add a web form named, session2a.


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <form id="form1" runat="server"> <div> <p>

Name<asp:TextBox ID="txtName" runat="server"></asp:TextBox>

</p><p>

Favorite Integer<asp:TextBox ID="txtFavInt" runat="server"></asp:TextBox>

</p><p>

<asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click"

Text="Save" /> <asp:Button ID="btnAdd1" runat="server" OnClick="btnAdd1_Click" Text="Add 1" />

<asp:Button ID="btnPage2" runat="server" OnClick="btnPage2_Click" Text="Page 2" />

</p><p>

Your current sum is: <asp:Label ID="lblSum" runat="server" ForeColor="Red" Text="n/a"></asp:Label>

<br /></p>

</div> </form></body></html>

11

c. Open the code behind file, session2a.aspx.cs and replace the class (everything between the namespace line and the last “}”) with:

public partial class session2a : System.Web.UI.Page {

private int sum;protected void Page_Load(object sender, EventArgs e) {

if (!Page.IsPostBack) {// If first time on page, initialize sum to 0 and put in Session.sum = 0;Session.Add("Sum", sum);

}else {

// If postback, pull sum from Sessionsum = Convert.ToInt32(Session["Sum"]);

}}

protected void btnSave_Click(object sender, EventArgs e) {// Get the value entered ...int num = Convert.ToInt32(txtFavInt.Text);// ...which serves as the initial sumsum = num;// Add the sum and name to Session.Session.Add("Sum", sum);Session.Add("Name", txtName.Text);// Display the sumlblSum.Text = num.ToString();

}

protected void btnAdd1_Click(object sender, EventArgs e) {// Add 1 to the current sum and then store in Session.sum++;Session.Add("Sum", sum);lblSum.Text = sum.ToString();

}

protected void btnPage2_Click(object sender, EventArgs e) {// Go to new page.Response.Redirect("session2b.aspx");

}}


12


a. Add a web form named, session2b.


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <form id="form1" runat="server"> <div> <p>

Welcome,<asp:Label ID="lblName" runat="server" ForeColor="Red"

Text="Label"></asp:Label></p><p>

Your current sum is:<asp:Label ID="lblSum" runat="server" ForeColor="Red"

Text="Label"></asp:Label></p><p>

<asp:Button ID="btnAdd1" runat="server" OnClick="btnAdd1_Click" Text="Add 1" />

<asp:Button ID="btnPage1" runat="server" OnClick="btnPage1_Click" Text="Page 1" />

<br /></p>


13

c. Open the code behind file, session2b.aspx.cs and replace the class (everything between the namespace line and the last “}”) with:

public partial class session2b : System.Web.UI.Page {

private int sum;private string name;protected void Page_Load(object sender, EventArgs e) {

// Always get the sum from Session. However, note that if the// user starts on this page (e.g. has it bookmarked), the sum// may not be in session, which could cause a problem.sum = Convert.ToInt32(Session["Sum"]);lblSum.Text = sum.ToString();

if (!Page.IsPostBack) {// Get the name out of Session and put in labelname = Convert.ToString(Session["Name"]);lblName.Text = name;

}}

protected void btnAdd1_Click(object sender, EventArgs e) {// Increase the sum by 1, put in Session, and display.sum++;Session.Add("Sum", sum);lblSum.Text = sum.ToString();

}

protected void btnPage1_Click(object sender, EventArgs e) {// Go back to first page.Response.Redirect("session2a.aspx");

}}


14


a. Run session2a.aspx, type in a name and an integer, and then press, “Save”.

b. Press, “Add 1” a handful of time and observe the sum increase.

c. Press, “Page 2”, and session2b.aspx will be displayed. Note that the name and sum are displayed.

d. Press, “Add 1” several times and observe the sum being updated.

e. Press, “Page 1” and session2a.aspx will be displayed. Note that the sum is no longer correct.

15

18. (Read, no action required) Look carefully at Page_Load in session2a.apx.

protected void Page_Load(object sender, EventArgs e) {if (!Page.IsPostBack) {

// If first time on page, initialize sum to 0 and put in Session.sum = 0;Session.Add("Sum", sum);

}else {


}}

Remember that when we leave a page and then return later, it is the “first time” on the page, i.e. it is not a postback. Thus, when we return to this page we are setting sum to 0.

19. To fix this, we need to detect not only if it is the first time on the page, but also if “Sum” exists in Session. Replace the code in Page_Load with:

if (!Page.IsPostBack) {// If first time on page, and sum is not in Session,// initialize sum to 0 and put in Session.if (Session["Sum"] == null) {

sum = 0;Session.Add("Sum", sum);

}// If first time on page and sum is in Session, get it// and display it.else {

int sum = Convert.ToInt32(Session["Sum"]);lblSum.Text = sum.ToString();

}}else {


}

16

Stage 5 – Using a QueryString to Pass Information Between Pages

Next, we are going to use a QueryString to pass information between pages.

20. (Read, no action required) Using a QueryString is a technique where you put the information you want to pass to another page in the URL in key/value pairs. For example, to send 2 key/value pairs to the page, newPage.aspx, we would write code like this:

Response.Redirect( “newPage.aspx?key1=value1&key2=value2” );

Note that the query string:

Begins with a “?” Has any number of, “key=value” separated by “&”

The receiving page writes code like this to retrieve the values:

value1 = Request.QueryString[“key1”];value2 = Request.QueryString[“key2”];

Note that the value is a string, so it will need to be converted if a number is sent.

17


a. Add a web form named, qString1a.


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <form id="form1" runat="server"> <div>

<table><tr>

<td><asp:Label ID="Label1" runat="server" Text="First

Name"></asp:Label></td><td>

<asp:TextBox ID="txtFName" runat="server"></asp:TextBox>

</td></tr><tr>

<td><asp:Label ID="Label2" runat="server" Text="Last

Name"></asp:Label></td><td>

<asp:TextBox ID="txtLName" runat="server"></asp:TextBox>

</td></tr>

</table>

<asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" />

<br /><asp:TextBox ID="txtMessage" runat="server" Height="189px"

TextMode="MultiLine" Width="304px"></asp:TextBox>


18

c. Open the code behind file, qString1a.aspx.cs and replace the class (everything between the namespace line and the last “}”) with:

public partial class qString1a : System.Web.UI.Page {protected void Page_Load(object sender, EventArgs e) {

}

protected void btnLogin_Click(object sender, EventArgs e) {string fName = txtFName.Text;string lName = txtLName.Text;string url = "qString1b.aspx?fName=" + fName + "&lName=" + lName;Response.Redirect(url);

}}



a. Add a web form named, qString1b.


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title></head><body> <form id="form1" runat="server"> <div> <asp:Button ID="btnLogOut" runat="server" OnClick="btnLogOut_Click" Text="Log Out" /> <br /> <asp:TextBox ID="txtMessage" runat="server" Height="172px" TextMode="MultiLine" Width="281px"></asp:TextBox> </div> </form></body></html>

19

c. Open the code behind file, qString1b.aspx.cs and replace the class (everything between the namespace line and the last “}”) with:

public partial class qString1b : System.Web.UI.Page {protected void Page_Load(object sender, EventArgs e) {

if (Request.QueryString.AllKeys.Contains("fName")) {string fName = Request.QueryString["fName"];string lName = Request.QueryString["lName"];string msg = "Successful Login\n";msg += "First Name=" + fName + ", Last Name:" + lName;txtMessage.Text = msg;

}}

protected void btnLogOut_Click(object sender, EventArgs e) {

}}

d. Study the code above carefully. We will program btnLogOut_Click shortly.

23. Run the qString1a.aspx page. Type in names and press Login:

Then, qString1b.aspx is displayed. Note the names contained in the query string for the URL:

20

24. Next, we program the “Log Out” event handler. When the Log Out button is pressed on the qString1b.aspx page we will redirect to the login page (qString1a.aspx) passing a “status” in the query string indicating that the user has logged out. Then, in Page_Load for qString1a.aspx, we will detect this status and display a message that the user has logged out. Do the following:

a. Open qString1b.aspx.cs and add this code to btnLogOut_Click:

string url = "qString1a.aspx?status=logout";Response.Redirect(url);

b. Open qString1a.aspx.cs and add this code in Page_Load:

if (Request.QueryString.AllKeys.Contains("status")) {string status = Request.QueryString["status"];if (status.Equals("logout")) {

txtMessage.Text = "You are logged out";}

}


a. Run the qString1a.aspx page.

b. Type in names and press Login.

c. Once qString1b.aspx is displayed, press Log Out. You will be returned to qString1a.aspx. Note the “status” in the query string and the message that is displayed

26. (Read, no action required) Suppose a user tries to load qString1b.aspx without logging in. In this case we want to direct them back to the login page (qString1a.aspx). Note the first line of Page_Load in qString1b.aspx:

if (Request.QueryString.AllKeys.Contains("fName")) {

If the URL does not contain a “fName” key, then we will view this as an illegal attempt. Thus, we will add an else block to this code to build a URL with a query string, “status=illegalAccess” and redirect back to the login page. Finally, we will detect this in the login page and display a message.

21


a. Paste this code immediately after the if block in Page_Load for qString1b.aspx:

else {string url = "qString1a.aspx?status=illegalAccess";Response.Redirect(url);

}

b. Paste this code immediately after the inner if block in Page_Load for qString1a.aspx:

else if (status.Equals("illegalAccess")) {txtMessage.Text = "You must login";

}

When done, Page_Load in qString1a.aspx.cs is:

protected void Page_Load(object sender, EventArgs e) {if (Request.QueryString.AllKeys.Contains("status")) {

string status = Request.QueryString["status"];if (status.Equals("logout")) {

txtMessage.Text = "You are logged out";}else if (status.Equals("illegalAccess")) {

txtMessage.Text = "You must login";}

}}


a. Run the qString1b.aspx page.

b. This page will not be displayed, you will be redirected to qString1a.aspx. Note the message and the query string in the URL.

Stage 6 – Package Assignment for Submission

29. Close VS and zip your lab05_lastName solution folder and submit on Blazeview in the Lab 05 dropbox.

22

Documents

mypages.valdosta.edu · Web viewLab 5 – CS 3340. To make this document easier to read, it is recommend that you turn off spell checking and grammar checking in Word: Choose: File,