Lesson Proper for Week 1

What is Active Server Pages (ASP)?

 ASP is a server-side scripting language created by Microsoft.

 ASP is based on the scripting language VBScript.

 The first version of ASP was released in 1996.

Concepts:


 Server-side scripting: A type of scripting technology where scripts are executed
on the server before the web page is sent to the user.
 Dynamic web page: A web page that can change its content depending on the
user's input or other variables.

What is ASP.NET?

 ASP.Net is a web development framework developed by Microsoft.

 It's used to create dynamic websites and web apps.
 It is a web framework that is a part of. NET allows building dynamic web
applications.ASP.NET extends the .NET developer platform with tools and
libraries specifically for building web apps.
 It is cross-platform and runs on Windows, Linux, macOS, and Docker.
 ASP.Net was first released in 2002.

Understanding the .NET Framework

 Powerful platform for creating Windows applications

 .NET is a developer platform made up of tools, programming languages, and
libraries for building many different types of applications.
 Developers can create both web and mobile applications
 Supports multiple languages and libraries
 The .NET Framework is used to create applications for Windows, iOS, Android,
and Mac OS.
 Microsoft released its first version of the .NET Framework in 2002.

Concepts:
→ CLR: Common Language Runtime is the virtual machine component of the .NET
Framework that manages the execution of code written in different languages.
→ C#: C# is an object-oriented programming language derived from C and C++ that
was developed by Microsoft.
→ .NET Core: .NET Core is a cross-platform, open-source, and modular .NET platform
for creating modern web apps, microservices, libraries, and console applications.
→ Dynamic Websites: Websites with content that is generated in response to user
actions.

Object-oriented programming (OOP)

Object-oriented programming (OOP) is a programming paradigm based on the concept

of "objects", which can contain data and code. The data is in the form of fields (often
known as attributes or properties), and the code is in the form of procedures (often
known as methods).

 Object-oriented programming (OOP) is a programming language model

organized around objects rather than actions and data rather than logic.
 In OOP, objects interact with one another to carry out tasks. This contrasts with
procedural programming, which consists of a series of commands and
instructions to complete a task.
 OOP uses classes, objects, inheritance, abstraction, polymorphism, and
encapsulation to create programs.

An Introduction to Visual Studio

 Visual Studio is an integrated development environment (IDE) created by

Microsoft
 It offers a complete set of development tools for building applications
 Visual Studio supports many different languages and platforms

Concepts:
→ Integrated Development Environment (IDE): A software application that provides
comprehensive facilities to computer programmers for software development.
→ Development Tools: Software programs used to create, debug, maintain, and
document the source code of applications, websites, and other software.
→ Programming Languages: A set of instructions that can be used to produce different
types of output or to control the operation of a computer or other device.
→ Visual Studio is the most popular IDE for developing in .NET
→ The first version of Visual Studio was released in 1997
→ Visual Studio Code is a lightweight version of Visual Studio designed for web
development

Installing Visual Studio Express 2013 for Web

 1. Start by browsing www. Microsoft t. com/ express/ and follow the instructions to
download VSEW 2013. You can install directly by choosing the Download and
then the Install Now link or you can download an ISO file that you can burn on a
DVD or mount on Windows as a virtual drive. Make sure you download Visual
Studio Express 2013 for the Web, and not one of the other free Express editions
or older versions. If this link is ever changed or no longer provides direct access
to the VSEW download, search the web for “install Visual Studio Express 2013
for Web” and you’ll be taken to a download page where you can start the
installation.
2. When the download completes, start the installer. You should see a screen
similar to Figure 1-1.

Check the checkbox for the license terms and privacy policy.

If you’re installing the full version of Visual Studio, click the Next button that
appeared when you agreed to the license terms. You see a screen similar to
Figure 1-2. Make sure you select at least the Microsoft Web Developer Tools
option.

3. In both cases, click the Install button to start the installation process.
4. After a while, you should see a message indicating that Visual Studio has been
installed successfully. The installer may need to reboot your machine during or
after the installation. Once the installer has finished, Visual Studio is ready for
use.

A TOUR OF THE IDE

