Introduction to ASP.NET - Course Overview and Prerequisites

1. Session 8.1 • Course Overview • Intro to ASP.NET

2. Professor Info • Wendi Jollymore • Wendi.jollymore@sheridanc.on.ca • Don’t use WebCT Mail!!! • Extension: 8797 • Office: S401 (top floor of SCAET) • Office Hours: • Monday: 12pm – 2pm • Wednesday: 11am – 1pm • Friday: 9am – 11am Wendi Jollymore, ACES

3. Course Materials • Web site: • Bookmark this!! • DO NOT use WebCT!!! http://www-acad.sheridanc.on.ca/~jollymor/prog11044 Wendi Jollymore, ACES

4. Course Prerequisites • From Java: • Basic programming concepts • Control structures (iteration, selection) • Data structures (variables, arrays) • XML – tags, structure • PROG38081 (Java 3) is required • From Database: • Database access • Database structure (tables, relationships) • SQL Wendi Jollymore, ACES

5. Course Prerequisites • From Web Technologies: • HTML/XHTML • XML • CSS (Cascading Style Sheets) • JavaScript • Web concepts • How web pages work over HTTP • What a web server is • Client vs. Server Wendi Jollymore, ACES

6. Course Co-requisites • You should be taking the C# course while taking this one • (or have already taken it or been given PLA or AS for it) • What have you done in C# so far? Wendi Jollymore, ACES

7. Topics Covered • Dynamic web pages, web applications • ASP.NET • Page structure and page object elements • Controls and events and how they function differently in a web app • State – cookies, sessions, etc • Data binding (XML, database) • ADO.NET • Creating and setting up databases, tables, users • Data pages and database-driven web pages • User authentication and authorization • Web Services • Web service model • Creating, testing, consuming Wendi Jollymore, ACES

8. Evaluation • Assignments (2): 15% • In-Class Exercises: 5%* • Final Project: 25% • Test #1: 25% • Test #2: 30% • All dates are already posted Wendi Jollymore, ACES

9. Software • Visual Studio, if you have it • Version?? • Web Developer Express 2008 • Might want to try this instead • Some students find it runs faster or crashes less than VS • Doesn’t have a lot of the unnecessary junk that VS has • FREE! • Install instructions on web: www-acad.sheridanc.on.ca/~jollymor/prog11044/intro.html#install Wendi Jollymore, ACES

10. Resources • Web site (URL given earlier) • Course materials, notes, links, discussion board, grades, etc • Notes are organized by unit in the menu • There is also a Topic/Lesson List in menu • Textbook • Use Books 24x7 • See links on web site • Other web sites or on-line tutorials Wendi Jollymore, ACES

11. Organizing Files • You should store your project files in a separate folder • E.g. courses/prog11044/projects • Each project you create requires its own folder • You should organize in-class exercises and tutorials by week or session • E.g. courses/prog11044/projects/sess8-2 Wendi Jollymore, ACES

12. Questions? • About final project? • About due dates? • About C#? Wendi Jollymore, ACES

13. Exercise A • Set up a course and project folder • E.g: • prog11044 • For your notes and other junk • prog11044/projects • For your project directories Wendi Jollymore, ACES

14. Exercise B • Go to the course web site • Find the Books 24x7 link and click it • Follow instructions to log into Books24x7 • Search for and add these books to your bookshelf: • Beginning ASP.NET 3.5: In C# and VB by Imar Spaanjaars, ISBN: 9780470187593 • Microsoft ASP.NET 3.5 Step by Step by George Shepherd, ISBN: 9780735624269 • Professional ASP.NET 3.5: In C# and VB by Bill Evjen, Scott Hanselman and Devin Rader, ISBN: 9780470187579 Wendi Jollymore, ACES

15. ASP.NET • See notes: • ASP.NET/Introduction • What is it? • Server side technology • Used to create dynamic web pages and web applications • Can be used with a technology like ADO.NET • Uses a markup based on XHTML Wendi Jollymore, ACES

16. ASP.NET • Try it out: • Using VS or WD, start up a new “Web Project” or “Web Site” • Select “ASP.NET” • The project location should be on your own file system • Change default directory to your own project directory • Add a name for the project (will be folder name) • Select C# for the language Wendi Jollymore, ACES

17. IDE Elements • Solution Explorer • Lists the files in your web site • Properties Window • Where you can view/edit component properties • Toolbox • Might be docked or hidden – usually on left side • Main editor • Has tabs for Source/Design view • Might have a Split or other options Wendi Jollymore, ACES

