Getting Started with Web Application Development using Visual Studio and C#

1. Getting Started withWeb Application Developmentusing Visual Studio and C# by Sally Kyvernitis

2. Overview This tutorial will show you: • How to Create, Save, Modify, Run, and Debug a Web Application using Visual Studio. • The functionality of various panes, e.g., Design, Property, Toolbox. • What is a Web Form and what are Controls (e.g., Button, Textbox, Label) • What are Properties (of Web Form & Controls), how to set these • The difference between Design View & HTML View • How to add Button Click code • How to Add a Class to the Web Application (and how to call that code from the Button) • The types of files that are created by Visual Studio

3. How to Create a new Web Application in Visual Studio • Create a web application like this: File – New Project • Select “C#” as language & “Web Application” as Project type. • Although “Project Name” is disabled, you see location as http://localhost/WebApplication1 – Change “WebApplication1” (in the location) to “HelloWebApp”. (This causes the Project Name to change). • Visual Studio creates a subdirectory (under C:\inetpub\wwwroot) with same name as your web application.

4. What Happens when Visual Studio Creates a New ASP .NET Web Application? • Under the project subdirectory, Visual Studio creates various files and subdirectories – to store configuration preferences and compiled code, etc. • When you create a new web application in Visual Studio, the new web application is configured within IIS and ASP .NET framework. • Each web application will run in it’s own memory space. This means one web application cannot write into another web application’s memory space (and “cause trouble” for the other application).

5. Visual Studio’s Solution Explorer Pane • The Solution Explorer pane (right side of window) shows all files in the application. • Visual Studio sets WebForm1 as the default start page. • Click on push pin (upper right of Sol’n Explorer pane) if you want the Properties pane to auto-hide.

6. Visual Studio’s Design Pane • The Design pane (left side of window) shows the web form that you are designing. • This is where you can to drag controls (e.g., textboxes, labels, buttons) onto the web form and do other things like resize, apply colors and fonts.

7. Visual Studio’s Properties Pane • The web form and all its controls (e.g., labels, textboxes, buttons) have properties. • To see the properties of a web form (or control on a web form), you click on that object and look in the Properties Pane (on the right of the window). • If the Properties pane is not open, just Press F4or select View – Properties Window from the menu.

8. The PageLayout Property of a Web Form • One important property of a Web Form is its PageLayout – which can either be GridLayout (where everything is positioned & sized absolutely using pixel counts) or FlowLayout (where everything is positioned and sized relatively & objects realign, for example, when the user resizes their window). • Change the PageLayout property (of the WebForm1 document) from GridLayout to FlowLayout.

9. Visual Studio’s ToolBox • Click on the toolbox (left side of window). This will open a pane that holds controls which you can drag to your web form. • Drag a Label from the toolbox onto the Web Form. • Now you have 2 objects – a Web Form and a Label (that’s in the Web Form).

10. The (ID) Property of Visual Studio Controls • Each control has a name, also known as it’s “ID property”. Your program references a control using this name (for example to set a property). • In the Design Pane, Single Click on the label control. • Change the label’s (ID) property (which should be at the top of the alphabetical properties list) from “Label1” (default name assigned by VS) to “lblMessage” • It’s important to name controls well so your programs are easier to understand. Since we plan to use this label to show a message, we chose “lblMessage” for its name.

11. The Text Property of Visual Studio Controls • Most Visual Studio Controls have a Text property. The Text property is what is displayed on the control when the application is run. • Change the Text property of lblMessage (no longer called Label1) to “Hello World”.

