Chapter 2 How to develop a one-page web application

Size: px

Start display at page:

Download "Chapter 2 How to develop a one-page web application"

Doreen James
6 years ago
Views:

1 Chapter 2 How to develop a one-page web application Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 1

2 The aspx for a RequiredFieldValidator control <asp:requiredfieldvalidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtInterestRate" Display="Dynamic" ErrorMessage="Interest rate is required." ForeColor="Red"> </asp:requiredfieldvalidator> Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 2

3 The aspx code for a RangeValidator control <asp:rangevalidator ID="RangeValidator1" runat="server" ControlToValidate="txtInterestRate" Display="Dynamic" ErrorMessage="Interest rate must range from 1 to 20." MaximumValue="20" MinimumValue="1" Type="Double" ForeColor="Red"> </asp:rangevalidator> Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 3

4 Values for the UnobtrusiveValidationMode setting Webforms None Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 4

5 The Manage NuGet Packages dialog box Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 5

6 How to install the NuGet package for jquery validation Right-click on the project and select Manage NuGet Packages. In the left panel of the dialog box that appears, click on NuGet Official Package Source. Use the box in the upper right to search for and find AspNet.ScriptManager.jQuery. Click on the Install button. Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 6

7 A Load event handler that turns off unobtrusive validation for a page protected void Page_Load(object sender, EventArgs e) { UnobtrusiveValidationMode = System.Web.UI.UnobtrusiveValidationMode.None; } Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 7

8 A web.config setting that turns off unobtrusive validation for a site <appsettings> <add key="validationsettings:unobtrusivevalidationmode" value="none"/> </appsettings> Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 8

9 The design of the Future Value form Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 9

10 The aspx code for the Future Value form Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns=" <head runat="server"> <title>chapter 2: Future Value</title> <style type="text/css">.auto-style1 { width: 100%; }.auto-style2 { width: 172px; } </style> </head> Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 10

11 The aspx code for the Future Value form (cont.) <body> <img src="images/murachlogo.jpg" alt="murach Logo"/> <h1>401k Future Value Calculator</h1> <form id="form1" runat="server"> <div> <table class="auto-style1"> <tr> <td class="auto-style2">monthly investment</td> <td><asp:dropdownlist ID="ddlMonthlyInvestment" runat="server" Height="22px" Width="147px"> </asp:dropdownlist></td> </tr> <tr> <td class="auto-style2">annual interest rate</td> <td><asp:textbox ID="txtInterestRate" runat="server" Text="6.0"></asp:TextBox></td> </tr> <tr> <td class="auto-style2">number of years</td> <td> <asp:textbox ID="txtYears" runat="server">10 </asp:textbox></td> </tr> <tr> <td>future value</td> <td><asp:label ID="lblFutureValue" runat="server" Font-Bold="True"></asp:Label></td> </tr> Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 11

12 The aspx code for the Future Value form (cont.) <tr> <td class="auto-style2"> </td> <td> </td> </tr> <tr> <td class="auto-style2"> <asp:button ID="btnCalculate" runat="server" Text="Calculate" Width="122px" OnClick="btnCalculate_Click" /></td> <td> <asp:button ID="btnClear" runat="server" Text="Clear" Width="123px" CausesValidation="False" OnClick="btnClear_Click" /></td> </tr> </table> <asp:requiredfieldvalidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Interest rate is required." ControlToValidate="txtInterestRate" Display="Dynamic" ForeColor="Red"> </asp:requiredfieldvalidator> <asp:rangevalidator ID="RangeValidator1" runat="server" ErrorMessage="Interest rate must range from 1 to 20." ControlToValidate="txtInterestRate" Display="Dynamic" ForeColor="Red" Type="Double" MaximumValue="20" MinimumValue="1"> </asp:rangevalidator><br /> Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 12

13 The aspx code for the Future Value form (cont.) <asp:requiredfieldvalidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Number of years is required." ControlToValidate="txtYears" Display="Dynamic" ForeColor="Red"> </asp:requiredfieldvalidator> <asp:rangevalidator ID="RangeValidator2" runat="server" ErrorMessage="Years must range from 1 to 45." ControlToValidate="txtYears" Type="Integer" Display="Dynamic" ForeColor="Red" MaximumValue="45" MinimumValue="1"> </asp:rangevalidator> </div> </form> </body> </html> Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 13

14 The Code Editor for a web form Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 14

