Creating Web App - Telemark University College

Step by step Exercises ... • MVC – Model - View –Controller • A new development model where you split your development ... Creating Web App...

8 downloads 513 Views 2MB Size
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/