12. Text versus (ID) Propertyof Visual Studio Controls Important: • The (ID) property is how you reference a control in your program. The (ID) does NOT show to the user when the application is RUN; the (ID) is only seen by the programmer when they are designing the application. • The Text property is what the control shows to the user (on the form) when the program is run. • Some students confuse the (ID) property with the Text property simply because Visual Studio sets their default to the same value (e.g., a new textbox added to a web form has default (ID) set to “Text1” and default Text property also set to “Text1”.

13. Visual Studio’sDesign View versus HTML View • You can write a web app using the Design View & never see the HTML that VS creates. But you can see/modify the HTML, if you want, by using the HTML view. • Click on the HTML tab (bottom left of the Design Pane) to see the HTML that was created for you. • Click on Design tab (bottom left again) to go back to the normal view which provides a graphical design pane for you.

14. Run your Web Application • To Run your app, click on F5 or select Debug – Start from the menu. • After some messages (compiling, etc.), you should see a browser window open like this. • Don’t forget to close the browser window to stop your web application – so you can modify it some more.

15. Modify the Web ApplicationAdd a Textbox & Button Functionality • Showing “Hello World” in a browser is great, but how about a Web Form that responds to user input. Let’s write a program that captures the user’s name and says hello to that name. • Click on the ToolBox and drag abutton onto your webform. Try to drop the button before the label, but if you have trouble, you can always cut/paste to move things around. • Because we specified FlowLayout (not GridLayout), our webform acts more like a word document (than a canvas). Each element (e.g., textbox, label, button) pushes the next element forward unless you click somewhere and type “enter” to insert a new line. • Click between the button and the label and type “enter” so that the label and the button are on different lines. • Drag a textbox from the toolbox to your Web Form. • Try to make your Web Form look like the one on the next slide.

16. Modified Web Form

17. Naming Standards (for controls such as labels, buttons, textboxes) • When we add new controls that will be accessed programatically, we should rename them right away. • Use a name that represents what the control will hold (in the case of a label or textbox) or do (in the case of a button). This makes the program easier to read. • It also helps if the control names indicate their type: • If it’s a textbox, prefix the name (ID) by “txt”. • If it’s a button, prefix the name (ID) with “btn”. • If it’s a label that the program will write to, prefix the name (ID) by “lbl”. Otherwise (if the program won’t access the label), just leave it with it’s default name.

18. Modify Button Control Properties • Please BE CAREFUL not to double click on a control to modify its properties (you’ll see why later) – just single click. • Single click on the new button (in the Design Pane). • Rename Button1 to be something like “btnHello”. Recall that the (ID) property holds is name of a control (that the program can reference). • Change the Text Property of btnHello (note that the button now has a new name) to be “Say Hello”. Recall that the Text Property is what the button will display to the user when the application is run.

19. Modify Properties of Text Box & Label • Single click on the Text Box: • Rename Textbox1’s (ID) Property to “txtName” • Leave its Text Property empty (so that nothing will show in the textbox when the application launches). • Single click on the Label: • Change lblMessage’s text property to be empty (because we don’t want anything to appear in that label when the application launches). • Note that when the Text Property is empty, the Design view shows the name of the label instead of the value of its Text Property • The next slide shows how your Web Form should look now

20. Modified WebForm1.aspx

21. Add “Button Click” Code • Double click on the button from the Design Pane. Then Visual studio will add a button click event (see the empty “btnHello_Click” method below).

22. Avoid Double Clicking on Controls in the Design Pane • Whenever you double click on a control from the Design Pane, Visual studio adds an event method. • Generally you only want to double click on buttons that you have already renamed.

23. Enter Code into Button Click Event • Here’s where we specify that the program should say hello to the name the user entered.

24. Explanation of Button Click Codethis.lblMessage.Text = "Hello "+ this.txtName.Text; • “this” means the class that you’re in. So, when you are editing code in a form, “this” means the form which contains all the controls that you added, e.g., this.lblMessage, this.btnHello. • When you type “this” into the editor, pause a moment, to let Visual Studio’s “intellisense” give you a list of valid control names. This will help you avoid typing errors. (The web app will not run if there are typing errors.) • Also, remember that a label and a textbox are objects with more properties than just the text they display. To reference the text displayed by a control, you must use the control’s .Text property. Pause a moment after typing a control name so that intellisense gives you a list of valid property names (& C# is case sensitive so txtName.text is an error but txtName.Text is OK).

25. Run the Modified Web Application • Recall that F5 runs your application (or select Debug – Start from the menu). A browser should display an empty textbox, a button, and an empty label (which you don’t even see). • Enter a name into the text box and click on the button. Then the program should display “hello ” followed by whatever name you typed into the textbox.

26. Add a Class • To add a class to your web application, select Project – Add Class from the menu. • Remember to name the class file exactly how you want the class to be named. • Class names should start with a capital letter. (Variables and object names should NOT start witbh a capital letter.) • Enter Hello.cs as the name of this new class.

27. Default Code for Class (Hello.cs) • You’ll get this default code you get when you add class Hello to your project. using System; namespace HelloWebApp // this is the name of your project { public class Hello { public Hello ( ) { // TODO: Add constructor logic here } } }

28. Add a Method to a Class Add method “sayHello” (in red below) to Class “Hello”. using System; namespace HelloWebApp { //comment: this is the name you gave your web app public class Hello { public Hello ( ) { // TODO: Add constructor logic here } public string sayHello (string name) { return "Hello there " + name; } } }

29. Call Class Method from Button Code • Now comment out your old button click code (in your Web Form) and add new code to call the sayHello method of class Hello. Private void btnHello_Click(object sender …) { // this.lblMessage.Text=“Hello ” + this.txtName.Text; Hello helloObj = new Hello(); this.lblMessage.Text = helloObj.sayHello(this.txtName.Text); }

30. Run Your App Again • F5 should get you the same results as before, but now it uses class code:

31. Compiler Errors • Now, let’s create a compiler error so we see how Visual Studio handles it. • For example, in the button code, we could misspell the Text property (see misspelling in red): this.lblMessage.Txt = hello.sayHello(this.txtName.Text); • Then press F5, you’ll see this: • Click No (so you can see the errors)

32. Visual Studio Compiler Errors • The errors show in the Task List. We only have one error which is “System.Web.UI.WebControls.Label does not contain a definition for 'Txt' " • Double click on the error and the cursor will go to the code that has the error.

33. Fixing Compiler Errors • Many times one compiler error can make subsequent lines of code look erroneous. • Therefore, it’s best not to worry if you get a lot of errors. Just fix the first error and re-compile (F5).

34. Visual Studio Debugger: Setting Breakpoints • When you are not getting the results you expect, you should use the debugger to see where things begin to go wrong. • Let’s try putting a breakpoint in method Hello.sayHello – just click (where brown circle is) to set a breakpoint.

35. Debugging • Run your app (F5). When you enter a name then click on the button, you’ll see it stop at the breakpoint you set. • From the menu, select Debug – Step Into (or press F11). This will advance by one line of code. • When you are in debug mode, you can hover the mouse over any variable to see it’s value (assuming that it has received a value). • Hover over the “name” input parameter in the method signature: public string sayHello(string name) • You’ll see what the value of the “name” input parameter. • From the Debug menu, you’ll see several options including: F11 step into (advances execution by one line of code), F10 step over (advances execution by one line of code, but does not show you the details of a method call).

36. Understanding the Files that are Created by Visual Studio • When you create a new Web Application, Visual Studio creates these subdirectories & files:

37. .aspx files contain HTML(example: WebForm1.aspx – contents shown below) <%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="WebApplication1.WebForm1" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head> <title>WebForm1</title> <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"> <meta name="CODE_LANGUAGE" Content="C#"> <meta name=vs_defaultClientScript content="JavaScript"> <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5"> </head> <body MS_POSITIONING="GridLayout"> <form id="Form1" method="post" runat="server"> … textboxes, buttons etc. </form> </body> </html>

38. .cs files contain C#(example: WebForm1.aspx.cs – contents shown below) using System; // like java import statements … // more using statements namespace WebApplication1 { // name of web app, like java pkg. public class WebForm1 : System.Web.UI.Page { private void Page_Load(object sender, System.EventArgs e) { // code to initialize the page here } // … other methods } // end class } // end namespace

39. .resx files contain XML settings(example: WebForm1.aspx.resx – contents shown below) <?xml version="1.0" encoding="utf-8" ?> <root> <xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata"> <xsd:element name="root" msdata:IsDataSet="true"> … </xsd:element> </xsd:schema> … </root>