Visual Studio is by far the most complete and feature-packed integrated development
environment [IDE] for making ASP.NET web pages. The term "IDE" stands for
"Integrated Development Environment." It means that all of the tools you need to build
complex web applications are put together in a single environment. Instead of writing
code in a text editor, compiling code at the command line, writing HTML and CSS in a
separate program, and managing your database in yet another, VS lets you do all of
these things and more from the same environment. This makes it easier to learn new
parts of VS because many of the built-in tools work the same way. It also saves time
because you don't have to switch tools all the time.

The Main Development Area

Take a look at Figure 1-9 to learn more about the many tools that come with VS. It
shows the same screen you saw after making your first website in VS, but now the most
important parts of the screen are highlighted. If you know how to use an older version of
Visual Studio, you can skip this section and pick up where you left off with the next Try It
Out exercise later in this chapter.

If you have a previous version of Visual Studio installed, your screen may look different
because Visual Studio 2013 is able to import settings from older versions.

Choosing Your Development Profile

VSEW is for both people who are new to ASP.NET development and people who have
been doing it for a long time. Because of this, it has different developer profiles, such as
"Basic Settings," "Code Only," and "Expert Settings." In Basic Settings mode, many
menu items you don't use often are hidden or put in their own submenu. The Code Only
profile is great for times when you just want to code and don't care about things like
Design View or the Toolbox. You can use all of VSEW's features when you're in Expert
Settings mode. Use the Tools > Settings menu to switch between settings. This book
assumes that you will start out in Expert Settings mode. You might not need all the
features you see right away, but by the end of the book, you will have used most of
them. Because the location of menu items changes depending on which profile you
choose, I decided to use Expert Settings mode right away to make it easier to find a
specific menu item or feature. In the paid versions of Visual Studio, you don't have this
option because Expert Settings are already turned on.

 The Main Menu

The main menu is at the top of the application, right below the Windows title bar. This
menu bar has things like the File, Edit, and Help menus found in many other Windows
programs. It also has menus that are unique to VS, like the Website and Debug menus.
The menu changes based on the task you're working on, so as you move through the
application, you'll see menu items appear and disappear. You can set up both online
and offline help using the Help Set Help Preference menu. Before you can use offline
help, you have to install it and be connected to the Internet to use online help. On the
far right, you'll see a link that says "Sign in." This lets you sign in with your Microsoft
account and allow VS settings to be shared between machines.

 The Notification Window

The application's title bar has a small flag icon to the left of the Windows Close,
Minimize, and Maximize buttons. When you click on the flag icon, the notification
window appears. This is where Visual Studio tells you important things. It will show
things like new documentation content, licenses that have expired, product updates,
and more that can be downloaded. The color of the flag icon in the title bar changes
depending on how important the notifications are. You can also get to the Notifications
window from the View menu. If you installed the RTM version of Visual Studio, you may
see a few updates that you can safely install now.

 The Toolbar Area

The toolbar area is right below the menu. It can show different toolbars that give you
quick access to VS's most-used features. In Figure 1-9, only two of the toolbars are
turned on, but Visual Studio comes with a lot of other toolbars that you can use for
different tasks. Some toolbars show up automatically when you're working on a task that
needs a certain toolbar, but you can also turn toolbars on and off as you like. To turn on
or off a toolbar, right-click an existing toolbar or the menu bar and choose the toolbar
from the menu that appears.

 The Toolbox

The toolbox tab is on the left side of the main screen, near the edge of VS. If you click
on the tab, the Toolbox opens up and shows you what it has. If you click the little pin
icon in the upper-right corner of the Toolbox (or any of the other panels that have this
pin icon), it gets pinned to the IDE so it stays open.

Just like the menu bar and toolbars, the Toolbox automatically updates to show content
that is relevant to the task you are working on. When you edit a standard ASPX page,
the Toolbox shows you all of the controls you can use on that page. You can just drag
an item from the Toolbox and drop it where you want it to show up on your page. In
Chapter 4, a lot more is said about these controls. Note that there is also a pointer icon
in each Toolbox category. But this isn't controlled by itself. In other Visual Studio
designers, like Win Forms, this icon is used to get out of drawing mode. In ASP.NET,
however, it isn't very useful. The Toolbox has several categories that you can expand or
collapse to make it easier to find the tool you need. You can also change the order of
the items in the list, add and remove items from the Toolbox, and even add your own
tools to it. We will talk about customizing the IDE later in this chapter.