18. Existing Code • If you’re in source view, there’s already code in the editor • First line is the page directive • Some of that will seem obvious • We’ll learn more about this later • You’ll also see some standard XHTML • DOCTYPE declaration, structure tags, etc Wendi Jollymore, ACES

19. First Steps • Change the <title></title> tag value to something more interesting • Note the default file names in the solution explorer • Default.aspx • This contains the page’s markup • Expand this by clicking + sign • Default.aspx.cs • This contains the C# code for the page • “code-behind” Wendi Jollymore, ACES

20. First Steps • Change the file name from “default.aspx” to “index.aspx” • Select default.aspx in the solution explorer • In the properties window, locate the File Name property • Change to index.aspx • The .cs file will change automatically! Wendi Jollymore, ACES

21. First Steps • Everything on your page will be inside the existing <form></form> tags • Notice the runat=“server” attribute • This is vital for any element or component that will be accessed on the server side! • Add stuff inside the <div></div> tags: • A heading, some text, and this: <p>Hello, World. The time is now <%= DateTime.Now.ToString() %></p> Wendi Jollymore, ACES

22. First Steps • Flip over to Design View • You won’t see the result of the inline C# code here • In the toolbar, select the START button • Or you can press F5 • If you get a “debugging not enabled” message, select “Modify the web.config file…” and click OK Wendi Jollymore, ACES

23. First Steps • Browser of preference should open with your page loaded • Exercise: • In your browser, look at the page source • What are the differences between the page source and the source code in VS/WD? Wendi Jollymore, ACES

24. Some Basic Controls • Labels • System.Web.UI.WebControls.Label • Text Boxes • System.Web.UI.WebControls.TextBox • Buttons • System.Web.UI.WebControls.Button • You’ll find these in your toolbox • You can drag them to a page in source or design view Wendi Jollymore, ACES

25. Control Properties • Many controls share some of the same properties • ID • Text • BackColor, ForeColor • BorderColor, BorderStyle, BorderWidth • Enabled, Visible • Font (a collection of Font properties such as Font Name and Font Names) • CssClass – if you have a css file, you can put a class name in this property Wendi Jollymore, ACES

26. Other Controls • DropDownList • System.Web.UI.WebControls.DropDownList • Items property references a ListItemsCollection object • This is a collection of ListItem objects • ListBox • System.Web.UI.WebControls.ListBox • Also has an Items propert that references the collection of ListItems • Check out the source code for these when you add them to a page • Check out the page source when the page has been loaded in the browser Wendi Jollymore, ACES

27. Other Controls • RadioButton and CheckBox • System.Web.UI.WebControls.RadioButton • System.Web.UI.WebControls.CheckBox • GroupName property • Set this to the same value for all controls in a group of Radio Buttons • So you can only select one in a group Wendi Jollymore, ACES

28. Other Controls • RadioButtonList and CheckBoxList • System.Web.UI.WebControls.RadioButtonList • System.Web.UI.WebControls.CheckBoxList • Easy way to make a group of radio buttons or check boxes • Source for these are just like those for ListBox and DropDownList! Wendi Jollymore, ACES

29. Other Controls • Image Control • System.Web.UI.WebControls.Image • You won’t always use this when you have an image on a page • This is only used for images that need to be server accessible • E.g. if part of the page’s processing involves changing the image file displayed • Otherwise, use regular <img /> tag Wendi Jollymore, ACES

30. Other Controls • Panel and PlaceHolder • System.Web.UI.WebControls.Panel • System.Web.UI.WebControls.PlaceHolder • Containers used to hold other controls or elements • Useful to show/hide groups of controls or organize controls on the page • Panel controls are rendered as <div></div> tags, but PlaceHolders aren’t rendered at all • If Panel is empty, it will show as white space • Empty PlaceHolder won’t take up space Wendi Jollymore, ACES

31. Simple Event Handling • Create a new project and add a Label control and a Button control. • Label: • ID: lblTime • Text: I don’t know what time it is. • Format any way you wish • Button: • ID: cmdShowTime • Text: What Time Is It? Wendi Jollymore, ACES

32. Simple Event Handling • To access the button’s event handler, double-click it in design view • The event handler method • sender = object that fired event • e = information about the event protectedvoid cmdShowTime_Click(object sender, EventArgs e) { } Wendi Jollymore, ACES

33. Simple Event Handling • Inside the braces, add the statement: lblTime.Text = "The time is now " + DateTime.Now.ToString(); • This should be pretty straightforward… • Try it out! • Check the page source before and after clicking the button! Wendi Jollymore, ACES

34. Exercises/Homework • Do the 5 exercises at the end of the ASP.NET/Introduction Notes • We’ll take some of these up in the next class Wendi Jollymore, ACES