Create a Web App ASP.NET Web forms
Step by step Exercises Hans-Petter Halvorsen, M.Sc.
Web App Exercise • • • •
Visual Studio C# ASP.NET Web Forms ASP: Active Server Pages
Lots of resources for Web Development: http://www.w3schools.com Recommended!!!
Client
ASP.NET
ASP.NET is used to create dynamic web pages
Web Browser
HTML
JavaScript
CSS
Server-side
The server-side ASP.NET pages are converted on the server to HTML pages before it is sent to the client Web Server
ASP.NET C#/VB.NET .NET Framework
ASP.NET – Different ways of creating Web Sites with ASP.NET Web Sites ASP.NET Web Pages
ASP.NET Web Forms
ASP.NET C#/VB.NET .NET Framework http://www.asp.net
ASP.NET MVC
You can use (at least) 3 different approaches when creating Web Sites with ASP.NET
ASP.NET Web Pages
• Singe Page Model (The server-side code is mixed in between the HTML) • Uses the Razor syntax (.cshtml files) • Similiar as Classic ASP and PHP • A tool called Microsoft WebMatrix is optimized for this development model, but you can also use Visual Studio if you want to.
ASP.NET Web Forms
• Similiar to the desktop development model used in WPF • GUI (*.aspx files) and Code (*.aspx.cs) is separated
ASP.NET MVC
• MVC – Model - View – Controller • A new development model where you split your development into 3 parts/components: Models for Data, Views for Display and Controllers for Input
5
ASP.NET ASP.NET supports three different development models:
For more experienced Very similar to PHP Web Developers GUI and Code mixed together If you are familiar with PHP this is a good starting point.
The Web version of classic WinForms GUI and Code is separated. If you are familiar with WinForms or WPF, this is a good choice
ASP.NET
http://www.asp.net/get-started/websites
Exercise: Web Form
Hans-Petter Halvorsen, M.Sc.
ASP.NET Web Form Example When you are finished, your Web App should look something like this:
When you enter your Name in the TextBox and click the OK Button, the program should respond with a greetings.
9
ASP.NET Web Form Example
http://www.asp.net
Remember to select “Add to Source Control”
10
Create New Solution
You have lots of choices here – but we just want to create a very simple Web Form App 11
Create New Web Form
12
WinForm1.aspx Page
Used to create the GUI/HMI
“HTML” Code Editor
You can either write text in the Code Editor or in the Designer window WYSIWYG HTML Designer
Hello World Example - GUI
14
Hello World Example – The Code WebForm1.aspx.cs
15
Running the Application
Enter your Name and click OK button
Note! Remember to Check-in your files into TFS 16
Exercise: Web Form with Database Communication Hans-Petter Halvorsen, M.Sc.
Database Exercise qCreate a Database called LIBRARY and a BOOK table in SQL Server qEnter some Test data into the BOOK table
18
Database Exercise qFill a “GridView” with data from the Database Table (BOOK), as shown below
Use the “Wizard” in order to create all the “magic” you need in your application
20
When finishing the “Wizard”, your .aspx page should look something like this
21
As you see - No Code needed to be written in this example J This is OK for quick demos – but for professional applications, you need to use some hardcore ADO.NET or similiar frameworks. 22
Exercise: Web Form with Database Communication from Scratch Hans-Petter Halvorsen, M.Sc.
Database Exercise 2 q This time: Create everything from scratch using C# code and ADO.NET. q Fill a “DropDownList” with Book Names from the Database q Print the Author Name based on the selected BookName on the screen
Beginning ASP.NET 4.5 in C#, Apress, 2012, Matthew MacDonald (Safari Books Online)
Your .aspx page should look something like this:
The code could be improved by creating a separate Class where you create this Method
This code is executed when the Web Page is loaded
Event Handler
The code could be improved by creating a separate Class where you put this code into a Method
Web.config
All kind og configuration should be stored in the Web.config file, including Database Connection Strings, etc.
Hans-Petter Halvorsen, M.Sc. University College of Southeast Norway www.usn.no E-mail:
[email protected] Blog: http://home.hit.no/~hansha/