15 Three ways to start an event handler In the Designer, double-click outside the body of a web form to start an event handler for the Load event of the page. Double-click on a control in the Designer to start an event handler for the default event of that control. Select a control in the Designer, click the Events button in the Properties window (the button with the lightning bolt), and double-click the event you want. Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 15

16 How to insert a code snippet Move the insertion point to where you want the snippet. Right-click, select Insert Snippet, select Visual C#, and select the snippet. Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 16

17 How to comment out a portion of code Select the lines of code that you want to comment out. Click on the Comment button in the Text Editor toolbar, or press Ctrl+K, Ctrl+C. How to uncomment a portion of code Select the commented lines. Click the Uncomment button, or press Ctrl+K, Ctrl+U. Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 17

18 Common ASP.NET page events Event Init Load PreRender Method name Page_Init Page_Load Page_PreRender Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 18

19 Common ASP.NET control events Click TextChanged CheckedChanged SelectedIndexChanged Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 19

20 Code for the Click event of the btnclear button protected void btnclear_click(object sender, EventArgs e) { ddlmonthlyinvestment.selectedindex = 0; txtinterestrate.text = ""; txtyears.text = ""; lblfuturevalue.text = ""; } Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 20

21 The C# code for the Future Value form using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { UnobtrusiveValidationMode = System.Web.UI.UnobtrusiveValidationMode.None; if (!IsPostBack) for (int i = 50; i <= 500; i += 50) { ddlmonthlyinvestment.items.add(i.tostring()); } } Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 21

22 The C# code for the Future Value form (cont.) protected void btncalculate_click(object sender, EventArgs e) { if (IsValid) { int monthlyinvestment = Convert.ToInt32(ddlMonthlyInvestment.SelectedValue); decimal yearlyinterestrate = Convert.ToDecimal(txtInterestRate.Text); int years = Convert.ToInt32(txtYears.Text); decimal futurevalue = this.calculatefuturevalue(monthlyinvestment, yearlyinterestrate, years); lblfuturevalue.text = futurevalue.tostring("c"); } } Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 22

23 The C# code for the Future Value form (cont.) protected decimal CalculateFutureValue(int monthlyinvestment, decimal yearlyinterestrate, int years) { int months = years * 12; decimal monthlyinterestrate = yearlyinterestrate / 12 / 100; decimal futurevalue = 0; for (int i = 0; i < months; i++) { futurevalue = futurevalue + monthlyinvestment * (1 + monthlyinterestrate); } return futurevalue; } Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 23

24 The C# code for the Future Value form (cont.) } protected void btnclear_click(object sender, EventArgs e) { ddlmonthlyinvestment.selectedindex = 0; txtinterestrate.text = ""; txtyears.text = ""; lblfuturevalue.text = ""; } Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 24

25 How to run an application To run an application in the default browser, press F5 or click on the browser name in the Standard toolbar. To change the default browser, select a browser from the dropdown browser list. The first time you run an ASP.NET application, a dialog box will appear asking whether you want to modify the web.config file to enable debugging. Click OK. Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 25

26 How to stop an application Click the Close button in the upper right corner of the browser. For some browsers like Internet Explorer, that will stop the application in Visual Studio. In Visual Studio, click the Stop Debugging button in the Debug toolbar or press Shift+F5. This also stops an application when an exception occurs. Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 26

27 Visual Studio with the Error List window and browser list displayed Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 27

28 How to fix syntax errors and exceptions To go to the statement that caused a syntax error, double-click on the error in the Error List window. That will give you a clue to the cause of the error. When an exception occurs, the application is interrupted and the statement that caused the error is displayed in Visual Studio. Then, you can stop the application and debug it. Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 28

29 How to view the HTML for a page in a browser Select the View Source command from the browser s menu. Or right-click on the web page and select the View Source command from the shortcut menu. Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 29

30 Some of the HTML for the Future Value form Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 30

31 Extra 2-1 Build the Quotation application Use an 8x3 table for formatting. The validators and their messages go in the third column, to the right of the text boxes. Murach's ASP.NET 4.5/C#, C2 2013, Mike Murach & Associates, Inc. Slide 31

and event handlers Murach's C# 2012, C6 2013, Mike Murach & Associates, Inc. Slide 1

Chapter 6 How to code methods and event handlers Murach's C# 2012, C6 2013, Mike Murach & Associates, Inc. Slide 1 Objectives Applied 1. Given the specifications for a method, write the method. 2. Give