Developing a One-Page Web Application: Visual Studio IDE Tips and Form Design
Learn how to create a one-page web application using Visual Studio IDE. Explore essential steps like working with web forms, opening websites, and utilizing design view. Discover the process of adding code and designing forms efficiently.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
How to Develop a One-Page Web Application [40-55]
Index: How to work with visual studio IDE How to work with Web forms How to open website How to use Design view to build a web form How to add code to form
How to work with Visual Studio IDE Three supporting Windows: The Solution Explorer 2. The Toolbox 3. The Properties Window Web Form Designer Views: Source View: shows the starting HTML code Design View: design of the project 3. Split View: both Design and Source view 1. 1. 2.
To change the Web Forms Designer View: Click on the Design, Source or Split *To close: Click Upper right button *To hide: Click Auto Hide Button *To size: Place over the boundaries and drag it. To Add a folder to a website : Right-click on the folder or project in the Solution Explorer and choose new Folder and type a Name for the folder and press Enter
How to add a web form to a web site Right-click the project in Solution Explorer and choose Website Add New Item command Web Form Template, enter a name for the form and click the Add button.
To Open a website: <Three ways> File Open Project command 2. File Recent Projects command 3. File Open Web Site command How to use the Open Web Site dialog box: File System: Select File System in dialog box Use File system tree to locate the websites 2. IIS: Click local IIS and select the websites from the list of available sites 3. FTP: Icons on the left of the Open Website dialog box let you open websites 1. 1.
How to use Design view to build a web form: Web Server Controls: drop-down list. Text boxes, label, buttons To add a Table to a form: Table Insert Table to display the Insert Table dialog box and set the number of rows and columns in the table. Resize the rows, columns or entire table Add, delete, merge or resize the rows or columns To format: Select the text and then the controls in the formatting tools
To Add a web server control to a web form: Drag the control from Toolbox to the form or double click on the control in the Toolbox To set the properties for a control: Click on the control and the properties will be displayed in the Properties Window. By dragging, Height and Width can be changed
Common Web Server Properties AutoPostBack: Page is posted back to server EnableViewState: whether the control maintains its view state between HTTP Enabled: Whether the control is functional ID: Name that s the control uses Runat: Indicates whether the control will run on the server Text: That s displayed in the control ToolTip: The text that s displayed when the user hovers over the control Visible: Whether the control is visible or hidden Height: The height of the control Width: The width of the control
Common properties of drop-down or list-box control Items: The collection of listItemobjects that represents the items in the control SelectedItem: The ListItemobject for the currently selected item SelectedIndex: The index of the currently selected item SelectedValue: The value of the currently selected item.
