CST272 Getting Started Page 1 1 2 3 4 5 6 8 Introduction to ASP.NET, Visual Studio and C# CST272 ASP.NET Static and Dynamic Web Applications Static Web pages Created with HTML controls renders exactly the same every time the page is displayed Dynamic Web pages Allow users to interact with the Web page Changes appearance or content One tool for creating dynamic content is Microsoft s Active Server Pages.NET (ASP.NET) Used to build server-side Web applications (code statements that build the page run on the server) An ASP.NET Web Site Project In Visual Studio a Web Site is a repository (folder/storage location) that contains files and additional folders that make up the project Creating a New Web Site Project (Page 1) To create a new ASP.NET project: 1. Select the File command from the menu bar 2. Click New from the File menu 3. Click Project from the New submenu; or Creating a New Web Site Project (Page 2) Alternately to create the new project: 1. Select the down arrow point ( ) on the New Project button from the Standard toolbar 2. Click New Project from the New Project submenu Creating a New Web Site Project (Page 3) Then in the New Project dialog window: 1. Make sure to verify that Visual C# is selected in the Installed Templates pane 2. Select ASP.NET Web Application (or ASP.NET Empty Web Application the preference in CST272) template 3. Give the Web Site a Name: 4. Make sure Create directory for solution checkbox remains checked Creating a New Web Site Project (Page 4) In the New Web Site dialog window (con.): 4. Enter the project folder Location and name Click the <Browse > button to make it easier to select the folder location 5. Click the <OK> button 1
CST272 Getting Started Page 2 In the New ASP.NET Project dialog window, from Select a template: select option Empty and click the <OK> button (make no other changes) In the Configure Microsoft Azure Web App dialog window click the <Cancel> button 11 12 13 14 15 An ASP.NET Web Site (Page 1) Types of files in a website: ASP.NET web forms dynamic (interactive) web forms with two files: (1) the.aspx file which is the web page; and (2) the.aspx.cs file that contains the Visual C# code that runs on the server Image files for the website Configuration files web.config is a file that provides information for the server Static HTML web pages HTML code only; no ASP.NET Server Web controls An ASP.NET Web Site (Page 2) Types of files in a web site (con.): Style sheet files additional information that tells the browser how to format HTML elements; useful for creating consistent style on a Web page, or all the Web pages on a website Script files source code that runs on the client machine in the browser, e.g. JavaScript or VbScript Database files Web Forms in ASP.NET (Page 1) The Web Form consists of two components: The HTML template (.aspx extension) The actual web page that contains the design layout, content and controls A collection of code in a procedure language such as C# that commonly is located behind the Web Form ( aspx.cs extension) The code behind the page Web Forms in ASP.NET (Page 2) The ASP.NET Form Web control handles most of the HTML detail processing for the developer The input controls are generated using ASP.NET web controls, i.e. ASP:TextBox and ASP:CheckBox The ASP:Button Web control is rendered by ASP.NET as a submit button The form is submitted when the button is clicked Web Forms in ASP.NET (Page 3) The format of the Form web control which wraps around the input elements is: <form id="formid" runat="server"> </form> This block is inserted automatically into every new ASP.NET web document 2
CST272 Getting Started Page 3 16 17 18 20 21 22 Web Forms in ASP.NET (Page 4) When the Button control is clicked, the Web form is rendered as a postback <form> element (a POST method) which causes the web form to be reloaded Code (Visual C#) that should execute when the form is submitted is assigned to the Click event of the Button Additional hidden <input> elements are generated which provide information to ASP.NET Adding a New Item (Page 1) To add a new item/document to an ASP.NET project: 1. Select Project from the menu bar 2. Click Add New Item from the Website menu Or find Add New Item by right-clicking the website folder name in the Solution Explorer window Adding a New Item (Page 2) In the Add New Item dialog window: 1. Make sure to verify that Web is selected under Visual C# in the Installed pane 2. Select the document type an ASP.NET document page is a Web Form 3. Type filename (appropriate extension will be added) 4. Click <Add> button the new item is added to the Solution Explorer window Visual Studio Developer Interface (Page 1) Integrated Development Environment (IDE) the shared development environment Document windows (Edit and view documents) Resource Tools: Solution Explorer lists the project files and resources (images, databases, etc.) Server Explorer access server public components and manage connections to databases Visual Studio Developer Interface (Page 2) Resource Tools (con.): Properties window for setting properties for objects, controls, and classes Document Tabs allows switching easily between open documents Toolbox contains commonly used controls Error List window contains a to do list, e.g. errors that must be corrected before the application runs successfully Document Views The tabs at the bottom left of the Document window lets the designer select among the following views: Source view the actual ASP.NET code Design view an approximation of the Web page that the code will render in a browser 3
CST272 Getting Started Page 4 Split view Source view in the upper window and Design view in the lower window 23 24 27 29 30 31 Properties Window Sets the properties for objects, controls, classes and other project components Properties can be updated: At design time by changing their values in the Properties Window By writing Visual C# assignment statements in the program code behind the page, e.g. TextBoxAge.Text = "30"; The Toolbox Provides access to commonly used controls, e.g. the ASP.NET Server controls Can be hidden and made to slide out (true of several other windows as well) the Auto Hide feature Hover over the text Toolbox in the left side of the IDE window and it slides into view (the default mode for the Toolbox is hidden) Click the Auto Hide icon (push pin) to turn the feature on and off Run the Web Site Running an ASP.NET Web Site application means to view it in a Web browser An application may be executed by clicking the <Start debugging> button on the Standard toolbar If the Debugging Not Enabled dialog window appears, select the Modify the Web.config file to enable debugging. radio button and click <OK> Close the browser window to stop running Save the Web Site To save current document, click the <Save> button on the Standard toolbar It should not be necessary to name it in the Save As dialog window since it was given a name when it was created initially Open a Web Site (Page 1) To open an existing ASP.NET project: 1. Select the File command from the menu bar 2. Click Open from the File menu 3. Click Project from the Open submenu Open a Web Site (Page 2) In the Open Web Site dialog window: 1. Select the folder name that contains the Solution file 2. Select the filename with the.sln extension 3. Click the <Open> button If you do not see the document on which you want to work, double-click its name in Solution Explorer 4
CST272 Getting Started Page 5 32 34 35 37 39 40 ASP.NET Server Controls Controls are similar to Windows Forms controls ASP.NET controls are identified with the prefix asp: followed by the name of the control, plus a runat="server" attribute and value, e.g. <asp:dropdownlist runat="server"> Some types of ASP.NET Server Controls ASP.NET Form Controls (Web controls) Data Validation Controls Data Controls Mobile Controls (run on mobile devices) Browser Source Code What does the Web server send to the browser? (Look at the browser s source code for an ASP.NET page): ASP.NET code is never sent to the browser Instead the ASP.NET code runs on the Web server and builds an HTML document Only HTML tags, along with client-side scripts (e.g. JavaScript statements) are sent to the browser Adding an Existing Item Existing items might include Web Forms, HTML Pages, Web User Controls, image files, etc. Before starting, be certain folder that the item(s) are to be inserted into is selected in Solution Explorer 1. Select Website from the menu bar 2. Select Add Existing Item from the Website menu 3. Browse to Look in: folder 4. Select Files of type: from drop-down list 5. Select files and click <Add> button; the item(s) is/are added to specified folder in Solution Explorer Dragging Image from Solution Explorer In either Source or Design view, drag an image from the Solution Explorer window into the document Creates an <img> tag in the document Setting HTML Attributes in the Properties Window In either Source or Design view, select the element to be updated Enter the new values in the Properties Window The values are assigned as attributes and values, or created as a style element Using the Style Attribute for Formatting In either Source or Design view, select the element to be formatted Click the Build [ ] button which opens the Modify Style dialog window 5
CST272 Getting Started Page 6 Select Category and set the attributes and values Creates a style attribute for the selected tag, e.g. <hr style="position: absolute; top: 89; left: 0" /> 42 45 47 50 54 56 58 Creating a Table from the Menu Bar In Design view select Table from the menu bar and Insert Table from the Table menu In the Insert Table dialog window select number of Rows and Columns, and any other attributes Adds <table>, <tr> and <td> tags to the document Formatting with the Formatting Toolbar In Design view select the text to be formatted The Styles dropdown list can be use to insert heading styles (<h1> to <h6>) and a wide variety of other styles into the document The Font dropdown list can be used to implement any available typeface to the document (inserts style rule into the <head> section Dragging ASP.NET Web Controls from the ToolBox In Source or Design view, from the ToolBox drag an ASP.NET Web control into the document Places the tag into the document Dragging HTML Controls from the ToolBox In Source or Design view, open HTML group in the ToolBox and drag an HTML control into the document Places the tag into the document Creating Bulleted Lists from the Formatting Toolbar In Design view click the <Bullets> button on the Formatting Toolbar and begin typing the text for each bulleted item Press the <Enter> key after each line to create each subsequent bulleted item Creates the <ul> and <li> tags in the document Click the <Numbering> button on the Formatting Toolbar to create a numbered list Inserts <ol> and <li> tags into document Creating Hyperlinks from the Formatting Toolbar In Design view select text (or object, e.g. an image) to be formatted as a hyperlink Click the <Hyperlink> button on the Formatting Toolbar In the Hyperlink dialog window: Select the hyperlink Type:, e.g. mailto or http Type the Text: which is the rest of the URL Adds the <a> tag with href attribute to the document Creating Formatting Styles 6
CST272 Getting Started Page 7 In Design view, from the Format menu select the New Style command In the New Style dialog window either: Type a CssClass attribute value that matches one that has been assigned to an element in the document From the dropdown menu, select an HTML tag, e.g. a Selector Select Category and set the attributes and values Inserts a style rule into the <head> section for that CssClass or selector 61 62 66 67 68 The asp:button Control The Button control is used to display a push button May be a submit button or a command button (by default it is a submit button) It posts the page back to the server when it is clicked It is possible to write an event handler (a code block that executes) to control the actions performed when the submit button is clicked <asp:button id="buttonid" runat="server" Text="Button Text" /> The Code Behind the Page Code associated with the Form (and which gives it dynamic capability) is written in an ASP.NET-compatible language, e.g., Visual C# This code generally is stored in a separate file from the Form with the same name as the Web Form but with the extension.aspx.cs Compiled code behind the page is the class definition for the page When the application is built, the code is compiled into an executable file stored in the bin directory The asp:textbox Control (Page 1) The asp:textbox control displays a box into which the user may type input which effectively modifies the control s Text property This Text property as well as other properties of the TextBox may be updated: By modifying them in the Properties window By assigning (keying) the properties and values in the Source code window Programmatically using an assignment statement in the Code Editor The asp:textbox Control (Page 2) <asp:textbox ID="TextBoxID" runat="server" Text="TextBox text" [formatting properties] ></asp:label> Example: <asp:textbox ID="TextBoxAge" runat="server" Text=""></asp:TextBox> In the HTML source code, the Label is rendered as a <span> tag by the ASP.NET server and its properties are converted to CSS style elements The asp:label Control (Page 1) 7
CST272 Getting Started Page 8 The asp:label control displays stand-alone text that may not be manually updated by the user It has a series of properties used for formatting the contents of its Text property These properties all may be updated: By modifying them in the Properties window By assigning (keying) the properties and values in the Source code window Programmatically using an assignment statement in the Code Editor 69 70 72 73 74 The asp:label Control (Page 2) <asp:label ID="LabelID" runat="server" Text="Label text" [formatting properties] ></asp:label> Example: <asp:label ID="LabelTHR" runat="server" Text=""></asp:Label> The Text Property The Text property means different things for different Web controls: Button the text that appears on the Button TextBox a String that represents the current value of the TextBox which is the value that is displayed inside the box Label the value that is displayed for the Label, often the result processing Events and Event Handlers (Page 1) For almost every object on the Form, the browser can respond to many mouse and keyboard actions Some examples: Click, MouseDown, MouseMove, KeyPress, Validating, Validated Events and Event Handlers (Page 2) To create event handlers for any control (including the Form itself) double-click on the object Default event for an asp:button is Click Default event for the Web Form is Load For each event handler method, registers a property within the control that links it to the method, e.g.: <asp:button runat="server" Text="Submit" OnClick="ButtonTHR_Click"> Syntax of an Event Handler Header (Page 1) protected type MethodName(object sender, EventClassType e) methodname by default consists of the concatenation of the object name and event type Event handler methods have two parameters: sender: a reference which identifies the object (control) which initiated the call to 8
CST272 Getting Started Page 9 the method e: a reference that stores property values and methods related to the event, e.g. the Click event 75 77 Syntax of an Event Handler Header (Page 2) protected type MethodName(object sender, EventClassType e) Example: protected void ButtonTHR_Click(object sender, EventArgs e) The Convert Class The C# Convert class contains a rich set of static methods for converting from one type to another Convert.ToType(expression) Examples: int age = Convert.ToInt32(TextBoxAge.Text); Converts a String from a TextBox to a 32-bit integer LabelAge.Text = Convert.ToString(ageInteger); Converts an integer to a String 9