If the Toolbox isn't showing up on the screen, you can open it by pressing Ctrl+Alt+X or
by going to View > Toolbox if you have Expert Settings selected in the Tools > Settings
menu.

 The Solution Explorer

The Solution Explorer is on the right side of the screen. The Solution Explorer is an
important window because it gives you an overview of all the files that make up your
website. With Solution Explorer, you can store your files in separate folders instead of
putting them all in one big folder. This makes your site's structure more logical and
organized. You can use Solution Explorer to add new files to your site, move existing
files around by dragging and dropping or cutting and pasting, rename files and delete
them from the project, and do other things. A lot of Solution Explorer's features are
hidden in the right-click menu, which changes depending on what you right-click on.
At the top of the Solution Explorer is a small toolbar that gives you quick access to
some functions related to your website. For example, you can quickly refresh the
Solution Explorer window, nest related files, or set up your website by clicking on one of
these buttons. Most of these features will be talked about later in the book.

You can get to the Solution Explorer by choosing View > Solution Explorer from the
main menu or by pressing Ctrl+Alt+L.

 The Server Explorer

This window lets you work with your databases and other services. In Figure 1-9, it is
hidden behind the Solution Explorer.
You can get to the Server Explorer by choosing View > Server Explorer or by pressing
Ctrl+Alt+S.
The chapters about databases go into more depth about the Server Explorer.

 The Team Explorer

This window, hidden behind the Solution Explorer in Figure 1-9, is used to connect to
and work with Microsoft's Application Lifecycle Management tool Team Foundation
Server (TFS), which is used for source control, tracking work items, and more. Check
out http://tfs.visualstudio.com for more information and to sign up for a free hosted
account for TFS. Team Explorer and TFS are not talked about in this book.

 The Properties Grid

With the Properties Grid, you can see and change the properties of many things in
Visual Studio, such as files in the Solution Explorer, controls on a web page, the
properties of the page itself, and much more. The window is always updated to show
the item that was chosen. By pressing F4, you can quickly open the Properties Grid.
You can use this same keyboard shortcut to force the Properties Grid to show the
details of a selected item.

 The Document Window

The Document Window dominates the application. The action is mostly here. The
Document Window lets you edit ASPX, HTML, CSS, JavaScript, VB, C#, XML, text, and
picture files. The same window lets you manage databases, generate duplicates of your
site, examine its pages in the built-in mini-browser, and more.
By default, the Document Window can host many documents, each with a tab
containing the filename at the top. Each tab's right-click menu has shortcuts for saving,
closing, and opening File Explorer's parent folder.
To switch documents, use Ctrl+Tab, click the tab, or click the down arrow in the upper-
right corner of the Document Window, adjacent to the Solution Explorer (Figure 1-9).
The down arrow displays a list of open documents for easy selection.
Ctrl+Tab + Ctrl is another technique to swap documents. The right-hand column of the
pop-up window lets you choose a document. Use the cursor keys to scroll through the
open document list. This simplifies file selection.
The dialog box lists all active tool windows. Clicking a window in the list displays it on-
screen, moving it if necessary.
Click a file in Solution Explorer to preview it without modifying it. A file in preview mode
has its tab docked to the right of the tab row, unlike open files, which are docked to the
left.
Figure 1-9 shows Design, Split, and Source buttons underneath the Document Window.
Markup files like ASPX pages automatically display these buttons. They let you view a
page's Design View, Markup View, or both at once. For now, know that you can move
between Markup, Split, and Design View by clicking one of the three buttons. Chapter 2
explains how this works. Markup View is often called Source View or Code View. This
book utilizes Markup View exclusively to avoid confusion with the Code Behind code
editor.

 The Start Page

The Document Window loads the Start Page when VS starts. Start iPage lets you easily
develop and open websites and other projects. The Start Page links to web
development news and resources. Click the pin symbol to the left of your favorite
projects in the recent projects list to pin them to the Start Page. Right-click a project to
unpin it. View O Start Page reopens the Start Page.

Lesson Proper for Week 2

CREATING WEBSITES WITH VISUAL STUDIO

The preceding chapter gave you a quick overview of creating a website in VS. You
simply chose New Web Site from the File menu, selected a language, selected the
standard ASP.NET Web Forms Site template, and clicked OK. However, there’s more
to the New Web Site dialog box than you saw in the previous chapter. You may have
noticed that you can choose among a number of different templates that enable you to
create different kinds of sites. But before looking at the different templates on which you
can base your new website, you need to know a little more about the different project
types that are available in Visual Studio.

Websites and web applications

ASP.NET offers three web application development frameworks: Web Forms, ASP.NET
MVC, and ASP.NET Web Pages. You can construct excellent web applications with any
of the three frameworks because they are all mature and robust. No matter which
framework you choose, you will always have access to the benefits and functionality of
ASP.NET.

Each framework targets a unique development methodology. The one you choose
depends on a combination of your programming assets (knowledge, abilities, and
development experience), the type of application you're producing, and the
development style you're comfortable with.

Following is a summary of each framework, as well as some guidance on how to pick

amongst them. See Building Websites with ASP.NET and What is Web Tools for video
introductions.

Framework If you have Development style Expertise

experience in
Web Forms Win Forms, Rapid development using a rich Mid-Level,
WPF, .NET library of controls that encapsulate Advanced
HTML markup RAD
Full control over HTML markup,
code and markup separated, and
Mid-Level,
MVC Ruby on Rails, .NET easy to write tests. The best choice
Advanced
for mobile and single-page
applications (SPA).
Classic ASP, HTML markup and your code New, Mid-
Web Pages
PHP together in the same file Level
learn.microsoft.com

Web Forms

With ASP.NET Web Forms, you can use a familiar drag-and-drop, event-driven model
to build dynamic websites. With a design surface and hundreds of controls and
components, you can quickly make sophisticated, powerful sites with data access that
are driven by the user interface.

MVC

ASP.NET MVC gives you a powerful, pattern-based way to build dynamic websites that
makes it easy to separate concerns and gives you full control over markup for fun, agile
development. ASP.NET MVC has many features that make it easy to create
sophisticated applications that use the latest web standards quickly and with TDD.

ASP.NET Web Pages

ASP.NET Web Pages and the Razor syntax make it easy to combine server code and
HTML to make dynamic web content in a way that is quick and light. You can link to
social networking sites, add video, connect to databases, and do a lot more to make
beautiful sites that meet the latest web standards.

Web APIs

ASP.NET Web API is a framework that makes it easy to build HTTP services that can
be used by a wide range of clients, such as browsers and mobile devices. On the.NET
Framework, ASP.NET Web API is the best way to build RESTful applications.

Notes about Web Forms, MVC, and Web Pages

All three ASP.NET frameworks are built on the.NET Framework and have many of the
same core features of both.NET and ASP.NET. For example, all three frameworks offer
a login security model based on membership, and they all share the same core
ASP.NET facilities for managing requests, handling sessions, and so on.

Also, the three frameworks are not completely separate, and using one does not mean
you can't use the others. Since different frameworks can be used in the same web
application, it's not unusual for different frameworks to be used to make different parts
of an application. For example, the parts of an app that the customer sees might be built
with MVC to improve the markup, while the parts that deal with data access and
administration might be built with Web Forms to make use of data controls and easy
data access.

Open the "Create a new project" dialog

In Visual Studio, there are many ways to start a new project. When you open Visual
Studio for the first time, you see the start window. From there, you can choose Create a
new project.
If Visual Studio's development environment is already open,
choose File > New > Project from the menu bar to start a new project. You can also
press Ctrl+Shift+N.

or click the New Project button on the toolbar.

Select a template type

If you're not using the recently used templates, you can sort all of the available project
templates by Language (like C# or C++), Platform (like Windows or Azure),
and Project type (for example, Desktop or Web). You can also type words
like "ASP.Net" into the search box to narrow down the templates even more.

Tip

If you don't see the template you're looking for, you might be missing a workload for
Visual Studio. To install additional workloads, for example, Azure Development or
Mobile Development with .NET, select the Install more tools and features link to open
Visual Studio Installer. From there, select the workloads you want to install, and then
select Modify. After that, additional project templates will be available to choose from.

Select a template and then select Next.