IntroductionWelcome| 00:00 | It builds dynamic web sites,
web applications, web services, and it's free.
| | 00:07 | (Music playing.)
| | 00:10 | It is Microsoft ASP.NET, a web application
server and framework that's accessible
| | 00:16 | and flexible. My name is David Gassner
and this is ASP.NET Essential Training.
| | 00:21 | I have been building dynamic, database
enabled websites for over ten years using
| | 00:26 | a variety of application servers,
including ColdFusion, PHP, and ASP.NET.
| | 00:32 | The .NET Framework has been around since
2002 and ASP.NET technology has opened
| | 00:38 | the doors to write code with
any supported .NET language.
| | 00:42 | In this course, I'll give you the
tools to get your website up and running
| | 00:45 | using ASP.NET 3.5, using data stored
in a server-side database, hosted with
| | 00:51 | Microsoft SQL Server 2008.
| | 00:52 | I will take you through the
installation and configuration of Microsoft Visual
| | 00:58 | Web Developer 2008, a free development
environment for building ASP.NET websites.
| | 01:04 | Then we'll get into the good stuff.
Creating web form pages, using Microsoft
| | 01:08 | SQL Server 2008 Express, using the
GridView control to present and edit dynamic
| | 01:14 | data on ASP.NET pages. Installing
Internet Information Services on Windows XP
| | 01:20 | and Windows Vista. Finally,
deploying an ASP.NET website on IIS.
| | 01:26 | If all this sounds like a new world
to you, don't worry about it. This is an
| | 01:30 | Essential Training course. So I'll be
showing you a lot of new things that will
| | 01:34 | make you at home in this new world.
Let's take the next step to developing your
| | 01:38 | website with ASP.NET Essential Training.
| | Collapse this transcript |
| Prerequisites| 00:00 | Before getting started with this video
series, it's useful to have a little bit
| | 00:04 | of understanding of certain
technologies that are important to ASP.NET
| | 00:08 | websites. This video series is
designed for both web and application
| | 00:12 | developers. If you're already a website
developer, then you'll have some skills
| | 00:16 | in HTML, Hyper Text Markup Language,
Cascading Style Sheets or CSS, and if
| | 00:22 | you're an application developer,
you'll have a background in some programming
| | 00:26 | language. In ASP.NET we use all of
these technologies together, along with
| | 00:31 | ASP.NET's collection of server-based
controls to build dynamic websites and
| | 00:37 | control their behavior.
| | 00:39 | You also will be using SQL or
Structured Query Language. SQL is the language
| | 00:44 | that's used to communicate with the
database, to send instructions for
| | 00:47 | retrieving data and modifying data in
the back-end server-side database tables.
| | 00:53 | In terms of hardware and software,
you will need a Windows-based computer.
| | 00:57 | ASP.NET is not supported on Mac OS X.
And your computer should be running
| | 01:02 | either Windows Vista or Windows XP.
If you're running Windows XP, make sure
| | 01:06 | that you have Service Pack 2 or higher.
| | 01:09 | In the final chapter of the video
series, where I describe how to install
| | 01:12 | Internet Information Services, if
you want to follow along with those
| | 01:16 | exercises, you will need
particular editions of Windows.
| | 01:19 | For Windows Vista, you will need Home
Premium or higher. For Windows XP,
| | 01:23 | you will need the Professional Edition.
If you're using one of the Windows Server
| | 01:27 | products, Windows Server 2003 or 2008,
you will also be able to follow with the
| | 01:32 | exercises on those operating systems.
| | 01:35 | Finally, you will need to make sure
that you have enough memory. All of the
| | 01:39 | software taken together, including
the .NET engine, Internet Information
| | 01:43 | Services. SQL Server and Visual
Developer take up a good bit of memory.
| | 01:49 | Your system should have at least 1
gigabyte of RAM to operate successfully
| | 01:52 | throughout these exercises, and for
the best performance I recommend 2 gigabytes.
| | 01:58 | So if you don't have a computer with
these resources, you can still watch the
| | 02:02 | exercises and get a lot out of them.
If you need to improve your skills in any
| | 02:07 | of the programming technologies that
I mentioned, check the lynda.com Online
| | 02:10 | Training Library for many titles that teach
these skills, HTML, Cascading Style Sheets, and SQL.
| | Collapse this transcript |
| Using the exercise files| 00:01 | Just a quick word about the excise
files I'll be using. If you are a Premium
| | 00:05 | member of the lynda.com Online
Training Library or if you're watching this
| | 00:09 | tutorial on a disk, you have access to
the exercise files used throughout this title.
| | 00:14 | In the exercise files folder, I have
collected some assets for you to use
| | 00:18 | during our tour of building dynamic
websites with ASP.NET. They include graphic
| | 00:23 | files, a database script, and
starting web page files for use in the sample
| | 00:28 | websites that I'll be creating.
| | 00:30 | I've copied the folder to my desktop,
but you can put it anywhere you want. To
| | 00:36 | get started with the video series, you
will need to follow the instructions in
| | 00:39 | Chapter 1, where I describe how to
install Visual Web Developer, and Chapter 2,
| | 00:43 | where I describe how to install
SQL Server and create a database that you'll need.
| | 00:49 | From that point onward, you can choose
to work through the entire video series,
| | 00:53 | or if you would like to jump in at a
particular point, you can use the solution folders.
| | 00:58 | Most of the chapters have two projects:
one starting project and one that's
| | 01:03 | completed. You can open these chapter
folders directly from within Visual Web
| | 01:08 | Developer. Just select File > Open
Website from the menu, and then select the
| | 01:14 | website folder that you want to explore.
| | 01:16 | If you are a monthly or annual
subscriber to lynda.com, you don't have access
| | 01:21 | to the exercise files, but you can
easily follow along the instructions and
| | 01:24 | demonstrations on the screen and use
any files you want as you create your own
| | 01:28 | sample websites. Let's get started.
| | Collapse this transcript |
| Upgrading exercise file websites for ASP.NET 4.5 (NEW)| 00:00 | The exercise files that accompany this
course were built for ASP.NET 3.5. If
| | 00:06 | you're working with ASP.NET 4.5, you can
easily upgrade the website to this newer
| | 00:12 | version of the framework, and I'll show
you how to do that. First, open up one of
| | 00:16 | the websites from the exercise files.
I'll go to the menu and I'll select File > Open
| | 00:22 | Website. Next, I'll open up one of the
websites. I'll choose this one, the
| | 00:27 | Programming website from chapter four,
and I'll click Open. Now, my computer has the
| | 00:33 | 3.5 framework and so the website opens
cleanly. If I were working on Windows 8 or
| | 00:39 | on another copy of Windows that didn't
have ASP.NET 3.5, I'd be immediately
| | 00:45 | prompted to upgrade the website to the
available version, 4.5. But even if I'm
| | 00:51 | not prompted, I can still do the upgrade,
and here's how. First, I'm going to open
| | 00:56 | the existing web.config file.
The structure of this configuration file is
| | 01:02 | for ASP.NET 3.5. It's pretty long and
pretty complex. And one of the big changes
| | 01:08 | that happens, starting in ASP.NET 4, was a
great simplification of this configuration
| | 01:14 | file. I'll scroll down and show that there
are dozens of lines here. Now, I'll exit
| | 01:19 | full screen, and I'll come over to the
Solution Explorer, and I'll right-click on
| | 01:25 | the folder that contains the website.
And I'll choose Property Pages from the bottom
| | 01:30 | of the menu. On this screen, I'll select
the Build category, and I'll change the
| | 01:36 | framework to .NET Framework 4.5, and I'll
click OK. When prompted to confirm the
| | 01:42 | change, I'll click Yes. This makes an
immediate change to the web.config file.
| | 01:48 | You'll see a new HTTP runtime tag with a
target framework of 4.5. But then, if you
| | 01:54 | scroll down the file, you'll see that it's
a lot shorter than it was before. It's
| | 01:59 | greatly simplified and most of the content
I see here is just comments. I'll test the
| | 02:05 | application by going to the menu and
choosing Debug > Start Without Debugging.
| | 02:11 | That fires up the development web server
and loads the file list from the website,
| | 02:15 | and then I can click into one of the ASPX
files and see that it works fine. So
| | 02:21 | that's the process you'll need to follow
for each of the websites in the exercise
| | 02:26 | files. Again, they're built for 3.5, but
you can easily upgrade them to 4.5 if you
| | 02:32 | desire. And if you're working on a copy of
Windows that doesn't have the older
| | 02:37 | version of the framework the upgrade will
be forced.
| | Collapse this transcript |
| What's new in ASP.NET 4 (NEW)| 00:00 | This video series was originally recorded
with ASP.NET 3.5. Since then, there have
| | 00:07 | been two significant releases: ASP.NET 4
and 4.5. Most of the tools that I
| | 00:13 | demonstrate in this video series still
work exactly the same way in 4 and 4.5,
| | 00:18 | but there have been some changes and new
features that are worth describing. First
| | 00:23 | of all, with ASP.NET 4, there was a
significant simplification of the
| | 00:28 | web.config file. The default XML file that
manages your website was long and complex
| | 00:35 | in 3.5. Beginning in Version 4, it was
significantly shortened. Many optional
| | 00:40 | elements were removed from the default
file, and many elements were moved to
| | 00:45 | another file that I'll describe in a
moment. When you create a brand-new
| | 00:51 | ASP.NET website in Visual Studio 2012
Express, targeting either ASP.NET 4 or
| | 00:57 | 4.5, the default web.config file is very
short and very simple. It has a single
| | 01:03 | root element named configuration, a child
element named system.web, and that contains
| | 01:09 | a compilation directive, indicating which
version of the ASP.NET framework is being
| | 01:15 | targeted. This example is targeting 4.0,
but in a brand new website built with
| | 01:20 | Visual Studio 2012, the target framework
will probably be set to 4.5. Many of the
| | 01:27 | configuration options you might have seen
in previous versions have been moved to a
| | 01:32 | file called machine.config. This XML file
is stored in the .NET framework folder on
| | 01:37 | the system disk, and it's shared among all
of the web applications hosted by a single
| | 01:43 | server. You can still add your own custom
directives to the web.config file. And as
| | 01:49 | you work through this video series, you'll
see that there are some elements that
| | 01:54 | aren't in the default file anymore, but
you can still insert them manually.
| | 01:58 | ASP.NET 4 also introduced some new core
services. These include permanent
| | 02:04 | redirection of pages. For example, if you
have a .NET page that's been replaced by
| | 02:09 | another page, you can use this directive,
RedirectPermanent, and then that page will
| | 02:15 | always be replaced by the new page that
you describe. There's also a feature
| | 02:20 | called extensible output caching. By
default, ASP.NET content is cached to
| | 02:26 | memory, but you can change that to save it
to system disk instead. Take a look at the
| | 02:32 | output cache directive in the
documentation for more details. and ASP.NET
| | 02:37 | 4 also lets you expand the range of
available URLs. Using the HTTP Runtime
| | 02:43 | tag, you can indicate the maximum request
path length and the maximum query string
| | 02:49 | length, significantly expanding on what
ASP.NET 3.5 allowed. There are new tools
| | 02:55 | for the web forms framework, including
new attributes for the page directive that
| | 03:01 | let you place your key words and
description properties in your code. These
| | 03:06 | would replace what you might otherwise put
in the head tag in pure HTML. Also, you
| | 03:11 | can enable and disable view state for
individual controls. This feature can
| | 03:17 | significantly reduce the size of the view
state object that's created in ASP.NET
| | 03:23 | pages and improve performance. And ASP.NET
4 improved support for newer web browsers.
| | 03:30 | For information about these and all other
new features that were introduced in
| | 03:35 | ASP.NET 4, visit this webpage.
These features will be available regardless of
| | 03:42 | whether you're working in ASP.NET 4 or
ASP.NET 4.5.
| | Collapse this transcript |
| What's new in ASP.NET 4.5 (NEW)| 00:00 | Microsoft's .NET framework was upgraded to
version 4.5 in late 2012. Here are some of
| | 00:07 | the new features that you might find
useful in your ASP.NET websites. First of
| | 00:11 | all, the .NET framework now supports a new
coding model for executing asynchronous
| | 00:17 | HTTP requests, where you send off a
request and then the main thread of your
| | 00:22 | code can continue executing while the
request is processed on a remote server.
| | 00:28 | When the response comes back, it's up to
you to write the code to process that
| | 00:32 | response. In the past, HTTP requests and
responses had to be written as separate
| | 00:39 | methods. But now there are two new key
words called Await and Async that are
| | 00:44 | implemented in both C# and Visual Basic.
Here's how it looks in C#. You mark any
| | 00:50 | method that's going to make an
asynchronous call with the Async key word
| | 00:55 | and then you place the Await keyword
before any method that you are calling
| | 01:00 | that will be asynchronous. This will
result in pausing your code and waiting
| | 01:05 | for the response to come back. This is an
alternative to writing callback methods--
| | 01:11 | separate methods that will be called as an
event handler. It results in more
| | 01:16 | coherent, readable code. You can still do
the same things as before, making calls to
| | 01:22 | remote servers, but now the code is
cleaner and easier to read. This same
| | 01:27 | feature is commonly used in Windows 8
store apps--applications that run in the
| | 01:33 | new start screen on Windows 8 and Windows
RT. ASP.NET 4.5 also has features that are
| | 01:40 | unique for web processing. These include
request validation features, the ability
| | 01:46 | to defer validation of a request, and the
ability to support unvalidated requests,
| | 01:52 | giving your ASP.NET websites much more
flexibility in how they interact with the
| | 01:57 | rest of the computing world. There's also
now support for web sockets, a particular
| | 02:03 | kind of communication over the internet
that's a little bit different than HTTP.
| | 02:08 | Check the ASP.NET 4.5 documentation for
details of all of these new features.
| | 02:15 | There are also features that are targeted
at the mobile world, including a new
| | 02:20 | Bundling and Minification tool. These
tools can be used to combine multiple
| | 02:25 | JavaScript and CSS files into a single
compressed download. This is particularly
| | 02:31 | useful when you're building a website
that's optimized for a mobile device,
| | 02:36 | where the size of the files you're
downloading can significantly affect
| | 02:40 | performance. The smaller the download, the
faster the perceived response on the
| | 02:45 | mobile device. And there are new
enhancements for web form pages. These
| | 02:50 | include strongly typed data controls,
better data model binding to visual
| | 02:56 | controls such as data lists, HTML-encoded
data binding expressions, and a variety of
| | 03:02 | updates to support the generation of
HTML5 tags. All of these features and more are
| | 03:09 | described in this web page on the ASP.NET
website. Take a look at the documentation
| | 03:16 | on that website for all of the information
about what you can do now in ASP.NET 4.5.
| | Collapse this transcript |
| What's new in this course update (NEW)| 00:00 | This lynda.com course was originally
recorded with ASP.NET 3.5, Visual Web
| | 00:07 | Developer 2008, and SQL Server Express
2008. Since then, all three of these
| | 00:13 | software packages have been upgraded by
Microsoft. In April 2010, Version 4 of the
| | 00:19 | .NET framework was released, along with
associated upgrades to all the Visual
| | 00:24 | Studio products, including Visual Web
Developer. In April 2012, a new version of
| | 00:30 | SQL Server was released, SQL Server 2012,
and with it a new version of the Express
| | 00:37 | product. And then in late 2012 Visual
Studio Express 2012 for Web was released,
| | 00:44 | along with the new version of the .NET
framework, and ASP.NET 4.5. Visual Studio
| | 00:50 | Express 2012 for Web is the direct
successor to Visual Web Developer. Even
| | 00:57 | though there are new versions of these
software products, what you need to learn
| | 01:02 | to build simple ASP.NET-based websites
hasn't changed much at all. The Web Forms
| | 01:07 | framework is still the easiest way to get
started building ASP.NET dynamic
| | 01:13 | websites. C# and Visual Basic are still
the most common languages used for .NET
| | 01:19 | development and now for Windows 8 Store
App development, and as I mentioned,
| | 01:24 | Visual Studio Express 2012 for Web is the
direct successor to Visual Web Developer.
| | 01:30 | It has all the same panel layouts, most of
the same tools, and the same keyboard
| | 01:37 | shortcuts as the earlier product. And SQL
Server hasn't changed much either, at
| | 01:43 | least as used in this beginning course.
SQL Server 2012 has a lot of new features
| | 01:48 | targeted at the enterprise user and
enterprise administrator. But for basic
| | 01:54 | use with ASP.NET websites, everything I
show you in this course still works
| | 01:59 | exactly the same. Some things have
changed, though. For example, it's easier
| | 02:05 | than before to install ASP.NET and the
developer tools. The latest version of the
| | 02:11 | Web Platform Installer, available from the
ASP.NET website, makes it very easy to get
| | 02:17 | started building simple, .NET
applications. Some things have been
| | 02:22 | subtracted. Some of the tools that were
available in Visual Web Developer for
| | 02:27 | managing SQL server are no longer included
in Visual Studio Express 2012 for web, but
| | 02:32 | there are alternate approaches for all of
these tasks and I'll show you where they
| | 02:37 | are. And finally, some new tools had been
added. If you're using these latest
| | 02:42 | versions of the software packages, here is
what to watch for as you work through the
| | 02:48 | course. I've added new videos covering the
new installation process and other aspects
| | 02:53 | of these updated software components.
Andin many of the existing videos we've added
| | 02:58 | visual tips telling you where to find new
web pages addresses, new versions of the
| | 03:04 | software components, and alternatives tools
where old techniques no longer work. So
| | 03:09 | let's get started learning how to build
ASP.NET websites using this course,
| | 03:15 | ASP.NET Essential Training.
| | Collapse this transcript |
|
|
1. Getting StartedUnderstanding how ASP.NET works| 00:00 |
ASP.NET is one of the family of
software packages known as application servers.
| | 00:05 |
An application server is a piece of
software that's installed on a web server
| | 00:10 |
to create a dynamic application
platform. The world wide web includes many
| | 00:15 |
clients and servers that are
connected over the Internet.
| | 00:18 |
Technically speaking, they communicate
using a protocol called TCP/IP. This is
| | 00:24 |
the protocol that connects all of the
computers in the whole world together.
| | 00:28 |
When these computers talk to each
other, they exchange messages in a format
| | 00:32 |
known as HTTP, which stands for
HyperText Transfer Protocol. This sort of
| | 00:38 |
communication is used whether you are
working with a static website, that is a
| | 00:42 |
website that delivers static fixed web
pages, or a dynamic web application such
| | 00:48 |
as those that are supported by ASP.NET.
| | 00:51 |
A client starts the process by sending
a request in the HTPP format. The client
| | 00:58 |
requests a web resource, which might
be a web page, an image file, or text
| | 01:03 |
files that contain JavaScript or
Cascading Style Sheet code, known as CSS.
| | 01:09 |
The server responds by sending back
the resource that has been requested.
| | 01:14 |
Regardless of whether you are working
in a static or a dynamic environment,
| | 01:17 |
the client uses a bit of
software called the web browser.
| | 01:20 |
Personal computers such as those
running on Windows or Mac use web browsers
| | 01:26 |
such as Internet Explorer, Firefox or
Safari. There are many other kinds of web
| | 01:30 |
clients though including cell phones and
PDAs such as BlackBerrys. The web server
| | 01:37 |
is a computer that runs a piece of
software called the HTTP server. There are
| | 01:42 |
two major HTTP server products on the
market. Microsoft's Internet Information
| | 01:47 |
Services, also knows as IIS, which is
only available for the Windows platform,
| | 01:52 |
and Apache, which is a free HTTP
server product developed by and provided by
| | 01:57 |
the Apache Foundation. If you are
going to work with ASP.NET, you will be
| | 02:02 |
deploying your web application or
your dynamic website using Internet
| | 02:07 |
Information Services because only
IIS does a good job of integrating the
| | 02:11 |
ASP.NET application server.
| | 02:14 |
Here is how a static web page works.
The web client makes a request for the resource,
| | 02:19 |
let's say a web page, by sending
an HTTP formatted request over the
| | 02:23 |
Internet to the server. The server
responds by locating the file on its hard
| | 02:28 |
disk that has been requested. This is
known as a static web page with a file
| | 02:33 |
extension of typically of .htm or
.html. The web server responds by sending
| | 02:40 |
that content back to the client and the
client, which might be a web browser on
| | 02:45 |
a personal computer, renders and
displays the web page visually.
| | 02:50 |
When you move to the dynamic
environment, the application server software is
| | 02:54 |
installed on the same computer as
the web server. Let's say Internet
| | 02:58 |
Information Services and ASP.NET. The
application server, in this case ASP.NET,
| | 03:04 |
can communicate with the database and
with other server resources. Once again,
| | 03:09 |
the web client makes the HTTP
formatted request. The web server talks to the
| | 03:14 |
application server. The application
server talks to the database and other
| | 03:18 |
network resources and then it's up
to the web server to construct an HTML
| | 03:24 |
formatted response, which once
again is sent back to the web client.
| | 03:29 |
The important thing here is that the
web browser doesn't know that there is an
| | 03:33 |
application server at work and
therefore doesn't need any additional software.
| | 03:38 |
It requests an HTML page and it
receives an HTML page and it doesn't know the
| | 03:43 |
difference between one that's static
and fixed on the server's hard disk and
| | 03:47 |
one that's being generated
dynamically in response to which request.
| | 03:52 |
There are many software packages
that you can select from as application
| | 03:56 |
servers. If you are watching this
video series, you have probably already
| | 04:00 |
selected ASP.NET or you are
evaluating it for possible use in your
| | 04:04 |
organization. Microsoft Active Server
Pages or ASP is another option that you
| | 04:10 |
might select. Active Server Pages
is an older version of Microsoft's
| | 04:14 |
Application Server Technology.
| | 04:17 |
You can also select Adobe ColdFusion,
a cross operating system product that
| | 04:21 |
works on many operating systems
including Windows, Mac and Linux and that uses
| | 04:27 |
its own proprietary language,
ColdFusion Markup Language. Some developers use
| | 04:32 |
PHP, a completely free and open source
product that once again is available on
| | 04:37 |
many operating systems. And for Java
developers, there are many application
| | 04:42 |
server products available including
Websphere from IBM, Weblogic from Oracle,
| | 04:48 |
formerly from BEA, JBoss, a
completely free J2EE or Java-based server and
| | 04:54 |
others, and finally
there is Microsoft's ASP.NET.
| | 05:00 |
As you will learn in this video series,
ASP.NET is an object-oriented platform
| | 05:05 |
that allows you to select from
multiple programming languages to create a
| | 05:09 |
dynamic web-based application where
the client makes a standard HTTP request
| | 05:15 |
and the server responds by
constructing HTML dynamically and sending that
| | 05:20 |
content back to the client. These pages
can include JavaScript code, Cascading
| | 05:26 |
Style Sheets, image files and
everything else that you might include in a
| | 05:31 |
static web page.
| | 05:33 |
So that's a look at the basic
architecture of ASP.NET. In another videos in
| | 05:38 |
this chapter, I describe how to
install ASP.NET along with the product called
| | 05:42 |
Visual Web Developer, an integrated
development environment that can get you
| | 05:47 |
started quickly building ASP.NET-based,
dynamic web applications.
| | 05:52 |
| | Collapse this transcript |
| Installing Microsoft Visual Web Developer 2008| 00:00 | To get started, download and install
Visual Web Developer 2008 Express from the
| | 00:06 | ASP.NET website. You can
find this free product from
| | 00:11 | www.asp.net/downloads/essential. The
web masters, occasionally make changes to
| | 00:18 | their website. If you don't see the
page that I'm displaying, just navigate to
| | 00:22 | this URL. There are a number of
installers available on this page including
| | 00:27 | something called the Microsoft Web
Platform installer. This installer will
| | 00:32 | install Visual Web Developer SQL
Server and a number of other tools. But I'm
| | 00:37 | going to recommend that you don't use
that installer. Instead, use this one,
| | 00:41 | Visual Web Developer 2008 Express
Edition SP1 or whichever is the latest
| | 00:46 | version when you get to this page.
| | 00:49 | Download the installer application to
your hard disk and then run it. I have
| | 00:54 | downloaded the installer to my
Desktop. Its name is vwdsetup.exe. Run the
| | 01:01 | installer. After it takes a few
moments to copy some files to your hard disk,
| | 01:05 | it presents an initial information
screen. On this screen, it tells you about
| | 01:11 | the product, Visual Developer 2008
Express Edition and there is an option to
| | 01:15 | send more information about the setup
experience to Microsoft. I'll skip that
| | 01:20 | option and click the Next button.
| | 01:22 | On this screen, read the license terms
and then if you agree, select, I have
| | 01:26 | read and accept the license terms
and also take a look at the option that
| | 01:30 | allows Visual Studio or Visual Web
Developer Express Edition to receive and
| | 01:34 | display online RSS content. If you
leave this option selected, you will see a
| | 01:39 | regular new screen from Microsoft
whenever you are connected to the Internet
| | 01:43 | and you have the product open.
| | 01:44 | On the next screen, Visual Web
Developer detects whether you have certain
| | 01:49 | optional components already installed
including the .NET Framework version 3.5,
| | 01:54 | SQL server and the Silverlight Player.
Since I already have these components
| | 02:00 | installed on my system, Visual Web
Developer goes directly to this option
| | 02:04 | screen. However, if you see
the options there, deselect them.
| | 02:09 | In particular, do not install SQL
server from the screen. I describe how to
| | 02:14 | install SQL server and its management
tool, SQL Server Studio Basic in another
| | 02:19 | video. On this screen, I reviewed the
summary, indicating that I'm going to be
| | 02:23 | downloading and installing Visual
Web Developer 2008 Express Edition with
| | 02:28 | Service Pack 1. The SQL publishing
Wizard 1.3 and shared management objects.
| | 02:34 | Click the Install button and then
complete the installation by following the prompts.
| | 02:38 | If this is the first time you have run
the installation on your computer,
| | 02:42 | you might need to reboot at least once
during the installation process. Also,
| | 02:47 | you will need to download all of the files.
The size of the download will depend on
| | 02:51 | how many components are being installed
in this phase of the process. After the
| | 02:55 | installation is complete, you will be
able to open Visual Web Developer 2008
| | 03:00 | from the Microsoft menu and I describe
how to use the product in other videos
| | 03:05 | in this chapter.
| | 03:08 | At the end of the setup process for
Visual Web Developer, you are prompted to
| | 03:12 | register the product. Visual Web
Developer is free, but you do need to register
| | 03:17 | with Microsoft to receive a free
registration key. If you don't register and
| | 03:22 | you don't provide your registration
key, you will still be able to use the
| | 03:25 | product for 30 days. But at the end of
that period, it will become disabled and
| | 03:29 | you will need to register and input the
registration key to continue using it.
| | 03:33 | To register, go to the Help menu, once
you have opened Visual Web Developer and
| | 03:38 | select the Register Product menu choice.
I'll show that again, once I have the product open.
| | Collapse this transcript |
| Installing Visual Studio Express 2012 for web (NEW)| 00:00 | As of the date of recording of this course
update, the easiest way to get started
| | 00:05 | with ASP.NET development is to go to this
website, www.asp.net and click the big
| | 00:12 | Downloads link. That takes you to the
Downloads page, and there's a big button
| | 00:18 | you can click here to run an installer
that will install Visual Studio 2012
| | 00:22 | Express for Web, ASP.NET 4.5, and some
other tools that you'll need. I'll click
| | 00:30 | the Install Now button, and that offers to
download and run an application called
| | 00:36 | Vwdorvs11azurepack.exe. This is a
customized version of the Web Platform
| | 00:43 | Installer. Click the Run button, and
you'll download and run the application
| | 00:48 | automatically. If you see this user
account control dialog, click Yes.
| | 00:54 | It will take a few moments to download and
run the installer. It's inspecting the
| | 01:00 | state of your application and deciding
what software needs to be installed. On
| | 01:04 | the primary screen, it tells you that it's
installing something called the Windows
| | 01:10 | Azure SDK for .NET, but what you're really
installing is Visual Studio 2012 Express.
| | 01:16 | To find out what software will be
installed, click the Items to be Installed
| | 01:22 | link. A list appears. The list on your
computer might differ from mine, depending
| | 01:27 | on what you already have installed or not
installed. But minimally, you should see
| | 01:33 | Visual Studio Express 2012 for Web.
Click
the Close button and then click the
| | 01:38 | Install button and follow the rest of the
prompts to install all of the software you
| | 01:44 | need. It'll take a while because the Web
Platform Installer has to download and
| | 01:49 | then install each of the components.
Once the installation is complete, you'll be
| | 01:55 | able to open Visual Studio Express by
going to the Windows Start menu and
| | 02:00 | typing "VS" for Visual Studio. That will
take you to the menu choice, and you'll be
| | 02:06 | able to get started building your first
ASP.NET web pages and dynamic web sites.
| | Collapse this transcript |
| Hello World: Creating your first ASP.NET web site| 00:00 | Once you've installed Visual Web Developer
and the ASP.NET framework, you're ready to
| | 00:05 | create your first ASP.NET website. Start
by going to the Windows Start menu, go to
| | 00:11 | All Programs, and from there, locate the
menu choice for Microsoft Visual Web
| | 00:17 | Developer 2008 Express Edition and start
the application. When Visual Web developer
| | 00:23 | first opens, it displays a start page.
The start page shows a list of recent projects
| | 00:27 | that you might have worked on. I created
one project previously called Begin. And
| | 00:33 | if you selected the option to allow an RSS
feed to be retrieved by Visual Web
| | 00:37 | Developer during the installation process,
you'll see the RSS feed on the right. To
| | 00:43 | create a new website, select File > New
Website or press the keyboard shortcut
| | 00:49 | Shift+Alt+N, for new. On the New Web Site
screen, select ASP.NET website. Set the
| | 00:57 | Location to File System, and then select
the location of your first website. This
| | 01:03 | is going to be a brand-new website, so it
can go anywhere on disk. I'm going to
| | 01:07 | place it under the Chapter 01 Getting
Started folder under my Exercises folder.
| | 01:11 | I'll Browse, I'll start off at my Desktop.
From there, I'll go to the Exercises
| | 01:18 | folder, from there to Chapter 01 Getting
Started, and then I'll create a new folder
| | 01:24 | under that named Hello World. So notice
that this is a folder that doesn't contain
| | 01:31 | any assets, a brand-new application. I'll
click Open and Visual Web Developer
| | 01:36 | detects that that folder doesn't exist
yet and offers to create it. I'll click
| | 01:41 | Yes, and then I'll select a Language. Each
website is designated for one of the two
| | 01:46 | primary languages that are used in .NET,
either Visual Basic or Visual Basic.net or
| | 01:53 | Visual C#. If you're a Java or a
JavaScript developer, you'll probably be
| | 01:58 | more comfortable with C#. But if you're
new to programming, you might want to
| | 02:03 | choose Visual Basic. I'll use Visual Basic
for this exercise and click OK to create
| | 02:09 | the website and its initial page. When you
create a new website, an initial page is
| | 02:16 | created with a name of Default.ASPX.
AllASP.NET webpages have this ASPX file
| | 02:22 | extension. The page may open in either
Design or Code view. Take a look at the
| | 02:28 | bottom of the screen and you'll see three
buttons labeled Design, Split, and Source.
| | 02:34 | I'll click the Design button to see what
the application approximately looks like
| | 02:39 | when it's shown in the browser. Now, I
will type in the words Hello World. I'll
| | 02:45 | save my changes by pressing Ctrl+S or
going to the menu and selecting Save
| | 02:51 | Default.ASPX. Notice at the bottom of the
screen the structure of the web page is
| | 02:57 | displayed showing that there's an HTML
tag, a body tag, within that a paragraph
| | 03:03 | tag, and within that a span tag. You can
switch back and forth between Design and
| | 03:09 | Source view as you need. Notice that when
I typed in the words Hello World, that
| | 03:14 | those words were wrapped inside this span
tag. Now, to test the page in the browser,
| | 03:19 | I'll go to the Menu and select Debug.
Notice that there are two options: Start
| | 03:24 | Debugging and Start Without Debugging. In
order to use the page with debugging,
| | 03:30 | there are some configuration changes you
need to make at this point. So for
| | 03:35 | simplicity, I'll choose the menu choice
Start Without Debugging, which you can
| | 03:40 | also go to with the keyboard shortcut
Ctrl+F5. The page opens in the browser,
| | 03:45 | displaying the text that I typed in. Now,
I'm going to right-click anywhere on the
| | 03:50 | page and select View Source in Internet
Explorer and show you the result. As shown
| | 03:56 | in Visual Web Developer's Source view, the
text Hello World is wrapped inside a
| | 04:01 | span tag set. You'll also notice, if you
look at the source, that there's a
| | 04:06 | generated input object with the type of
hidden, and a name of __VIEW STATE. I
| | 04:12 | described the use of this view state
object in other videos, but if you've
| | 04:14 | gotten this far, then you've successfully
created your first website, your first
| | 04:21 | ASP.NET page, and you've successfully
tested it in Internet Explorer.
| | Collapse this transcript |
| Creating pages with dynamic output| 00:00 | Once you've created an ASP.NET website,
you can then add additional pages to
| | 00:05 | the website. Each page is built as
an HTML file, with added elements and
| | 00:11 | attributes that are processed by the
ASP.NET Application Server at runtime.
| | 00:17 | You place the code either in the page
itself or using an architecture sometimes
| | 00:21 | known as Code Behind, you can place
your scripting code in a separate file.
| | 00:25 | I will first show you how to create
a dynamic page using the Visual Basic
| | 00:30 | language. I'm working in the existing
website, HelloWorld. From the Visual Web
| | 00:35 | Developer menu, select Website > Add
New Item. The contents of the Add New Item
| | 00:41 | dialog box will differ, depending
on what sorts of components you have
| | 00:44 | installed on your system. Regardless
of what you have installed though,
| | 00:48 | you should minimally have the Web Form item.
| | 00:52 | A Web Form is an ASP.NET page. When
you select Web Form, notice that the name
| | 00:57 | defaults to a file name with an
extension of .aspx. In this first example, I'm
| | 01:03 | going to create a file that uses the
Visual Basic language. I'll name the file
| | 01:09 | HelloFromVB.aspx and I'll select
from the language list Visual Basic.
| | 01:16 | Notice the option, Place code in
separate file is selected. Again, this results
| | 01:21 | in placing your scripting code in a separate
file that's linked into the HTML page itself.
| | 01:26 | I'll click the Add button to create the
file. This actually results in creating
| | 01:31 | two files. The main file, HelloFromVB.
aspx, is open on the screen and it's
| | 01:37 | shown in the Solution Explorer where
I'm pointing my cursor. When I click the
| | 01:41 | Tree icon, I'll see that there is a
second file called HelloFromVB.aspx.vb and
| | 01:48 | at the top of the file in the page
declaration, I'll show you that there is a
| | 01:52 | CodeFile attribute that refers to this VB file.
| | 01:57 | The contents of the VB scripting file
are incorporated into the page when it's
| | 02:02 | requested from the server or as it's complied.
| | 02:06 | Now, I'm going to open the VB file
by double clicking it in the Solution
| | 02:10 | Explorer. When you declare a variable,
which is a place to hole a dynamic value
| | 02:15 | in a page that uses Visual Basic,
you place it inside the partial class
| | 02:20 | declaration, and then when you declare
it you use something called an access
| | 02:25 | modifier. That declares where
that variable will be visible.
| | 02:29 | I will use an access modifier called
Protected. I'll type in the first few
| | 02:34 | characters, prot, I'll see a list of
the available items that start with that string
| | 02:39 | and then I'll press the spacebar.
That autocompletes the keyword Protected.
| | 02:44 | Now, I'm going to put in the name of
the variable that I want to create.
| | 02:49 | I'll simply call it var1.
| | 02:52 | In Visual Basic, you then declare
the data type or the type of data the
| | 02:57 | variable will hold using the keyword as.
I press the spacebar, I type the
| | 03:03 | letters a-s, and I see the as keyword
displayed. Once again I press the spacebar
| | 03:09 | to continue. Notice that Visual Web
Developer automatically uppercases the word
| | 03:14 | As, as it should be. Then I select the
data type, which in this case will be
| | 03:19 | String. I start typing the name of the
identifier and then press the spacebar
| | 03:24 | to autocomplete it.
| | 03:26 | Finally, I'm going to assign this
variable an initial value by adding
| | 03:29 | the = sign, and then a string wrapped in,
"Hello from VB". In Visual Basic that's
| | 03:38 | the complete statement.
| | 03:40 | Once again, I have declared a variable
named var1. I have set it as Protected,
| | 03:44 | which I'll explain in another video,
and I have set its data type to String and
| | 03:49 | its value to, Hello from VB.
| | 03:52 | Now, I'll press Ctrl+S to save the
file and I'll go back to the web page that
| | 03:57 | uses that code file.
| | 04:00 | Now, to output that value in the page,
I'll place the cursor between the div
| | 04:04 | tags. Notice that the div tags are
inside a form. All ASP.NET pages contain
| | 04:10 | this form element by default, which
allows the page to be submitted to the server.
| | 04:16 | In order to output the variable I'll
use this code. I'll start with the less
| | 04:20 | than character, then with percent
character. Notice that Visual Web Developer
| | 04:25 | autocompletes that code and
creates an ending token to match.
| | 04:30 | Then I'll put in an equals operator,
which means output a value. Then I'll
| | 04:35 | start typing the name of my variable,
var1, and notice that Visual Web
| | 04:39 | Developer already knows the name of
the variable. When I see it on the screen
| | 04:44 | selected, I'll press the spacebar to
autocomplete the code. I'll press Delete
| | 04:47 | once to cleanup the code a little bit,
and then Ctrl+S, and notice that Visual
| | 04:52 | Web Developer closes up the
code and makes it nice and pretty.
| | 04:57 | I've saved the file and I'm ready to
test it. I'll go to the menu and select
| | 05:02 | Debug > Start Without Debugging, or
press Ctrl+F5. When the page is loaded, it
| | 05:08 | displays the dynamic value, Hello from VB.
| | 05:12 | Now, I'll do the same thing in C#. I'll
close the browser. Once again, I'll go
| | 05:17 | to Website > Add New Item. I'll name
this file HelloFromCSharp and I'll select
| | 05:25 | that language, Visual C#, and click Add.
| | 05:30 | I'm going to open up the aspx file in
the Solution Explorer panel and then open
| | 05:34 | its associated code file,
which now has an extension of .cs.
| | 05:39 | You will see that the C# file is a
complete class declaration, marked only by
| | 05:45 | this keyword, partial. I explain more
about partial classes in the chapter on
| | 05:50 | ASP.NET Architecture. For now the one
thing you need to know is that if you
| | 05:55 | want to declare a variable and make it
available to the page itself, you place
| | 05:59 | it inside the class declaration, but
above the Page_Load function which is
| | 06:04 | called, and an event handler function.
| | 06:07 | Now, I'll declare the same variable as
before. In C#, the word protected has a
| | 06:12 | lowercase p and Visual Web Developer
is helping me autocomplete the code as I
| | 06:16 | go, each time I press the Space key.
| | 06:19 | I put in the keyword protected and next
the data type, which is string. Now the
| | 06:25 | variable name, which once again will be
var1. I assign the initial value, Hello from C#.
| | 06:33 | In C#, you end each statement with a
semicolon, using a syntax that's very
| | 06:37 | similar to Java, JavaScript and C++.
I'll save my changes and then I'll go back
| | 06:44 | to the aspx or the page file from which
this file is linked. The code here will
| | 06:49 | be exactly the same as in
the Visual Basic example.
| | 06:52 | I will create a less than character
and a percent. Visual Web Developer
| | 06:56 | automatically completes that much of
the code. The equals operator to indicate
| | 07:01 | that I want to output a value. Then
once again, var1, the name of the variable.
| | 07:07 | Then I'll run the page, selecting
Debug > Start Without Debugging. When the
| | 07:12 | page loads, I see the dynamic value,
Hello from C# displayed on the page.
| | 07:18 | So that's a look at how to create
dynamic web pages using Visual Web Developer.
| | 07:23 | Each page consists of the page itself
plus a linked code file. You don't have
| | 07:29 | to separate the code and the HTML
markup into two separate files, but Visual
| | 07:33 | Web Developer makes it very easy to do
this, if that's the architecture that
| | 07:37 | you want to follow.
| | Collapse this transcript |
| Understanding the development web server| 00:00 | When you run a page from within Visual Web
Developer, you're actually requesting it
| | 00:05 | from a web server. You're using something
called the Development Web Server, a bit
| | 00:10 | of software that's included with both
Visual Web Developer and Visual Studio
| | 00:15 | that allows you to test your ASP.NET pages
without having to install and configure
| | 00:20 | the full Internet Information Services
enterprise-level web server. When you
| | 00:25 | create your first website and your first
ASP.NET page and then go to the Debug
| | 00:30 | menu and select Start Without Debugging,
you'll see that you're opening the page in
| | 00:35 | your selected web browser. I'm using
Internet Explorer. If you look at the URL
| | 00:41 | or the address of the page as it's
requested from the web server, you'll see
| | 00:47 | that the URL starts with
http://localhost. localhost is the automatic
| | 00:53 | name of a web server that's on your local
system. You'll then see this bit of code,
| | 01:00 | colon and then a numeric value. The
numeric value is something called a port
| | 01:05 | number. When you run a web page on the
internet, typically, you're requesting
| | 01:11 | that web page from port number 80, known
as the default HTTP port. Or if you're
| | 01:17 | requesting a page using a prefix of HTTPS,
which stands for secure, you're typically
| | 01:23 | using the port in the background of 443.
When you use the Development Web Server,
| | 01:28 | by default, the web server assigns a
dynamic port number, that is it makes it
| | 01:32 | up at the moment that you start the
server. And you can see what the dynamic
| | 01:36 | port number is by looking at the web
browser, but you can also see it by going
| | 01:41 | down to the system tray in the lower
right-hand corner of the Windows
| | 01:45 | interface. There you'll see a systems
tray icon, and if you move the cursor over
| | 01:50 | that icon, you'll once again see an
indication of the development server's port
| | 01:54 | number. In most cases, it's fine to use
that dynamic port, but in some cases, you
| | 01:59 | might want to set the port explicitly, so
you know which port number you'll be
| | 02:05 | using. I'll show you how to do that here.
In order to freeze the port number for a
| | 02:10 | particular website, start off in the
Properties view. I've gone to the
| | 02:14 | Properties view, which is down in the
Lower-right corner, and I'm going to
| | 02:19 | double-click its title bar. That causes it
to float. I'll then move it out into the
| | 02:23 | center of the screen and then click and
drag to make it a little bit wider. Next,
| | 02:27 | I'll go back to the Solution Explorer,
which is still docked on the right, and
| | 02:32 | I'll click on the folder name--that is, the
folder which is the name of the website,
| | 02:36 | in this case Hello World. The Properties
panel updates and shows the web server
| | 02:42 | properties. Notice that by default, a
property called Always Start When
| | 02:47 | Debugging is set to True, and a property
called Use Dynamic Ports is set to True as
| | 02:52 | well. I'm going to change that value from
True to False, and then I should be able
| | 02:57 | to click into the Port number property. It
takes just a moment for it to be
| | 03:02 | activated, so be patient. And then you
can type in any port number that isn't
| | 03:06 | otherwise being used on your system. Now,
when you set your own port number, you
| | 03:11 | should always use a value that's in the
thousands or up. And there's no way to
| | 03:16 | know exactly which port numbers are used
on your particular system, but typically,
| | 03:20 | if you use something in the 4,000 range
you'll be safe. So I'm going to use a
| | 03:26 | value of 4444. Now, I'm going to save my
changes by pressing Ctrl+S. I'll go down
| | 03:33 | to the system tray and I'm going to
right-click on the icon for the ASP.NET
| | 03:38 | Development Server, and I'll select Stop,
which closes down the web server. Now,
| | 03:44 | I'll move the Properties panel over so I
can see the toolbar, and once again, I'll
| | 03:49 | select Debug > Start Without Debugging. The
web server is once again started up
| | 03:55 | automatically, but now I'm using the port
number 4444. I'll see the value in the web
| | 04:01 | browser and I'll also see it in the system
tray icon for the development server. So
| | 04:07 | once again, the purpose of the Development
Web Server is to allow you test your pages
| | 04:12 | using a full-blown web server, but without
having to go through the process of
| | 04:17 | installing and configuring the full
enterprise web server, Internet
| | 04:21 | Information Services. When you deploy your
ASP.NET website for production--that is,
| | 04:27 | for use by your users--you'll want to use
the full web server. IIS has a lot of
| | 04:33 | tools that the Development Web Server
doesn't have, and it's really scalable,
| | 04:37 | meaning it can support a lot more users
at the same time than the development
| | 04:42 | server can. But for convenience, you can't
beat the Development Server during your
| | 04:47 | initial development phase.
| | Collapse this transcript |
| Exploring the development environment| 00:00 | Visual Web Developer 2008 Express Edition
is Microsoft's free integrated development
| | 00:06 | environment to help you get started
quickly building ASP.NET pages and
| | 00:11 | websites. I'm going to give you a tour of
the interface of this product. The menu
| | 00:16 | includes most of the actions that you
start with, such as creating new
| | 00:20 | resources, testing your applications, and
so on. Most of the most important menu
| | 00:25 | choices have associated keyboard
shortcuts. For example, to create a new
| | 00:30 | website you could select File > New
Web Site or you could press the associated
| | 00:36 | keyboard shortcut Shift+Alt+N. For any
particular menu choice, if you don't know
| | 00:41 | the keyboard shortcut, just take a look at
the menu and you'll see that there's a
| | 00:46 | hint. The Edit menu includes common
choices for cutting, copying, and pasting,
| | 00:52 | and deleting text. You'll also find a
number of options for searching for text
| | 00:57 | under the Find and Replace menu choice.
And under Bookmarks, you'll find that
| | 01:01 | there's the ability to create a bookmark
and then return the cursor to that
| | 01:06 | location in a particular file or folder.
The View menu includes choices to open
| | 01:11 | particular panels in the interface.
By default, you see the Solution Explorer,
| | 01:16 | the Database Explorer, and the Properties
panels displayed on the right side of the
| | 01:21 | interface, but there are many other visual
tools available. For example, the Error
| | 01:26 | List displays a list of all of your
programming problems. To open it select
| | 01:31 | View > Error List, and you'll see the Error
List panel appear at the bottom of the
| | 01:37 | interface. To close any particular panel,
just click the close icon. You can also
| | 01:42 | move these panels around. For example, if
I click on the properties panel on its
| | 01:47 | header and then drag it out into the
center, you'll see that that turns it
| | 01:52 | into a floating panel. I can then click
and drag to resize the panel as needed,
| | 01:57 | and then when I click on particular
elements of the web page in the
| | 02:00 | background, I'll see the properties for
that particular element. You can close a
| | 02:06 | panel by clicking the close icon and then
bring it up again by either using the menu
| | 02:11 | choice, or as I'll do here, by pressing F4.
When you bring it back up, it will open
| | 02:16 | using the same dimensions that it had when
you closed it. So you can easily customize
| | 02:22 | the look and feel of Visual Web Developer
to make it look the way you want. If at
| | 02:26 | any point you want to return visual Web
Developer to its default appearance--that
| | 02:32 | is, place the panels back in their original
locations and sizes--go to the menu and
| | 02:37 | select Window > Reset Window Layout. After
confirming by clicking Yes, you'll see
| | 02:43 | that everything goes back to its original
positions. There are three special panels
| | 02:48 | over on the left known as the Toolbox,
the CSS properties, and the Manage Styles
| | 02:53 | panels. These three panels can be opened
easily by simply hovering the cursor over
| | 02:59 | the tab for that panel. Here I've moved
the cursor over the Toolbox tab and the
| | 03:04 | Toolbox panels slides in from the left.
I can then navigate around, scroll up and
| | 03:09 | down, and select items that I want to work
with, and then I can either move the cursor
| | 03:14 | off the panel and then click on the
background web page, and you'll see that
| | 03:18 | the Toolbox panel responds by sliding back
into place. The same thing works with the
| | 03:23 | CSS Properties panel and the Manage Styles
panel. All three of these styles can also
| | 03:29 | be pinned into place. When you click the
Pin button that makes it no longer a
| | 03:33 | sliding panel, but now a panel that's
pinned into place. And then once again,
| | 03:38 | you can reset the Window Layout by
selecting Window > Reset Window Layout and
| | 03:43 | confirming. There are various tools on the
Toolbar above the editing area. For
| | 03:48 | example, if I wanted to take this text and
turn it into a heading 1, I'd simply
| | 03:53 | select the text, then go up to the
toolbar, pull down the list of available
| | 03:58 | formats, and select heading 1, or the h1
tag. Visual Web Developer responds by
| | 04:03 | wrapping that text in the h1 tag set, and
if I then go down to the bottom of the
| | 04:08 | editing area and click the Source button,
I'll see the result, that the span tag
| | 04:13 | that contains the text Hello World has
been wrapped inside the h1 tag set. If
| | 04:19 | you're an experienced HTML developer,
you will find that Visual Web Developer helps
| | 04:24 | you with a certain amount of HTML coding,
but leaves most of the HTML coding up to
| | 04:30 | you. Finally, there is the use of the
Cascading Style Sheets. You can create
| | 04:34 | Cascading Style Sheet rules easily using
the CSS Properties panel, and then apply
| | 04:40 | those rules to selected parts of your web
page. I described these features in more
| | 04:45 | length in the chapter of this video series
about ASP.NET and Visual Design.
| | Collapse this transcript |
|
|
2. Using Microsoft SQL Server 2008Understanding Microsoft SQL Server| 00:00 | Most dynamic websites built with Microsoft
ASP.NET need a database, a place on
| | 00:07 | the server where data can be stored and
retrieved to generate the pages that
| | 00:11 | are requested by the client.
I recommend using Microsoft SQL Server.
| | 00:15 | SQL Server is one of a class of databases
known as Enterprise Databases meaning
| | 00:22 | that they can handle very large amounts
of data and a large number of simultaneous users.
| | 00:28 | There are many database products available
on the market. MySQL, which is now
| | 00:33 | owned by Sun Microsystems, is a free
database that provides powerful relational
| | 00:38 | database support. There is also Oracle,
one of the best of the Enterprise
| | 00:42 | Database class and IBM DB2,
and you can also select Microsoft Access.
| | 00:48 | When building an ASP.NET website,
I think that Microsoft SQL Server is
| | 00:52 | your best bet for these reasons.
First of all, it's highly scalable, meaning that
| | 00:58 | it can handle enormous amounts of data
and a large number of simultaneous users.
| | 01:04 | This distinguishes it from Microsoft
Access, which is really designed for use
| | 01:09 | as a Desktop database by an individual user.
| | 01:12 | While it is possible to build a dynamic
website using Microsoft Access and
| | 01:17 | while ASP.NET does include all of
the software or drivers that you need to use
| | 01:22 | Access in the web environment,
most developers and website administrators find
| | 01:27 | that there is a very quick upper limit
to both the amount of data and number of
| | 01:32 | simultaneous users that you can support with the Access model.
| | 01:36 | ASP.NET includes all of the required
drivers not just for Access though, but
| | 01:40 | also for SQL Server and this distinguishes
SQL Server from products like MySQL,
| | 01:46 | Oracle and IBM DB2. If your organization
has already invested in those databases,
| | 01:52 | that is, if you have enormous
amount of data already in MySQL,
| | 01:56 | Oracle or DB2, there are drivers
available on the market for integration with
| | 02:01 | the .NET Framework. But if you're getting
started for the first time with data
| | 02:06 | that will be used to support a dynamic
website, you will find you'll be able to
| | 02:10 | get started more easily with SQL Server.
| | 02:12 | SQL Server and ASP.NET share a programming
model, the .NET Framework. If you're
| | 02:20 | familiar with programming in Visual
Basic, .NET, C# or one of the other
| | 02:25 | programming languages that's supported
by .NET, you'll find you're able to use
| | 02:29 | the same programming skills in both
environments. Finally, SQL Server is highly
| | 02:35 | integrated with Windows and its security
model, which makes it easy to create
| | 02:39 | integration and authentication of users
when dealing with secured websites.
| | 02:45 | To get started with SQL Server,
the first step is to figure out which version
| | 02:49 | of SQL Server you need. There are many
editions of SQL Server available.
| | 02:54 | You can go to this webpage, which is listed on the screen at
| | 02:58 | www.msdn.microsoft.com/en-us/
library/ms144275.aspx. This webpage,
| | 03:09 | at the SQL Server Developer Center,
includes a listing of all of the different
| | 03:14 | editions of SQL Server that are available.
| | 03:17 | When you deploy your ASP.NET website,
if you're building an enormous website
| | 03:21 | that needs to serve a lot of users,
you might need the Enterprise Edition of
| | 03:25 | SQL Server, but you'll find that there
are less expensive versions available as
| | 03:30 | well, including the Web version,
which is a much lower cost edition
| | 03:35 | specifically designed for deployment
with websites. You'll also find SQL Server
| | 03:40 | Express listed on this page. I'll be using
SQL Server Express with Tools during this video series.
| | 03:47 | This edition of SQL Server includes both
the server itself and the tools you
| | 03:53 | need to manage the server allowing you
to create new databases, manage the
| | 03:57 | structure of existing databases and
configure SQL Server on your system for use
| | 04:04 | with your development environment.
I should caution that if you're going to
| | 04:07 | install SQL Server Express on the same
machine on which you're running Visual
| | 04:12 | Web Developer, and the .NET Framework,
the machine should be equipped with a
| | 04:16 | minimum of 1 Gigabyte of RAM and you'll probably
find that 2 Gigabytes of RAM will be much better.
| | 04:23 | You will find other editions of SQL
Server on the same page including the
| | 04:27 | Compact Edition, which is designed for
mobile devices and web clients on all
| | 04:32 | Windows platforms. In order to download
the appropriate version of SQL Server,
| | 04:38 | go to this page, www.microsoft.com/express/sql.
On this page you'll find a simple listing
| | 04:49 | of the SQL Server 2008 Express
product and a link to get started.
| | 04:54 | When you click through to the link,
you'll be able to download SQL Server 2008
| | 04:59 | Express for free. You don't have to
register; you can go directly to the
| | 05:03 | download page by clicking on the Download
link, but if you do register, it will
| | 05:08 | allow you to receive information from
Microsoft about changes to the SQL Server
| | 05:12 | 2008 Express product.
| | 05:15 | As you scroll down on the page,
you'll find a number of versions that you can
| | 05:19 | select from. If you're getting started
with SQL Server for the first time,
| | 05:24 | choose this download, SQL Server 2008
Express with Tools. You'll receive both
| | 05:30 | the SQL Server Database Engine that
allows you to create databases, set up
| | 05:35 | their structure and create initial data
and SQL Server Management Studio Basic,
| | 05:42 | an integrated environment for
managing your SQL Server installation.
| | Collapse this transcript |
| Installing SQL Server Express| 00:01 | After you've downloaded the application
installer for SQL Server in Tools, you'll
| | 00:06 | be able to install SQL Server and the SQL
Server Management console in one single
| | 00:11 | installation. This is the screen you'll
see when you first start up the setup
| | 00:16 | application. The first step is to check
your system configuration using the System
| | 00:22 | Configuration Checker tool. Click the
link. The System Configuration Checker
| | 00:27 | looks for a set of conditions on your
system and walks you through required
| | 00:32 | steps to upgrade your system where
necessary. Here's the results on my
| | 00:37 | system. It checks consistency validation
in the registry, looks for unsupported SQL
| | 00:42 | server products and other features. Most
specifically, check for the Windows
| | 00:47 | PowerShell. This is a set of tools that
are used by the installer. If they are not
| | 00:53 | present, you'll need to download and
install Windows PowerShell, which is a
| | 00:57 | free download from the Microsoft website.
If you see a failure indicated on this
| | 01:02 | line, click the line, and follow the steps
to go to the Microsoft website, download
| | 01:08 | the PowerShell tool, and install it.
If you see a combination of Passed and
| | 01:13 | Warning indicators, you're ready to go to
the next step. Click OK to continue. Now,
| | 01:18 | go the installation by clicking the
Installation link on the left. Then click
| | 01:23 | New SQL Server Stand Alone Installation
or Add Features to an Existing
| | 01:28 | Installation. On my system, I don't have
any SQL Server instances installed yet. If
| | 01:33 | you do have SQL Server instances
installed, your results will differ. On
| | 01:38 | this screen, the SQL Server setup
application checks for certain support
| | 01:44 | rules. Once again, if you see any failures
in the report, you'll need to follow the
| | 01:48 | steps that are recommended to fix your
system and get ready for the next setup
| | 01:53 | step. If you see that the operation
completed successfully, you can click OK.
| | 01:58 | In the next step, the setup application
installs setup support files: components
| | 02:03 | that are required for SQL Server Setup.
Assuming you don't see any failure
| | 02:08 | indicators, click the Install button.
It takes a few moments to install the setup
| | 02:13 | support files. After that step is
completed, you are now ready to actually
| | 02:18 | install SQL Server and the supporting
tools. Once again, the setup application
| | 02:23 | runs a few tests, and if you see any
failures, click the links and follow the
| | 02:27 | recommended steps. If you see a
combination of Passed and Warning
| | 02:31 | messages, click the Next button.
Then indicate that you're going to be
| | 02:36 | installing a free edition of SQL Server.
Click Next again. Review the license
| | 02:41 | terms, and if you accept them, click the
appropriate option and click Next. On
| | 02:46 | this screen, you indicate which SQL Server
features you want to install. You must
| | 02:52 | install the Database Engine Services and
the SQL Server Management Tools labeled
| | 02:57 | Basic in order to follow the tutorials in
the rest of the video series. The SQL
| | 03:02 | Client Connectivity SDK may be disabled.
But if it is enabled, you can select it if
| | 03:08 | you want to do advanced SQL Server
programming. SQL Server replication is
| | 03:13 | optional for this tutorial, but I recommend
selecting it, and then once again click
| | 03:19 | Next. On the Instance Configuration
screen, you indicate the named instance of
| | 03:24 | SQL Server that you want to install. The
default name is simply SQL Express. Accept
| | 03:30 | the named instance of SQL Express and the
instance ID of the same name, and accept
| | 03:36 | the default root directory. Notice that
SQL Server will be installed in a
| | 03:40 | directory named MSSQL10.SQLexpress, and
click Next. On the Disk Space Requirements
| | 03:49 | screen, you'll see an indication of how
much disk space is required and how much
| | 03:54 | is available on your disk. Make sure that
you have adequate space before you
| | 03:58 | continue. Now click Next. On this screen
your going to indicate the account that's
| | 04:04 | going to be used for each SQL Server.
Click the down arrow to select an account
| | 04:10 | name and select NT Authority/System. The
complete string may differ depending on
| | 04:16 | whether your working on Windows Vista or
Windows XP, but definitely select the
| | 04:20 | system account. You shouldn't need to
provide a password at this point. The SQL
| | 04:25 | Server browser should use the same account
Name. Click Next. Now indicate the
| | 04:30 | Authentication Mode. By default, you use
the Windows Authentication Mode, meaning
| | 04:37 | that you're authenticating based on your
membership in the Windows Security
| | 04:41 | framework. Instead you're going to select
Mixed Mode, which means that you're going
| | 04:47 | to allow both Windows authentication and
SQL Server authentication, where you log
| | 04:53 | into SQL Server using a username and
password. The SQL Server system
| | 04:57 | administrator account has an automatic
name of SA, for system administrator.
| | 05:02 | You'll need to enter a password at this
point. And the setup application wants you
| | 05:07 | to use a strong password that consists of
both letters and numbers. I'm going to use
| | 05:13 | a password that's easy to remember, a
password 123. I recommend that you use the
| | 05:18 | same sort of password for your local
system development, but make sure you use
| | 05:22 | a stronger password that includes special
characters and a mixture of upper- and
| | 05:27 | lowercase characters on an actual
production installation of SQL Server. I'm
| | 05:32 | going to click Add Current User. I'm
logged in as a user named aspnetesst, for
| | 05:38 | essential training, on my machine. This
Windows user will have unrestricted access
| | 05:44 | to the SQL Server database engine and all
of the databases that are installed in it.
| | 05:50 | Now click Next. Select options as you
like for usage and error reporting to
| | 05:55 | Microsoft. I'm going to leave those
options turned off, and click Next again.
| | 06:00 | Next, the set up application determines if
the installation process is going to be
| | 06:05 | blocked in any way. Assuming that you get
a Passed on all of the tests, you're ready
| | 06:10 | to click Next one more time. Check the
summary of all of the installation options
| | 06:15 | that you've selected. And then finally,
click Install to start the installation
| | 06:20 | process. You should now be able to walk
away from your computer and allow the
| | 06:26 | installation process to complete. When
it's complete, SQL Server and the SQL
| | 06:32 | Server Administrator, the basic version,
will have been installed, and you should
| | 06:37 | be able to set up the database for the
first time. If you have any problems with
| | 06:42 | the installation process, check the tech
support options on the Microsoft website
| | 06:48 | for SQL Server Express installation.
| | Collapse this transcript |
| Exploring SQL Server Management Studio Basic| 00:00 | Once you have installed SQL Server
2008 and SQL Server Management Studio,
| | 00:06 | you can start to manage your SQL server
installation. There are two aspects to
| | 00:10 | this. First, to start and stop SQL
Server, you can use the Windows Services
| | 00:16 | panel. To get there, go to the
Control panel, I'm opening the Windows Start
| | 00:21 | menu on Windows Vista, from there I'll
go to the Control panel and I'll select
| | 00:26 | Classic View. From the Classic View,
select Administrative Tools, and from
| | 00:32 | there double click on Services. This
is the panel where you can turn services
| | 00:36 | on and off and configure whether they start up
automatically when you turn your system on.
| | 00:41 | I have expanded the Services panel to
full screen. Now, I'll scroll down to the
| | 00:46 | SQL Server section, you will see
that there are many services that are
| | 00:50 | installed during the SQL Server
installation. This is the primary one, SQL
| | 00:54 | Server. Notice that after you have
installed SQL Server it's configured to
| | 00:58 | start automatically. If at any time
you need to stop SQL Server, to regain
| | 01:03 | memory, for example or just to clear
it's own memory you can select the Service
| | 01:08 | and then go up to the Toolbar and
click Stop Service and then restart it. Or
| | 01:13 | you can simply click the Restart Service button.
| | 01:15 | You can also double click into the
service and that will open up the
| | 01:19 | configuration screen. Here you can
indicate whether you want the database to
| | 01:23 | start automatically upon system
startup. Again, by default, it starts up
| | 01:27 | automatically but you can change that
to manual and then when you want to use
| | 01:31 | SQL Server you will need to open the
Services panel and start it yourself.
| | 01:36 | I'll leave it set to its default setting of
Automatic and I'll cancel out of this
| | 01:40 | dialog box and close the Services panel.
| | 01:44 | The other aspect of managing SQL
Server is learning how to use SQL Sever
| | 01:48 | Management Studio. To open it, go to
the Windows Start menu to All Programs.
| | 01:55 | From there go to the folder Microsoft
SQL Server 2008 and from there select SQL
| | 02:02 | Server Management Studio. If you use
the application frequently, you might want
| | 02:07 | to add a shortcut to your Desktop or to
the shortcuts list at the bottom of the screen.
| | 02:12 | When Microsoft SQL Server Management
Studio first opens, it looks for an SQL
| | 02:17 | Server installation. On my system
it automatically found the SQLEXPRESS
| | 02:22 | instance on my machine where the
machine name is DAVIDMBPRO. If you don't see
| | 02:27 | your server listed, you can ask the
Management Studio to browse for it. Click
| | 02:32 | the down list and select Browse for more.
In the Browse for Servers dialog open
| | 02:37 | the Database Engine list, select your
instance of Microsoft SQL Server and
| | 02:43 | click OK. Each time you do this a
new entry will be added to the list of
| | 02:47 | servers that you will see.
| | 02:49 | So for example, on my system I see my
server listed twice. There is no problem
| | 02:54 | with that as long as you have the
syntax correct, the name of the machine, a
| | 02:59 | back slash and then the name
of the instance of SQL Server.
| | 03:04 | Once you have selected the server
you then indicate how you want to
| | 03:07 | authenticate, that is, how to log in.
The default is Windows Authentication,
| | 03:12 | which means that the user account
that's running SQL Server is actually used to
| | 03:16 | log in the background. Alternatively,
you can use the user name and password of
| | 03:22 | the system administrator that you setup
during installation. When I choose SQL
| | 03:26 | Server Authentication, I then log in
with the system administrator user name,
| | 03:32 | which by default is sa, and then I
enter the password that I created during the
| | 03:37 | installation process, which
on my system was password123.
| | 03:39 | So whether you authenticate using
Windows or SQL Server Authentication you
| | 03:46 | should now be able to click the
Connect button and see your server listed in
| | 03:50 | the Object Explorer panel on the left.
Within the Object Explorer you can open
| | 03:56 | the Databases list and you should see
an item there called System Databases.
| | 04:01 | Because we haven't added any user
databases yet, you won't see any actual user data.
| | 04:05 | There are also categories for Security,
Server Objects, Replication and Management.
| | 04:11 | I am going to be showing you in other
videos how to create a brand new database
| | 04:17 | and how to restore a database that's
provided to you from another SQL Server installation.
| | Collapse this transcript |
| Creating a new database| 00:01 | After installing SQL Server and
connecting to it for the first time from SQL
| | 00:05 | Server Management Studio, you are ready
to create your first database. The name
| | 00:10 | of the file is mybookstore.sql. It's a
text file that you can open in any text
| | 00:16 | editor. The file uses a database named
mybookstore defined at the top of the
| | 00:22 | file. And then it looks for four
database tables called authors, publishers,
| | 00:28 | titles and users. For each of these
tables, if the tables exist it first
| | 00:33 | deletes them, which is an
operation in SQL called dropping the table.
| | 00:38 | In the next section, it creates new
versions of the tables. For example, this
| | 00:43 | code that I'm selecting creates the
table users and defines its structure.
| | 00:49 | I'll turn Word Wrap on so that you
can see all of the code that's involved.
| | 00:53 | The users table contains a column called
uteri, which is the primary key known in
| | 00:58 | SQL Server as an identity column. An
identity column is an integer column that
| | 01:04 | auto increments, that is, each time a
new record is added to the database table
| | 01:09 | that database assigns the next
available numeric value. There are also columns
| | 01:14 | called user_name, user_password and
user_roles which are variable, character,
| | 01:19 | or string fields that can
hold up to 50 characters each.
| | 01:23 | The next table is called titles. The
titles table once again has a primary key,
| | 01:29 | which is an identity column, this time
named title_id. It contains two columns
| | 01:35 | called pub_id and au_id for author id,
which are integers. A column called
| | 01:41 | title, which can contain a string of up
to 80 characters. The price, which is a
| | 01:45 | money value or a currency value. The
pubdate, which is a date time. And a notes
| | 01:51 | column, which is a variable, character,
or string field containing up to 200 characters.
| | 01:57 | Once again this table has a single
column primary key, the title_id. Below the
| | 02:03 | code to create that table you will
find a series of Insert statements. Each
| | 02:08 | Insert statement creates one record
in the titles table. Continuing further
| | 02:13 | down the file, you will find code to
create a publishers table, pub_id, which
| | 02:19 | is the primary key and again is
integer identity column. And pub_name, a
| | 02:25 | variable character column
containing up to 40 characters.
| | 02:28 | And then once again you will find a set
of Insert statements that add the data.
| | 02:33 | And the last table is called authors.
The authors table contains a primary key
| | 02:38 | named au_id using the same type and
rules as all of the primary keys in the
| | 02:43 | database. au_lname and au_fname, which
are variable character fields. Phone,
| | 02:50 | address, city, state and zip, which
are all variable character or character
| | 02:54 | columns. Once again there is a single
column primary key based on the au_id
| | 03:00 | column and below that a set of
Insert statements to add the data.
| | 03:05 | So, here's how you will use the SQL
file if you have access to it. I'll first
| | 03:10 | reopen SQL Server Management Studio.
I'm working in Windows Vista so it's a
| | 03:14 | little bit easier in Vista to find the
application. I simply type in part of
| | 03:19 | the application name, Management Studio
and when I see it appear at the top,
| | 03:24 | I select it. If you are using Windows XP,
you will need to go through the All
| | 03:28 | Programs menu tree.
| | 03:30 | This time I'll show you an alternative
approach to connect into your database.
| | 03:34 | Instead of using the actual machine name,
this time I'm going to connect using
| | 03:39 | localhost\SQLExpress and I'll use
Windows Authentication rather than SQL Server
| | 03:46 | Authentication. I'm still connecting
to the same database server as I did in
| | 03:50 | another video though. And
I click the Connect button.
| | 03:54 | Once the database is open, I'll then
take a look at the Databases list and show
| | 03:58 | that there are no user databases
currently created. Now to create my first
| | 04:03 | database, I'll right click on Databases
and select New Database. I'll name the
| | 04:09 | database, mybookstore. When you create
a new database in SQL Server you will be
| | 04:14 | creating two files. The primary file,
which contains the data, and the log
| | 04:19 | file, which tracks changes to the
data for backup and restore purposes.
| | 04:24 | In the Database file section you will
see that the actual names and location of
| | 04:28 | the files are listed. They are created
automatically under a data folder under
| | 04:33 | your SQL Server installation folder,
MSSQL folder. The name of the file will
| | 04:39 | match the name of the database. The
primary file will have a file extension of
| | 04:42 | MDF and the secondary or log file has
a file extension of LDF. Click OK to
| | 04:48 | create the database.
| | 04:50 | Now, you will do some SQL scripting to
create the structure and add the data.
| | 04:55 | Go to the Toolbar and click New Query.
That opens up an SQLQuery window. Now,
| | 05:01 | I'll return to the SQL file and once
again open it in any text editor. I'm
| | 05:07 | using TextPad. Now I'll select all of
the code in the SQL file by pressing
| | 05:13 | Ctr+A and then I'll copy all of
that content to the Clipboard.
| | 05:17 | Now I'll return to SQL Server
Management Studio and I'll paste all that SQL
| | 05:23 | into place. In the next step, I'll
run the SQL file, which will result in
| | 05:28 | creating all the tables and adding all
of the data. I'll go to the Toolbar and
| | 05:33 | click Execute. It takes less than a
second for the operation to happen. Now to
| | 05:38 | check the results, I'll go to the
Database listing over in the Object Explorer
| | 05:43 | and I'll open it up. And I'll open up
the list of Tables and I should see the
| | 05:48 | four tables listed that were defined
in the SQL file, authors, publishers,
| | 05:53 | titles and users.
| | 05:54 | Notice that all four tables have a
dbo prefix. dbo is the schema or the
| | 06:00 | database that owns those tables. It is
possible in an SQL Server installation
| | 06:05 | to have more than one table with the
same name but they must be members of
| | 06:09 | different schema. If you don't specify
a schema in your SQL file, dbo is used
| | 06:14 | automatically but you will see in my
SQL file that the dbo prefix was in there.
| | 06:20 | Now I'll check the structure of the
data. I'll open up dbo.authors and then
| | 06:26 | I'll open the Columns list. And I'll
see all of the columns that were defined
| | 06:30 | in the SQL file are listed there. And
finally, I'll check the data. I'll right
| | 06:35 | click on the table name and
I'll choose Select Top 1000 Rows.
| | 06:40 | In the center of the SQL Server
Management Studio interface, I'll see the
| | 06:44 | resulting SQL statement that would
retrieve the data. And then below that,
| | 06:48 | I'll see the actual data that was retrieved
in a data grid. You can also edit the
| | 06:53 | data from this interface. For example,
you can right click on the table and
| | 06:58 | then select Edit Top 200 Rows and then
you can actually go into the data and
| | 07:02 | make changes and your changes will be
saved right back to the Database files.
| | 07:07 | So, that's a look at how to create the
SQL Server Database if you have access
| | 07:11 | to the Exercise Files. If you don't
have access to the Exercise Files, you will
| | 07:17 | need to create the tables yourself. For
example, you can go to the Tables item
| | 07:21 | in the Object Explorer, right click and
select New Table. And if, for example,
| | 07:26 | I were creating the authors table, I
would type in the name of the column,
| | 07:31 | au_id. I would select the Data Type,
which in this case is int for integer. And
| | 07:38 | then assuming that this was a primary
key and an auto-incrementing or identity
| | 07:42 | column, I would come up
here and click Set Primary Key.
| | 07:46 | And then down here in the Column
Properties, I would scroll down to the section
| | 07:50 | labeled Identity Specification. I
would open that up and then I would set the
| | 07:55 | property Is Identity to Yes. And to
create a variable character field, I would
| | 08:00 | click once again into the list of
columns, type in the name of the column.
| | 08:04 | Select the Data Type, which will be
varchar. Notice that it defaults to a size
| | 08:09 | of 50. And then if I want to change the
size of the column, I would go into the
| | 08:14 | General properties in the Column
Properties panel and change the Length, let's
| | 08:19 | say, from 50 to 40.
| | 08:21 | After you have setup all of your table
structure information in the grid above,
| | 08:25 | you then save the table. I'll click on
the Save icon in the Toolbar and notice
| | 08:30 | that I'm prompted for the name of the
table. I'm not going to save this new
| | 08:33 | table because I already have my tables
created. But again, if you don't have
| | 08:37 | access to the Exercise Files, this is
how you can create the tables using SQL
| | 08:41 | Server Management Studio. You can
then edit the tables and add your data
| | 08:47 | directly through the SQL
Server Management Studio interface.
| | Collapse this transcript |
| Connecting to the database in ASP.NET| 00:00 | Once you've created your database through
SQL Server Management Studio, you're then
| | 00:05 | ready to work with it from within Visual
Web Developer 2008. Open Visual Web
| | 00:10 | Developer and then create a brand-new
website. You can create it anywhere on
| | 00:15 | disk. I'm going to create it under my
Exercise files area. From the menu, select
| | 00:21 | File > New Web Site. Select ASP.NET
Web Site from the templates list and then
| | 00:26 | set the website location. I'll create a
new website called SQL Server, under the
| | 00:33 | Exercise files, Ch02SQLServer folder.
The language can be either Visual C# or
| | 00:40 | Visual Basic for this exercise. Click OK
to create the brand-new website. As with
| | 00:45 | all brand-new websites, you'll have a
single file called Default.aspx, which has
| | 00:50 | an associated file with either a .cs or a
.vb extension that contains the page's
| | 00:56 | code. Now, to connect to your database, go
to the Database Explorer window. By
| | 01:01 | default, this appears on the right side, in
the tabs associated with the Solution
| | 01:06 | Explorer. Then go to the toolbar and click
the button labeled Connect to Database.
| | 01:11 | You can also right-click on Data
Connections and select Add Connection from
| | 01:16 | there. Either way, you'll go to the Add
Connection dialog box. You can click the
| | 01:20 | Refresh button and try to connect to your
database automatically, but you might find
| | 01:25 | from within Visual Web Developer that all
you see is the name of your computer.
| | 01:30 | Notice that if I pull down the list, I see
DAVIDMBPRO, which is the name of my
| | 01:34 | computer. Instead, you'll want to type in
the server name and the SQL Server
| | 01:39 | instance manually and use localhost
rather than your actual computer name to
| | 01:43 | make the database connection more portable
between computers. I'll type in
| | 01:48 | localhost\. Make sure you're using the backslash and
not the forward slash And then the SQL Server
| | 01:57 | instance name, which is sqlexpress. Notice
| | 01:59 | this time that I'm typing it in in all
lowercase. The instance name is not case-
| | 02:05 | sensitive. Next you'll indicate whether
you are using Windows authentication or
| | 02:10 | SQL Server authentication. If your
copy of SQL Server is on your own computer,
| | 02:15 | as is the case here, you can use Windows
authentication. If you're working with an
| | 02:20 | SQL Server installation on another system,
such as an SQL Server database that's
| | 02:25 | rented from an Internet service provider,
you'll need to use SQL Server
| | 02:29 | authentication and pass in your username
and your password. I'll use Windows
| | 02:34 | authentication. At this point, you should
be able to see a list of the databases
| | 02:38 | that are available through your copy of
SQL Server. Go down to the label Select
| | 02:43 | or enter a database name and click the
arrow to see a list of available
| | 02:47 | databases. And there's the database that
I've already created called mybookstore.
| | 02:52 | Now, if you don't see that database listed,
you should go back to the previous videos
| | 02:57 | in this chapter and follow the directions
to create the database. If you do see the
| | 03:02 | database though, select it. Now click the
Test Connection button and you should see
| | 03:07 | the dialog box indicating that the test
succeeded and that you're connected to the
| | 03:12 | database. Click OK to clear the dialog.
Then click OK to save your database
| | 03:18 | connection configuration. From within the
Database Explorer, you can take a look at
| | 03:23 | the structure of your database. Now here's
a little tip about working with the panels
| | 03:28 | on the right side of the Visual Web
Developer interface. Notice that on my
| | 03:32 | screen, which has a resolution of
1024x768, the amount of visual space I
| | 03:36 | have to work in is fairly limited. You can
improve that situation by reconfiguring
| | 03:42 | the panels on the right so that they slide
out in the same way as the panels on the
| | 03:47 | left. The easiest way to do this is to go
to the menu and select Window > Auto Hide All.
| | 03:52 | Notice that all the panels on the right
are now turned into tabbed panels, just
| | 03:57 | like the ones on the left. You can now
move the cursor over the appropriate tabs,
| | 04:01 | such as the Database Explorer, and then
you'll have a lot more vertical space to
| | 04:06 | work with. And if you like, you can even
drag out the width of that panel, and now
| | 04:10 | you can see everything you need to see.
I'll open up my connection and I'll show
| | 04:15 | you that it has the list of tables. I'll
open up the table list and there are the
| | 04:20 | four tables that are available in the
database: Authors, Publishers, Titles, and
| | 04:25 | Users. From the Database Explorer, you can
right-click and select Show Table Data and
| | 04:31 | Visual Web Developer will query the
database table and show you the results.
| | 04:36 | Close that window and then move the cursor
over the tab again. You'll see the
| | 04:41 | Database Explorer slide out. Then go to
the Authors Table again, right-click, and
| | 04:46 | select Open Table Definition. In Visual
Web Developer, you can actually manage
| | 04:51 | your SQL Server table structure in the
same way as you can in SQL Server
| | 04:56 | Management Studio. You can add columns,
change column properties, and again do
| | 05:01 | everything that you can in the Studio
interface. The only thing that was
| | 05:05 | important to do in SQL Server Management
Studio itself was to actually create the
| | 05:10 | database, but then once it's created, you
can do everything else from within Visual
| | 05:15 | Web Developer. Finally, I'll go back to the
Database Explorer one more time and show
| | 05:21 | that there are many more categories that
you can create. For example, you can go to
| | 05:26 | the Views and create prebuilt queries.
You can use stored procedures, functions,
| | 05:31 | and everything else that's available in
SQL Server 2008.
| | Collapse this transcript |
| Testing SQL queries| 00:02 | After defining your database connection,
you can then use Visual Web Developer to
| | 00:07 | create and test SQL queries. To do this, go
to the Database Explorer panel. I've
| | 00:13 | previously configured my Database Explorer
panel so that it slides in from the right.
| | 00:18 | Then go to the Database Connection,
right-click, and select New Query. In order
| | 00:26 | to query the database, you define which
tables you're going to query. The table
| | 00:30 | structure of this database connects the
Titles table to both the Publishers and
| | 00:36 | the Authors Table through keys, or joins.
Double-click on the Titles table first
| | 00:41 | and you'll see the Titles table added in
the background. Then double-click on
| | 00:47 | Publishers and on Authors. You'll see the
Publishers and Authors tables added, and
| | 00:52 | you'll also see that connections are made
between the tables automatically. These
| | 00:56 | connections are made because the names of
the columns in the tables match each
| | 01:01 | other, and Visual Web Developer picks that
up and decides that it can join the
| | 01:06 | columns during the query's execution. Now
close the Add Table dialog and take
| | 01:11 | another look at the diagram of the query.
You can drag the table icons around as you
| | 01:16 | need to and also resize or even close the
different panes of the query interface.
| | 01:21 | The next step is to indicate which columns
of the tables you want to include in your
| | 01:27 | query results. For example, I'd like to
display the title of each book, so I'll
| | 01:32 | click the checkbox next to Title. And I'd
also like the book's price, and, scrolling
| | 01:38 | down a bit, the book's publication date.
You can vertically expand the size of the
| | 01:43 | panels if you're not able to see all of
the columns. Now, I'd also like to include
| | 01:48 | the publisher's name, so I'll check that
option, and I'll also select the author's
| | 01:53 | first name and last name. Take a look at
the SQL code that's being generated in the
| | 01:58 | third pane, the SQL pane. It's a select
statement, which retrieves the title, price,
| | 02:03 | and pub date from titles, the pub name
column from publishers, and the author's
| | 02:08 | last name and first name, and then joins
the tables on the appropriate columns. Now,
| | 02:13 | to test your query, go to the toolbar and
look for the icon with the exclamation
| | 02:19 | mark. This is the Execute SQL button.
Click the button and then in the bottom
| | 02:24 | pane, which is your results pane, you'll see
the data that's retrieved from the
| | 02:29 | database. Now let's make a little change.
Instead of retrieving the data in its
| | 02:33 | natural sort order, I'd like to sort it in
order by price. So I'll go to the row that
| | 02:39 | represents the price and I'll change the
sort type to Ascending so that I'm sorting
| | 02:44 | the books from least expensive to most
expensive. If you select more than one
| | 02:49 | column in your sort, you'll also need to
select a Sort Order. Now take a look at
| | 02:54 | the resulting SQL, and you'll see that an
Order By clause has been added to the SQL
| | 03:00 | statement that causes the data to be
returned in that order. Once again,
| | 03:04 | execute the SQL statement, drag upwards so
that you can see the results, and you
| | 03:09 | should see that the data is returned in
ascending order by price. The purpose of
| | 03:14 | the query interface is to allow you to
model and generate SQL statements. You
| | 03:19 | can't actually take these SQL statements
and automatically add them into your code.
| | 03:23 | Instead, you'll just need to copy and
paste the SQL code that's been generated
| | 03:28 | and use it in your code as needed. But
Visual Web Developer 2008 Express Edition
| | 03:34 | helps you do this easily. If you're fairly
new to SQL, you'll find that this is a
| | 03:39 | great learning tool. And even for those
web developers who are fairly experienced
| | 03:44 | with the SQL language, you'll find that
creating SQL code with simple joins and so
| | 03:49 | on is made much speedier by the use of
this visual tool.
| | Collapse this transcript |
| Presenting a dataset in an ASP.NET page| 00:00 | After you define a database connection in
Visual Web Developer, you can then present
| | 00:05 | data easily in any ASP.NET page. I'll be
working with the file Default.aspx, which
| | 00:11 | was created automatically when I created
the new website. First, with Default.aspx
| | 00:17 | in Code view, I'll click into the Title
element within the head section and I'll
| | 00:23 | put in a title of Author List. Then,
within the div tag, I'll add an h1 tag set
| | 00:29 | and within the h1 tag set I'll once again
type in Author List. Then I'll look at the
| | 00:37 | page in Design view. Notice that the
Author List heading is displayed on the
| | 00:41 | screen. Next, I'm going to press Enter.
This results in creating a new paragraph
| | 00:46 | in the page. Now, to actually display the
list of authors on the page, all I'll need
| | 00:52 | to do is drag the Authors table from the
Database Explorer into the page. Visual
| | 00:57 | Web Developer will take care of everything
in the background. I'll go to the Database
| | 01:03 | Explorer. From there I'll open my list of
tables, and I'll locate the Authors Table,
| | 01:10 | and I'll click and drag the Authors
table, and drop it inside the paragraph.
| | 01:16 | After a moment, I'll see a grid view
appear. A grid view is a rendering of an
| | 01:22 | HTML table that dynamically presents the
data. I'll describe in detail how to use a
| | 01:29 | grid view in other videos, but for now, I'm
just going to save and test the page. I'll
| | 01:35 | save the file, then I'll go to the Menu
and select Debug > Start Without Debugging,
| | 01:40 | or press Ctrl+F5. Visual web developer
starts up the development web server and
| | 01:46 | runs the page and displays the data
automatically. You'll see that all of the
| | 01:52 | columns from the database table are
displayed: the primary key, the author's
| | 01:57 | first name and last name, and so on. Now,
I'll describe some of the things that
| | 02:02 | happened in the background when I dragged
the table into the page. I'll close the
| | 02:07 | browser, and first let's take a look at
the code that was generated in
| | 02:12 | Default.aspx. I'll click on Source View,
then go to View > Full Screen so I can
| | 02:17 | see as much code as possible. Notice that
I created something called a grid view.
| | 02:23 | The grid view generates the HTML table
code that's presented by the browser. A
| | 02:29 | little further down, I'll find a little
bit of code that generates something
| | 02:33 | called an SqlDataSource. The SqlDataSource
describes how I'm going to retrieve the
| | 02:38 | data from the database server. And most
importantly, it uses something called a
| | 02:43 | ConnectionString. A ConnectionString is a
definition of the location of the database
| | 02:49 | and a description of how I'm going to
connect to it. And you'll see that an
| | 02:53 | automatic ConnectionString called
mybookstoreConnectionString1 was generated
| | 02:58 | by Visual Web Developer. This
ConnectionString is defined in a file
| | 03:03 | called Web Config. Go to the Solution
Explorer and open the web.config file. I
| | 03:11 | press Ctrl+F. That opens up the Find and
Replace dialog. Type in "Connection" and
| | 03:16 | click Find Next and then close the Find
and Replace dialog. You'll see that a new
| | 03:21 | element called ConnectionStrings has been
added. And then within the
| | 03:25 | ConnectionStrings element, there's an add
element with a name of
| | 03:29 | mybookstoreconnectionString1. And then the
definition of the database and how I'm
| | 03:34 | connecting is right here. It says
connectionString=Data
| | 03:38 | source=localhostsqlexpress;Initialcatalog=mybookstore,
which is known in SQL Server as the
| | 03:45 | database name. And Integrated
Security=True. Integrated Security is
| | 03:52 | what's known in Visual Web Developer as
Windows authentication, meaning I don't
| | 03:57 | need to provide my username and password
to authenticate and use the database. Once
| | 04:01 | the ConnectionString has been defined once
in the web.config file, it can then be
| | 04:06 | used throughout the rest of my website. It
doesn't have to be defined new each time,
| | 04:11 | and its also important to note that even
though I had previously defined the
| | 04:16 | connection in Visual Web Developer, the
connection was only defined for this
| | 04:21 | particular website when I dragged my first
bit of data into my first page. Until
| | 04:26 | then, the database connection information
was being managed by Visual Web Developer,
| | 04:32 | and it will now be available to all the
websites that I use, as long as I'm using
| | 04:36 | this copy of Visual Web Developer and I'm
logged in as myself on my copy of Windows.
| | Collapse this transcript |
|
|
3. Creating ASP.NET PagesUnderstanding ASP.NET web form pages| 00:00 | The pages that you create in ASP.NET
websites are known as web form pages.
| | 00:06 | Unlike conventional web pages, these
are always built as data entry forms which
| | 00:12 | post back to the server
for server based processing.
| | 00:15 | Throughout the demonstrations in this
chapter, I'll use a set of files that's
| | 00:20 | in a website that's a part of the
exercise files provided with the video
| | 00:23 | series. When you create a brand new
ASP.NET page, you have the opportunity to
| | 00:28 | either include all of the scripting
code for the page in the page itself or to
| | 00:33 | separate the content into two files. One,
the HTML page and two, the code file.
| | 00:39 | In this demonstration, I'll create a
page that includes its own scripting code.
| | 00:44 | I'll start by selecting Website > Add
New Item. I'll select Web Form from the
| | 00:50 | Templates list and I'll create a new
file called PageWithCode.aspx and I'll set
| | 00:56 | the Language to Visual C#.
| | 00:59 | Now for this page, I'm going to
deselect the option, Place code in separate
| | 01:03 | file and click Add. The page was
created. With the page in Source view,
| | 01:09 | I'll click into the title element and
type in PageWithCode and I'll do the same thing
| | 01:14 | in the div tag inside the form.
Notice that the page was created with the
| | 01:19 | set of form elements with the runat
attribute set to server, meaning that the
| | 01:23 | page was enabled for server-side processing.
| | 01:26 | Within the div tag, I'll create an h1
tag set, I'll type in less than character
| | 01:31 | then h1 and when I close the tag, the
end tag is provided for me. Then once
| | 01:37 | again, I'll type in the text Page with Code.
| | 01:41 | Now I'll switch to Design view and I'm
going to add two controls to the page.
| | 01:46 | I'll press Enter to create a new
paragraph, then I'll go to the Toolbox and
| | 01:51 | I'll drag in a Label from the Standard
section of the Toolbox and I'll place it
| | 01:56 | inside that paragraph that was just
created. This is a web form control. Each
| | 02:02 | web form control can have a unique
identifier. With the control selected, I'll
| | 02:06 | go to the Properties panel. I'll
scroll down to the end then I'll find the id
| | 02:12 | and I'll change the id of the label
control to my label. I type in the id and
| | 02:18 | then press Enter to save the change.
| | 02:20 | Now I'll click right after the labeling
that paragraph and press Enter and that
| | 02:25 | creates another paragraph. I'll go back
to the toolbox and this time I'll drag
| | 02:30 | in a button control. The button
control is essentially a form submit button.
| | 02:36 | When the user clicks it, it causes the
page to be posted back to the server and
| | 02:41 | any server-side code that I want to
include in the page will be executed.
| | 02:46 | With the button control selected, I'll
go back to the Properties panel and I'll
| | 02:51 | locate the Text property. I'll change
the Text property of the Button to simply
| | 02:55 | Click me and press Enter. Notice
that in the Design view on the left that
| | 03:01 | changes reflected immediately.
| | 03:03 | Now to make something happen, I'm going
to double-click on the control. When I
| | 03:09 | double-click, Visual Web Developer
automatically generates a method or a
| | 03:13 | function called Button1_Click. The
structure of the function is already
| | 03:18 | appropriately constructed to react to
the click event that happens when the
| | 03:22 | user clicks the button.
| | 03:24 | When the user clicks that button, I'm
going to react by executing a little bit
| | 03:28 | of server-side code that changes the
text property of the label, like this.
| | 03:34 | I'll type in myl and I'll see myLabel
listed in the list of available objects.
| | 03:39 | I'll press the dot character to auto-
complete it. Then I'll start typing tex
| | 03:43 | for text and I'll see the Text
property with an uppercase T listed there.
| | 03:48 | I will press the spacebar, and then
I'll put it an equal sign which in C# is
| | 03:54 | the assignment operator and then I'll
complete the programming statement with
| | 03:58 | the literal string of "Value set at
server" and then I'll complete the
| | 04:04 | statement with the semicolon.
| | 04:06 | Let's take a look at all of the code
and see how it works. I have the function
| | 04:10 | called Button1_Click. If I scroll down
and take a look at the button component,
| | 04:16 | I'll see that it has a runat = server
attribute, which means that any code
| | 04:21 | that's being executed is executed at
the server level rather than in the
| | 04:24 | browser, and then an attribute called
onclick, which names the function that's
| | 04:30 | going to be called Button1_Click. I'll
save my changes and I'll run the page by
| | 04:36 | selecting Debug > Start Without Debugging.
| | 04:39 | When the page first appears, the
label displays its default value of label.
| | 04:44 | I'll click the button, the page is
posted back to the server and when it's
| | 04:49 | returned, the text property of the
label is changed to the literal string
| | 04:53 | "Value set at server".
| | 04:55 | So that's the basic architecture of a
web form page. Each web form control that
| | 05:00 | you place on the page has features that
can execute certain code at the server
| | 05:05 | level. Not all code is capable of
being executed at the ASP.NET server level.
| | 05:11 | There are certain features that must
be executed by the browser. Typically,
| | 05:14 | those processes are written in
JavaScript code rather than in C# or in Visual Basic.
| | 05:21 | Only the server is able to execute
programming instructions in those two
| | 05:25 | languages. It's also important to
note that in this particular page, I'm
| | 05:30 | including the scripting code in the
page itself rather than in a separate code
| | 05:35 | file. Some developers prefer putting
their code together this way; other
| | 05:39 | developers prefer to create their pages
always with separate code files so that
| | 05:44 | they can separate their HTML markup and
their scripting code into two distinct files.
| | Collapse this transcript |
| Separating presentation and logic with code files| 00:01 |
Each time you create a brand new ASP.
NET web form page, you can select either a
| | 00:06 |
page with scripting or a page with the
code file and you can make your choice
| | 00:10 |
of programming language.
| | 00:12 |
In this demonstration, I'll create a
page with a separate code file and this
| | 00:16 |
time I'll use Visual Basic. I'm still
working in the website CreatePages that I
| | 00:21 |
opened previously. From the menu,
I'll select Website > Add New Item.
| | 00:27 |
I'll select Web Form from the Templates
list and this time I'll set the name as
| | 00:32 |
PageWithCodeFile and set
the Language to Visual Basic.
| | 00:36 |
I will select the option Place code in
separate file and click Add. Because I
| | 00:43 |
have said I want it to create a
separate code file, Visual Web Developer
| | 00:47 |
created both the ASPX file and the
associated file PageWithCodeFile.aspx.vb. If
| | 00:55 |
I rename the primary file, Visual Web
Developer will rename the associated code
| | 01:01 |
file for me. It also manages this
attribute, the CodeFile attribute, which is
| | 01:06 |
built into the header of the page.
This is how the two files are linked together.
| | 01:12 |
Now I'll go through essentially the
same set of steps I did in a previous
| | 01:16 |
video. I'll add a title. I'll click
into the Title element in the Head section
| | 01:21 |
and type in the text PageWithCodeFile.
I'll click into the div tag section.
| | 01:27 |
I'll add an h1 tag set and type in the
same text and then I'll go into Design view.
| | 01:34 |
In Design view, I'll press Enter, I'll
go to the Toolbox panel and I'll drag in
| | 01:40 |
a Label control. I'll place it inside
the new paragraph and then I'll go to the
| | 01:45 |
Properties panel, scroll down, find
the ID property and change the ID of the
| | 01:51 |
label to myLabel. I'll then click
right after the Label control and press
| | 01:56 |
Enter. Go to the toolbox and drag in a
Button control, with the Button selected
| | 02:01 |
I'll change its Text property to
Click me and then I'll double-click on the
| | 02:06 |
Button control.
| | 02:07 |
This time the event handler function is
created using the Visual Basic language
| | 02:12 |
and it's created in the separate code
file, PageWithCodeFile.aspx.vb. As in the
| | 02:20 |
previous exercise, I'm going to be
executing this code on the server. So I'll
| | 02:25 |
execute the following code. I'll type
in the beginning of the ID of the control
| | 02:29 |
myLabel. Then press the dot character.
Visual Web Developer auto completes the
| | 02:35 |
ID of the control and then I'll select
the Text property and press the spacebar
| | 02:42 |
and then I'll put in the equal
assignment operator which is the same for Visual
| | 02:45 |
Basic as it is for C# and I'll
type in the text "Executed at server".
| | 02:53 |
This time I won't put in the
semicolon because I'm working in Visual Basic,
| | 02:57 |
which doesn't use that character to
terminate a statement. I'll go back to the
| | 03:02 |
page and save the changes by pressing
Ctrl+S. Then I'll go to the menu and
| | 03:07 |
select Debug > Start Without Debugging.
| | 03:10 |
When the page first appears, it
displays the initial value of the Label
| | 03:13 |
control, simply Label and when I click
the button that results in posting the
| | 03:19 |
page to the server and the Label
control shows the text "Executed at server".
| | 03:25 |
So you are using essentially the
same sort of code. The Button control
| | 03:29 |
dispatches a click event. You react to
the click event by executing server-side
| | 03:34 |
code, which modifies the values of
various other Web Form controls. What
| | 03:39 |
differs between pages is which language
you are working in and whether you have
| | 03:44 |
build your pages using code in the
page or using an associated code file.
| | 03:49 |
Throughout the rest of this video
series, I'll be using pages with associated
| | 03:53 |
code files. I prefer to keep my HTML
code in one file, and my scripting code in
| | 03:59 |
a separate file and I think you will
find that that's the best way to create
| | 04:02 |
your own websites. It makes it very
easy to know what kind of code you're
| | 04:06 |
working with at any given point and it
reduces the amount of scrolling up and
| | 04:11 |
down you have to do, when you are
doing your coding, when you need to make
| | 04:14 |
changes or fix your bugs.
| | 04:17 |
| | Collapse this transcript |
| Adding web form controls to a page| 00:00 | When you build a data entry form using
an ASP.NET web form page, you can choose
| | 00:05 | between standard HTML controls and ASP.
NET server controls. In this video, I'm
| | 00:12 | going to demonstrate how to create a
data entry form using ASP.NET's web form
| | 00:17 | controls, which allow you to react to
particular events using server-side code.
| | 00:22 | I am going to open a file called
AuthorForm.aspx. That's a part of the create
| | 00:28 | pages website. This file contains a
simple HTML table with two columns and four
| | 00:34 | rows. The first three rows have labels
in the first column and I'm going to be
| | 00:40 | adding controls to the form
placing them in the second column.
| | 00:44 | If you look at the file in Source View
and I'll open it up Full Screen view, so
| | 00:48 | we can see as much code as possible.
You will see that there is a certain
| | 00:51 | amount of style code up at the top in
the Head section and then within the body
| | 00:55 | tag, there is form created by Visual
Web Developer when the page was created.
| | 01:00 | And then the HTML table, that
contains the table rows and table data cells.
| | 01:06 | That's all there is in the file so far.
| | 01:09 | Now I'll go back to Design View and
I'll get out of Full Screen View, so I can
| | 01:13 | see all of my panels. I'll open up the
Toolbox on the left and then pin it into
| | 01:18 | place by clicking the little pin icon.
That causes the Toolbox to be pinned on
| | 01:22 | the left and then I'll unpin the
solution explorer and the Properties panel, so
| | 01:27 | that I reclaimed that
visual space over on the right.
| | 01:31 | Now it will be easy to drag controls
into the environment. I'm going to be
| | 01:36 | using a TextBox control. This is
the ASP.NET server control that's the
| | 01:41 | equivalent of an HTML text input
control. I'll drag the TextBox into place,
| | 01:47 | dropping it into the first row, second
column. When you are working in Visual
| | 01:51 | Web Developers Design View, you can
easily resize the control just by clicking
| | 01:56 | and dragging. I'll set the
text boxes width at 200 pixels.
| | 02:01 | Now I'll go to the Properties view and
assign an id down at the bottom of the
| | 02:05 | Properties view. I'll assign it the
id as fnameinput. Now I'll do the same
| | 02:11 | thing for the last name control, so
that the controls are exactly of the same
| | 02:14 | size, I'll simply copy this control to
the clipboard, place the cursor in the
| | 02:19 | second row second column and paste.
Then I'll select the new control that I
| | 02:25 | have just created and if you look
right above the control, you will see a
| | 02:28 | visual indicator that the new
control's id was assigned as fnameinput0 to
| | 02:34 | distinguish it from the simple fnameinput.
| | 02:37 | Now with the control selected, I'll go
to the Properties panel and I'll change
| | 02:41 | the id of this control from
fnameinput0 to lnameinput. I'll create a TextBox
| | 02:48 | for the Date of Birth. I'll drag and
drop the control. I'll press F4 to go to
| | 02:53 | the Properties panel and I'll change
the id to DOB for Date of Birth input.
| | 03:00 | Finally I'm going to add a button to
the form. I created this HTML table
| | 03:05 | originally with four rows so that I'd
have a place to put the button and make
| | 03:09 | it a line right under the other
controls. I'll drag an ASP.NET button control
| | 03:15 | into the form and I'll drop it
into the fourth row second column.
| | 03:21 | Once again, I'll go to the
Properties panel, I'll change the text of the
| | 03:24 | control to submit and that changes
automatically in the Design View when I
| | 03:30 | press Enter. I don't need to worry
about the id of the button, I don't care
| | 03:35 | about its data. So I'll just leave it
with its default of Button1. So now,
| | 03:41 | I'll save and display the form in the
browser. I'll press Ctrl+S to save then
| | 03:47 | I'll go to the menu and select
Debug > Start without debugging.
| | 03:53 | When the form opens on the screen,
you will see that it has three control.
| | 03:57 | The labels and the controls are properly
aligned because they are wrapped inside
| | 04:01 | HTML table,, rows, and columns. I'll
be able to click into the controls and
| | 04:06 | type values in but right now the
form isn't really doing anything.
| | 04:13 | When I click the Submit button, the
form is submitted to the server and when it
| | 04:17 | comes back the controls are still
displaying the data that I typed in. That's
| | 04:22 | one of the ways in which the ASP.NET
web form controls differ from basic HTML controls.
| | 04:29 | ASP.NET is tracking the data that the
user types into the controls and when the
| | 04:34 | page is returned back from the server,
it repopulates the controls for you
| | 04:38 | automatically. If you are curious
about how the form is actually constructed,
| | 04:43 | in order for the browser to be able to
interpret it, you can right-click on the
| | 04:47 | browser and select View Source. That's
assuming of course that you are using
| | 04:51 | Internet Explorer. If you are using
another web browser, the technique for
| | 04:55 | viewing the source will differ.
| | 04:57 | Take a look at the code that's in
the page. You will see that the TextBox
| | 05:01 | controls that I've created in Asp.NET
will interpret it as HTML input controls
| | 05:07 | and your values were automatically
populated as the page was returned to the
| | 05:12 | browser when I clicked the Submit button.
| | 05:14 | So that's basically how you create a
data entry form. In other videos,
| | 05:19 | I'll show you how to process the data from
the form when the user submits it using server-side code.
| | Collapse this transcript |
| Handling postback data in a web form page| 00:00 |
Once you have created a data entry form
using ASP.NET server controls, you can
| | 00:05 |
then process those controls using
server code written in either Visual Basic or C#.
| | 00:11 |
In this demonstration, I'll a use a
file called UsingPostback.aspx. That's a
| | 00:16 |
part of the CreatePages website. You
will see that it already has a data entry
| | 00:21 |
form, consisting of three text box
controls and one button. I'm going to use
| | 00:26 |
three additional controls to echo the
data that the user types into the text
| | 00:30 |
boxes and display that data on
the screen when the form is posted.
| | 00:33 |
I will start by creating a Panel
container. A Panel is an ASP.NET server
| | 00:40 |
control that gets translated as a <div
> tag set in the rendered HTML. I'll go
| | 00:46 |
to the Toolbox, locate the panel
and drag it and place it in the page
| | 00:51 |
underneath the HTML table.
| | 00:54 |
Now I'm going to add three Label
controls. Once again, I'll go the Toolbox. To
| | 00:59 |
make this a little but easier I'll pin
the Toolbox and then I'll drag it to my
| | 01:04 |
first Label and I place it within the
panel. With the Label selected, I'll go
| | 01:08 |
the Properties panel and I'll change
the Label controls ID to fnameLabel.
| | 01:15 |
Now I'll click right after the Label
control inside the panel and press Enter.
| | 01:20 |
Notice that the cursor only goes down
a single line. When you are within a
| | 01:24 |
Panel container and you press Enter in
Visual Web Developer, it creates a line
| | 01:29 |
break or an HTML break
tag rather than a paragraph.
| | 01:33 |
Now I'll drag in another Label and
place it under the first. I'll set the ID
| | 01:38 |
for this second Label to lnameLabel
and then I'll repeat the process, once
| | 01:44 |
again clicking after the label control
and pressing Enter, dragging in a third
| | 01:48 |
Label, and I'll set the ID
of this Label as dobLabel.
| | 01:53 |
Now to process the data when the
form is posted, there are two possible
| | 01:57 |
approaches. One is to use the Click
event of the Submit button. I'll do that in
| | 02:02 |
this first demonstration. I'll double-
click this Submit button control and that
| | 02:07 |
creates a dissociated event handler for
the Click event. The name of the event
| | 02:12 |
handler function is Button1_Click and
Visual Web Developer leaves the cursor
| | 02:17 |
inside that function, so
that I can start to code.
| | 02:21 |
Now I'm going to pass the data from
each of the Web Form controls to the
| | 02:25 |
associated labels. For the first name,
I'll use this code. fnameLabel.Text =
| | 02:33 |
fnameInput.Text. Notice that because
I'm programming in C# that I'm always
| | 02:41 |
placing a semicolon at the end of the
line. I'll unpin the Toolbox so I can see
| | 02:45 |
more of the code, and now I'll take
that line of code and I'll copy it to the
| | 02:49 |
clipboard by pressing Ctrl+C and then
I'll paste it in by pressing Ctrl+V a
| | 02:54 |
couple of times, and I'll modify
the second and third line as follows.
| | 02:59 |
For the second line, I'll change the
ID of the Label to lnameLabel and the ID
| | 03:04 |
of the Input to lnameInput. And for
the third line, I'll change the Label to
| | 03:08 |
dobLabel and the Input to dobInput.
I'll come back to the page, save the
| | 03:15 |
changes by pressing Ctrl+S and then
select Debug > Start Without Debugging.
| | 03:21 |
I'll click into the First Name control
and type David, the Last name, Jones,
| | 03:27 |
and I'll pass in a string which is a
valid date of 5/1/1960. I'll click the
| | 03:32 |
Submit button and you will see that
the page is sent to the server and then
| | 03:37 |
return to the browser and the Label
control text properties are reset to the
| | 03:42 |
values that the user typed in.
| | 03:44 |
If you look at the source code that
was returned to the browser by right
| | 03:48 |
clicking anywhere on the page on
selecting View Source, and then you scroll
| | 03:52 |
down to the section that's displaying
those labels, you will see that each of
| | 03:56 |
the three labels was interpreted as
nothing more than an HTML <span > tag and
| | 04:01 |
the value that the user typed into the
Form control that is the text box was
| | 04:05 |
populated into the <span > tag by ASP.NET.
| | 04:09 |
Now as I mentioned that's one
approach that you can use to handle postback
| | 04:12 |
data. Here is the second approach.
I'm going to close the text editor that
| | 04:17 |
opened up and then close the browser
and then go back to my code file. You can
| | 04:21 |
also handle postbacks in Page_
Load function. The Page_Load function
| | 04:25 |
automatically loads when the page is
loaded into the browser, both for the
| | 04:30 |
first time and when it's
interpreted during postback. You can determine
| | 04:35 |
programmatically at run time whether
the page is being processed as part of a
| | 04:40 |
posting to the server by referencing a
Boolean property that returns True or
| | 04:44 |
False called IsPostBack.
| | 04:46 |
So, for example, if I wanted to move
this code from the Button1_Click event
| | 04:50 |
into the Page_Load event handler,
here is how I do it. I place the cursor
| | 04:55 |
inside the Page_Load function and
start with an if statement. Then within a
| | 04:59 |
pair of parenthesis, I check the value
of the IsPostBack property. Then I put
| | 05:04 |
in a pair of braces underneath the if
clause and now, I'm going to take this
| | 05:08 |
code that right now is in the Button1_
Click event, and I'm going to cut it and
| | 05:12 |
then I'm going to paste it into the
conditional if statement, so that that code
| | 05:17 |
is only processed if the page
has been posted to the server.
| | 05:21 |
I will go back to the Main Page file
and press Ctrl+S to save the changes. Then
| | 05:26 |
once again run the page, Starting
Without Debugging. As the page loads the
| | 05:30 |
first time, notice that the Label
controls show their original or default
| | 05:35 |
values; simply the word Label. But now,
if I type values in, such as Mike,
| | 05:40 |
Smith and a date of some kind and
then I click Submit or press Enter, once
| | 05:47 |
again you will see that
Label controls are updated.
| | 05:50 |
| | Collapse this transcript |
| Using data binding expressions| 00:00 | There is another available approach
for getting data out of a server control
| | 00:04 | and displaying that data on the screen,
using server-side data binding. Data
| | 00:09 | binding is a particular syntax style
that allows you to refer to a property of
| | 00:15 | a server control and display or otherwise
use that property in another server control.
| | 00:20 | For this demonstration, I'll be using
the file UsingDataBinding.aspx and a
| | 00:26 | dissociated code file. Notice that in
this version of the file, the panel at
| | 00:32 | the bottom of the page contains three
labels, named fnameLabel, lnameLabel and
| | 00:37 | dobLabel. I'll select that code and
then take a look at it in Source View.
| | 00:43 | Notice that it's an ASP panel, a server-
side container that's translated into a
| | 00:48 | <div > tag. And then the markup that
you see is a combination of conventional
| | 00:52 | HTML markup, such as the <strong >
tags with the text, First Name, and server
| | 00:57 | controls such as this Label
control with an ID of fnameLabel.
| | 01:03 | Here is how you implement data
binding. You place the cursor inside the
| | 01:07 | attribute that you want to modify
and then you refer to a control and its
| | 01:11 | property wrapped in data binding syntax,
which looks like this. You start with
| | 01:16 | the less than character character and
the percent character, and then a pound
| | 01:19 | sign or a hash mark. And then within
those tokens, you put in the expression
| | 01:24 | that refers to the ID of the object
and its property whose value you want to pass in.
| | 01:29 | For example, I would like to display
the value of fnameInput.Text. Notice that
| | 01:35 | in this context, you won't get code
completion. Visual Web Developer is not
| | 01:40 | able to provide that information to you.
So you just need to make sure that you
| | 01:44 | are spelling the IDs and properties
of the objects correctly, and make sure
| | 01:47 | that you are following them exactly
because they are case-sensitive in this context.
| | 01:52 | Now, I'm going to copy that expression
and I'm going to paste it into the Last
| | 01:56 | Name version. I'll click into the Text
attribute for the lnameLabel and pass it
| | 02:01 | in. And then I'll change the ID of
the object that I'm listening to, to
| | 02:05 | lnameInput.Text, and I'll do the same
thing for the Date of Birth. And I'll
| | 02:10 | change the Input control that I'm
listening to for this expression to
| | 02:14 | dobInput.Text and I'll
save the changes to that file.
| | 02:18 | Now in order to activate the data
binding, you must call a method called
| | 02:23 | DataBind which you typically call as
the page is loading. So I'm going to go
| | 02:28 | back to the Design view and then I'll
double click anywhere on the page, and
| | 02:33 | that takes me to the page's Page_Load
function, which is the event handler
| | 02:38 | function that's
triggered as the page is loading.
| | 02:41 | And here is the code that you call
within that function; it's very simple.
| | 02:45 | Page.DataBind(). Notice that DataBind
is a method or a function call and you
| | 02:52 | must put in the parenthesis at the end.
If you don't put in the parenthesis and
| | 02:56 | you try to run the page, you will see
errors. Now I'll return to the page and
| | 03:01 | save the changes and I'll run the page
without debugging. As the page loads,
| | 03:07 | you will see that the literal
labels toward the bottom of the page are
| | 03:09 | displayed, but the Label
controls are not displaying any values.
| | 03:14 | Now I'll type values in, I'll type in
a First name of Mary and Last name of
| | 03:18 | Smith and a Date of birth of 5/1/1970.
I'll click the Submit button and there
| | 03:25 | is the result. The data binding
expressions are read only because the DataBind
| | 03:29 | function or method was called.
| | 03:31 | So you can use data binding
expressions to pass data from any server-side
| | 03:36 | control to any other server-side
control. Once again, all this is being
| | 03:41 | interpreted as just everyday HTML. If
I view the source that's return back to
| | 03:46 | the browser and scroll down to the
bottom of the page, I'll see that the text
| | 03:51 | is being rendered as simple <span >
tags. The IDs of the server controls are
| | 03:55 | intact and are passed to the HTML
span elements, but as always, by the time
| | 04:01 | this code gets to the browser, it's
just generic HyperText Markup Language or HTML.
| | Collapse this transcript |
|
|
4. Programming in ASP.NET Creating a testing environment| 00:00 | The two primary languages that are
used in ASP.NET, Visual Basic.net and C#
| | 00:07 | are syntactically very different
from each other. But they both use the
| | 00:11 | underlying .NET Class Library, the set of
components that enable your web applications.
| | 00:17 | When you are first learning a
programming language, it's useful to have a
| | 00:20 | testing environment. A simple
application to which you can add arbitrary code,
| | 00:25 | and to displays the result of running that code.
| | 00:28 | In this chapter, I demonstrate how
to use critical aspects of the two
| | 00:32 | programming languages. This is what
the web form page looks like. It has a
| | 00:36 | heading, a textbox and two buttons
labeled Run Code and Clear Console. Let's
| | 00:42 | take a look at the source code.
| | 00:44 | I'll open the code up to full
screen by pressing the keyboard shortcut,
| | 00:48 | Alt+Shift+Enter. Notice that within the
form, there are two panels. A panel is
| | 00:53 | a server-side control that translates
as a div tag. So you can easily force
| | 00:58 | content to be stacked one on top of
another. With in the first panel, there is
| | 01:02 | the textbox with a text mode attribute
of MultiLine. This allowed the textbox
| | 01:07 | control to display multiple lines of
text. And then within the second panel
| | 01:11 | there are two buttons with ids of
runButton and clearButton, and they each have
| | 01:16 | an onClick event handler that runs a function.
| | 01:19 | In these pages, the scripting code is
in the page, rather than in a separate
| | 01:24 | code file. So the script code goes
toward the top and notice that the script
| | 01:28 | tag has a runat = "server" attribute,
meaning that it contains server-side code
| | 01:33 | rather than client side JavaScript code.
Each of the two pages, the C# and the
| | 01:38 | Visual basic version have
a function called output.
| | 01:42 | The purpose of the output function is
to append a value to the current text
| | 01:46 | property of the textbox with an idea of
output text. Notice that it uses a plus
| | 01:52 | equals operator. This is called the
increment operator, and it adds a value to
| | 01:57 | the existing value. And then an
Expression called Environment.NewLineis used to
| | 02:02 | add a character return line feed
combination at the end of the line.
| | 02:07 | So each time the output function is
called, it will add the line to the textbox
| | 02:11 | and then go down to the next line. In
the current version of the C# page, the
| | 02:16 | runButton_Click function calls this
function output, and passes in a value of
| | 02:21 | Hello world, and then when the user
clicks the clearButton the text property of
| | 02:26 | the textbox is set to a blank string.
| | 02:28 | So that's all the code in our testing
environment. Let's give it a try.
| | 02:32 | I'll run the application without debugging.
I'll click the Run Code button a few
| | 02:37 | times. And you'll see that each time I
click the button, I'm appending a value
| | 02:42 | to the existing textbox controls text
property, and then when I click Clear
| | 02:46 | Console that results in clearing the textbox.
| | 02:50 | Now I'm going to be using this page
as the base for all of my exercises. So
| | 02:54 | before I leave it, I'm just going to
go back to the runButton_click function
| | 02:58 | and I'm going to remove the call to
the output function. And this will be the
| | 03:02 | base file that I copy for each
exercise. Now, I'll close that file and I'll
| | 03:08 | press Alt+Shift+Enter again so I can
see my panels, and I'll open up the Visual
| | 03:12 | Basic version. Let's take a
look at this one in full screen.
| | 03:16 | The Markup code in the Visual Basic
version is exactly the same. It has the
| | 03:20 | same two panels. The textbox and the
two buttons. The Ids are the same, and the
| | 03:25 | click events are the same. But notice
that the syntax of the scripting code is
| | 03:30 | a little bit different.
| | 03:31 | In Visual Basic, a function that
doesn't return a value is called a sub or a
| | 03:35 | subroutine. The subroutine output is
marked with protected sub at the beginning
| | 03:40 | and the end sub at the end. The code
within the function is almost exactly the
| | 03:44 | same as the C# version. The exception
is that there is no semicolon at the end
| | 03:48 | of the line. I'm still however
using Environment.NewLine to represent a
| | 03:52 | character return line feed combination.
| | 03:55 | The runButton_Click event still calls
the output function, passes in a text
| | 03:59 | value of Hello world and the
clearButton_Click event still sets the text
| | 04:03 | property to a blank string. I'll
run this version of the page, without
| | 04:07 | debugging. I'll test it by clicking
the Run Code button a few times, and I'll
| | 04:13 | clear the console. Then I'll close the
page as with the C# version, I'll remove
| | 04:18 | the call to output from the click
event, so that I can use this as the base
| | 04:22 | page for all of the other
exercises in this chapter.
| | 04:25 | So if you don't have access to the
Exercise Files, create your version of this
| | 04:30 | page, using the code that I've
displayed on the screen, and then for each
| | 04:34 | exercise make a copy of that page, so
that you can go through that particular exercise.
| | Collapse this transcript |
| Declaring and using a simple variable| 00:01 |
All programming languages support the
concept of a variable. A place to hold
| | 00:05 |
data in memory during the execution of
a bit of programming code. I'm going to
| | 00:09 |
describe how to declare variables in
both C# and Visual Basic, and talk about
| | 00:15 |
data types. How to designate what type
of data a particular variable can hold.
| | 00:21 |
The .NET Framework is strongly typed,
meaning that when you declare a variable,
| | 00:26 |
you always declare what kind of data it
holds. The syntax that you use for this
| | 00:31 |
is different between the two languages C#
and Visual Basic, but the concept is the same.
| | 00:37 |
I'll start with the file
ProgrammingCSharp.aspx. I'll open the file, and then
| | 00:42 |
select File > Save ProgrammingCSharp.aspx as
and I'll name the new file
| | 00:49 |
SimpleVarsCSharp.aspx. Make sure you
have added the file extension .ASPX.
| | 00:56 |
Visual Web Developer won't do it for you.
| | 00:59 |
When you declare a variable, you can
place it either inside a function or
| | 01:03 |
outside a function. When you place a
variable inside the function, the variable
| | 01:07 |
expires, that is, it disappears from
memory, when the function is finished executing.
| | 01:13 |
In C#, if you want to declare a
variable that's local to the function,
| | 01:17 |
you place the cursor inside the function.
Then you start with the variable's data type.
| | 01:22 |
I'll start with String, meaning
this is a string variable, and I'll name
| | 01:28 |
the variable localVar.
| | 01:31 |
When you type in the variable at first,
you might see a squiggly line as shown
| | 01:34 |
on my screen. The squiggly line is an
indication of a possible error. I'll move
| | 01:39 |
the cursor over the variable name and
see the message, The variable "localVar"
| | 01:43 |
is declared but never used. This is
just a warning from the Visual Web
| | 01:47 |
Developer Editor that it has
detected the potential programming problem.
| | 01:51 |
If you know you are going to use the
variable, you can ignore the error. If you
| | 01:55 |
simply want to declare the variable,
but not use it yet, put in a semicolon. On
| | 02:00 |
the other hand, if you want to set
the variable's value, continue with an
| | 02:04 |
equals operator and then set its initial value.
| | 02:07 |
In this case, I'm setting it to a
literal string of My local variable. So when
| | 02:12 |
I put in the semicolon at the end of
the line that completes the statement.
| | 02:16 |
Now, I'm going to output the value of
the variable using the output function
| | 02:21 |
and I'll pass in localVar.
| | 02:24 |
Notice that Visual Web Developer
already knows the name of the variable. So
| | 02:28 |
that's my code. I'll save the changes
and run the page. I'll click Run Code and
| | 02:35 |
I'll see the value of my local variable
displayed in the text box. I click the
| | 02:40 |
button and run the server-side code as
many times as I want to, and then I'll
| | 02:44 |
clear the console.
| | 02:45 |
Now, I'll do the same thing in
Visual Basic. I'll open the file
| | 02:49 |
ProgrammingVB.aspx, and I'll save it
under a new name, selecting File > Save
| | 02:55 |
As, and I'll name this file SimpleVarVB.aspx.
| | 03:01 |
The rules for scoping, that is for
variable, visibility, and lifetime, are the
| | 03:05 |
same in both languages. When you
declare the variable inside a function, the
| | 03:10 |
variable is local to the function and
expires when the function is finished.
| | 03:15 |
In Visual Basic, you declare this
sort of variable using a keyword Dim. Dim
| | 03:20 |
stands for dimension, and it declares
the variable using what's called the
| | 03:24 |
default scope. Within a function, the
variable is being declared as local to
| | 03:30 |
the function.
| | 03:31 |
In Visual Basic you then follow with
the variable name. I'll once again name
| | 03:35 |
the variable localVar, and then you
set its data type using the As keyword.
| | 03:42 |
I'll put in the word As and then the
data type of string. As with C#, you can
| | 03:47 |
now set the initial value of the
variable in the same statement, or you can
| | 03:52 |
leave the variable for later use.
| | 03:54 |
I'll set it to initial value once
again as My local variable. And then on the
| | 03:59 |
next line, I'll output the value of the
variable by passing it into the output
| | 04:03 |
function. I'll save my changes and
run the page, selecting Debug > Start
| | 04:09 |
Without Debugging. I'll click the
button to run the code, and I'll see that I'm
| | 04:14 |
executing the function successfully.
Then, I'll clear the console, and I'll
| | 04:19 |
close the browser.
| | 04:20 |
So once again, the rules are the same
for the two languages. When you declare
| | 04:24 |
the variable within a function, it's
local to the function. You use the Dim for
| | 04:29 |
dimension keyword in Visual Basic,
whereas in C#, you simply declare the
| | 04:34 |
variable by putting in its data type
and then the variable name. You declare
| | 04:38 |
data types in either C# or Visual
Basic, using distinct syntax styles.
| | 04:44 |
The underlying data type however is the
same. The system data type is listed in
| | 04:49 |
the left column of this chart. For
example, the string value is something
| | 04:54 |
called system.string and it actually
represents a class definition in the .NET Framework.
| | 05:00 |
In C#, you declare the data type using
the word String all lowercase, and in
| | 05:05 |
Visual Basic the word String
with an uppercase initial character.
| | 05:10 |
Boolean values, which are used to
represent true or false values, again are
| | 05:15 |
represented by the class system.boolean.
In C#, you declare that data type with
| | 05:20 |
bool, all lowercase, and in Visual
Basic with the word Boolean with an initial
| | 05:26 |
uppercase character.
| | 05:27 |
There are a number of numeric data
types available in the Framework. Here are
| | 05:32 |
the most commonly used three data types.
An integer defined as a 32-bit integer
| | 05:37 |
is represented in the system as int 32.
In C# as lowercase int and in Visual
| | 05:44 |
Basic as Integer with an uppercase I.
| | 05:47 |
A floating number is represented as
floating C#, and single in VB, and a double
| | 05:53 |
number which has greater precision is
represented in all lowercase in C#, and
| | 05:58 |
with an initial uppercase
character in Visual Basic.
| | 06:01 |
There are many other built-in data
types in the .NET Framework, and each has
| | 06:06 |
their equivalent syntax in C# and in
Visual Basic. Check the .NET documentation
| | 06:12 |
for more complete examples.
| | 06:14 |
| | Collapse this transcript |
| Declaring and using a complex object| 00:02 |
When you declare a variable, its data
type can either be a simple value or a
| | 00:06 |
complex object. Simple values
include data types like those I showed in a
| | 00:11 |
previous video, including
strings, Booleans and numeric values.
| | 00:16 |
Complex objects are instances of
classes. In Object Oriented terminology, a
| | 00:23 |
class is a definition of a bit of
software and when you create an instance of
| | 00:27 |
that class it's called an object. In
this demonstration I'll show you how to
| | 00:32 |
declare an instance of a class where an
object in both C# and in Visual Basic,
| | 00:37 |
and the particular type of object that
will use is a DateTime value. This is
| | 00:42 |
represented as the DateTime class and
you use the same class in either language.
| | 00:47 |
I will start will C#. I'll open the
page ProgrammingCSharp.aspx and then I'll
| | 00:54 |
save it as ObjectCSharp.aspx.
Then I'll place the cursor inside the
| | 01:00 |
runbutton_Click function and I'll
first create an instance of the DateTime
| | 01:04 |
class using the following syntax. I'll
start with DateTime and I'll assign the
| | 01:11 |
variable name as dt for date-time.
| | 01:14 |
When you instantiate or create an
instance of a class, you use the new keyword.
| | 01:20 |
This new keyword is used in both
Visual Basic and in C#. And then you call a
| | 01:25 |
function that has the same name as
the class itself. This is known as the
| | 01:30 |
constructor method of the class. I'll
use DateTime and I'll follow it with an
| | 01:36 |
opening and closing parenthesis.
| | 01:38 |
Now I'll output the value of the
DateTime object using my output function. The
| | 01:43 |
DateTime object is a complex object.
For most complex objects, if you want to
| | 01:48 |
turn it into a string, you call a
function or a method of a class called
| | 01:53 |
ToString. So I'll pass in dt.ToString.
I'll save the changes and I'll run the
| | 02:00 |
page. I'll click Run Code
and I'll see the results.
| | 02:05 |
Notice that when you create a new
instance of the DateTime class, it
| | 02:10 |
automatically represents the first day
of the first month of the first year at
| | 02:14 |
midnight. If you want this same object
to represent the current date-time, the
| | 02:20 |
syntax looks a little different. I'll close
the browser and return back to the function code.
| | 02:27 |
Now I'll create another DateTime object.
Once again setting the data type of
| | 02:31 |
DateTime and I'll call this one nowDT.
The DateTime class has a property called
| | 02:39 |
now. This is known as a static
property. You refer to it as a member of the
| | 02:44 |
class definition itself rather than as
a property of an instance of the class.
| | 02:49 |
When you refer to static property, it
look like this and notice that the now
| | 02:54 |
property is displayed as an available
member of the class. The now property is
| | 02:59 |
not a function, it's a property, and
so you don't put the parenthesis at the end.
| | 03:03 |
I will call the output function again
and I'll pass in nowDT.ToString.
| | 03:12 |
I'll save the changes and run the page again.
I'll Run Code and you will see that
| | 03:19 |
the first DateTime, which was
instantiated using the new keyword, represents
| | 03:23 |
the default DateTime, the first month
of the first of the first year and so on,
| | 03:28 |
whereas the version of the DateTime
object that's created from the now property
| | 03:33 |
represents the current date-time and
you see the date and the time on which I
| | 03:37 |
recorded this video.
| | 03:38 |
Now I'll do the same thing in
Visual Basic. I'll open the page
| | 03:42 |
ProgrammingVB.aspx and I'll save the
file as ObjectVB.aspx. I'll place the
| | 03:51 |
cursor inside the runbutton_Click
function and now I'll declare an instance of
| | 03:56 |
the DateTime class using Visual Basic
syntax. I'll start with Dim, meaning that
| | 04:02 |
it's variable that's local to the
function. I'll put in the As operator and
| | 04:07 |
this time instead of using DateTime I
use the Visual Basic version of this
| | 04:11 |
variable which is simply date.
| | 04:14 |
Then the rest of the code looks pretty
much the same as in Visual Basic.
| | 04:18 |
I'll use the keyword new and then I'll use
Date as a method. Then I'll output the
| | 04:25 |
value of the DT object. In Visual
Basic you don't need the ToString function.
| | 04:30 |
So I'll just output DT and I'll run
the page, click the Run Code button and
| | 04:37 |
this time you only see the time. So
now if I would like the same level of
| | 04:41 |
functionality as I had with C#, instead
of using the Visual Basic date object,
| | 04:47 |
I'll use the underlying .NET Framework
object which in Visual Basic is known by
| | 04:52 |
its fully qualified prefix, System.DateTime.
| | 04:57 |
So I'll set that as the data type and
I'll call the appropriate constructor
| | 05:02 |
function. Then I'll go to the call
to the output method and I'll add
| | 05:07 |
DT.ToString. I'll save the changes and
run the page again, click the Run Code
| | 05:14 |
button and now I'm seeing the
same results as I did in C#.
| | 05:17 |
I follow with this same pattern to get
the current date and time. I'll type in
| | 05:23 |
Dim dtNow as As System.DateTime and
once again I'll use the now property of the
| | 05:30 |
DateTime class. System.DateTime.Now
and then I'll output the ToString version
| | 05:38 |
of that object, dtNow.ToString. I'll
save my changes and run the page, and you
| | 05:47 |
will see once again that I'm showing
the date-time on the server at the moment
| | 05:52 |
that I run the page.
| | 05:53 |
So that's a look at how to use the
System.DateTime class in either C# or Visual
| | 05:57 |
Basic. The .NET Framework contains
thousands of class definitions. Once you
| | 06:03 |
understand the basic syntax of
working in ASP.NET, expanding your ASP.NET
| | 06:08 |
programming skills is largely a matter
of learning about new classes and how
| | 06:13 |
they work in your programming language.
| | 06:16 |
| | Collapse this transcript |
| Using loops| 00:01 | Both Visual Basic and C# support the
concept of looping, executing a bit of
| | 00:06 | code multiple times depending on a
particular condition. I'll demonstrate two
| | 00:12 | kinds of loops. For loops and While
loops in both languages, starting in C#.
| | 00:17 | I will open the file ProgrammingCSharp.
aspx and then I'll save the file under a
| | 00:24 | new name of LoopingCSharp.aspx. A For
loop is a loop that executes multiple
| | 00:31 | times and uses a numeric value so that
you can increment the value or decrement
| | 00:36 | it each time through the loop. In C#
you use a For loop by creating keyword for
| | 00:44 | and then starting with an opening
parenthesis you put in three expressions
| | 00:48 | separated with semicolons.
| | 00:51 | The first expression declares a
variable and sets its initial value.
| | 00:56 | I'll create an integer variable named
counter and set its initial value to 1. Then,
| | 01:02 | after a semicolon I put in a Boolean
expression. This expression will be
| | 01:06 | evaluated each time through the loop
and as long as it's true the loop will
| | 01:10 | continue. When the expression is false,
the loop will terminate and the code
| | 01:14 | will jump to after the loop.
I'll use the expression counter < 3.
| | 01:20 | Then finally after the second
semicolon you say what you want to do each time
| | 01:25 | through the loop and I'll use an
increment operator, the ++ operator which
| | 01:31 | means add one to the current value of
that variable. After the For declaration
| | 01:36 | you put in a pair of braces and any
code that place between the braces, the
| | 01:40 | code block will be executed once
for each time through the loop.
| | 01:44 | I will use the output function that
I've already created and I'll output the
| | 01:49 | value, the value of counter is, and
then I'll append the value of the variable
| | 01:56 | using the + operator, which in C# is
how you concatenate values together.
| | 02:03 | I'll save and test the page. I'll
select Debug > Start without Debugging.
| | 02:09 | When the page opens I'll click the Run
Code button and you will that I output
| | 02:13 | the value of counter twice. When the
value of the variable matches 3 though,
| | 02:18 | the loop is terminated. So
that's how you create a For loop.
| | 02:22 | Now let's take a look at how to create
a While loop. I'll press Alt+Shift+Enter
| | 02:26 | to expand to full screen, so I can see
all of the codes. I'll place the While
| | 02:31 | loop after the For loop. I would like
to use the same variable. That is, the
| | 02:36 | counter variable, but right now the
counter variable is going to expire when
| | 02:41 | the For loop is completed. In the .NET
Framework when you declare a variable
| | 02:46 | inside a looping construct, it means
that; that variable expires when the code
| | 02:51 | block expires. I'll fix this by moving
the declaration of the counter variable
| | 02:56 | above the for block.
| | 02:58 | Notice I'm not setting its defaulted
value; I'm only declaring it. Then I'll go
| | 03:02 | down to the for block and remove the
data type from the variable declaration.
| | 03:08 | Now I'm just using the variable that
was already declared and the variable will
| | 03:12 | still be available after
the For loop is complete.
| | 03:15 | I will move the cursor after the For
loop and I'll put in a While loop. In a
| | 03:20 | While loop you place a Boolean
expression between a pair of parenthesis.
| | 03:25 | I'll set my Boolean expression to a value of
counter > 0, meaning that I'm going to
| | 03:31 | loop as long as counter is at least 1.
Then I'll copy and paste the output
| | 03:37 | call. So I'm outputting the value
of the counter and then, this is very
| | 03:42 | important, you are responsible for
changing the value of the variable. If you
| | 03:47 | forget the next step, you will
have created an infinite loop.
| | 03:51 | That is there is nothing in the While
construct to actually change the value of
| | 03:56 | the expression or the variable. So
each time through the loop I'll use the
| | 04:01 | expression counter -- meaning decrement
the value by one. I'll save the changes
| | 04:08 | and I'll run the page. When I run the
code, I start off in the For loop going
| | 04:13 | up by one. When I hit the value of 3,
the For loop terminates and then I get
| | 04:19 | into the While loop and I walk
back down the values 3, 2, and 1.
| | 04:24 | So that's looping in C#. Now let's do
the same thing in Visual Basic. I'll open
| | 04:30 | the file ProgrammingVB.aspx, I'll save
the file as LoopingVB.aspx and then I'll
| | 04:40 | create the same sort of code, just in
the C# version. I'll start by declaring
| | 04:45 | the variable. I'll use the Dim
keyword and then counter As Integer.
| | 04:52 | Now I'll be able to use that variable
in both the For loop and in the While
| | 04:56 | loop. Here is the syntax for a Visual
Basic For loop. You start off with the
| | 05:01 | keyword For. Notice that the initial
character is uppercase in the Visual
| | 05:04 | Basic. Then the variable name and then
the initial value with the assignment
| | 05:09 | operator, the equal sign. Then you put
in the to keyword and indicate how high
| | 05:15 | you want to count.
| | 05:17 | When I press Enter, Visual Web
Developer automatically puts in the keyword
| | 05:21 | Next. In a For loop you start off
with a For declaration and you end with a
| | 05:26 | next declaration. Now I'll call my
output function. Once again I'll start will
| | 05:33 | a literal value and then I'm going to
concatenate the value, which in Visual
| | 05:38 | Basic is done with the ampersand
character. So that's the completed For loop.
| | 05:44 | Now I'll do the While loop. The While
loop starts off with the keyword while
| | 05:50 | and I'll use a Boolean expression as
in the C# version where I'm looping as
| | 05:55 | long as the counter is greater than 0.
A While loop ends with the construct End
| | 06:01 | While. Now I'll once again copy and
paste my output command. I'll select the
| | 06:06 | command, press Ctrl+C, place the cursor
within the While loop and press Ctrl+V
| | 06:12 | and then again in a While loop you are
responsible for modifying the counter
| | 06:17 | and in Visual Basic you can't use
those simple increment and decrement
| | 06:21 | operators of ++ and --.
| | 06:24 | So instead you say counter = counter -
1. So there is your For loop and your
| | 06:31 | While loop in Visual Basic. I'll run
the page selecting Debug > Start without
| | 06:37 | Debugging. I'll click the Run Code
button and there is the result in Visual
| | 06:41 | Basic. So the capabilities and
functionalities of the languages is the same,
| | 06:47 | but the syntax that you use is
different between Visual Basic and C#.
| | Collapse this transcript |
| Using functions| 00:01 |
As your ASP.NET web pages become more
complex, it's useful to be able to break out
| | 00:06 |
functionality into separate subroutines
or functions. Once again both the
| | 00:11 |
C# and Visual Basic
languages support this feature.
| | 00:15 |
I will describe here how to create a
function and how to call it using both
| | 00:19 |
languages. I'll start again with C#.
I'll open the file ProgrammingCSharp.aspx
| | 00:27 |
and then I'll save it under a new name,
selecting File > Save As and I'll name
| | 00:32 |
the file FunctionsCSharp.aspx. When
you declare a function in C#, you start
| | 00:39 |
with an access modifier.
| | 00:41 |
The access modifier determines the
availability of the function. If you are
| | 00:46 |
placing the function in the same page
in which it's called, you can declare it
| | 00:50 |
as private. If the function should be
available from both this page and from any
| | 00:55 |
pages that are derived from this page,
that is, in object oriented terms that
| | 00:59 |
are subclasses of this page, you
should use the access modifier protected and
| | 01:05 |
if you want the function to be
callable from anywhere in the application,
| | 01:09 |
you can use an access modifier of public.
| | 01:12 |
There are other access modifiers
available but those are the three that are
| | 01:15 |
typically used most often: private,
public and protected. In this example, I'm
| | 01:21 |
going to be calling the function from
within the same page but because I might
| | 01:25 |
want to use this page later on as the
basis of another page I'll typically use
| | 01:30 |
the access modifier protected. So I
start off with the protected keyword.
| | 01:35 |
Next, I indicate the data type of a
value that the function is going to return.
| | 01:40 |
If the function is simply going to take
some action but not return a value,
| | 01:44 |
you put in the keyword void with the
lowercase v. But if the function is going to
| | 01:49 |
return a value, you use the
data type in this position.
| | 01:53 |
I am going to create a function that
returns an integer, so I'll use the Int
| | 01:57 |
data type. Next, you put in the
name of the function, which I'll call
| | 02:02 |
AddValues. In C#, you always put in
parentheses at the end of the function name,
| | 02:07 |
regardless of whether the function
can receive values. This particular
| | 02:12 |
function is going to receive two
values or arguments. I'll name them Val1 and
| | 02:17 |
Val2, and I'll data type them both as integers.
| | 02:21 |
So I'll use the C# syntax, Int, then
the name of the variable, Val1, then a
| | 02:28 |
comma and the second argument, Int
again, and Val2 and then I close the function
| | 02:35 |
signature by putting in the closing
parentheses. After the function signature
| | 02:40 |
and within the braces, you put in the
code that you want to execute. Because I said
| | 02:45 |
that I was going to be returning
an integer, I must return a value and
| | 02:49 |
you do that with the Return keyword.
| | 02:51 |
I will return the results of this
expression, Val1 plus Val2. Notice that you
| | 02:58 |
don't need parentheses around that
expression. You can put them in if you
| | 03:01 |
prefer. Also notice that the plus
operator in C# is used both for mathematical
| | 03:07 |
addition and for concatenation of strings
which I have already done in other videos.
| | 03:13 |
This is called Operator Overloading,
the reuse of an operator for more than one purpose.
| | 03:18 |
So that's my custom function,
AddValues. Now, I'll go up to my testing
| | 03:23 |
function, runButton_Click, and I'm
going to clear a variable called Total,
| | 03:28 |
once again an integer, and I'll get its
value by calling my AddValues function.
| | 03:33 |
Notice that Visual Web Developer
already knows that the function exists and
| | 03:37 |
offers it in the list of functions that
I can call. And after the cursor's on
| | 03:41 |
the function, I'll type in an opening
parentheses. Visual Web Developer auto
| | 03:46 |
completes the function name and
I'll pass in two integer values, 5 and 3
| | 03:52 |
separated by commas.
| | 03:54 |
Next, I'll use my Output function and
display the result. I'll start with the
| | 03:58 |
literal string, the total is, and
then the plus operator to concatenate the
| | 04:03 |
result and I'll output the
value of the variable.
| | 04:07 |
I'll save my changes and
run the code. I'll click the Run Code
| | 04:11 |
button and I'll see the result, the total is 8.
| | 04:15 |
So in C#, when you declare the function,
you put in the access modifier,
| | 04:20 |
the data type and the function name.
Then you declare the arguments or the
| | 04:24 |
parameters that you can pass into the
function in a comma delimited list and
| | 04:29 |
each of the parameters gets a data
type as well. If your function is declared
| | 04:33 |
as returning the value, you must return
a value otherwise the compiler will complain.
| | 04:38 |
Now let's do the same thing in Visual
Basic. I'll open the file ProgrammingVB
| | 04:43 |
and I'll save it under a new name and
I'll name the new file FunctionsVB.aspx.
| | 04:51 |
In Visual Basic, you declare functions
differently depending on whether they
| | 04:55 |
are returning a value or not.
| | 04:57 |
For functions that are not going to
return a value, you declare them using the
| | 05:01 |
keyword Sub for subroutine. These are
the kinds of functions that I'm already
| | 05:06 |
using. The Output, runButton_Click and
clearButton_Click functions don't return
| | 05:11 |
values; they just take certain
actions and so we use the Sub keyword.
| | 05:16 |
If on the other hand, you want to
create a function that does return a value,
| | 05:20 |
you use the keyword function. The
access modifier rules are the same as per C#.
| | 05:27 |
You can create subroutines and
functions that are protected, public and
| | 05:31 |
private. Typically, if you are going
to use the function within the current page,
| | 05:35 |
you use protected.
| | 05:37 |
So I'll start off with the access
modifier protected. Then I'll put in the
| | 05:42 |
keyword function. Next, you put in
the name of the function. I'll name it
| | 05:47 |
AddValues again and just as in C#,
you declare a list of the values,
| | 05:52 |
the arguments that you want to accept in
a comma delimited lis. For each argument,
| | 05:58 |
you can receive it by reference or by value.
| | 06:01 |
There are certain more complex rules
that apply to certain data types. In this case,
| | 06:05 |
I'm going to be receiving
variables by value, which means that if I
| | 06:10 |
change the value within the function,
it won't affect the value that was passed in.
| | 06:14 |
I'll name the argument Val1 and
I'll declare the data type as integer. So,
| | 06:21 |
that's the first variable.
| | 06:23 |
Now, because the amount of code is
going to be fairly wide, I'd like to add code
| | 06:28 |
on the next line. In Visual Basic,
you can't just go down to the next line
| | 06:33 |
like you can in C#. You have to
explicitly tell the complier, I'm continuing on
| | 06:39 |
the next line. You do that
with the underscore character.
| | 06:42 |
I will declare the second argument,
once again saying that I'm receiving the
| | 06:47 |
argument by value. I'll pass in the
name of the argument and once again set up
| | 06:52 |
the data type. At the end of the
function declaration, you would then declare
| | 06:57 |
the data type of the value that's going
to be returned. I'll use the keyword As
| | 07:02 |
and then Integer.
| | 07:04 |
So in C#, you declare the data type of
the function before the function name.
| | 07:09 |
In Visual Basic, you declare it after
the function name. When I press Enter,
| | 07:14 |
Visual Web Developer automatically
puts in the ending code for the function,
| | 07:18 |
which is the words 'End function.'
| | 07:20 |
Now, just as in C#, I'm going to
return a value. So I'll put in the Return
| | 07:25 |
keyword, which is done with
uppercase R, and then I'll return the value
| | 07:30 |
val1 + val2. So there is my completed
function. I'll go the runButton_Click
| | 07:37 |
function and I'll use it. I'll
declare a variable named Total, I'll set its
| | 07:42 |
data type to integer and then I'll call
my function AddValues and I'll pass in
| | 07:47 |
literal values of 5 and 3.
| | 07:51 |
Then I'll output the result using my
output function and once again I'll
| | 07:55 |
combine the literal string 'The total
is' and then I'll concatenate the total
| | 08:00 |
variable using the ampersand.
I'll save the changes and I'll run the page,
| | 08:05 |
I'll click the Run Code Button and once
again I see the result. The total is 8.
| | 08:11 |
So let's review again some differences
between C# and Visual Basic. In C#, when
| | 08:17 |
you declare a function, it's always a
function. The syntax is pretty much the
| | 08:21 |
same regardless of whether you are
returning a value. If you are not returning
| | 08:25 |
a value, you use the void keyword
before the function name and if you are
| | 08:29 |
returning a value, you put
in the specific data type.
| | 08:33 |
In Visual Basic, if you are not
returning a value, it's called a Sub or a
| | 08:36 |
subroutine or if you are returning a
value, it's called a function and
| | 08:41 |
you declare the functions return data
type after the function and after the
| | 08:45 |
arguments using the As keyword.
| | 08:47 |
Regardless of which language you are
using, you use the Return keyword to
| | 08:51 |
return a value and as always, in C#,
you include the semicolon at the end of
| | 08:56 |
the line to terminate the
statement and in Visual Basic you don't.
| | 09:00 |
Finally, to point out one other very
critical bit of difference between Visual Basic
| | 09:04 |
and C#, in C# white space such
as line feeds and tabs are pretty much ignored.
| | 09:10 |
In Visual Basic, the end of
line is taken as the end of statement
| | 09:15 |
unless you explicitly indicate that you
are continuing onto the next line using
| | 09:20 |
the underscore character, known
here as the continuation character.
| | 09:25 |
| | Collapse this transcript |
| Using trace statements| 00:00 |
When working with programming, it's
useful to be able to see what's going on
| | 00:04 |
inside the application at runtime.
Visual Web Developer provides a powerful
| | 00:09 |
debugger and the .NET Framework itself
provides additional tools, both of which
| | 00:14 |
allow you to see what's happening
by either adding code to your page or
| | 00:19 |
creating what are known as break points.
| | 00:21 |
In this video, I'm going to describe
the use of tracing. The ability to output
| | 00:26 |
information to the webpage at runtime.
This is a feature of the .NET Framework
| | 00:31 |
rather than Visual Web Developer the
tool. And so it's done completely with code.
| | 00:35 |
I will start off with the file
LoopingCSharp.aspx. In this file, there is
| | 00:42 |
already some code that's doing some
looping with a For loop and a While loop.
| | 00:48 |
If you didn't do the previous
exercise where this file was created, you can
| | 00:52 |
create a new file now using a For
loop or a While loop. I'll save this file
| | 00:57 |
under a name. Selecting File > Save
LoopingCSharp.aspx as and I'll name the new
| | 01:05 |
file Tracing.aspx.
| | 01:08 |
The concept of tracing will be the
same regardless of whether you are working
| | 01:11 |
C# or Visual Basic. So we'll only
demonstrate it with the single file. In order
| | 01:18 |
to use the tracing capability you must
turn it on first. You can do this either
| | 01:23 |
one page at a time or you can do it
globally for your entire website in the
| | 01:28 |
web.config file.
| | 01:29 |
I am going to demonstrate turning on
tracing for just one file. I'll go up to
| | 01:34 |
the top of the file, to the page
declaration and I'll add an attribute Trace =
| | 01:41 |
true. By default the Tracing
capability is turned off. Now I'll save and I'll
| | 01:48 |
run the page, selecting
Debug > Start Without Debugging.
| | 01:53 |
As the page starts up it displays the
code and then at the bottom of the page,
| | 01:58 |
a whole bunch of information is
dumped on to the screen. You can find out
| | 02:02 |
what's going on as the page is loaded,
by looking not just at the messages but
| | 02:07 |
also at the time stamps, the numeric values.
| | 02:11 |
If for example, a page is a long time
to load, you can trace and find out where
| | 02:16 |
the time lag is happening by comparing
the numeric values. As you scroll down,
| | 02:21 |
you will see a lot of information
including the timing, the tracing and you
| | 02:26 |
will see also see something called the
control tree which shows you what kind
| | 02:29 |
of objects that are part of the page.
| | 02:31 |
Down toward the bottom, you will see a
listing of different variable types.
| | 02:35 |
I have described how to use variable
types in other videos in the series.
| | 02:39 |
There is the Headers Collection which lets
you see what kind of information is being
| | 02:43 |
sent from the browser to the
server and lots more information.
| | 02:47 |
So that's how you turn tracing on.
Now let's take a look at how you can use
| | 02:52 |
this feature and create your own
custom messages. I'll close the browser and
| | 02:57 |
return to the page. I'll press Alt+
Shift+Enter to go to full screen and then
| | 03:02 |
I'm going to take out the While loop
in this portion of the page. I only need
| | 03:06 |
the For loop to demonstrate this and
within the For loop, I'll place the cursor
| | 03:11 |
after the call to the output function
and I'll use this code, Trace.Write.
| | 03:18 |
Trace is the name of a class that's
always available to you. As you can see in
| | 03:23 |
the pop-up help, the Trace.Write
function, we see it's a number of arguments.
| | 03:28 |
The only one that's really required in
this context is the string. The first
| | 03:32 |
argument and I'm going to pass in a
value which is the same as I'm passing to
| | 03:36 |
the output message, The value of
counter is, and I'll append the value of the
| | 03:43 |
counter variable.
| | 03:44 |
So now I'll be writing to the trace
section at the bottom of the page.
| | 03:48 |
I'll save my changes and I'll run the page.
When the page first loads I see the
| | 03:54 |
trace information for the initial load.
Then I'll click the Run Code page and
| | 03:59 |
I'll see the value of the counter is 1
and 2 in the top section that output is
| | 04:04 |
being handled by my custom output function.
| | 04:07 |
But then if I scroll down, I'll see in
the Trace section the same information.
| | 04:13 |
Notice that I see time stamps
indicating how long it took to get from one phase
| | 04:18 |
of creating the file to the next
phase. So once again, if you are having
| | 04:23 |
performance problems in a page, the
Trace functionality is a great way of
| | 04:27 |
tracking down where the
delay might be happening.
| | 04:30 |
As I mentioned, you can also turn
Tracing on for the entire website. You do
| | 04:35 |
this in the web.config file. I won't go
through those steps here but if you do
| | 04:40 |
need to turn tracing on for the
entire site for some reason, you can do it
| | 04:44 |
through a centralized mechanism.
| | 04:47 |
| | Collapse this transcript |
| Debugging with breakpoints| 00:01 | Another tool that you can use when you
are programming in either Visual Basic
| | 00:04 | or C# and you want to see what's going
on inside the code is to set breakpoint.
| | 00:09 | A breakpoint is a way of marking the
bit of code, so that when you hit the
| | 00:14 | break point the application
is suspended for a moment.
| | 00:18 | As long as the breakpoint is active,
you can then inspect the values of
| | 00:22 | variables and other aspects of your
application state. For this demonstration
| | 00:28 | I'll start with the file LoopingCSharp.
aspx. This file already has the For and
| | 00:34 | the While loops inside
the Run Button Click method.
| | 00:37 | I will save this file under a
new name, naming the new version
| | 00:42 | Breakpoints.aspx. You can set a
breakpoint on any line of code. You can do this
| | 00:48 | in a couple of ways. One approach to
creating breakpoint is to right click on
| | 00:52 | the line and then select Breakpoint,
Insert Breakpoint. You will see that that
| | 00:58 | results in selecting the code and
highlighting it and you will also see a
| | 01:02 | really large graphic on the left side
of the screen in what's called the gutter
| | 01:07 | area, right next to the line numbers.
| | 01:09 | You can also set and clear breakpoints
just by double clicking on that area. So
| | 01:13 | I have double-clicked and you will see
that the breakpoint is gone. Then I'll
| | 01:17 | double-click again and you will
see that the breakpoint comes back.
| | 01:21 | Now when you set a breakpoint you then
have to turn on debugging. By default,
| | 01:26 | in ASP.NET website that's created in
Visual Web Developer has debugging turned
| | 01:31 | off. But in order to use the
breakpoint and suspend the page as it's running
| | 01:36 | you have to turn debugging on. You
can do this through the web.config file
| | 01:40 | explicitly or you can get Visual Web
Developer to do it for you just by telling
| | 01:46 | Visual Web Developer that
you want to debug the page.
| | 01:49 | Here is how you do it. I have already
set a breakpoint on the For loop.
| | 01:53 | I'll set one on this line with the While
loop as well. So now I'll be hitting the
| | 01:57 | breakpoint right before I output the
value of the counter variable in both
| | 02:02 | loops. Now I'll go to the menu and
select Debug and now for the first time,
| | 02:07 | I'll select Start Debugging.
| | 02:10 | Visual Web Developer detects that
this website is not configured to run in
| | 02:14 | Debug mode. So it asks me whether I
would like to modify the web.config file to
| | 02:19 | allow debugging. There is also an
important note that before you deploy the
| | 02:24 | website to a production
environment you should turn debugging off.
| | 02:27 | I will use the default selection to
modify the web.config file and click OK.
| | 02:32 | Visual Web Developer also detects
whether Script Debugging is turned on or off.
| | 02:37 | If you want to debug your client
side code, you should turn the Script
| | 02:41 | Debugging on. Here though, I'm only
debugging server-side code. So I'll say
| | 02:46 | Yes, I want to continue debugging.
| | 02:48 | It takes a moment for the page to
be rebuilt and then appear in the web
| | 02:52 | browser. The first time you go into
debugging in this context, you may see that
| | 02:57 | the web browser doesn't automatically
take focus. If that happens, just click
| | 03:01 | the browser icon down on the task bar.
| | 03:04 | Now I'll click the Run Code button you
will see that I hit the breakpoint in
| | 03:09 | the For loop. The current line that is
being suspended is highlighted in yellow
| | 03:15 | and you will also see the breakpoint
listed over on the left side. Down at the
| | 03:19 | bottom in the Locals panel, you will
see a listing of all available arguments.
| | 03:24 | The counter variable, which was
declared inside the function, is listed there
| | 03:29 | with its initial value of 1.
| | 03:31 | Now to continue executing the code,
I'll go to the Toolbar and click the
| | 03:36 | Continue button which is a little
arrow pointing to the right. Each time I
| | 03:40 | click it executes the code until it
gets to another breakpoint and keep your
| | 03:44 | eye down here on the counter variable
and you will see that each time I click
| | 03:49 | the Continue button, the counter
variable is updating. I'll Continue again and
| | 03:54 | now I'm hitting the breakpoint in the
While loop and I'll click it again. One
| | 03:59 | more time and this time because I have
gotten out of all the loops, I'll see
| | 04:04 | that the browser comes back and
shows me the result of the code.
| | 04:09 | Now I'm going to execute the
breakpoint one more time to show you one very
| | 04:12 | important thing. I'll clear the
console and then run the code again.
| | 04:17 | I'll continue a couple of times and you will
see that I have hit the output function
| | 04:22 | twice. I'll press Alt+Tab and switch
back to the browser and show you that the
| | 04:27 | output doesn't appear in the browser
because until you have completed executing
| | 04:32 | the entire page, the content
doesn't get sent back to the browser.
| | 04:36 | I will press Alt+Tab again and switch
back to Visual Web Developer. I'll click
| | 04:41 | Continue, Continue again and one more
time and now I come back to the webpage
| | 04:47 | in the browser because its code has
been completed and all of the response has
| | 04:52 | been sent back to the browser and
as being displayed appropriately.
| | 04:56 | So that's basically how you use
breakpoints. You place the breakpoint on the
| | 05:00 | line that you want to suspend on while
the page is running and then when you
| | 05:05 | hit the breakpoint you will come back
to Visual Web Developer and you will be
| | 05:09 | able to use the Locals
panel to inspect the data.
| | 05:12 | There are other debugging panels
available as well. The Watch panel allows you
| | 05:17 | to put an arbitrary expressions up to a
certain point and see what their values
| | 05:21 | are and you can also use the Call Stack,
the Immediate Window and the Output
| | 05:26 | panel which you see regularly but which
has more detailed information when you
| | 05:31 | are in Debug mode.
| | 05:33 | When you are done debugging just close
the browser and when you come back to
| | 05:37 | Visual Web Developer, it
automatically removes those additional panels and
| | 05:42 | shows you the original window layout.
| | Collapse this transcript |
| Commenting code| 00:01 | As with all good programming languages,
both Visual Basic and C# support
| | 00:05 | the ability to add comments to your
code. You can use comments to document
| | 00:10 | features in your code that otherwise
might not be easy to figure out, or to
| | 00:14 | temporarily block certain code from executing.
| | 00:16 | I will demonstrate how to add comments
in both languages. I'll start with the
| | 00:21 | file LoopingCSharp.aspx. This page
already has the functionality to execute a
| | 00:26 | couple of loops, a For loop and a
While loop. I'll save the file under a new
| | 00:30 | name selecting File > Save As. I'll
name the file CommentsCSharp.aspx.
| | 00:38 | You can comment code in C# in
one of two ways. You can either use
| | 00:42 | beginning of line comments which are
double slash characters, which prevent
| | 00:47 | code from executing from a certain
point of the line to the end of the line or
| | 00:51 | you can use Block comments.
| | 00:53 | A block comment starts with a slash
and an asterisk and end with an asterisk
| | 00:58 | slash. For example, let's say that
you wanted to add a comment above the
| | 01:02 | runButton_click function to describe
what it does. This would be best served as
| | 01:07 | a block comment. So I'll place the
cursor above the function, I'll put in a
| | 01:12 | slash asterisk and then I'll type in
some comments, such as this function walks
| | 01:18 | up and down a variable.
| | 01:20 | Notice that when I press Enter at the
end of the line, Visual Web Developer
| | 01:24 | automatically puts in an asterisk.
This is a visual trick. If you have a long
| | 01:30 | comment that's a full paragraph,
placing the asterisk at the beginning of every
| | 01:34 | line is just a way of visually
indicating to the developer that the comment is
| | 01:38 | continuing, but in order to actually
complete the comment, you must end with
| | 01:42 | the asterisk slash character.
| | 01:45 | Notice that Visual Web Developer color-
codes this sort of comment in black. So
| | 01:50 | that's how you create a block comment.
Now here is how you create a beginning
| | 01:53 | of line comment. You can actually do
this with a keyboard shortcut. I'm going
| | 01:58 | to select the While loop. Then I'll
go to the menu and I'll select Edit > Advanced.
| | 02:06 | Notice that you can comment and
uncomment the selection from the menu.
| | 02:10 | I'll comment the selection with the menu
choice. You will see that when you use the
| | 02:15 | menu choice or it's associated
keyboard shortcut, you are using beginning of
| | 02:19 | line comments, the double slash combination.
| | 02:22 | Now to uncomment that same code, I'll
press Ctrl+K. Notice at the bottom of the
| | 02:28 | Visual Web Developer interface there
is a message. (Ctrl+K) was pressed,
| | 02:32 | waiting for second key of chord. A
chord is a combination of keyboard shortcuts
| | 02:39 | one after the other. So now I'll press
Ctrl+U and that removes the comments.
| | 02:45 | Ctrl+K, Ctrl+C to add the comments
in; Ctrl+K, Ctrl+U to remove them.
| | 02:52 | I will go ahead and leave them in
the final stage of this application.
| | 02:58 | I'll save the changes. I'll run the page
without debugging and now when I run the
| | 03:03 | code, I'll only see the output from
the For loop. I won't see the output for
| | 03:08 | the While loop, because it's commented out.
| | 03:10 | Now, I'll do the same thing in Visual
Basic. I'll open the file LoopingVB.aspx.
| | 03:17 | I'll save the file, naming the new file
CommentsVB.aspx. I'll place the cursor
| | 03:24 | above the function runButton_Click.
I'll expand to full screen by pressing
| | 03:29 | Alt+Shift+Enter. Now with Visual
Basic, you only get beginning of line
| | 03:35 | comments, there is no block comment.
| | 03:37 | So for each line that I would like to
comment, I start up with a single quote
| | 03:41 | character. Then I type in the
comment. Now if you want to add or remove
| | 03:46 | comments for multiple lines, you can
use the same keyboard shortcut that I
| | 03:50 | already demonstrated for C#.
I'll select all of the code for the While
| | 03:55 | loop, I'll press Ctrl+K. Notice that
Visual Web Developer adds the single quote
| | 04:01 | comment at the beginning of every line.
To remove the comment, Ctrl+K, Ctrl+U.
| | 04:09 | Once again, I'll leave those comments
in for the ending state of the file.
| | 04:14 | I'll save my changes and I'll run the page.
When the page appears in the browser,
| | 04:19 | I'll run the code. Now I only see the
results of the For loop because the While
| | 04:24 | loop is commented out.
| | 04:25 | You are strongly encouraged to comment
freely. Use comments to document your
| | 04:31 | code or to temporarily block code from
being executed when you are doing your
| | 04:35 | development and testing.
| | Collapse this transcript |
|
|
5. Creating Reusable CodeCreating web controls| 00:00 | As your ASP.NET website expands
and includes more pages, you'll find
| | 00:04 | circumstances where you want to reuse
code. That is, to create a file that does
| | 00:10 | presentation or executes some kind of
logic that you want to reuse on many
| | 00:15 | pages. Candidates for this kind of
control include commonly used menus,
| | 00:20 | presentations of images and
anything else that repeats on many pages.
| | 00:26 | For this demonstration, I'll use a
beginning website and then click the Design
| | 00:30 | button, so you can see what the page
looks like. This is the basic design for
| | 00:35 | all pages in the website. There is a
graphic banner at the top, a set of
| | 00:39 | hyperlinks below the banner that are
the menu and then a Heading 1 for the page title.
| | 00:45 | If you open another of the pages, for
example Authors.aspx, and look at that
| | 00:50 | file in Design view, you'll see that
the top content is exactly the same, the
| | 00:55 | image and the hyperlinks. The
heading has the same look and feel, but the
| | 00:59 | details of the text are different.
| | 01:01 | I'd like to be able to take the image
presentation, the hyperlinks, and the
| | 01:05 | heading and turn them all into a
reusable control that I can then call or
| | 01:10 | implement in all of the pages.
| | 01:13 | When you create user controls, they're
going to be created as server-controls.
| | 01:18 | That is, they're files just like ASP.
NET pages that are processed by the
| | 01:23 | ASP.NET server. It's commonly
recommended that when you create these controls
| | 01:28 | that you place them in a
special folder under your website.
| | 01:31 | I have already created that folder in
my website. It's called Controls. It
| | 01:35 | already has one file called Header
with Props that I'll use in a different
| | 01:39 | video, but for this video, I'm going
to create the control from scratch.
| | 01:44 | I'll start by clicking on the folder
where I want the control to be placed.
| | 01:48 | Then I'll go the menu and I'll select
Website > Add New Item. In the list of
| | 01:55 | Visual Studio installed templates,
locate Web User Control. When you select
| | 02:00 | that item from the list, you'll see
that a name is set by default with a file
| | 02:05 | extension of .ASCX.
| | 02:08 | All custom controls have this file
extension and that distinguishes them from
| | 02:12 | pages which have the file extension
.ASPX. Just like ASP.NET pages though,
| | 02:18 | within a control you can select your
choice of language, Visual C# or Visual Basic,
| | 02:23 | you can place the scripting code
for the control in a separate file if you like.
| | 02:27 | I am going to keep any scripting code
and any HTML mark up in the same file.
| | 02:33 | All I'm going to change here is the
actual file name of the control I'm
| | 02:36 | creating, and I'm going to name it
Header.ascx, and I'll click the Add button.
| | 02:43 | Notice that because I had already
selected the Controls folder that the file
| | 02:47 | was placed in that folder.
| | 02:49 | Now, take a look at the top of the
file. The file begins with a Control
| | 02:54 | declaration. It has a Language
attribute indicating which language is being
| | 02:58 | used, C# in this case, and a ClassName,
which you can modify, if you like.
| | 03:04 | Because I said that I was going to do
everything in a single page, I have a
| | 03:07 | script section with a runat = server
attribute. Any code that I place within
| | 03:12 | that scripting section will be processed
by ASP.NET, rather than by the browser.
| | 03:18 | Now, I'm going to populate the control
with some HTML markup. I'll go to the
| | 03:24 | homepage Default.aspx and I'll
look at it in Source View. I'll press
| | 03:29 | Alt+Shift+Enter so I can open it up
to full screen, and I'm going to select
| | 03:34 | just this content.
| | 03:36 | I'll select the panel that contains the
image and the next panel that contains
| | 03:40 | the hyperlinks. And I'm going to cut
that content to the Clipboard. And I'll
| | 03:45 | save the changes in Default.aspx. I'll
return to Header.ascx and I'll place the
| | 03:52 | cursor after the scripting
section and I'll paste in that code.
| | 03:56 | Now, all the HTML code that I need to
present the image and the hyperlinks for
| | 04:00 | the menu are in this server control.
I'll clean up the code a little bit, then
| | 04:06 | I'll press Shift+Tab to unindent the
code. Because this code is no longer
| | 04:10 | embedded in a larger HTML page,
it doesn't need to be indented.
| | 04:14 | I will save the changes and now I'm
ready to use the header control in my page.
| | 04:21 | I'll go back to Default.aspx and I'm
going to look at the page in Design View,
| | 04:26 | and I'll also press Alt+Shift+Enter
again to get out of Full Screen View.
| | 04:31 | Now, to place the control on the page,
I'm going to place the cursor at the
| | 04:34 | beginning of the homepage, and I'll
press Enter once to create a paragraph of
| | 04:39 | above. Notice that because I had
placed the cursor inside an h1 tag that the
| | 04:44 | new content is also an h1. I'll fix
that later. For now, it gives me a large
| | 04:49 | area to drag and drop the control.
| | 04:52 | I'll go to the new control in the
Solution Explorer, and I'll drag it and drop
| | 04:56 | it into the Heading. You'll see as a
result that the Header appears on the
| | 05:01 | screen. Visual Web Developer is
actually rendering what the page will look like
| | 05:06 | taking into account both the
control and the rest of the content.
| | 05:10 | Now, I'll do my clean up. I'll go
into Source View and I'll eliminate the
| | 05:14 | Heading 1 that was placed at the top
of the page. Here's what the code looks
| | 05:20 | like. uc1: header with a run at equals
server attribute. There's some more code
| | 05:26 | up at the top that I'll
explain in a separate video.
| | 05:29 | For now, all I'm going to do is run
the page. I'll save my changes and select
| | 05:34 | Debug > Start Without Debugging.
When the page is rendered on the screen,
| | 05:40 | ASP.NET puts together the main page
plus the user control, and renders it as a
| | 05:45 | complete web page. You'll now be able
to use this control and as many pages as
| | 05:49 | you like to create a common look
and feel for the whole website.
| | Collapse this transcript |
| Registering a user control on a web form page| 00:00 | Once you have created a user control,
you can then use it in many pages. There
| | 00:05 | are two basic approaches that you
can select from. In one, you explicitly
| | 00:09 | register the control in each page in
which you want to use it. And then using
| | 00:13 | an ASP.NET tag, you display the control.
| | 00:17 | The other approach is to register the
control globally for the whole website.
| | 00:21 | Here, I'm going to demonstrate how to
register the file locally. As I have
| | 00:26 | shown in another video, you can
actually drag and drop a control into a page in
| | 00:31 | Design View, and all of the required
code will be generated for you, but it's
| | 00:34 | useful to know how to
hand code it where necessary.
| | 00:37 | I am working with the file Authors.aspx,
which has the same sort of markup as
| | 00:43 | the Default.aspx file I used previously.
I'm going to place the cursor after
| | 00:48 | the page declaration, but before the
html DOCTYPE declaration, and I'll make a
| | 00:53 | little bit of extra space. I'll start
with a less than character and a percent
| | 00:57 | character, and you'll see a list
of available declarations appear.
| | 01:01 | I'll go down to the Register declaration,
and I'll select it and then press the
| | 01:06 | spacebar. You can register a control
either from the source file which is what
| | 01:11 | we're working with here, or if you are
working with pre-compiled code, you can
| | 01:16 | register a control from
an Assembly and Name space.
| | 01:18 | I am going to use the Source attribute,
because I'm referring to the control by
| | 01:23 | its source file name. I'll select source,
Src. I'll put in the equal sign and a
| | 01:30 | quote, and then I'll double-click to
select Pick URL. Then I'll navigate to the
| | 01:35 | Controls folder and I'll choose
my file Header.ascx and click OK.
| | 01:42 | Notice that Visual Web Developer
sets the source using a tilde before
| | 01:47 | /controls. The expression tilde
slash refers to the root of the website.
| | 01:52 | Next, I declare a TagName and a
TagPrefix. These can be anything I like.
| | 01:57 | I'll press the spacebar and then select
TagName, put in the equals and a quote, and
| | 02:02 | I'll set the TagName as Header. Then
I'll press the spacebar again and select
| | 02:07 | TagPrefix, type in the equals and a
quote, and I'll set the Prefix as uc1 for
| | 02:13 | user control folder 1.
| | 02:16 | Notice that after a moment, all of the
little squigglies that indicate errors
| | 02:19 | have gone away. This is a visual
indicator that says I have coded this correctly.
| | 02:24 | Now, I'll go down further in the page
and I'm going to select the tags that
| | 02:28 | present the image and the menu. And I'll
delete them by pressing the Delete key.
| | 02:34 | Then I'll tab in so that I'm aligning
the cursor with the existing code.
| | 02:38 | I'll type in a less than character and
type UC and you'll see that uc1:Header is
| | 02:44 | displayed by Visual Web
Developer as a possible option.
| | 02:47 | I'll select the item, and I'll also add
runat = server. That part is critical.
| | 02:54 | If you don't put in the runat="server"
attribute, then when you run the page,
| | 02:58 | your header won't appear because it
won't have been processed at the server level.
| | 03:03 | I'll save my changes and test the
page. Selecting Debug > Start Without
| | 03:08 | Debugging. When the page appears, it
once again displays the image and the
| | 03:13 | hyperlinks. I can click to go to the
homepage and back to the Author's page,
| | 03:18 | and in both cases, I'm using exactly
the same user control, but the details of
| | 03:22 | the page below the control are different.
| | Collapse this transcript |
| Registering controls globally in the web.config file| 00:00 | For controls that you are going to use
in many pages throughout your website,
| | 00:04 | it's useful to be able to register the
control globally, so that you don't have
| | 00:08 | to use the register declaration at the
top of every page. In order to follow
| | 00:12 | along with this demonstration, you
must have already created a file called
| | 00:15 | header.ascx in the Controls
folder under the Website Root.
| | 00:21 | Open the file web.config from your
Website Root folder. This is the file that
| | 00:26 | configures your entire website. It has
a Pages element, which I have already
| | 00:31 | scrolled to at about line 67. Within
the Pages element, there is a Controls
| | 00:36 | element and then for each custom
control that you want to use in your website
| | 00:40 | globally, you put in an Add
element as a child of controls.
| | 00:44 | I am going to move the cursor right
before the End tag of Controls, press
| | 00:48 | Enter, move up a line, and then tab in,
and then I'll place the New Add tag
| | 00:54 | right below the existing ones. I'll
type in a less than character and select
| | 00:59 | add and then I'll tagPrefix. The
tagPrefix can be anything you like. I'm going
| | 01:06 | to use a tagPrefix of simply
customControls. Then set the tagName.
| | 01:12 | The tagName can be anything you like as
well. I'm going to use Header to match
| | 01:16 | the name of the file in which it's
defined. Then finally, just as with the
| | 01:20 | register declaration that you used
in the local pages, I'll use a source
| | 01:24 | attribute, src, to indicate that I'm
getting the file from the Controls folder
| | 01:29 | under the Root. I'll start with the
tilde character which you will find right
| | 01:32 | next to the number 1 pressing the
Shift key, then a slash, then Controls and
| | 01:38 | then the name of the file Header.ascx.
| | 01:43 | So there is all my code. Let's review
it. I have the Add element which I'll
| | 01:48 | align with the other Add elements just
by pressing the Backspace key a couple
| | 01:51 | of times, the tagPrefix, the tagName,
and the source. I'll clean up the code a
| | 01:57 | little bit just removing the spaces
around the equals operators. They wouldn't
| | 02:01 | hurt anything, but I'd like the code to
look a certain way, and then I'll press
| | 02:05 | Ctrl+S to save my changes.
| | 02:08 | Now I'll go to a page, publishers.aspx,
which still has the original Header
| | 02:13 | content. I have already selected the
text starting with the div tag wrapped
| | 02:17 | around the image and the panel
wrapped around the menu, and I'll delete it.
| | 02:22 | Then I'll tab in, I'll type in a less
than character and start typing cus. And
| | 02:29 | you will see that Visual Web Developer
already knows that the Header control is available.
| | 02:33 | I will press Enter to select it. I'll
press the spacebar, start typing runat,
| | 02:39 | press Enter, quote and then put in
server. As with all custom controls, the
| | 02:45 | runat="server" attribute is critical.
I'll close the tag with the slash and a
| | 02:51 | greater than. I'll save my changes
and run the page without debugging. And
| | 02:57 | there is the result. The
publisher page now uses the user control.
| | 03:02 | Because I have now registered the
control globally, in order to implement this
| | 03:06 | control on all the pages, all I need
to do is to select that code, copy it to
| | 03:11 | the clipboard, and then I'll
be able to open other pages.
| | 03:15 | For example, I'll go to the Authors page,
I'll remove the register declaration
| | 03:20 | from the top, I'll remove the call to
the header that uses the special prefix
| | 03:24 | that was created in this page only.
I'll place the cursor and then once again
| | 03:29 | start typing custom controls. I'll
make sure to add runat="server" and then
| | 03:36 | I'll close the tag. I'll run the page
once again without debugging, and you
| | 03:41 | will see once again that user
control is working correctly.
| | 03:44 | So once you have created the control
and registered it globally in web.config,
| | 03:49 | you can then use it as many
times in as many pages as you like.
| | Collapse this transcript |
| Adding public properties to a web control| 00:00 | In order to make your code more
reusable, it's possible to declare public
| | 00:04 | properties that are members of your
user controls, and then set the values of
| | 00:09 | these properties when you use the
control in a page. For this demonstration,
| | 00:13 | I'm going to use existing file
HeaderWithProps.ascx. This is the same file that
| | 00:19 | I was working on previously under the
name Header.ascx. Notice that it has two
| | 00:24 | ASP panel components, each
resulting in a visual presentation.
| | 00:28 | The first panel has the image, the
second one the menu. In the one page that's
| | 00:33 | left in this website that doesn't use
the existing control, I still have the
| | 00:37 | existing content, plus I also have an
h1, a heading 1 that displays a heading
| | 00:43 | at the top of the page. I would like
to make that presentation a part of the
| | 00:46 | control, but I would like to make the
text within the heading 1 tags dynamic.
| | 00:51 | So I can change it when I
use the control in a page.
| | 00:54 | Here are the steps. The first part is
to declare a public variable that's a
| | 00:59 | member of the component. You can do
this with either C# or Visual Basic.
| | 01:04 | I'm going to demonstrate it in C#,
but the code is much the same in VB.
| | 01:08 | I'll declare variable starting off with
the access modifier, public, then I'll
| | 01:14 | set the data type which will be a
string and then the variable name,
| | 01:18 | which I'll call heading.
| | 01:20 | Then optionally, you can set an
initial or default value by adding the equals
| | 01:25 | assignment operator and then a string
that you want to use if a value is not
| | 01:29 | passed in. I'll use the default string
of page heading. That way if I use the
| | 01:36 | control later on, and I've forgotten
to set the heading value, I'll see this
| | 01:40 | default value and it will
remind me I need to set it.
| | 01:43 | Now to present that value to the user,
I'm going to combine some very simple
| | 01:47 | HTML and an ASP.NET expression that
outputs the value of the variable to the
| | 01:52 | page. I'll create a pair of heading 1
tags at the bottom of the page. Then I'll
| | 01:58 | add an output expression, starting
with less than, percent, and the equals
| | 02:03 | operator and the variable heading.
| | 02:05 | Notice that Visual Web Developer
already knows about the property and allows me
| | 02:10 | to select it from the list. So
that's the completed control with a public
| | 02:14 | property. I'll save those changes by
pressing Ctrl+S. Next, I'll register the
| | 02:20 | control globally so that it's
available to the entire website.
| | 02:23 | I will go to my web.config file.
This is the file where I have previously
| | 02:28 | registered a control named header. I'm
going to select and copy the Add element
| | 02:33 | that registered that control. I'll
select the line and press Ctrl+C and then
| | 02:38 | clear the selection and press Ctrl+V
to create a second version of the tag.
| | 02:42 | I will change the tag name to
HeaderWithProps to match the file in which it is
| | 02:48 | defined. I'll set the source attribute
to HeaderWithProps.ascx to reference the
| | 02:54 | source code file. Then I'll
press Ctrl+S again, saving this file.
| | 03:00 | Now, I'll return to the title's page.
I'll select everything starting with the
| | 03:05 | first Div tag set, continuing
through the ASP panel element and this time
| | 03:10 | selecting the h1 tag set as well. And
I'll delete all that content because all
| | 03:14 | of these content is part of the control.
| | 03:16 | Now I'll put in an instance of the
control. I'll start with the less than
| | 03:20 | character and then start typing cu or
customControls. Notice that Visual Web
| | 03:26 | Developer now knows about both
controls that have been registered globally in
| | 03:30 | the web.config file.
| | 03:32 | Select the file HeaderWithProps. I'll
add the runat="server" attribute and then
| | 03:40 | I'll set the value of that heading
property. I'll pass it in as a simple
| | 03:44 | attribute and I'll set the heading
for this particular page as Title List.
| | 03:50 | That's it. I'll save the changes and
I'll run the page without debugging.
| | 03:59 | And now the entire heading of my
website is completely reusable. The top image
| | 04:04 | banner, the menu and the heading, and
I'll be able to pass in a different text
| | 04:09 | value into the heading for each
page on which I use the control.
| | 04:13 | So that's the basic look at how to
create your own user controls, how to make
| | 04:17 | them configurable with public properties,
how to register them globally for the
| | 04:22 | whole website, and then how to use
these controls on individual web pages
| | 04:26 | passing values into the properties to
customize their behavior and appearance.
| | Collapse this transcript |
|
|
6. Using Cascading Style Sheets in Web FormsUnderstanding Cascading Style Sheets (CSS)| 00:00 | Designers of the ASP.NET websites have
access to all of the tools that modern
| | 00:05 | website developers use, such as
Cascading Style Sheets, Div tags and other
| | 00:10 | capabilities that are enabled by the
modern web browsers such as Internet
| | 00:14 | Explorer and Firefox.
| | 00:16 | In older websites, pages tended to be
laid out with HTML tables. You place
| | 00:21 | tables within tables within tables to
control layout and positioning of objects
| | 00:26 | on the screen. But there were
problems with this approach. Not all browsers
| | 00:30 | interpreted table measurement the same,
so a page that would be laid at one way
| | 00:34 | in the Internet Explorer, might
look somewhat different in Firefox.
| | 00:37 | Also when you use table containership
to manage the layout and positioning of
| | 00:42 | elements on the screen, it isn't
possible to change that information without
| | 00:45 | really restructuring the tables and
finally the rules of layout can't easily be
| | 00:50 | shared among multiple pages as
they can with Cascading Style Sheets.
| | 00:54 | In modern websites, developers tend to
use what we call Div tags. A Div tag is
| | 01:00 | a block element that describes content
that lays out horizontally across the
| | 01:04 | screen, but Div tags can also be
controlled in terms of their sizing and
| | 01:08 | placement on the screen using
Cascading Style Sheet rules. Cascading Style
| | 01:13 | Sheets, or for short CSS, is used to
control visual styles like colors and
| | 01:18 | fonts, placement and positioning and
Z order which determines which object
| | 01:23 | overlay each other as the user sees them.
| | 01:26 | When you are building static websites,
you declare Cascading Style Sheets in a
| | 01:30 | few different ways. You can place your
styles as inline styles declared within
| | 01:34 | an HTML element, like the span tag I
show here. The Style Attribute declares a
| | 01:39 | style rule of color with
the value of blue or FF0000.
| | 01:44 | The result would be that the text
within that span would be blue. You can also
| | 01:48 | embed your style rules in a web page
using the Style tag as shown next in this
| | 01:53 | example. A Style Sheet class called
blueItems is declared and then that class
| | 01:58 | is applied to HTML
elements with the class attribute.
| | 02:01 | Here is another example of the same
class, but this time placed in an external
| | 02:06 | style sheet and then linked to a HTML
page with the link element. Again, these
| | 02:11 | are approaches that are used in
static websites. When you work in ASP.NET,
| | 02:16 | there are a number of approaches
that you can use. All of the server-side
| | 02:20 | visual controls that generate HTML
for delivery to the browser, such as the
| | 02:24 | .NET label control shown here have a
set of properties that equate to Cascading
| | 02:29 | Style Sheets style names.
| | 02:31 | For example, the BackColor property,
which is available on many ASP.NET web
| | 02:36 | controls, translates into an HTML
style name of Background-Color. BorderColor
| | 02:42 | translates to Border Color, Font-
Bold actually represents a style name,
| | 02:47 | Font-Weight with a value of Bold, Font-
Italic is really a font style of Italic and so on.
| | 02:53 | You can apply these attributes
individually on each instance of an ASP.NET
| | 02:58 | control. At runtime, ASP.NET will
generate the appropriate HTML. For example,
| | 03:03 | the Label control translate as a span
element. The server-side ID that you
| | 03:09 | apply to the label is translated as a
client-side ID that can be addressed in
| | 03:13 | JavaScript. In this case, the value
of the ID attribute won't change as it
| | 03:17 | translates from server to client, but
the names of the properties and how they
| | 03:22 | are rendered, does change because it
needs to be represented in a form that the
| | 03:25 | browser can understand.
| | 03:27 | As you see here, each of the
properties that I apply to my label control is
| | 03:31 | translated into a part of the style
setting in the Span tag. So this will work,
| | 03:37 | but the problem with this approach is
that if you have a number of labels that
| | 03:40 | you all want to look the same, you
are going to have to apply the label
| | 03:43 | properties many times.
| | 03:45 | So here is an alternative approach, you
can combine client site Cascading Style
| | 03:50 | Sheet code with server-side ASP.NET
declarations. In this example, I have
| | 03:55 | created a CSS class name myLabels. CSS
classes are always prefixed with a dot
| | 04:01 | character. The markup that you see here,
it could be placed either embedded in
| | 04:05 | a page, if it was only used on a single
page within the Style element or it can
| | 04:10 | be placed in an external style
sheet file and linked into all pages.
| | 04:14 | Then the class myLabels would be
available throughout the website. Then for
| | 04:19 | each instance of an ASP.NET control
that you want to use the Cascading Style
| | 04:24 | Sheet class, you use the ASP.NET
CSSClass property shown in the second code
| | 04:29 | sample at the bottom. The CSSClass
property in an ASP.NET control translates as
| | 04:35 | an HTML class attribute.
| | 04:37 | So here is the generated code before
and after. In the earlier example,
| | 04:41 | I showed that there is a single style
attribute that combines all of the values
| | 04:45 | of the ASP.NET properties and in the
second example, the CSSClass property has
| | 04:50 | been translated as the simple HTML
attribute class and given the same value.
| | 04:56 | Between the linking of the Cascading
Style Sheet external files into your
| | 05:00 | pages, and the use of the CSSClass
attribute, you will see that you are
| | 05:04 | combining the best of both worlds.
Global implementation of visual design for
| | 05:09 | the whole website using a single
external CSS file, plus the use of ASP.NET
| | 05:14 | server controls which give you dynamic
capability both on the client and in the
| | 05:19 | server environment using your
choice of programming language.
| | 05:23 | In the remaining videos in this chapter,
I'll show some examples of ways that
| | 05:27 | you can use Cascading Style Sheets both
in the RAW ASP.NET code and how you can
| | 05:33 | implement that code using Visual Web Developer.
| | Collapse this transcript |
| Attaching external CSS files| 00:00 | The first step in creating a Cascading
Style Sheet visual design in an ASP.NET
| | 00:06 | website is to create and attach an
external style sheet file. External style
| | 00:11 | sheet files are simple text files that
are placed in the Websites Root folder
| | 00:15 | or in a sub-folder of the root. They
always have a file extension of .css.
| | 00:20 | The task of actually creating the
style sheet file can be done either as pure
| | 00:24 | text or pure coding exercise or it can
done using Visual Web Developer tools.
| | 00:28 | I'm going to be working with a website
that already has a number of files in
| | 00:32 | it. Go to the Visual Web Developer
menu and select File > Open Web Site.
| | 00:37 | Navigate to the VisualDesign folder
under Chapter06 VisualDesign and click Open.
| | 00:43 | In this website, there are four
primary pages: Default.aspx, which is the
| | 00:48 | homepage of the website, and then
three other pages, Authors, Publishers and
| | 00:52 | Titles. There is a server control
called Header.ascx, which is used by all four
| | 00:57 | pages, which contains a number of
hyperlinks wrapped inside ASP panel
| | 01:02 | components and there is also a
beginning style sheet file called styles.css.
| | 01:08 | The style.css file has selectors for
the body, table and anchor elements and a
| | 01:13 | pseudo selector called a:hover that
affect anchor tags when the mouse is
| | 01:17 | hovering over them. If you take a look
at the Default.aspx, you will see that
| | 01:22 | currently the page doesn't have any
links to the style sheet file and if you
| | 01:26 | test the page in the web browser,
you will see that the styles in the
| | 01:29 | styles.css file are not being applied
right now. You are seeing the default
| | 01:33 | fonts and colors applied by the browser.
| | 01:36 | So here is how you attach the
external style sheet file to a page. Go to
| | 01:40 | Default.aspx and look at the page in
Design view, then over on the left, click
| | 01:46 | on Manage Styles. You will see when
you click the Manage Styles tab that the
| | 01:50 | Manage Styles window slides out from
the left. Now because we'll be using
| | 01:54 | styles extensively, click the Pin icon,
which will pin the panel open and also
| | 01:59 | adjust the design area, so we
can see both at the same time.
| | 02:02 | Now click the Attach Style Sheet link.
From there, look in the Root folder and
| | 02:07 | you will find the file styles.css and
click OK. You will see in Design view
| | 02:13 | that the fonts change immediately
reflecting the settings in the Style Sheet.
| | 02:17 | Now try browsing the page again in the
browser. Select Debug > Start Without
| | 02:21 | Debugging, look at the page in the
browser and you will see it has a very
| | 02:25 | different look and feel. The font
settings from styles.css have been applied
| | 02:29 | and if you move the cursor over the
anchor tags at the top, you will see that
| | 02:32 | the menu reflects the a:hover pseudo selector
that was declared in the external style sheet.
| | 02:39 | If you open the other files, Publishers.
aspx, Authors.aspx and Titles.aspx,
| | 02:47 | you will see that this link has already
been created in these other pages. So that
| | 02:51 | from this point onward, any changes
that you make in the external style sheet
| | 02:55 | file, styles.css, will be applied to
all of the pages in the entire website.
| | 03:01 | Once you have created this link, it
makes it very easy to create side like
| | 03:05 | design settings that are created and
defined in CSS and then used in all pages
| | 03:11 | of the website.
| | Collapse this transcript |
| Defining a CSS selector| 00:00 |
Once you have declared an external
style sheet file and linked it into your
| | 00:04 |
pages, you can then start declaring
CSS rules and apply them to various parts
| | 00:09 |
of your web pages using standard
Cascading Style Sheet architectures.
| | 00:13 |
In CSS, you can declare what we call
Selectors. There are three types of
| | 00:18 |
selectors, Tag selectors, Class
selectors and ID selectors. Tag selectors apply
| | 00:24 |
to all HTML elements of a particular
name. Class Selectors apply to elements
| | 00:29 |
that join a group explicitly using the
class attribute. ID selectors apply only
| | 00:34 |
to single elements that
have a particular unique ID.
| | 00:37 |
I am going to demonstrate here how to
declare a class selector and then add a
| | 00:42 |
particular ASP.NET component to that
class to adopt the appearance that's
| | 00:47 |
defined in the class. I'll be working
with the following files. First of all,
| | 00:52 |
Header.ascx, a custom server control
that displays the banner image and also a
| | 00:58 |
set of hyperlinks wrapped into a panel.
| | 01:00 |
I am going to be modifying the panel
using the external style sheet file that's
| | 01:04 |
linked into all pages. Then styles.css,
the starting CSS file that was included
| | 01:10 |
with this chapter's Exercise Files.
When you open styles.css, you should see
| | 01:15 |
something called the CSS Outline View
appear on the left. Now if you don't see
| | 01:20 |
that view, go to the menu and select
Window > Reset Window Layout and confirm.
| | 01:26 |
You should see the view appear. The CSS
Outline view allows you to create brand
| | 01:30 |
new style declarations in an external
style sheet. It groups the style sheet by
| | 01:36 |
elements or what are known in actual
Cascading Style Sheets as tag selectors,
| | 01:41 |
classes and IDs. I'll right click on
any of the elements in the CSS Outline
| | 01:47 |
view and select Add Style Rule. Here
you can add an element or a tag selector.
| | 01:52 |
If you pull down the list, you will
see all HTML elements listed. You can
| | 01:56 |
create your own class name or you can
specify a particular element ID.
| | 02:02 |
I'll choose class name and I'll type in a
class of menuPanel. Notice that Visual Web
| | 02:08 |
Developer interprets that as a style
declaration with a prefix of a period. In
| | 02:13 |
Cascading Style Sheets, all CSS class
selectors have a period prefix and then
| | 02:19 |
the arbitrary name of the class
that you select. I'll click OK and that
| | 02:23 |
actually creates the class
selector code in styles.css.
| | 02:27 |
Now if you know your Cascading Style
Sheet syntax, you can just fill it in
| | 02:31 |
here, but Visual Web Developer will
help you create it through a visual
| | 02:35 |
interface, a dialog box that will help
you build the code if you don't know how
| | 02:39 |
to build it yourself. Go to the CSS
Outline view, click the + icon next to
| | 02:44 |
Classes. Go to menuPanel, right click
and select Build Style. This takes you
| | 02:52 |
into the Modify Style dialog box.
| | 02:54 |
Now I'm going to set a number of
properties in different categories. Notice
| | 02:59 |
that there are Block Properties that
affect word spacing, letter spacing, and
| | 03:02 |
so on. Background Properties for
background colors and Border Properties.
| | 03:08 |
I'll start here in the Border.
| | 03:09 |
For the Border style, I'll leave the
option Same for All selected so that I'll
| | 03:13 |
be setting the style for top, bottom,
left and right. I'll choose a style of
| | 03:18 |
solid. Notice that in the Preview
pane at the bottom, you can see what the
| | 03:23 |
style will look like. I look at the
border and think that that's a little too thick.
| | 03:27 |
So then I'll click under border-
width, once again leaving Same for All
| | 03:30 |
selected, typing in number of 1. Then
I'll leave this selection of px there.
| | 03:35 |
When I press the Tab key to tab out of
this selector, the Preview pane shows me
| | 03:40 |
the result, a much thinner border. I'll
leave the border color alone, so to use
| | 03:45 |
the browser's default.
I'll go to the Box settings.
| | 03:49 |
For the Box settings, I'm going to set
padding for three borders. I'll uncheck
| | 03:54 |
Same for All and then I'll put a
value of 5 pixels into the top, bottom and
| | 04:00 |
left. I'm not concerned about the
right border, because there is nothing on
| | 04:04 |
that side. Then I'll click Position.
| | 04:07 |
For the Position, I'll put in a width
of 250 pixels. So I have set values in
| | 04:12 |
three categories. I'll review. Here
are the Border settings with all border
| | 04:17 |
styles and widths set to solid and 1
pixel. The Box settings to control padding
| | 04:23 |
for individual borders and the Position settings
just to control the width of the container.
| | 04:28 |
Take one more look at the Preview and
the Description and then click OK. Then
| | 04:33 |
look at the code that was generated in
styles.css. You will see that Visual Web
| | 04:37 |
Developer translated its properties
names and values into well-formed CSS
| | 04:42 |
mark-up. Press Ctrl+S to save your changes.
| | 04:45 |
Now return to the file Header.ascx. Go
to the second asp:panel. This is the one
| | 04:51 |
with the ID of menuPanel. Then
press Enter and a Tab character. Press
| | 04:57 |
Ctrl+Space, type CSSClass and then
press Enter. Put in an equals, a quote and
| | 05:04 |
then the name of your new selector, menuPanel.
| | 05:08 |
Make sure you spell the class name
exactly the same as you did in the
| | 05:11 |
styles.css file. Press Ctrl+S to save
your changes. Let's go back and look at
| | 05:16 |
styles.css and I want to make sure
that the class name here matches the class
| | 05:21 |
name as declared in the Header file.
| | 05:24 |
Now we'll test it with our pages. I'll
open the file Default.aspx. Notice I'm
| | 05:30 |
not making any changes in this file.
I have centralized all of the code, so
| | 05:34 |
that the inclusion of the Cascading
Style Sheet file is in the server control
| | 05:39 |
and the declaration of what the class
means is in the external style sheet.
| | 05:43 |
I will run the page by pressing Ctrl+F5.
Notice the new look of the menu bar.
| | 05:49 |
That's how it looks on the default
page and also on the Titles, Authors and
| | 05:54 |
Publishers pages. You can extend your
own sense of visual design now to the
| | 05:58 |
entire website, creating your own
styles in the external CSS file and then
| | 06:03 |
linking into the styles by applying the
CSS class in whichever visual controls
| | 06:08 |
need those styles.
| | 06:10 |
| | Collapse this transcript |
| Using CSS class selectors in server controls| 00:01 |
Website developers who are accustomed
to using Cascading Style Sheets to affect
| | 00:05 |
the appearance of their HTML elements
might be used to using ID selectors. An
| | 00:10 |
ID selector is a Cascading Style Sheet
selector that applies its properties to
| | 00:15 |
only one element of the page matched by the ID.
| | 00:18 |
For example, in the current version of
the header control the panel with an ID
| | 00:23 |
of menuPanel, which is wrapped around
the anchor tags that make up the menu, is
| | 00:28 |
identified by the phrase menuPanel. I
have used the Cascading Style Sheet class
| | 00:32 |
of the same name but they
aren't related to each other.
| | 00:35 |
If I wanted to modify this panel and I
wanted to apply it using an ID selector,
| | 00:40 |
I would go back to styles.css and
instead of putting a period, I would put in
| | 00:45 |
the pound sign. Now I'm taking
about the menuPanel ID, rather than the
| | 00:49 |
menuPanel class.
| | 00:50 |
There is a problem with this approach
in ASP.NET that you must know about. When
| | 00:55 |
you had cleared an ASP.NET server
control such as asp:panel and you place it
| | 01:00 |
within a custom control, such as this
Header control, at one time the ID is
| | 01:05 |
rewritten using a combination of the ID
of the control in the page plus the ID
| | 01:11 |
of the element within the control.
| | 01:13 |
I am going to demonstrate this by
modifying styles.css to use the pound sign
| | 01:18 |
instead of the dot. Meaning, I'm
matching by ID rather than by class. Then I'll
| | 01:23 |
go back to the page Default.aspx and
run it in the browser. Notice that the
| | 01:29 |
appearance of the menu, including the
border around it, the padding and so on,
| | 01:33 |
that I had to clear using the class
selector that no longer applies. Here's why.
| | 01:37 |
I will right click anywhere on the
page and select View Source. Then I'll
| | 01:42 |
scroll down to the generated code for
the panel. Here it is. It's a Div tag
| | 01:47 |
with an ID. You will see that the ID
consists of the ID of the control instance
| | 01:52 |
in the page, which was header 1, and
the ID of the control itself within the
| | 01:57 |
server control which was menuPanel.
| | 01:59 |
So, they are not matching up with each
other. I'll close the text editor and
| | 02:03 |
the browser. I'll also show you where
the prefix of the ID is coming from. From
| | 02:08 |
the declaration of the ID in the
instance of the header control. So if you want
| | 02:13 |
to use ID selectors to match up your
HTML element Ids with Cascading Style
| | 02:19 |
Sheet rules, here is what you have to do.
| | 02:21 |
I will go back to styles.css and I'll
modify my selector to match what will be
| | 02:27 |
generated by .NET. header1_menuPanel.
I'll save those changes by pressing
| | 02:35 |
Ctrl+S, go back to the page and run it
again. This time when the menu appears I
| | 02:41 |
see the styles kick in, including
the border and the padding that I had declared.
| | 02:46 |
Now that I'm matching up by ID, I
can go back to the Header file and I no
| | 02:50 |
longer need the CSSClass declaration.
I'm matching up the menu selector by a
| | 02:55 |
combination of the top-level page's
ID as it declares the instance of the
| | 03:00 |
server control plus the id of the menuPanel.
| | 03:04 |
The problem with this approach is that
you now have to make sure that you are
| | 03:07 |
using exactly the same declaration ID
in every single page. If you change it,
| | 03:12 |
you will have differences from one page
to another. So therefore, my preference
| | 03:15 |
when working with ASP.NET server
controls, especially those that are embedded
| | 03:19 |
within custom controls,
is to use class selectors.
| | 03:23 |
These won't be modified at runtime by
ASP.NET. So I'll return all these pages
| | 03:28 |
to their original settings. I'll put
the CSSClass attribute back inside the
| | 03:33 |
Header.ascx file. I'll go back to
styles.css and change my selector back to a
| | 03:39 |
class selector. I'll save all my
changes by selecting File > Save All. Go back
| | 03:45 |
to the page and run it one more time
without debugging. See that the design of
| | 03:50 |
the pages is still intact.
| | 03:52 |
So again, rule of thumb. When you
declare controls within custom controls and
| | 03:57 |
you want to apply Cascading Style
Sheets to them on a global basis throughout
| | 04:01 |
the website, use Cascading Style
Sheet classes rather than Ids for the best
| | 04:06 |
long term maintainability of your website.
| | 04:09 |
| | Collapse this transcript |
|
|
7. Presenting Dynamic DataPresenting data with the GridView control| 00:01 |
One of the primary reasons
organizations use ASP.NET or other application
| | 00:05 |
servers like ColdFusion to host their
websites is to allow integration with
| | 00:10 |
dynamic data stored in a server-side database.
| | 00:14 |
In the videos in this chapter, I'll
describe how to use various ASP.NET server
| | 00:18 |
controls including the GridView and
others that know how to bind to the
| | 00:23 |
server-side data and display that
data in dynamically generated HTML.
| | 00:28 |
For all of the videos and
demonstrations in this chapter, I'll be using a
| | 00:31 |
database hosted by SQL Server. In a
previous chapter of the video series,
| | 00:36 |
I described how to install SQL Server and
how to import the database that I'll be using.
| | 00:42 |
If you haven't gone through that
chapter first and you are following along on
| | 00:46 |
your own system, you will want to go
back to that chapter, walk through the
| | 00:49 |
installation and configuration process
and make sure that you have set up the
| | 00:53 |
Bookstore database.
| | 00:55 |
If you are not sure whether you have
done those steps, go into Visual Web
| | 00:58 |
Developer to the Database Explorer panel.
In the Default Window Setup, you can
| | 01:03 |
find the Database Explorer panel in
the tabbed region on the right, and then
| | 01:07 |
make sure that you have a
connection to a database called mybookstore.
| | 01:11 |
The name of the connection will differ
depending on the name of your computer.
| | 01:14 |
Mine is named davidmbpro, but the
name of the database and the name of the
| | 01:18 |
connection other than that should look
the same. And also make sure that you
| | 01:22 |
can see the list of Tables. You should
see tables named authors, publishers,
| | 01:27 |
titles and users, and again if you
can't see that, make sure you have gone back
| | 01:31 |
to the previous chapter and
walk through those exercises.
| | 01:35 |
If you are seeing the data correctly,
then you are ready to open up the
| | 01:38 |
website. Go to the menu and select
File > Open Web Site. Choose the folder
| | 01:45 |
DynamicData under Ch07DynamicData and
click Open. The Solution Explorer panel
| | 01:51 |
should open immediately. Then open the
file Default.aspx and run the file in
| | 01:57 |
the browser by selecting Debug > Start
Without Debugging or pressing Ctrl+F5.
| | 02:02 |
So this is what the page looks like
initially and if you click on each of the
| | 02:06 |
links, you will see that each of the
pages has an item that says what will be
| | 02:10 |
shown eventually. Now close the page
and return to Visual Web Developer. Close
| | 02:15 |
the file Default.aspx and then open the
file Authors.aspx and look at the page
| | 02:22 |
in Design View by clicking the
Design button under the Design region.
| | 02:27 |
In this demonstration, I'm going to
add a GridView control that displays
| | 02:31 |
dynamic data from the authors table in
the server-side database. I'll place the
| | 02:36 |
cursor in the paragraph after the text,
this page will show a list of authors
| | 02:40 |
and I'll press Enter to create a new
paragraph. Then I'll go back to the
| | 02:43 |
Database Explorer panel, I'll locate
the authors table and I'll drag the
| | 02:48 |
authors table into the paragraph,
making sure to drop it in the rectangular
| | 02:53 |
region shown on the screen. It takes
just a few moments to display the GridView.
| | 02:57 |
Now I'm going to move the cursor over
the handle on the right border of the
| | 03:01 |
GridView and I'll click and drag it out,
so it's a bit wider. Then I'll go to
| | 03:06 |
the paragraph above, I'll click the
header that has the name of the tag P and
| | 03:11 |
that selects the entire paragraph and
then I'll press Delete to delete that content.
| | 03:16 |
I will save my changes by pressing Ctrl+
S, I'll go to the menu and select Debug
| | 03:21 |
> Start Without Debugging and you
will see when the page is displayed, I'm
| | 03:25 |
retrieving and displaying the data in
the GridView. So that's the basics of how
| | 03:30 |
you get data from the
database server to the page.
| | 03:33 |
Now let's look at the code that was
generated. Go to Source View and then
| | 03:38 |
select View > Full Screen or press Shift
+Alt+Enter and take a look at the code
| | 03:43 |
that was generated when I dragged and dropped.
| | 03:46 |
Within the Paragraph tag you will
first see the GridView Control. Critical
| | 03:50 |
pieces that you must see are first of
all runat = "server". This guarantees
| | 03:55 |
that it's treated as a server-side
control. And then a number of other settings
| | 03:59 |
such as AutoGenerateColumns,
DataKeyNames and so on.
| | 04:03 |
There is a Columns element in the
middle each with something called
| | 04:06 |
asp:BoundField. Each instance of
the asp:BoundField control declares a
| | 04:11 |
particular column that will
be displayed in the GridView.
| | 04:14 |
Below the GridView you will see the
SqlDataSource, this is how you define the
| | 04:19 |
actual connection and I'm going to
modify the data source, in particular the
| | 04:23 |
Select command. Notice that the
Select command, which is shown right here,
| | 04:28 |
starts with SELECT [au_id] and so on.
| | 04:30 |
I am going to scroll sideways to the end.
I'll click right after the end of the
| | 04:34 |
SQL statement but within the quotes,
and I'll add an Order By clause and then
| | 04:39 |
in brackets I'll add au_lname and then
a closing bracket. You will notice in
| | 04:46 |
the generated code that all columns
are wrapped in these bracket characters.
| | 04:50 |
SQL does not require them but in a
condition where a name of the column matches
| | 04:55 |
a reserved SQL word, the brackets
ensure that this phrase is treated as the
| | 05:00 |
column or the table name.
| | 05:01 |
Now I'll save the changes and I'll
run the page again and you will see that
| | 05:06 |
this time the authors are displayed
in alphabetical order by last name.
| | 05:11 |
Finally, I'll remove one column, you
will see that the au_id is shown on the
| | 05:16 |
left and because that's a primary key
column you don't want to display it.
| | 05:20 |
So I'll close the browser and return
to the code and then I'll scroll back up
| | 05:25 |
the GridView and I'll remove au_id
from the list of columns. I'll select just
| | 05:31 |
that BoundField and press Delete.
I'll save with Ctrl+S and run the page
| | 05:36 |
without debugging again. And
now I'll see just the columns.
| | 05:40 |
Now in others videos in the chapter,
I'll show you how to affect the appearance
| | 05:44 |
of the GridView and also how to modify
the header text that appears at the top
| | 05:48 |
of each column.
| | 05:50 |
| | Collapse this transcript |
| Controlling GridView paging and appearance| 00:00 | The GridView control implements a
number of features that allow you to
| | 00:04 | customize the way your dynamic
data is presented on the screen.
| | 00:08 | For this demonstration, I'll use a
file from the dynamic data website named
| | 00:13 | AuthorsWithPaging.aspx and then click
the Design button at the bottom of the
| | 00:18 | Design View so you can see
it's beginning appearance.
| | 00:21 | In the beginning state of the file you
will see a GridView. The GridView is
| | 00:25 | displaying seven columns from the
server-side authors table. Now to configure
| | 00:30 | its behavior I'll click anywhere on
the GridView control. You should see the
| | 00:34 | tab appear above the GridView
control indicating the kind of control
| | 00:38 | asp:GridView and its ID GridView1.
| | 00:43 | Then at the top right corner of the
control you will see an icon with a right
| | 00:47 | pointing arrow. When you click on this
icon that opens a set of tasks relating
| | 00:52 | to the control. From there you can
configure the control's data source, refresh
| | 00:56 | its schema or the list of columns and
data types, edit its columns and enable
| | 01:01 | paging, sorting and other features.
| | 01:03 | I will click on Edit Columns. From
this screen you can add and remove columns
| | 01:08 | to the Grid control and you can
configure each column. I'll start with
| | 01:12 | au_lname, the author's last name. I'll
click on the item in the selected fields
| | 01:17 | list and then take a look at
its properties on the right.
| | 01:21 | If you scroll down to the Data Section
of the BoundField properties, you will
| | 01:25 | see the DataField property. This
value must match the name of the column as
| | 01:30 | it's known when it's retrieved from
the server-side database. That's how the
| | 01:33 | data is displayed in the control, but
other values in these properties can be
| | 01:38 | set arbitrarily. The HeaderText is one of these.
| | 01:41 | The HeaderText property determines
what the user sees at the top of each
| | 01:45 | column. I'll select the text and type
in instead Last Name. This is friendly
| | 01:51 | text, text that the user can read
directly. Within this properties list, each
| | 01:56 | time you make a change just press the
Tab key and that will save the change to
| | 02:00 | the underlying code.
| | 02:02 | You will see that the value you type
in is also reflected in the selected
| | 02:06 | field's column on the left. Next
I'll click on au_fname and I'll set its
| | 02:11 | HeaderText to First Name and press Tab
and then I'll go through and do the same
| | 02:19 | thing for each of the other columns.
| | 02:21 | For all the other columns I'm just
going to change the first character to an
| | 02:24 | uppercase character, making sure to
press the Tab key after each change. If you
| | 02:29 | forget to press the Tab key, in some conditions
Visual Web Developer won't save your changes.
| | 02:38 | After I have changed the HeaderText
for all of the columns, I'll click OK and
| | 02:42 | take a look at the display in Design
View. You should see that the names of the
| | 02:46 | columns are reflected in Design View now.
I'll save my changes with Ctrl+S and
| | 02:51 | then run the page without debugging
and you should see that the headers that
| | 02:57 | you selected are displayed correctly.
| | 02:59 | Now we'll close the browser and make
sure other changes. With the GridView
| | 03:03 | still selected I'll go back to the
Task list and this time I'll choose
| | 03:07 | AutoFormat. The AutoFormat selection
allows you to set a number of visual
| | 03:11 | properties all at the same time, with
some predefined schemes. You can select
| | 03:16 | Colorful, Classic, Simple and so on.
| | 03:19 | I will choose the Simple scheme,
which reflects a background color in the
| | 03:23 | header with a particular foreground
color and then alternating row colors, and
| | 03:28 | then I'll click OK. In Design View
you should immediately see the scheme
| | 03:32 | presented. You will see the same list
of columns you saw before but now when
| | 03:36 | you start the page in the browser you
will see that the alternating row colors
| | 03:40 | are implemented for you automatically.
| | 03:43 | Finally I'll show one other
capability of the grid control. I'll once again
| | 03:48 | make sure that I have selected the
control and now I'll go over to the
| | 03:52 | Properties View and I'll double click
the header of the Properties View to make
| | 03:55 | it a floating panel and I'll drag it
out and resize it so I can all of the
| | 04:00 | panels of the GridView.
| | 04:01 | One of the features of the GridView is
Automatic Paging. That is, the ability
| | 04:05 | to show only a certain numbers of
records at a time. This is extraordinarily
| | 04:09 | easy to set up. Go to the Paging
category in the Properties View and look for
| | 04:14 | the property AllowPaging and set it
to a value of True. Then go to the
| | 04:20 | PageSize, which will default to a
value of 10, and reduce it to 5. When you
| | 04:25 | type in the value of 5 and then press
the Tab key you should see that the Grid
| | 04:29 | View is shrinking down to show only 5
rows in the Design View in the background.
| | 04:34 | Next click the icon next to
PagerSettings. The Pager control is a set of
| | 04:39 | hyperlinks that are generated
automatically by the GridView as the user is
| | 04:43 | browsing through the data. By
default the pager settings mode is set to
| | 04:47 | Numeric, which results in page
numbers being displayed wherever you put the pager.
| | 04:53 | If you change the mode from Numeric
to one of the other modes, for example
| | 04:56 | NextPreviousFirstLast, you will see
that the numbers are replaced with caret
| | 05:02 | icons or you can also do a
combination of these settings, for example using
| | 05:06 | NumericFirstLast. You can also
position the pager by selecting the Position
| | 05:11 | property and setting it to values of
Bottom Top or TopAndBottom. I'll leave the
| | 05:16 | Position property set at
its initial value of Bottom.
| | 05:20 | Then I'll close the Properties View,
I'll press Ctrl+S to save my changes and
| | 05:25 | once again run the page. And the
result will be that I see a list of the page
| | 05:29 | numbers displayed below the GridView
in the footer region. There are many
| | 05:33 | other configurations that you can use
with the GridView control. Explore the
| | 05:38 | documentation and the properties list
to see what's available and how you might
| | 05:43 | be able to use this
control to display your data.
| | Collapse this transcript |
| Editing data with the GridView control| 00:00 | The GridView control combined with
the SqlDataSource control can be used to
| | 00:05 | create a very elegant editing
interface where the user sees data listed in an
| | 00:10 | HTML table and then can click a
hyperlink to open just the selected row for
| | 00:15 | editing. From there, you can then
allow the user to make changes to the data,
| | 00:19 | which will automatically be saved to
the server-side database. Most of the code
| | 00:23 | that you need for this is already
generated when you drag a GridView control
| | 00:27 | into a page within Visual Web Developer.
| | 00:30 | In this demonstration, I'll show you
how to modify the code to turn editing on
| | 00:35 | and then how to block editing of
particular columns. I'll work with the file
| | 00:40 | AuthorsWithEditing.aspx and then look
at the file in Design View. You'll see
| | 00:45 | that it has a version of the Authors
GridView, this time displaying just three
| | 00:49 | columns, the Last Name,
First Name and Phone Number.
| | 00:53 | First, I'll turn Editing on, on the
GridView control. I'll click on the
| | 00:57 | GridView control and then open the
list of available tasks and I'll select
| | 01:02 | Enable Editing. When I select that
option that changes a single property of the
| | 01:06 | GridView control. Then I'll save my
changes by pressing Ctrl+S and I'll run
| | 01:11 | the page in the browser.
| | 01:13 | When the GridView is displayed now, it
shows a new column with a hyperlink next
| | 01:18 | to each row. I'll go down to a
particular page, let's say page number 2 and
| | 01:23 | I'll click the Edit link for the first
row currently displayed. You'll see that
| | 01:27 | that results in opening up the row for
editing, displaying text input controls
| | 01:31 | for each of the columns.
| | 01:33 | I'll make certain changes to the
columns. For example, I'll change Ann's name
| | 01:37 | and add an "e" at the end and then I'll
click the Update link. That results in
| | 01:42 | saving the data all the way back to the
server-side database. I can prove that
| | 01:47 | the data was actually changed by
continuing to navigate around in the pages and
| | 01:51 | you'll see that the updated change
has taken or is currently displayed.
| | 01:55 | Now in certain conditions, you may want
to allow editing for one column but not others.
| | 02:00 | When you turn editing on for
the entire GridView, by default, all
| | 02:04 | columns are editable. You can then go
into individual bound fields and turn on
| | 02:09 | a property called ReadOnly.
| | 02:11 | When you set the ReadOnly property to
True for a particular bound field and
| | 02:15 | then you click the Edit link for a row,
the columns marked as ReadOnly will be
| | 02:19 | displayed as text rather than
displayed with an input control.
| | 02:22 | And then there are some changes
you'll need to make in the underlying
| | 02:25 | definition of the SqlDataSource object
to make it compatible with your changes
| | 02:30 | to the GridView. Close the browser and
return to Visual Web Developer and with
| | 02:35 | the GridView still selected I'll open
the list of available tasks and click Edit Columns.
| | 02:40 | Now, let's say that I want the user to
be able to edit the phone number, but
| | 02:44 | not the last name or first name. So
I'll click the Last Name field in the list
| | 02:48 | of Selected Fields and then I'll go
to the Behavior category and locate the
| | 02:52 | ReadOnly property and change it to True.
| | 02:55 | I'll do the same thing for the First
Name. I'll click on the field in the list
| | 02:59 | of Selected Fields. Locate the
ReadOnly property and set it to True and then
| | 03:04 | I'll click OK. I'll press Ctrl+S to
save my changes and then select Debug >
| | 03:09 | Start Without Debugging to run the page.
| | 03:12 | Now this time when I click the Edit link,
you'll see that only the phone number
| | 03:16 | is displayed as an input control. If
I cancel, my changes aren't saved.
| | 03:21 | But here is that problem that you'll run
into and I'll show you the solution in a
| | 03:24 | moment. I'll click the Edit link. I'll
make a small change to the phone number
| | 03:29 | and then click the Update link and
I'll see a big old ASP.NET error displayed
| | 03:34 | on the screen.
| | 03:35 | The problem that you're encountering is
shown down here. The message is Cannot
| | 03:40 | insert the value Null into column au_
lname. The problem that you're running
| | 03:44 | into is that the GridView control
passes in what's called a Null value or the
| | 03:49 | absence of a value into the Last Name
column. You can solve this problem by
| | 03:54 | modifying the structure of the Update
SQL statement that's being executed when
| | 03:59 | the page is updated.
| | 04:00 | I'll close the browser and return to
Visual Web Developer and then I'll look at
| | 04:05 | the page in Source view and I'll look
at it in full screen, so I can see as
| | 04:09 | much code as possible. I'll press Alt+
Shift+Enter. Now, I'll scroll down to the
| | 04:14 | SqlDataSource definition. The problem
is here in the UpdateCommand attribute.
| | 04:20 | The Update statement is expecting to
set the values of all of the columns in
| | 04:24 | the backend database table. But I'm
only passing in a value for the phone number.
| | 04:29 | So I'm going to reduce the SQL statement.
I'll get rid of the column value pair
| | 04:33 | for au_lname. I'll do the same thing
for au_fname and its trailing comma.
| | 04:39 | I'll leave the phone number in, but then
I'll place the cursor right before the
| | 04:42 | comma after the phone number. I'll
hold down the Shift key and then start
| | 04:46 | cursoring over to select as much of
the SQL statement as I need to delete and
| | 04:51 | I'll finish selecting text right before
the keyword WHERE. Then I'll press the Delete key.
| | 04:57 | Here is the remaining SQL statement.
Update authors. Set phone equal to the phone
| | 05:03 | parameter where the au_id column
equals the au_id parameter. So,
| | 05:08 | that's how the Update statement will
match the structure of the GridView.
| | 05:12 | I'm only going to be passing in that one
value. So I don't need to set up the SQL
| | 05:16 | statement to update more than that column.
| | 05:19 | Then I'll go to the UpdateParameters
section of the SqlDataSource definition
| | 05:24 | and I'll do the same thing, this time
for the parameters which are being filled
| | 05:27 | in automatically from the GridView.
I'll remove the au_lname and au_fname
| | 05:32 | parameters and also remove address,
city, state and zip. I'll leave the phone
| | 05:38 | and the Author ID, which are both needed.
| | 05:41 | Now, I'll save my changes and I'll
run the page in the browser once again,
| | 05:46 | selecting Debug > Start Without
Debugging. I'll click the Edit link.
| | 05:51 | Once again, I'm only able to edit the phone
number because I set the other columns
| | 05:55 | as ReadOnly. I'll make a change to the
Phone number. I'll change it to have a
| | 06:00 | trailing number of 1111. I'll click
the Update link and you'll see that the
| | 06:05 | data is successfully saved to the database
on the server and displayed in the updated page.
| | 06:11 | I can now page forward and back
through the data display and you'll see that
| | 06:14 | the data has been saved successfully
and is being displayed on the refreshed page.
| | 06:18 | So, to review the steps for
setting up an updatable GridView,
| | 06:22 | in Design View, you turn editing on by
selecting the task list and selecting Enable
| | 06:28 | Editing. Then you edit the columns.
Set ReadOnly to True for each column you
| | 06:33 | don't want the user to edit. Then go
into the Source View and modify the
| | 06:37 | SqlDataSource definition, modify the
SQL statement for updating the table
| | 06:42 | so it's only affecting the columns
that the user is allowed to edit and then
| | 06:46 | remove the parameters for those columns
that are ReadOnly as well. Then you'll
| | 06:50 | be allowing the user to modify the
data directly through the GridView with
| | 06:54 | minimal programming on your part.
| | Collapse this transcript |
| Presenting data with the DataList control| 00:00 | The ASP.NET Framework includes many
other visual controls that are data-aware.
| | 00:04 | They can be used to display data using
a format other than an HTML table. In
| | 00:10 | this demonstration, I'll show you how
to use a control called the DataList that
| | 00:14 | allows you to create a template for
how you want each item in a dataset to be displayed.
| | 00:18 | For this demonstration I'll use the
file Publishers.aspx. I'll open the file
| | 00:24 | and show you that it currently doesn't
have any data controls in it. There is
| | 00:27 | no SqlDataSource and there is no
GridView. I'll look at the file in Design
| | 00:32 | View. I'll place the cursor at the end
of the line that says "This page will
| | 00:36 | show a list of Publishers" and I'll
press Enter to create a new paragraph.
| | 00:40 | Then I'll go to the Database Explorer
and I'll drag in the publishers table
| | 00:45 | from the list of Tables and place it
within the paragraph. You'll see that that
| | 00:49 | creates both a GridView and an SqlDataSource.
| | 00:54 | For this demonstration I don't actually
need the GridView. So I'll click on it
| | 00:58 | and then press Delete. The purpose of
dragging in the table was to create that
| | 01:02 | SqlDataSource component that's
already populated with the required SQL
| | 01:07 | statements to get the data from the server.
| | 01:09 | Now, I'll take a look a generated
source code. You'll see that the
| | 01:14 | SqlDataSource component is created
within the visual presentation of the page.
| | 01:19 | This really isn't necessary. The
SqlDataSource component doesn't create any
| | 01:23 | visual output. It doesn't actually
generate any HTML. The only requirement is
| | 01:29 | that it must be placed within the
ASP.NET form that runs at the server.
| | 01:34 | So, I'm going to click on this little
tree icon to collapse the SqlDataSource
| | 01:39 | object. Then I'll click at the
beginning and drag down one line. Then I'll cut
| | 01:44 | it to the clipboard by pressing Ctrl+X.
Then I'll move the cursor below the
| | 01:49 | paragraph, but still within the form.
I'll place the cursor at the beginning of
| | 01:53 | the line and then I'll paste by pressing Ctrl+V.
| | 01:57 | You'll see that even though the
SqlDataSource element was collapsed when I cut
| | 02:02 | it to the clipboard, when I pasted in,
its code is still intact. I'll go back
| | 02:07 | up to the Paragraph tag and I'm just
reformatting the code a little bit to make
| | 02:11 | it a little bit easier to read. Then
I'll look in Design View again. So now the
| | 02:16 | SqlDataSource component, which again
doesn't generate any HTML, is placed
| | 02:21 | outside the visual presentation.
| | 02:23 | Now, I'm going to add a DataList
component. I'll go to the Toolbox, which I
| | 02:27 | can find through the tabbed interface
on the left, and I'll pin the Toolbox
| | 02:32 | panel by clicking the Pushpin icon to
make it stay on the screen. Now, I'll go
| | 02:37 | to the Data category and I'll
select the DataList component and I'll
| | 02:41 | click-and-drag it and I'll
drop it within the paragraph.
| | 02:45 | When the DataList component is first
dropped in, it doesn't have any output.
| | 02:49 | It's up to me to select a data source
and then to start creating the template
| | 02:54 | to describe how the list will present
its data. I'll go to the list of tasks
| | 02:58 | for the DataList component and I'll
pull down the list for Choose Data Source,
| | 03:03 | and you'll see that only one data
source is declared SqlDataSource1 and
| | 03:07 | I'll select it.
| | 03:09 | Visual Web Developer reacts by creating
a default template. It displays Labels
| | 03:14 | and Data for each column returned in
the data source. Let's take a look at the
| | 03:18 | code that was generated. I'll click
Source View and then press Alt+Shift+Enter
| | 03:23 | to look at the source code in Full Screen
and close the Output panel if necessary.
| | 03:29 | The DataList control is described
with a data source ID of SqlDatasource1.
| | 03:35 | That's how it's getting its data from
the server. Then within a nested item
| | 03:39 | template element, it describes how
the data will be displayed. The item
| | 03:43 | template can be a combination of
literal text plus ASP.NET server controls.
| | 03:49 | For each server control, you'll see a Text
property. Within the Text property, a
| | 03:55 | dynamic expression which consist of
the < character and % and a pound sign at
| | 04:00 | the beginning, which means that
this a data binding expression.
| | 04:04 | And then within the binding expression
you'll see a call to a function called
| | 04:07 | Eval. Then within that you pass in the
name of the column whose value you want
| | 04:12 | to present. So within the default
template, I have literal strings plus
| | 04:18 | instances of the ASP.NET Label control
for each column. I'm going to remove the
| | 04:23 | literal string, the Label control,
and the Break tag for the pub_id column.
| | 04:27 | I'll select those three lines and then
press Delete. I'll remove the literal
| | 04:31 | string pub_name and I'll also reduce
down to only one Break tag after the Label.
| | 04:37 | The result would be that at runtime ASP.
NET loops over the data that's returned
| | 04:42 | from the database and it will render one copy
of this template for each item in the dataset.
| | 04:48 | Now, I'll save my changes, go to the
menu and select Debug > Start Without
| | 04:53 | Debugging. You'll see when the page
is displayed that it shows the list of
| | 04:58 | Publishers. Notice that I never show
the user the values of the primary key
| | 05:03 | columns. These columns are used
internally to track data and join tables at
| | 05:07 | runtime. But they're values that the
user shouldn't have any interest in.
| | 05:12 | Now I'll make one another change to
the page. I'll close the browser. I'll go
| | 05:17 | back to the Design View. I'll click
into the original paragraph with the text
| | 05:21 | "This page will show a list of
Publishers". I'll click on the Paragraph tab to
| | 05:26 | select the entire element and press
Delete. I'll save my changes again.
| | 05:31 | I'll run the page by selecting Debug >
Start Without Debugging. There is my
| | 05:36 | completed page for now showing the
list of Publishers that my bookstore represents.
| | Collapse this transcript |
| Formatting data with binding expressions| 00:01 | When you present dynamic data on a
webpage using the GridView or the DataList
| | 00:05 | components, you can use formatting
expressions to format data such as numbers
| | 00:10 | and date time values. For this
demonstration, I'll use the file Titles.aspx
| | 00:16 | that's part of the chapter's Exercise
Files. Let's start off taking a look at
| | 00:20 | the page in Design View.
| | 00:22 | In this page there is a DataList
control that's bound to the SqlDataSource
| | 00:26 | component at the bottom of the page
and the SqlDataSource component is
| | 00:30 | retrieving data from the server
-side database's Titles table.
| | 00:34 | Now let's take a look at the source code.
You will see that this version of the
| | 00:38 | Item Template uses an ASP panel
wrapped around the set of labels. Each of the
| | 00:43 | labels is displaying a value from one
column of the table. The title, the price
| | 00:48 | and the publication date. Binding
expressions are being passed into the text
| | 00:52 | properties of each of the labels.
| | 00:54 | Now I'll run the page in the browser
so we can see the results so for.
| | 00:59 | So in the initial display we are seeing the
title of each item and then we are seeing
| | 01:03 | the price in raw numeric format and
also the data publication in raw date format.
| | 01:08 | In this first step, I'm going
to show you how to apply formatting
| | 01:13 | expressions in the binding
expressions that are displaying that data.
| | 01:16 | I will close the browser and I'll go
back to the page in Source View. I'll look
| | 01:22 | at the page in Full Screen pressing
Alt+Shift+Enter and now I'll place the
| | 01:27 | cursor inside the Eval function for
the price. The Eval function and other
| | 01:33 | function such as the Bind function
can take more than a single argument.
| | 01:37 | When you are passing the second argument
you are saying how you want to format the value.
| | 01:41 | Here is the syntax that you use. Put
in a comma and then a pair of quotes.
| | 01:47 | Within the quotes put in pair of curly
braces. Now you are going to pass in two
| | 01:53 | parts of the expression. The first
part indicates which item in the list you
| | 01:57 | want to format. A value of zero means
the item at index zero. In array terms
| | 02:03 | we are talking about the first item in
the array being passed in. Then put in a
| | 02:07 | colon and then you are going to
indicate what kind of formatting you want.
| | 02:12 | For numeric values, a string of f2
means that you wanted to be treated as a
| | 02:17 | floating number with two characters
after the decimal. So again the zero before
| | 02:22 | the colon means the first item in the
list, using zero based array offsets.
| | 02:27 | That means item zero or item number one
in human terms. And then after that is
| | 02:32 | the string that indicates how
you want to format the value.
| | 02:35 | I will save my changes and press Ctrl+
F5 and then show you result that the
| | 02:41 | numeric value has been formatted
with two characters after the decimal
| | 02:45 | regardless of whether the
real data has those values.
| | 02:48 | So for example a raw number of 20 is
displayed as 20.00. So to turn that value
| | 02:55 | into a currency value, I'll go back to
the code, I'll place the cursor inside
| | 03:00 | the quotes but before the curly brace,
and I'll just put in a currency symbol,
| | 03:04 | the $ sign. I'll save my changes and
run the page again and there is the
| | 03:11 | currency value fully formatted.
| | 03:13 | Now let's try a similar thing with
the date time value, the pubdate.
| | 03:17 | The pubdateLabel has a binding
expression with the Eval function and it's
| | 03:21 | outputting the value of the pubdate
column for the current data item as a
| | 03:24 | literal string.
| | 03:26 | Once again, I'll place the cursor
inside the Eval function after the name of
| | 03:30 | the column that I'm outputting and
I'll add a comma then quote, braces and a
| | 03:35 | closed quote. As with the price I'll be
evaluating the value of the first item
| | 03:40 | in the list, the pubdate. So I'll put
in a value of zero, a colon and for this
| | 03:45 | first example I'll use an uppercase D.
The uppercase D means a long date and
| | 03:50 | you can see the ASP.NET documentation
for other known formats. I'll save my
| | 03:56 | change and I'll run the page and you
will see that the date is now displayed as
| | 04:01 | a full date including the day of
the week, Wednesday, January 01, 2003.
| | 04:06 | Now that's not really what I wanted;
I wanted the short version of the date.
| | 04:10 | So I'll close the browser. I'll return
to the code and I'll change from an
| | 04:14 | uppercase D to a lowercase D, which in
ASP.NET means a short date. I'll run the
| | 04:21 | page again and now the dynamic dates
are displayed in Month-Day-Year format.
| | 04:26 | Now I'm going to apply some visual
formatting to the rest of the template.
| | 04:30 | I'll close the browser and return to the
code. First I'll handle the label that's
| | 04:34 | displaying the title. This is the
only time that this label is going to be
| | 04:38 | displayed. So this is a circumstance
where I'm going to use the properties of
| | 04:42 | the Label control. I'll set Font-Bold="true"
and I'll set Font-Italic to true
| | 04:51 | as well. I'll save and run the page
pressing Ctrl+S and then Ctrl+F5 and now
| | 05:01 | I'm seeing the titles appear as Bold
and Italic. Now the prices are output as
| | 05:07 | simple literal strings.
| | 05:08 | So here I'll just use standard HTML
mark up. I'll wrap each of the literal
| | 05:13 | strings with the strong element. I'll
add that to Price and then I'll do the
| | 05:19 | same thing for Published. I'll save
the change and once again, I'll run the page
| | 05:24 | pressing Ctrl+F5 and now I'm seeing
a display that makes a little more visual sense.
| | 05:29 | If you want to create additional
formatting you could then create a Cascading
| | 05:33 | Style Sheet class, say it with a class
name title div, and then you could apply
| | 05:38 | that class to the ASP Panel
container that's wrapping all of the content.
| | 05:43 | Another thing worth knowing about is
that you can add something called an
| | 05:46 | AlternatingItemTemplate.
The AlternatingItemTemplate, which is also wrapped
| | 05:50 | inside the DataList, determines how
every other presentation of data is displayed.
| | 05:55 | So you could create an AlternatingItemTemplate
that repeats this output, but
| | 05:59 | for example sets a background color on
that panel. So that's a look at how
| | 06:03 | to apply formatting to dynamic data
that's retrieved from the server. There are
| | 06:07 | a lot of other options than the simple
formatting expressions I showed here and
| | 06:12 | again, if you want some more options
take a look at the ASP.NET documentation
| | 06:16 | for all of the variations in
formatting strings that are available.
| | Collapse this transcript |
|
|
8. Creating a Data Entry SystemUsing the DetailsView control| 00:01 |
Dynamic websites frequently need a
user interface that allows the user modify
| | 00:05 |
the data in the server-side database.
Data entry systems on websitea typically
| | 00:10 |
consist of multiple pages. A list
page which displays the key columns of a
| | 00:15 |
particular database, table links from
that list page to an insert form which
| | 00:20 |
allow the user to add a new record to
the database table, and an update page
| | 00:24 |
which presents the details of a
selected record and allows the user to make the
| | 00:28 |
changes to that data.
| | 00:29 |
I am going to start in this video by
showing you how to use the control called
| | 00:33 |
the DetailsView. It's similar to
a GridView in that it bounds to an
| | 00:37 |
SqlDataSource which in turn is making
queries to a server-side database table,
| | 00:43 |
but it's designed to show one record
at a time. I'll start with an existing website.
| | 00:48 |
Go to the menu and select File > Open
Web Site and select the folder DataEntry
| | 00:54 |
and click Open and then start with the
file AuthorDetail.aspx. I'll look at the
| | 01:00 |
page in Design view. The page
currently displays a banner and a set of
| | 01:04 |
hyperlinks that are a part of server-
side control called Header and otherwise
| | 01:08 |
has just blank space.
| | 01:10 |
Before I use the DetailsView, I want to
create an SqlDataSource that points to
| | 01:15 |
the particular table I want the user to
edit. I'll go to the Database Explorer
| | 01:20 |
and if you are following along and you
don't see your list of Tables just open
| | 01:24 |
up the Database Connection and then
click the Refresh button if necessary.
| | 01:28 |
You should see the list of tables there.
Then I'll locate the table I want the user
| | 01:32 |
to be able to modify, authors, and
I'll drag and drop the table and place it
| | 01:37 |
into the blank space in the page.
| | 01:39 |
When you drag the table into the page
you get both the SqlDataSource at the
| | 01:43 |
bottom but also the GridView. I'm
not going to use the GridView in this
| | 01:48 |
exercise. So I'll press the Delete key.
That will delete the GridView and I'll
| | 01:52 |
be left with the SqlDataSource. Then
I'll press the Enter key and that will
| | 01:56 |
create the paragraph above the
SqlDataSource, a place where I can put my new
| | 02:01 |
DetailsView control.
| | 02:02 |
The DetailsView can be dragged in
from the Toolbox panel. I'll go to the
| | 02:07 |
Toolbox tab on the left. I'll move the
cursor over the tab to cause the panel
| | 02:11 |
to slide out and then I'll click to
the Pushpin icon to pin the Toolbox panel
| | 02:16 |
and make it possible to see both the
Toolbox and the page in Design View.
| | 02:20 |
Now, in the Toolbox panel open up your
Data category. If you are only seeing
| | 02:24 |
the Standard category open, close it
and then click the + icon next to Data and
| | 02:29 |
then locate the DetailsView control.
| | 02:32 |
Click and drag DetailsView and drop
it inside the empty paragraph. When you
| | 02:37 |
initially create the DetailsView it
won't be bound to a data source. So with
| | 02:42 |
the Task list open which it should be
automatically, go to Choose Data Source
| | 02:47 |
open the list, select SqlDataSource1.
The data source that was just created and
| | 02:53 |
you should see the DetailsView control
automatically display all of the columns
| | 02:57 |
from the database.
| | 02:58 |
If you don't see the columns try
clicking the Refresh Schema link that you will
| | 03:02 |
see on the Task list and then you
should definitely see the controls appear.
| | 03:06 |
Now save your changes by pressing Ctrl+
S then go to the menu and select Debug >
| | 03:12 |
Start Without Debugging. By default
the DetailsView will show the details of
| | 03:16 |
the first record in the data set.
| | 03:19 |
You will notice some visual problems.
First of all in the left column where the
| | 03:22 |
labels appear, the labels are the
same as the actual database column names.
| | 03:27 |
Just as with the GridView you need to
modify these values yourself. You will
| | 03:31 |
also notice that the right column,
which displayed the data, is word wrapping.
| | 03:36 |
This is something you can also
fix just through setting properties.
| | 03:39 |
So close the browser and we'll make
those changes. First, I'm going to apply
| | 03:44 |
some simple visual formatting. Just
as with the GridView, you can use the
| | 03:48 |
AutoFormat feature, which applies a
set of connected properties to present a
| | 03:53 |
particular look and feel. Click the
Smart Task icon to open the Task list and
| | 03:58 |
then select AutoFormat. You will see
a number of formats presented, you can
| | 04:02 |
click through and select the one that
you like. I'm going to choose this Simple
| | 04:07 |
format and click OK.
| | 04:09 |
Now I'll save my changes and once again
run the page and you will see that the
| | 04:15 |
formatting is presented but once again
I still need to fix my headers and the
| | 04:19 |
word wrapping. So I'll close the
browser. You can fix the Header Text either
| | 04:23 |
through Visual Web Developer's visual
interface or in code. Just as with the
| | 04:28 |
GridView, if you want to do it through
Visual Web Developer's interface, go to
| | 04:32 |
the Task list and select Edit Fields.
Then in the selected Fields list click on
| | 04:37 |
each column that you want to modify
locate the HeaderText value and update it.
| | 04:42 |
I will type in Author ID. Notice that
when I press the Tab key that the new
| | 04:47 |
values reflected in the Field list. If
you prefer you can work in source code.
| | 04:53 |
I'll click OK to save those changes.
Then I'll click anywhere on the page to
| | 04:57 |
clear the Task list and click
the Source button. Then I'll press
| | 05:01 |
Alt+Shift+Enter to look at the page in
Full Screen. Then I'll navigate to the
| | 05:05 |
BoundField List. I'll locate each of
the HeaderText properties and modify it.
| | 05:10 |
I'll change au_lname to Last Name. I'll
change au_fname. To delete the text I'm
| | 05:18 |
placing the cursor at the end of the
string and then pressing Ctrl+Backspace.
| | 05:23 |
Then I'll type in First Name and then
for each of the other columns I'll just
| | 05:27 |
capitalize the initial character.
| | 05:29 |
I will run the page again and I'll
show you that everything seems to be
| | 05:37 |
working. Now I'm going to deal with
the word wrapping issue. I'll close the
| | 05:43 |
browser and then go into the Design
View, I'll open the Task List and once
| | 05:47 |
again go to Edit Fields. For each
column that I want to prevent from word
| | 05:51 |
wrapping I'll click on the column in
the Selected fields list then I'll scroll
| | 05:56 |
down to the bottom to the Styles section.
| | 05:58 |
I will go to the ItemStyle, scroll
down a little bit further and then I'll
| | 06:03 |
change the Wrap property from True to
False. And I'll do this on each of the
| | 06:08 |
columns that I want to prevent from
wrapping. Notice that as you move through
| | 06:13 |
the columns the BoundField properties
list doesn't scroll. This makes it very
| | 06:18 |
easy to go through and
handle one field at a time.
| | 06:21 |
I will click OK and then you can also
deal with the word wrapping in the labels
| | 06:32 |
by going into the Header Properties,
but a simpler approach is simply to make
| | 06:36 |
the whole control a little bit wider,
so that there is plenty of space for
| | 06:39 |
those labels. So I'll drag that out to
a width of 170 pixels or thereabout,
| | 06:45 |
you don't have to be exact. Then I'll
press Ctrl+S and Ctrl+F5 to run the page again.
| | 06:50 |
Now I'm seeing that the data isn't word
wrapping. If you are still seeing word
| | 06:54 |
wrapping in the labels, go back to
Edit Fields. Go to the fields that have
| | 06:59 |
spaces in them, go to HeaderStyle and
change the Wrap property to False.
| | 07:05 |
I'll only do this on the columns where the
HeaderText has a space in the middle,
| | 07:10 |
Author ID, First Name and Last Name.
| | 07:13 |
I will click OK. Press Ctrl+S to
save, Ctrl+F5 to run and now when the
| | 07:21 |
DetailsView is displayed on the screen
nothing is word wrapping and the labels
| | 07:25 |
and the data are displaying cleanly.
So that's how you add a DetailsView
| | 07:29 |
control to a page and control
its formatting and presentation.
| | 07:33 |
| | Collapse this transcript |
| Inserting data with the DetailsView control| 00:00 |
After creating a page and adding a
DetailsView control to it that's bound to an
| | 00:05 |
SQL data source, and after applying
whatever formatting is needed, you can then
| | 00:09 |
use the page to create the Insert form
that automatically receives data from
| | 00:13 |
the user and passes that data back to
the server-side database using an SQL statement.
| | 00:19 |
For this demonstration, I'll use the
file AuthorInsert.aspx. Open the file now
| | 00:26 |
and look at the page in Design view.
You will see that it already has a
| | 00:29 |
DetailsView control and when you run
the page in the browser, which I'll do by
| | 00:34 |
selecting Debug > Start Without
Debugging, you will see that it's displaying
| | 00:38 |
the first row of the dataset.
| | 00:39 |
I will close the browser and then make
some changes to the page to turn this
| | 00:45 |
into an insert form that the user can
type values into. First, I'll modify the
| | 00:50 |
header. I'll select the header control
in Design view, then go to Source view.
| | 00:55 |
By first selecting the item in Design,
and then going to Source, it results in
| | 00:59 |
selecting the matching code
when you get to Source view.
| | 01:02 |
Then I'll go to full screen, so that
I can see as much code as possible and
| | 01:06 |
close the Output panel if necessary.
And I'll change the heading attribute of
| | 01:11 |
the Header control from Author Detail
to Insert Author. Then I'll go back to Design view.
| | 01:18 |
Now I'll go to the control and I'm
going to turn on insert capability.
| | 01:22 |
I'll click on the control, then click the
Smart Tasks icon to open the task list and
| | 01:27 |
I'll select Enable Inserting. When you
select the Enable Inserting option,
| | 01:32 |
you will see a new link appears at the
bottom of the form labeled New. Save your change,
| | 01:36 |
pressing Control+S and
then run the page in the browser.
| | 01:41 |
When you simply turn the insert
functionality on, the control automatically
| | 01:45 |
adds the New link at the bottom. When
you click the link, you will see that the
| | 01:49 |
page is represented this time only
presenting the non-primary key columns.
| | 01:54 |
Notice that the author ID is not
present now, because that's the value that
| | 01:59 |
will be populated by the database when
a new record is inserted. The user can
| | 02:03 |
now type values in.
| | 02:04 |
I will type in the last name of
Aardvark, our first name of Alfred and then
| | 02:11 |
some dummy data for the rest. Make sure
that you follow the basic rules of the
| | 02:15 |
database that is if you don't type in
values that are too long for the back-end
| | 02:19 |
database columns, and that you do
type in a value for each column.
| | 02:23 |
So I'll type in an address of 123 Main
St., a city of Smallville, a state of
| | 02:29 |
KS, make sure you only type in two
characters here and then a numeric zip code
| | 02:34 |
of five numbers. Then I'll click
the Insert link, watch what happens.
| | 02:39 |
I will come back to the display of
the data, but because I haven't done
| | 02:43 |
anything to tell the Forms view which
record to display, it's displaying still
| | 02:47 |
the first item in the database. But
to ensure that that actually worked,
| | 02:53 |
I'll close the browser, I'll go out of
full screen by clicking the Full Screen
| | 02:57 |
button up at the top, I'll go to the
Database Explorer, to the Authors table,
| | 03:02 |
right-click on Authors and select Show
Table Data and then I'll scroll down to
| | 03:08 |
the bottom of the table and show you
that the data was successfully inserted
| | 03:12 |
into the database table.
| | 03:14 |
So how did all that happen? How was the
DetailsView control passing the data to
| | 03:19 |
the data source on the back-end? Well
let's take a look at the Source view.
| | 03:22 |
I'll go into Source view and then
select View > Full Screen and close the
| | 03:27 |
Output view. When I connected the
DetailsView to the SQL data source, which I
| | 03:33 |
did through the data source ID, that
told the DetailsView that when it was in
| | 03:37 |
Insert mode it should use elements of
that data source to actually modify the
| | 03:42 |
data in the server.
| | 03:44 |
In the SQL data source control, which
is down toward the bottom of the code,
| | 03:48 |
right down here, there is already an
Insert command that was created by Visual
| | 03:53 |
Web Developer when I dragged the table
into the page. You will see that it has
| | 03:57 |
an Insert statement that's well formed
and in the Insert statement, there is a
| | 04:01 |
list of the columns that need to
be inserted, the table name and also
| | 04:06 |
parameters which are represented by
the @ character at the beginning of the string.
| | 04:10 |
Then a little further down, a set of
insert parameters that define the names
| | 04:15 |
and data types of the values that need
to be passed in. The DetailsView already
| | 04:19 |
knows how to match all these codes
together, how to use the Insert statement
| | 04:23 |
that's modeled in the Insert Command
attribute and how to pass the values into
| | 04:27 |
the parameters from the DetailsView controls.
| | 04:31 |
But you will notice right now if you
run the page again, that the page is
| | 04:34 |
designed to stand on its own, rather
than being navigated to from a list
| | 04:38 |
control. So I'm going to make one
change in the page to conclude this
| | 04:41 |
demonstration. I'll go back to Design
view and select the control. I'll leave
| | 04:46 |
Full Screen view so I can see all of my
panels, I'll go to the Properties view
| | 04:50 |
and double-click it to make it float
and then I'll move and resize it, so I can
| | 04:55 |
see more of the properties information.
| | 04:57 |
Then I'll locate a property called
DefaultMode. The DetailsView control's
| | 05:02 |
DefaultMode can be set to one of
these values: ReadOnly, which it set to
| | 05:07 |
automatically when you drag it into the
page, Edit and Insert. If you want this
| | 05:12 |
to be a dedicated insert form page,
just set the DefaultMode from ReadOnly to
| | 05:18 |
Insert and you'll immediately see in
Design view in the background that the
| | 05:22 |
DetailsView control now presents
the form with the text input controls.
| | 05:26 |
Now let's test the page again. I'll
press Ctrl+S to save and run the page
| | 05:31 |
without debugging. Once again, I'll
type in some values. I'll type in the last
| | 05:37 |
name once again of Aardvark, this
time with another value, so I can see the
| | 05:40 |
difference between the first and then
I'll type in some other values. This time
| | 05:47 |
when I click the Insert link,
instead of going back to the ReadOnly
| | 05:50 |
presentation where I'm seeing the first
record in the data set, I come back now
| | 05:54 |
to the actual data entry form and
I can start adding another record.
| | 05:58 |
Then I'll once again, ensure that the
data is actually getting to the database
| | 06:02 |
table, I'll go to the Database Explorer,
locate the table authors, right-click
| | 06:07 |
and select Show Table Data, scroll down
to the bottom, and show that the record
| | 06:12 |
was in fact, added. So that's how you
create a stand-alone Insert Form page.
| | 06:17 |
You add the Details form, you enable
the insert architecture and then you set
| | 06:21 |
the default mode to Insert.
| | 06:23 |
Now in another video, I'll show how to
take this page and a list page and bind
| | 06:27 |
them together, so that your data entry
workflow is in uninterrupted cycle going
| | 06:32 |
from list control to insert page and back again.
| | 06:36 |
| | Collapse this transcript |
| Redirecting page requests| 00:01 | In other videos in this chapter, I
have described how to use the DetailsView
| | 00:04 | control to present a data entry
form and then how to insert data into a
| | 00:09 | server-side database from data passed
into the control by the user. Now,
| | 00:14 | I'm going to describe how to bind together
a list page, such as the Authors.aspx
| | 00:19 | page I'm showing on the screen, with
the Insert Form so that the user can link
| | 00:23 | from the list page to the form and
then return to the list page when
| | 00:28 | they finish their task.
| | 00:29 | I will start in Authors.aspx. This
file currently shows a list of existing data.
| | 00:35 | I'm going to create a simple
hyperlink that takes the user to the
| | 00:39 | AuthorInsert page. I'll click right
after the table, clicking to the right of
| | 00:43 | the control and then I'll press
Enter to create a new paragraph and
| | 00:47 | I'll press Enter one more time to push the
SQLDataSource down a line and then click above
| | 00:52 | the SQLDataSource into
the now empty paragraph.
| | 00:55 | Now I'll go to the Toolbar panel.
I'll move the cursor over the tab and then
| | 01:00 | I'll pin the Toolbox and then I'll
locate the Hyperlink control, which will be
| | 01:04 | found in the standard category of the
Toolbox. Then I'll click and drag the
| | 01:09 | hyperlink and drop it into the paragraph.
An ASP hyperlink simply generates an
| | 01:15 | anchor tag and you set its values, that
is the text or image it displays and
| | 01:20 | the URL to which the user will navigate,
through the control's properties.
| | 01:23 | With that selected, I'll go to the
Properties panel, I'll double-click on the
| | 01:28 | Properties panel header to make it
float and then I'll drag it out, so I can
| | 01:32 | see the properties more easily.
Notice that the default text is Hyperlink.
| | 01:37 | I'll change that to Add New Author and when
I press Enter or Tab, I'll see that new text
| | 01:43 | reflected in the Design view. Now
I'll indicate which page I want the user
| | 01:47 | to navigate to. I'll go to the
NavigateURL property and I'll click into the
| | 01:51 | text input next to the name.
| | 01:54 | Notice I then see a triple dot button,
which allows me to browse for a target page.
| | 01:58 | I'll click the button and I'll
select the file, AuthorInsert.aspx.
| | 02:04 | Then I'll click OK. Notice that Visual Web
Developer uses the syntax starting with
| | 02:08 | the tilde character which stands for
the Root folder of the website, then the
| | 02:12 | slash and then the name of the page.
| | 02:14 | So now, I'll test my hyperlink. I'll
press Control+S to save the file and
| | 02:19 | Control+F5 to run it in the browser.
When the Authors page appears, it shows
| | 02:25 | the new link. I'll move the cursor over
the link and click and I'm taken to the
| | 02:29 | Insert page. Now I'll describe how to
handle navigating from the insert form
| | 02:34 | back to the list page. I'll close
the browser and then switch to the file
| | 02:38 | AuthorInsert.aspx. This is the same
AuthorInsert.aspx that I used in another
| | 02:44 | video of this chapter.
| | 02:46 | If you didn't work through the previous
video that described how to create the
| | 02:49 | insert form, you'll want to do that first
before going through these next steps.
| | 02:54 | The insert form in its current state
uses a DetailsView to present text input
| | 02:59 | controls for each column. The user
types values into the column and then clicks
| | 03:03 | the Insert link. By default, the page
simply reloads. I'm going to handle an
| | 03:08 | event that occurs after the data has
been inserted into the database and
| | 03:13 | I'll react to that event by redirecting
the browser back to the list of data.
| | 03:19 | This page was originally created with
a code file. The name of the code file
| | 03:23 | is AuthorInsert.aspx.cs. I'll go to
that file and I'll add a new function.
| | 03:30 | I'm doing this work in C#. If you are
doing your own work in Visual Basic,
| | 03:34 | you will need to translate this code into
the appropriate syntax but the basic
| | 03:38 | architecture is the same.
| | 03:40 | I will create a function with a
protected access modifier and then a return
| | 03:46 | type of void. I'll name the function
DetailView_ItemInsert. I'm going to press
| | 03:54 | Alt+Shift+Enter to open to Full Screen
so I can see as much code as possible
| | 03:58 | and then I'll scroll back over so I can
see the beginning of the function. Now,
| | 04:01 | I'll complete the function signature.
I'll put it in an opening parenthesis and
| | 04:06 | then the first item that will be
passed in will be an object, which I'll name sender.
| | 04:11 | In an event handler function
like this, the sender argument is a
| | 04:15 | reference to the object that actually
generated the event like the DetailView.
| | 04:20 | Then I'll pass in something known as an
event object. The event object contains
| | 04:25 | information about the event that just
occurred and in this particular event
| | 04:29 | that I'll be working with, which is
the item inserted event, the data type of
| | 04:33 | the event object is
DetailsViewInsertedEventArgs. So I'll put in the data type,
| | 04:38 | DetailsViewInsertedEventArgs, and then
I'll set the name of the event object as
| | 04:45 | simply e for event.
| | 04:47 | Now put in the pair of braces. When
this event occurs, the event object will
| | 04:52 | have a property called affected rows.
It's a numeric property and if the insert
| | 04:57 | statement succeeded, it will have a
value of 1. So I'll ask the question,
| | 05:02 | if e.Affectedrows == 1. This means
if one row is affected in the database,
| | 05:11 | and then I'm going to take that as a
condition of success. I'll put in a pair
| | 05:15 | of braces and within the braces, I'll
respond to that condition by calling this code,
| | 05:19 | Response.Redirect, and I'll pass
in the location of the file I want the
| | 05:25 | user to go to, Authors.aspx.
| | 05:29 | Notice that I'm ending the statement
with the semicolon because I'm working in C#.
| | 05:33 | Now to make this function
happen, I'm going to select and then copy
| | 05:37 | just the name of the function to the
clipboard. Then I'll go back to the page
| | 05:43 | AuthorInsert.aspx and I'll look at this
file in Source View. I'll scroll up to
| | 05:49 | the DetailsView control's begin tag
and place the cursor right inside
| | 05:54 | the closing angle bracket.
| | 05:55 | I will press Enter and then I'll put in
an event handler attribute, which looks
| | 06:00 | like this, OnItemInserted. This is the
name of the attribute which causes the
| | 06:07 | function to be called when this event
occurs. I'll put in the equals and the
| | 06:11 | quote and then I'll press Ctrl+V to
paste in the name of the function and then
| | 06:16 | close the statement with the closing quote.
| | 06:19 | Notice that I don't have to put in
the parenthesis or actually call the
| | 06:22 | function. The DetailsView object will
call the function for me and it will call
| | 06:27 | it using the signature or the number
and data types of the arguments that I defined.
| | 06:31 | I'll save all my changes by
selecting File > Save All. Then I'll test
| | 06:36 | the page. I'll select Debug > Start Without
Debugging and I'm going to type in some values.
| | 06:49 | When I click the Insert link, the data
is inserted into the database and as you
| | 06:53 | can see on the screen, the new data has
been successfully added. Now I'll also
| | 06:58 | put in code to handle the event that
occurs when the user clicks the Cancel link.
| | 07:02 | I'll return back to the file
AuthorInsert.aspx.cs and I'll move the
| | 07:09 | cursor down below the existing
functions and press Enter. When the user clicks
| | 07:13 | either of the links, another
event called ItemCommand occurs.
| | 07:17 | As before, I'll create a new function
starting with protected void and I'll
| | 07:22 | name this function DetailView_
ItemCommand. As before the first argument will be
| | 07:29 | an object which I'll name Sender and
the event object passed in, it's the
| | 07:34 | second argument, this
time will have a data type of
| | 07:36 | DetailsViewCommandEventArgs. I'll select
the appropriate type and give it a name of e.
| | 07:42 | Then put in a pair of braces. Within
the braces, I'm going to ask which link
| | 07:47 | was clicked and specifically I'll
check whether the user clicked the Cancel link
| | 07:51 | using this syntax. if e.CommandName
== "Cancel". Then I'll put in a pair
| | 08:02 | of braces and within the conditional
clause, I'll once again use the same
| | 08:06 | redirect command. I'll just copy and
paste it from the previous function.
| | 08:11 | I'll select the code, Response.
RedirectAuthors.aspx, press Ctrl+C to copy,
| | 08:17 | click into my new conditional
clause and press Ctrl+V to paste.
| | 08:21 | Now as before, I'll select and copy
the name of the function that I just
| | 08:25 | created. I'll save the changes to
this file by pressing Ctrl+S. I'll return
| | 08:31 | back to AuthorInsert.aspx and I'll add
another event handler attribute.
| | 08:36 | This one will be OnItemCommand. I'll start
off by typing On, then press Ctrl+Space
| | 08:42 | to bring up a list of events and the
I'll keep on typing until I find the event
| | 08:46 | I'm looking for, OnItemCommand. Then
I'll put in the equals character that auto
| | 08:51 | completes the name of the attribute,
put in the quote, press Ctrl+V to paste
| | 08:57 | and put in the closing quote.
| | 08:58 | Once again, I'm simply naming the
function that I want to be called when the
| | 09:02 | event occurs. I'll save my changes,
I'll return back to the list page and test
| | 09:07 | the whole thing. I'll run the list page,
Authors.aspx, I'll click Add New Author
| | 09:13 | and this time I'll click the Cancel
link and that takes me back to the author list.
| | 09:18 | So now I have a complete system for
adding new data. The user clicks the Add
| | 09:23 | New Author link from the list; that
takes them to the form. If they type values
| | 09:27 | into the form and click Insert, that
adds the data to the server-side database
| | 09:31 | and returns to the list, or if they
click the Cancel link, they return to the list
| | 09:35 | without inserting the data
into the server-side database.
| | Collapse this transcript |
| Creating an update page| 00:01 |
Websites with data entry systems can
also use update forms. An Update Form
| | 00:06 |
queries the database on the server,
filtering the data to retrieve just a
| | 00:10 |
single record, presents that data in a form,
in this case presented with the
| | 00:15 |
DetailsView control, and then when
the user has filled in the new data and
| | 00:19 |
clicked the appropriate link, the new data
is sent back to the server in an update statement.
| | 00:24 |
You can also integrate update forms
with the rest of the data entry system by
| | 00:28 |
linking to the form from a list page.
For this demonstration I'll be working
| | 00:32 |
with the file AuthorUpdate.aspx. It
begins where another video left off using a
| | 00:38 |
DetailsView control, which is
currently configured for inserting data.
| | 00:43 |
I'll start by clicking on the control
and opening its smart tasks list.
| | 00:47 |
Now I'll disable Inserting and then
instead I'll select the option Enable
| | 00:52 |
Editing. Then with the controls
still selected I'll press F4 to go to the
| | 00:57 |
Properties view. In the Properties
view, which I configured as a floating
| | 01:01 |
panel, I'll go to the DefaultMode
property and change it from Insert to Edit.
| | 01:07 |
Notice that the default appearance
of the form changes. Now it shows the
| | 01:11 |
primary key, but as a read only
value only and also displays links at the
| | 01:15 |
bottom for updating and canceling the
data. The next step is to modify the
| | 01:20 |
SqlDataSource component so that it
retrieves only one record from the
| | 01:25 |
server-side database and filters for
that record based on a primary key value.
| | 01:30 |
I'll close the Properties view and
then look at the file in Source view.
| | 01:33 |
I am going to go down to the
declaration of the of the SqlDataSource component.
| | 01:39 |
I'll press Alt+Shift+Enter to go into
Full Screen mode and then I'll take a
| | 01:43 |
look at the code for the Select command.
The Select command is the command that
| | 01:48 |
retrieves data from the database on
the server. The default select command
| | 01:52 |
that's created when you drag a table
into a page, selects all the data from the table.
| | 01:57 |
In this case all of the data is being
retrieved from the author's table.
| | 02:01 |
I'll place the cursor at the end of the SQL
statement and add a filtering expression
| | 02:06 |
Where and then the name of the column
au_id wrapped in brackets. And then in
| | 02:12 |
equals operator and the name of a
parameter starting with the @ character and
| | 02:17 |
then au_id.
| | 02:19 |
So I have created a filtering clause
as part of the select statement. Now I
| | 02:24 |
need to tell the SqlDataSource
object where to get the value for that
| | 02:28 |
parameter. To do that I'll place the
cursor after the begin tag and before the
| | 02:33 |
existing parameters. In fact, I can
delete some of these parameters. The Delete
| | 02:38 |
and Insert parameters won't be used in
this page at any point. I'll be using
| | 02:42 |
the UpdateParameter. So I'll
leave those in place. Then above the
| | 02:45 |
UpdateParameters, I'll create a new set
of parameters called SelectParameters.
| | 02:49 |
I will type in the less than character
and then choose select parameters from
| | 02:54 |
the list, then put in the closing tag
character and you will see Visual Web
| | 02:59 |
Developer completes the tag with an
end tag. I'll press Enter a couple of times.
| | 03:04 |
Next, I need to indicate where the
value of that parameter will come from.
| | 03:08 |
I'll start with asp: and then I'll select
a QueryStringParamter. This means that
| | 03:14 |
I'll be getting the value from a
parameter passed in as part of the URL of the
| | 03:18 |
page. I'll select asp:
QueryStringParamter. Then I'll set the name attribute to
| | 03:24 |
match the name of the attribute in
my SQL statement. Name = "au_id".
| | 03:32 |
Next, I need to tell the command what
the name of the QueryStringParamter will
| | 03:36 |
be what's passed in with the URL.
So I'll add the following property.
| | 03:40 |
QueryStringField = au_id. Now the
only reason I know that's the name of the
| | 03:47 |
parameter is because I'm going to be
creating it in the last step of the exercise.
| | 03:51 |
And finally, I add the Type attribute,
which is used to indicate what the
| | 03:55 |
implied data type of the value is. And
I'll put in Int32 matching the data type
| | 04:01 |
that's used in other parameters for
the same column. And then I'll close the
| | 04:05 |
tag with slash and the greater than.
| | 04:07 |
So I have modified the select command
to include the Where clause, I have used
| | 04:12 |
a parameter for the filter value and
then I have filled in the parameter from a
| | 04:16 |
value passed in with the URL, known
here as the QueryStringParamter. I'll save
| | 04:21 |
and test the page.
| | 04:22 |
When I first run the page, it shows up
with no data. That's because when I run
| | 04:26 |
the page, the URL does not include the
QueryStringParamter that I'm requesting.
| | 04:31 |
I'll place the cursor in the web
browsers URL field and then at the end of the
| | 04:36 |
page, I'll add a question mark and
then the QueryParamter au_id and I'll pass
| | 04:42 |
in a value of 2, meaning that I want
to see the values for author number 2.
| | 04:47 |
And you will see that when the form
comes up, it shows the details for that
| | 04:51 |
record. I'll click up here again and
I'll change it to a value of Author ID
| | 04:55 |
number 3 and I'll see another record show up.
| | 04:58 |
Now I'll go take a look at Author ID
number 1. Marjorie Green and I'm going to
| | 05:02 |
change Marjorie Green to Marjorie Brown
and click Update. Then I'll go through
| | 05:08 |
the author list until I find the
record and show that it's been successfully
| | 05:12 |
updated. There is one more thing to
know about how this page is working.
| | 05:16 |
In the pages starting stage it had a
code file that already had an event
| | 05:21 |
handler function called DetailView_
ItemUpdate. The code for this function
| | 05:26 |
checks the affected rows property of
the event object for a value of 1 and if
| | 05:30 |
it equals 1, it redirects back to the
author's page. This matches the kind of
| | 05:34 |
code that was used in the Insert
operation that I previously demonstrated. And
| | 05:40 |
back in the page, if I look at the
DetailsView control I'll see that there is
| | 05:44 |
an OnItemUpdate at the event
handler that's calling that function.
| | 05:49 |
So the structure of the DetailsView
control used for updating and the one
| | 05:52 |
that's used for inserting are pretty
much the same. They are both using the
| | 05:57 |
event handlers for the updated or
the inserted events depending on which
| | 06:01 |
operation is being used and they are
both using the ItemCommand event to react
| | 06:06 |
to a click on the Cancel button.
| | 06:08 |
So that's how you create the form. In
the final step, which I'll show in the
| | 06:11 |
next video, I'll show you how to get
to this Form page from the List page and
| | 06:16 |
pass the QueryString property when
the user clicks on a link or a button.
| | 06:21 |
| | Collapse this transcript |
| Linking to update pages from the list page| 00:01 | When you create an ASP.NET page that's
dedicated to updating records, you need
| | 00:05 | to pass a QueryStringParameter to the
page as it's loaded to indicate which
| | 00:09 | record you want to edit.
| | 00:11 | In the video where I created
AuthorUpdated.aspx, I modified the Select command
| | 00:17 | for the SQLDataSource. I set up the
Select command to receive a parameter which
| | 00:22 | would be used in a WHERE clause shown
right here. The parameter has a name of
| | 00:26 | au_id, matching the database column
name on the server. And then I added a
| | 00:31 | SelectParameters element to the
SQLDataSource and indicated that I wanted to
| | 00:36 | get that parameter from the
QueryString using the QueryStringParameter tag.
| | 00:41 | I set the Name attribute to au_id to
match the name of the parameter in the SQL
| | 00:45 | statement and the QueryStringField to au_id.
| | 00:48 | Now, I'll show you how to pass that
value from the list page so the user can
| | 00:52 | click a button and get to the page
easily. I'll go to the file Authors.aspx.
| | 00:58 | This is the list page that displays
the existing data from the authors table.
| | 01:03 | I'll click on the GridView control
and then open its Task list. From there
| | 01:07 | I'll click on Add New Column. I'm
going to add a column that generates a
| | 01:12 | hyperlink. You can actually create
either a hyperlink or an actual button.
| | 01:17 | They both work pretty much the same way.
From the field type, I'll select
| | 01:21 | HyperLinkField. The header text can be
left blank. I don't need anything at the
| | 01:25 | top of the column. But then in the
Specify text input, I'll type in Edit.
| | 01:31 | That's what the user will see.
| | 01:33 | Next, I'll indicate that I want to
construct the URL to which the user will
| | 01:36 | navigate using a data field. I'll click
into the first input and type in the name
| | 01:42 | of the primary key column, au_id.
Because it is a primary key, its value will
| | 01:48 | be used to uniquely identify the row
the user has selected. Then I'll pass in
| | 01:52 | the URL format string. I'll start with
the tilde and a slash to indicate I'm
| | 01:57 | starting at the website root and then
I'll type in the name of the update page,
| | 02:02 | AuthorUdate.aspx. I'll follow that with
the question mark to indicate that I'm
| | 02:07 | starting the QueryString or the list
of parameters. Then I'll put in au_id as
| | 02:13 | the name of the parameter and =
operator and then brace 0 brace. To indicate
| | 02:19 | that I want to take the value of the
first data field I list in the string and
| | 02:23 | pass it in this position.
| | 02:24 | I will click OK and show that the Edit
hyperlink is shown in display view.
| | 02:30 | I'll press Ctrl+S to save and
Ctrl+F5 to run the page.
| | 02:35 | Now I can click the Edit link for any
of these records. I'll choose the third one,
| | 02:39 | Andy Arf. That takes me to the
Edit form and displays the data for that
| | 02:43 | single record. I'll change Andy's
First Name from Andy to Andrew, click the
| | 02:49 | Update link and then when I return to
the Author list, I'll show that the data
| | 02:53 | has been successfully updated. Once
again you don't have to use a hyperlink;
| | 02:57 | you can also use a button control in
that position. The architecture is pretty
| | 03:01 | much the same, but because I'm using
hyperlinks throughout the website,
| | 03:05 | I have chosen a hyperlink
for this purpose as well.
| | 03:14 | Now, I'll show you the generated code.
I'll close the browser and return to the
| | 03:18 | Visual Web Developer, go to the
declaration of the GridView control and show
| | 03:22 | that the hyperlink was created with a
control called asp:HyperLinkField shown here.
| | 03:29 | Notice that the property DataNavigateUrlFields
lists the fields that are
| | 03:34 | being passed in and then the property
DataNavigateUrlFormateString indicates how
| | 03:40 | the URL will be built. That's shown
right here. And finally the Text property
| | 03:44 | indicates what the user sees.
| | 03:47 | So that's how you bind the whole data
entry system together. The user starts at
| | 03:51 | the Author List. From there they can
click the Add New Author link that takes
| | 03:55 | them to the Insert page, they can then
insert a record or they can click the
| | 03:59 | Edit link. And from there they can go
up to the Update page and modify existing data.
| | 04:03 | Either way, at the end of the operation,
they always return back to the list page.
| | Collapse this transcript |
| Deleting database records| 00:00 |
The final task in a data entry
system is to give the user a way to delete
| | 00:05 |
records from the server-side database.
The GridView control gives you a very
| | 00:09 |
easy way to do this simply by
enabling the Delete functionality.
| | 00:13 |
I will be working with the file Authors.
aspx. In this file, there is already a
| | 00:18 |
GridView control, which is bound to the
SQLDataSource control at the bottom of
| | 00:22 |
the page. The SQLDataSource was
created with the Delete command with the
| | 00:27 |
parameter that allows the Delete command
to be filtered on a single record's primary key.
| | 00:32 |
To turn-on Delete functionality, I'll
go into Design View first. I'll select
| | 00:36 |
the GridView and then open its Task
list and I'll select Enable Deleting.
| | 00:42 |
This results in creating a Delete
column on the left side of the GridView.
| | 00:46 |
Now I'm going to edit the columns so I
can group the Edit link and the Delete
| | 00:51 |
link together. I'll click Edit Columns,
I'll go to the Selected fields list and
| | 00:56 |
choose Delete.
| | 00:57 |
And then I'll click the Down Arrow a
number of times until it's the last item
| | 01:01 |
in the fields list. So now the user
will see the Edit hyperlink column and then
| | 01:05 |
the Delete link. I'll click OK and
then I'll test the page in the browser
| | 01:10 |
selecting Debug > Start Without Debugging.
| | 01:12 |
With the addition of the Delete link,
you will now see that the columns are a
| | 01:16 |
little bit squeezed and text is
starting to word-wrap. You can solve this in
| | 01:20 |
one of two ways. You can either go
to individual columns and edit their
| | 01:23 |
properties and set their Wrap
properties to false, or you can cite that on a
| | 01:27 |
list page. You don't really need to
display all this detail. I'll close the
| | 01:31 |
browser, I'll go to the Task list
for the GridView control and click Edit
| | 01:36 |
Columns and then I'll go to the
Selected fields and I'll remove a few of these
| | 01:40 |
items. I'll remove the Address, the City,
the State, and the Zip, leaving only
| | 01:47 |
the Last Name, First Name, and Phone Number.
| | 01:49 |
I will click OK, I'll save my changes
by pressing Ctrl+S and then I'll run the
| | 01:53 |
page again, and now the user is only
seeing those critical columns that allow
| | 01:58 |
them to identify the rows and get a bit
of critical information such as the phone number.
| | 02:03 |
All of the other functionality will
still work. I can click into an item and
| | 02:07 |
see its details in the Update page and
Cancel to return to the list. But I can
| | 02:11 |
now click the Delete link and that
row will be deleted, and with the page
| | 02:16 |
refreshes it shows that the data has
been removed from the server-side database.
| | 02:20 |
So Edit links and Delete links are now
placed in the rows that they are going
| | 02:24 |
to affect, and the link to add a new
author has been placed below the list
| | 02:28 |
control because that takes the user to
the Insert Author page. Your data entry
| | 02:33 |
system is now complete.
| | 02:35 |
| | Collapse this transcript |
|
|
9. Validating User InputCustomizing forms with item editing templates| 00:01 | In ASP.NET websites that include data
entry forms it's useful to be able to
| | 00:05 | validate form entry. When user's type
values into data entry forms, you can use
| | 00:11 | ASP.NET validator controls that are
bound to the data entry form controls.
| | 00:16 | You can then set custom rules on these
validator controls and cause error messages
| | 00:21 | to be displayed without extensive programming.
| | 00:23 | For the demonstrations in this chapter,
I'll use a website that's part of the
| | 00:27 | exercise files. If you have access to
the exercise files, select File > Open
| | 00:32 | Web site. Go to the Validation folder
under Ch09Validation and open it. Then
| | 00:39 | open the file TitleInsert.aspx.
| | 00:42 | In the starting version of this page,
there is a Details View control that's
| | 00:46 | bound to an SqlDataSource. There are
four fields that are being accepted in the
| | 00:50 | form right now, the Title, Price,
Publication Date, and Notes.
| | 00:54 | I will run the page in the browser and
I'll type some values into the controls
| | 00:59 | and show you what can go wrong. I'll
click into the Title and type any value,
| | 01:04 | 'A title,' and then I'll type a
nonnumeric value in as the price, just xyz. And
| | 01:09 | I'll do the same thing for the PubDate
and I'll click the Insert link. And in
| | 01:14 | response I get a server error.
| | 01:16 | The key error here is at the top.
There was an attempt to take a string and
| | 01:20 | format it as a number, and because I,
as the user didn't type-in a numeric
| | 01:24 | value, the page fails. So to prevent
that issue from happening, we need to
| | 01:29 | capture the problem before
the data is sent to the server.
| | 01:32 | In web environments, validation is
handled in two possible ways either with
| | 01:37 | client-side validation
or server-side validation.
| | 01:40 | In server-side validation, data is sent
to the server and then logic is applied
| | 01:45 | to the data at the server level, and
then if there is a problem, an error
| | 01:49 | message is sent back to the
webpage where its refreshed.
| | 01:52 | In client-side validation, the
validation logic is handled entirely by the
| | 01:56 | client. That's the kind of
validation that's used in ASP.NET.
| | 01:59 | Before you can apply validators in a
DetailsView control, you first have to
| | 02:03 | replace any instances of the
BoundField component with Template fields. A
| | 02:08 | Template field allows you to apply
your own specific controls including
| | 02:12 | textboxes, pull-down lists, and most
importantly here the validator controls.
| | 02:17 | I will prepare the form for validation
like this. I'll select the DetailsView
| | 02:22 | control, then I'll open the Task list
and select Edit Fields. I'm going to
| | 02:27 | validate two controls, the Price and
the Publication Date. First, I'll click on
| | 02:31 | the Price and the Selected fields list
and I'll delete it. And then I'll do the
| | 02:35 | same thing for the PubDate.
| | 02:37 | Now I'll add two Template fields. I'll
go to the Available field list at the
| | 02:41 | top. I'll choose TemplateField and
click Add. For the first template field,
| | 02:46 | I'll then go to HeaderText and put in
the old HeaderText for the Price field of
| | 02:51 | Price. Then I'll click on the item
again and click the Up Arrow a couple of
| | 02:56 | times to move it back up into place.
Then I'll do the same thing for the
| | 02:59 | PubDate. I'll add a new TemplateField,
I'll set its HeaderText to match the old
| | 03:04 | one and then I'll move it back up into
place. So that my selected fields are in
| | 03:09 | the same order, then I'll click OK.
| | 03:11 | You will see in the DetailsView control
presented in Design View that there are
| | 03:15 | no longer textboxes in the data entry
form. I have to replace those now with
| | 03:20 | explicit templating. So the next step
is to go into Source View and start to code.
| | 03:25 | I will click on the Source button and
then press Alt+Shift+Enter to go into
| | 03:29 | full screen, and then I'll locate my
new TemplateFields. Here is the first one.
| | 03:33 | Notice that the TemplateField is
created with a pair of tags. Place the cursor
| | 03:38 | between the tags and press Enter a
couple of times to make some space. Within
| | 03:42 | the TemplateField, I'll declare an
EditItemTemplate as a pair of tags. This is
| | 03:47 | the template that will be presented
when the Details View control is in Edit mode.
| | 03:51 | Now within the EditItemTemplate, I'll
declare an asp: TextBox. I'll give it an
| | 03:58 | ID matching the ID of the old
BoundField, and also matching the name of the
| | 04:02 | database column on the server, price,
I'll put in the essential runat =
| | 04:06 | "server" attribute. And then just in
case this form is going to be used to
| | 04:11 | present existing data, I'll add a
Text attribute and I'll use this binding
| | 04:15 | expression. I'll start off with the
less than and a percent and then within the
| | 04:19 | tokens of pound sign and then I call to
the Bind function. And within the Bind
| | 04:23 | function I'll pass in the name of the
database column, price. Finally, at the
| | 04:28 | end of the textbox, I'll close the tag.
| | 04:30 | Now I'll save and run the page again.
I'll select Debug > Start Without
| | 04:34 | Debugging and when the data entry form
opens, I'll see my new textbox which is
| | 04:39 | a part of the editing template.
| | 04:40 | Now I'll go back to the code and do
the same thing for the Publication Date.
| | 04:44 | I'll select the EditItemTemplate that
I created for the price and then I'll
| | 04:49 | copy that to the Clipboard. The code
will be almost exactly the same for the
| | 04:52 | PubDate. I'll click into the tags for
the TemplateField for the PubDate, then
| | 04:57 | I'll go to the new version of the
TextBox control and I'll set both the ID and
| | 05:02 | the database column name in the Bind
function to the original name of the
| | 05:06 | column PubDate.
| | 05:07 | Now I'll save and fully test the page.
I'll press Ctrl+S to save and then run
| | 05:13 | the page, and then I'll type-in some
values. The title will be My New Book,
| | 05:18 | I'll type-in a numeric value this time,
a 15, a well-formed date of 3/1/2009
| | 05:24 | and Some Notes. Then I'll click the Insert link.
| | 05:28 | You will see that the form is simply
refreshed with new blank values. Now I'll
| | 05:33 | go to the Database Explorer, I'll go
back to Visual Web Developer and exit Full
| | 05:37 | Screen. Go to the Database Explorer,
open the Tables list, right-click on the
| | 05:43 | Titles table and select Show Table Data,
scroll down to the bottom of the data
| | 05:48 | and show that my new record
was successfully inserted.
| | 05:51 | So all this is in preparation for
validation. Before you can apply validator
| | 05:55 | controls to a data entry form that's
presented within a Details View component,
| | 06:00 | you must modify your Details View to
use the TemplateField instead of the
| | 06:04 | BoundField for any control
that you want to validate.
| | Collapse this transcript |
| Adding validator controls to a form| 00:00 | Once you have modified a DetailsView
control to use Template fields instead of
| | 00:04 | Bound fields, you are then ready to
add validator controls. Each validator
| | 00:09 | control is bound to a single form
control and each form control can be
| | 00:13 | validated by one or more validators.
You place the validator controls in the
| | 00:18 | same Template fields that host the
textboxes or other data entry form controls
| | 00:23 | that the user interacts with to provide data.
| | 00:25 | For this demonstration
I'll work with the page named
| | 00:28 | TitleInsertValidation.aspx. In this
version of the page there are two Template fields.
| | 00:34 | One for the Price and the other
for the PubDate columns. They each have
| | 00:38 | a TextBox control that allows user to
type-in values but currently neither is
| | 00:43 | validated. I'm going to show you how
to add validator controls both in Design View
| | 00:47 | and through code.
| | 00:48 | I will start off in Design View. In
Design View I'll select the DetailsView
| | 00:53 | control. I'll open its Task list and
select Edit Templates. I'll pull down the
| | 00:57 | Template list and show you that there
are two sets of templates for each of the
| | 01:01 | two fields that are used in Template
fields. Each Template field supports an
| | 01:06 | ItemTemplate for displaying data, and
AlternatingItemTemplate that allows
| | 01:10 | you to setup say alternating background colors.
| | 01:13 | And then this one, the EditItemTemplate.
The EditItemTemplate is the one that's
| | 01:17 | used by default for either inserts or
updates. I'll select that item for the
| | 01:22 | Price field and I'll show you visually
that it's showing the TextBox control
| | 01:27 | that's already a part of the template.
| | 01:29 | Now, I'll add the validator. I'll get
out of Full Screen so I can see all of my panels.
| | 01:33 | Then I'll go to the Toolbox panel.
I'll move the cursor over the
| | 01:37 | Toolbox tab and then pin the Toolbox
panel into place. The validator controls
| | 01:42 | are in a category labeled Validation.
There are a number of validators you can
| | 01:46 | choose from. I'm going to be using
the RequiredFieldValidator and the
| | 01:50 | RangeValidator.
| | 01:51 | The first one I'm going to implement
will say that the price is required.
| | 01:55 | I'll drag RequiredFieldValidator object
and I'll place it inside the template.
| | 02:01 | Then with the RequiredFieldValidator
object selected, I'll go to the Properties
| | 02:04 | panel. I'm going to double-click the
Properties panel header to make it float,
| | 02:09 | and then I'll drag it out so
that it's wider and easier to read.
| | 02:12 | There are two critical
properties that you should set. First
| | 02:15 | the ControlToValidate property gets set to
the ID of the form control you want to
| | 02:20 | validate. If you are working in the
Properties panel, you can click into the
| | 02:23 | ControlToValidate property and then
pull down the list and you should see the
| | 02:28 | only form control that's in the
template. I'm selecting the Price field.
| | 02:32 | Then go to the ErrorMessage. The
ErrorMessage defaults to the type of control,
| | 02:37 | ReguiredFieldValidator, but it should
be customized. And this is the error
| | 02:41 | message that the user will see if they
break the validator rules. I'll set the
| | 02:45 | ErrorMessage to 'Price is required.' Now,
I'll save the changes and let's see the behavior.
| | 02:51 | I will run the page in the browser,
and in the browser I'll simply click
| | 02:56 | the Insert link in the DetailsView
control. It's a little hard to see but the
| | 03:01 | actual message Price is required is
being displayed right under the control.
| | 03:05 | I'll show you how to fix the
visual problems in just a moment.
| | 03:09 | But let's add a couple of more
validators. I'll close the Properties panel
| | 03:12 | so I can return to Design View, and then
I'll press Enter to move down to the next line
| | 03:16 | and I'll also add a RangeValidator.
A RangeValidator can be used to
| | 03:21 | specify a particular data type: dates,
numeric values and so on. And you can
| | 03:26 | also set minimum and maximum values
that the user is allowed to type-in.
| | 03:31 | With the RangeValidator selected,
I'll press the F4 key to bring back the
| | 03:34 | Properties panel. I'll go to the
ControlToValidate. I'll bind it to
| | 03:39 | the same form control as before, price,
and I'll set a different ErrorMessage.
| | 03:43 | This time the ErrorMessage is
'Price must be between 1 and 100.'
| | 03:51 | Next, I'll implement the actual
business rules. I'll scroll down a bit to
| | 03:55 | the Type property and I'll set the Type
to Double. Set it to Integer for whole
| | 04:00 | numbers or Double for fractional
numbers, such as a price. And then I'll set
| | 04:05 | minimum and maximum values. I'll click
into the MinimumValue and set it to 1,
| | 04:09 | and the MaximumValue and set it to 100.
I'll save my changes and I'll run the
| | 04:15 | page again. And you will see a lot of
extra space here. I'll show you how to
| | 04:20 | fix that a little bit later, but now
I'll simply click the Insert button and
| | 04:25 | the message Price is required is
displayed. And then I'll fill in a value
| | 04:29 | that's non-numeric and click the
Insert link again and this time I see the
| | 04:33 | error message, Price must be between
1 and 100. So, that's how you setup
| | 04:37 | the validators in Design View.
| | 04:39 | Now to do the same thing in Source View,
if you prefer, I'll show that I'm going
| | 04:43 | to go to Source View and then
I'll press Alt+Shift+Enter to go to Full Screen
| | 04:47 | and I'll locate the RangeValidator
that I created for the price.
| | 04:51 | I'll select the RangeValidator code and
I'll copy it to the Clipboard. Then I'll go
| | 04:57 | down to the Template field for the
PubDate and I'll paste that code in the
| | 05:00 | place within that template.
| | 05:02 | Now I'm going to make changes to the
RangeValidator that I just created.
| | 05:07 | First I'll change the ID. It has to be
unique within the page. I'll change it from
| | 05:10 | RangeValidator1 to RangeValidator2.
Then I'll set the ControlToValidate,
| | 05:15 | changing it from price to pubdate. And
I'll set the ErrorMessage to a value of
| | 05:21 | 'Please enter a valid date.'
| | 05:25 | When you use the RangeValidator to
validate dates, the minimum and maximum
| | 05:29 | values must be phrased as dates.
I'll put in a broad range of dates, setting
| | 05:33 | the MaximumValue to 12/31/2100,
and the MinimumValue to 1/1/1900.
| | 05:42 | And here is the critical piece you
must change. The Type attribute which was
| | 05:45 | set to Double instead should be set to Date.
| | 05:49 | So now I have another validator this
time connected to the PubDate form control.
| | 05:52 | When user fills in the form
if they don't fill the control in with a
| | 05:56 | well-formed date, this validator
will trigger and it will show the error
| | 06:00 | message that I specified. Because I
didn't add a required validator for this
| | 06:04 | textbox, the rule is that the user has
to either enter a well-formed date or
| | 06:09 | they can also leave it blank. I'll save
the changes and run the page again.
| | 06:13 | And I'll click the Insert link and show
that I'm only getting the message, Price is
| | 06:17 | required. But now I'll click into the
PubDate control and type a value that's
| | 06:21 | not a date, such as the words 'not a
date,' and click Insert. And now I also
| | 06:27 | see the message, Please enter a valid date.
| | 06:29 | Now as you can see there are some
display issues that are implicit when you add
| | 06:34 | these controls without applying
formatting. But I'll show you how to deal with
| | 06:38 | the formatting issues in a separate video.
| | Collapse this transcript |
| Controlling the validation error message display| 00:00 | When you place an ASP.NET Validator
control within a DetailsView control, its
| | 00:05 | formatting is controlled by the
Container control. That is, the DetailsView.
| | 00:10 | And it's a good idea to apply
formatting to the validator to make sure that it
| | 00:14 | stands out and the user sees it
clearly. For this demonstration, I'll be
| | 00:17 | working in the file
TitleInsertValidationMessages.aspx. In this file I have
| | 00:22 | created a number of validators and
applied them to the various form controls,
| | 00:27 | the Price and PubDate.
| | 00:28 | I will start by running the page in the
browser and show you the nature of the
| | 00:32 | problem. The DetailsView control that
contains both the form controls and the
| | 00:37 | validators has a particular background
color. I'll leave the Price blank and
| | 00:41 | type in a non-date value into the
PubDate control. And then I'll click the
| | 00:46 | Insert link, and you will see that
the error messages using their default
| | 00:49 | formatting are hard to read against
the background of the Details View.
| | 00:54 | You will also see that there is a
bunch of extra space between the error
| | 00:57 | messages and the controls themselves.
That's because with their current
| | 01:01 | settings, the validation controls
reserves space for the area that's going to
| | 01:06 | be needed to display the messages.
It's possible to make this more dynamic so
| | 01:10 | that the controls only appear and the
form only makes adequate space for the
| | 01:14 | messages when an error condition exists.
So I'll correct both of those issues.
| | 01:20 | First, I'll deal with the space issue.
Each of the validators has a property
| | 01:24 | called Display. When I drag to the
controls in Design View, the Display wasn't
| | 01:29 | set, but it defaults to something
called Static. That means that when the form
| | 01:33 | is initially presented, it reserves
the space that might be needed for an
| | 01:37 | error. Here is how we can fix that.
| | 01:39 | I will go to the first validator. The
RequiredFieldValidator for the Price
| | 01:44 | control and I'll add a Display property
and I'll set it to a value of Dynamic.
| | 01:50 | Now, I'll copy that setting and then
I'll paste it into each of the other validators.
| | 01:55 | I will select Display="Dynamic", and
press Ctrl+C to copy. Then I'll go to the
| | 02:01 | RangeValidator for the price and
paste it in. And I'll do the same for the
| | 02:05 | RangeValidator for the PubDate control.
| | 02:09 | Right around line 32 of the file
there is a break tag between the two
| | 02:12 | validators. You will only see
one validator at a time. Either the
| | 02:17 | RequiredFieldValidator's message or the
RangeValidator's. You won't be showing
| | 02:21 | both messages simultaneously, so the
break tag can go away. And now watch what
| | 02:26 | happens when I run the page.
| | 02:27 | And you will see that extra space has
been eliminated. Then I'll click the
| | 02:32 | Insert link and you will see that the
form presentation is modified dynamically
| | 02:36 | to make room for the error message. And
if I type-in a non-date value into the
| | 02:41 | PubDate and click Insert again, once
again you will see that the space is
| | 02:45 | allocated as needed.
| | 02:47 | So that's the result of setting the
property Display to a value of Dynamic.
| | 02:51 | Next I'll deal with the formatting
issues. It's possible to apply individual
| | 02:56 | formatting options to each control.
Let's take the RequiredFieldValidator as an
| | 03:01 | example. I'll place the cursor inside
the RequiredFieldValidator tag.
| | 03:05 | I'll press Enter and I'll set a property
called BackColor, and I'll select a color
| | 03:11 | of #EEEEEE, which is a light gray.
I'll save the change and run the page. And
| | 03:19 | then I'll click the Insert link and you
will see that the error message is now
| | 03:22 | very easy to read.
| | 03:24 | The problem with this approach though
is that you will need to apply that same
| | 03:27 | setting to each individual
Validator control not just in this page but
| | 03:32 | throughout your website. It's a lot
better to create a single set of rules and
| | 03:36 | then apply them to all validators. And
once again this is where Cascading Style
| | 03:41 | Sheets can help. I'll solve this
problem by creating a single CSS class and
| | 03:47 | then I'll tell each Validator control
to use that class by setting its CSS
| | 03:52 | Class property.
| | 03:53 | Now I'll do a little bit of Cascading
Style Sheet work. I'll go the Solution
| | 03:57 | Explorer and locate the file styles.
css and double-click it to open it. Now
| | 04:03 | I'll go to the CSS Outline panel that
appears automatically. I'll right-click
| | 04:08 | and select Add Style Rule. I'm going
to be defining a class. So, I'll select
| | 04:14 | the Class name, click into the
input, and I'll name my new CSS Class
| | 04:19 | validationError, and then I'll click
OK. That creates the Validation Error
| | 04:24 | class declaration.
| | 04:26 | From here I can either work in the CSS
dialog box, or I can just do the code.
| | 04:31 | I know what the code should be, so
I'll just type it in. I'll put in
| | 04:34 | background-color, and set it to a
value of #EEEEEE. Be sure if you are typing
| | 04:43 | this from scratch that you include the
pound sign before the six character color value.
| | 04:48 | And then I can also set also Cascading
Style Sheet properties. For example I'll
| | 04:53 | set the font-weight to a value of bold.
So that class is now available to all
| | 04:58 | pages in my website because the style.
css file is linked into each of these
| | 05:03 | pages. I'll save the changes, and
then I'll go back to the page titled
| | 05:07 | InsertValidationMessages.aspx.
| | 05:10 | I will go to the
RequiredFieldValidator and I'll remove the BackColor setting
| | 05:15 | and instead I'll put in CssClass=
and then I'll select the class name
| | 05:20 | ValidationError, which shows up
automatically in Visual Web Developer because
| | 05:24 | it's constantly monitoring the
contents of the styles.css file that's linked
| | 05:29 | into this page.
| | 05:30 | Now I'll select that declaration of
CssClass and press Ctrl+C to copy it to the
| | 05:35 | Clipboard and I'll go to each of the
two RangeValidators and paste it in.
| | 05:44 | I'll save those changes and run the page
again. I'll once again leave the Price
| | 05:48 | blank and I'll type-in a non-date
value in the PubDate to trigger its
| | 05:52 | validation. And I'll click Insert a
couple of times and you will see that both
| | 05:57 | validation error messages are displayed
and they both have the same background
| | 06:00 | color and the same bold font.
| | 06:03 | So that's how you can centralize the
formatting of your error messages. So in
| | 06:07 | this video I have described how to
cause the validation objects to only
| | 06:11 | allocate space dynamically, when the
space is needed. And I have also described
| | 06:15 | how to define and use common
formatting for all Validator objects using
| | 06:19 | Cascading Style Sheet
classes and the CSS Class property.
| | Collapse this transcript |
| Using the ValidationSummary control| 00:00 | The ASP.NET Framework includes a
control called the Validation Summary.
| | 00:05 | The purpose of the Validation Summary is
to collect all of the error messages
| | 00:09 | generated by all of the validators
within a particular page, and then to
| | 00:13 | display those messages in a single
location on the page. For this demonstration
| | 00:18 | I'll use a file called
TitleInsertValidationSummary.aspx.
| | 00:23 | In the current version of the page
there are three validator controls. Two of
| | 00:28 | them on the Price field and one on the
PubDate. If I simply click the Insert
| | 00:33 | link, I'll see the error message for
the price displayed. And if I type in a
| | 00:37 | non-date value like xyz, I'll also see
the validator for the pubdate displayed.
| | 00:43 | By using the Validation Summary, I'll
collect these messages and display them
| | 00:47 | in a single bullet list below the form.
I'll close the browser and return to
| | 00:52 | Visual Web Developer.
| | 00:53 | The first step is to suppress the
automatic output of the validator controls.
| | 00:58 | I'll go to each of the validator
controls in Source View and I'll change the
| | 01:03 | Value of the validator controls Display
property from Dynamic to None. And I'll
| | 01:09 | do the same thing for the
RangeValidator for price. And I'll also do the same
| | 01:14 | thing for the RangeValidator for the pubdate.
| | 01:18 | Now if the form is displayed and the
user makes errors, they won't see any
| | 01:23 | messages at all. So here is how we
replace that functionality. I'll look at the
| | 01:27 | page in Design View and then I'll go to
the Toolbox panel. One of the items in
| | 01:32 | the Toolbox panel is called
Validation Summary. Pin the Toolbox panel into
| | 01:36 | place if it isn't already pinned, and
then click into the paragraph to the
| | 01:41 | right of the Details View and press
Enter to create a new paragraph. Then drag
| | 01:45 | the Validation Summary and place it
in the empty paragraph. Notice that the
| | 01:50 | Validation Summary by default displays
in a bullet list. Now save your changes
| | 01:56 | and run the page in the browser.
| | 01:57 | I will click the Insert link and show
that the error message is now displayed
| | 02:03 | below the form. And if I type in a non-
date value into the PubDate filed and
| | 02:07 | click Insert, I'll see both of the
error messages displayed together.
| | 02:12 | From this point on everything else is
just a matter of simple formatting. If
| | 02:15 | you don't like the extra space below
the form eliminate any extra paragraphs.
| | 02:20 | If you don't like the color, background,
or anything else about the way that
| | 02:24 | the control is displaying the error
messages, create a Cascading Style Sheet
| | 02:28 | class and set the CssClass property of
the Validation Summary control to use
| | 02:33 | that class. This way you can create a
common interface for your entire website
| | 02:39 | without having to set the
same properties over-and-over.
| | 02:42 | So again, the purpose of the Validation
Summary is to collect all of the error
| | 02:46 | messages from all validator controls
that are outputting them in a single page.
| | 02:52 | You have to expressly suppress the
output of the individual validator controls
| | 02:56 | by setting their display property to
None. And then add your Validation Summary
| | 03:01 | wherever you wanted to display on your webpage.
| | Collapse this transcript |
|
|
10. Creating ReportsCreating a query with joined tables| 00:01 | In a dynamic data driven website, it's
sometimes useful to be able to create
| | 00:05 | printable reports, web pages that are
able to be printed elegantly, but don't
| | 00:10 | include all of the graphics and additional
components that are needed on the screen.
| | 00:14 | There are no particular components
you use in ASP.NET for this purpose. For
| | 00:18 | example, there is no built-in report
class. Instead you use the existing web
| | 00:23 | form controls such as the GridView
control to present the data. And then
| | 00:28 | combine those controls with some
creative use of Cascading Style Sheets to
| | 00:32 | modify the way the data is presented.
| | 00:35 | For the demonstrations in this chapter
I'll use a website that's a part of the
| | 00:38 | Exercise Files. Go to the menu and
select File > Open Web Site, select the
| | 00:44 | Reports folder under Ch10Reports
and click Open. And then open the file
| | 00:50 | JoinedData.aspx. Look at the file in
Design view, you will see that it presents
| | 00:55 | the website's banner
graphic and menu, but little else.
| | 00:59 | The first step to creating a report
is to start with a GridView and an
| | 01:04 | SqlDataSource. I'll go to the Database
Explorer and then from there locate the
| | 01:08 | titles table and then I'll drag the
titles table and place it into the page. As
| | 01:14 | always dragging the table into the
page results in creating a GridView and a
| | 01:18 | linked SqlDataSource. Now I'm going to
modify the SqlDataSource by modifying
| | 01:24 | its Select command. The Select command
is a query, if you know your SQL you can
| | 01:29 | hand code the query, but if you are
fairly new to SQL you can use Visual Web
| | 01:34 | Developer's Visuals Query Tool.
| | 01:36 | With the SqlDataSource object selected,
I'll go to the Properties panel and
| | 01:41 | double-click its header to make it
float and then I'll drag it out, so I can
| | 01:45 | see the properties more easily. Then
I'll locate the SelectQuery property. The
| | 01:50 | SelectQuery is the query that
will be executed to retrieve data for
| | 01:54 | presentation on the page. I'll click
the button next to SelectQuery and that
| | 01:58 | opens the Command and Parameter Editor.
| | 02:01 | Now once again if you know your SQL you
can hand code it here, but I'll use the
| | 02:06 | Query Builder by clicking that button.
When the Query Builder opens, it opens
| | 02:10 | in a small window. I'll click in the
lower corner and drag it out to full
| | 02:14 | screen, so I can see more of its
information. Now I would like to join the
| | 02:18 | titles table with two other tables in
the database, the Publishers and the
| | 02:23 | Author's Information.
| | 02:24 | I will go to the top pane of the
Query Builder, right-click and select Add
| | 02:29 | Table and I'll choose Publishers and
click Add. Then with the Add Table dialog
| | 02:35 | still open I'll click Authors and click
Add again. Then I'll close the Add Table dialog.
| | 02:43 | Notice that when you add these tables,
links are created automatically that's
| | 02:47 | because the names of the columns in
the tables are identical. So the pub_id
| | 02:51 | column in publishers matches pub_id
in titles and so on. Now I'm going to
| | 02:56 | modify the columns that I want to
display from the titles table. Notice that by
| | 03:00 | default all of the columns are being
displayed. I'm going to deselect all the
| | 03:05 | key columns, title_id, pub_id and au_id.
I'll definitely show the title and the
| | 03:12 | price, but then I'll
deselect the pubdate and notes.
| | 03:16 | Next I'll add the author. For the
moment I'm only going to add the author's
| | 03:20 | last name and then I'll add the
publisher's name as well. I'll execute the
| | 03:24 | query and show what the data looks like
so far. The return data shows up in the
| | 03:28 | bottom pane and I can see that I'm
retrieving those four columns all joined together.
| | 03:35 | Now I'm also going to sort the data.
I'll go to the title row and then in the
| | 03:40 | Sort Type column I'll choose Ascending.
This will cause the data to be returned
| | 03:44 | in ascending order by title. I'll
execute the query again, check the results
| | 03:50 | and sure enough it's in
alphabetical order by title.
| | 03:53 | Finally, I'm going to take two of the
columns from the authors table and join
| | 03:58 | them together to create a single column
with both values. Instead of returning
| | 04:03 | the authors name as two columns, I'm
going to return it for reporting purposes
| | 04:08 | as a single column. I'll start in the
first column, the one with a header of
| | 04:12 | column, and I'll change the expression
like this. First I'll drag this out so I
| | 04:17 | can see more of it and then I'll
start the expression with au_fname + ' ' +
| | 04:30 | au_lname. This means that I'm using
the value from the au_fname column plus a
| | 04:36 | literal space wrapped in the single
quote characters plus the au_lname column.
| | 04:41 | It's critical that you use single
quotes in this context and not doubles.
| | 04:45 | Then I'll tab over to the Alias column.
I'm going to name this column fullName.
| | 04:50 | So the result will be that when I get
the data back from the server it will be
| | 04:55 | exposed as a single column with the
author's full name. Now I'll click Execute
| | 04:59 | Query again and sure enough the
fullName column contains the author's full
| | 05:03 | name. So that's my query. Now I'll
click OK and that takes me back to the
| | 05:08 | Command and Parameter Editor where I
can see the finished Select command. Then
| | 05:13 | I'll click OK and that takes
me back to the Properties panel.
| | 05:16 | Now I've finished the work on the
SqlDataSource object. The next step is to
| | 05:20 | modify the GridView. I'll click on the
GridView. I'll open the task list and
| | 05:26 | choose Refresh Schema. This prompt is
telling me that I'm about to regenerate
| | 05:30 | the column fields for the GridView and
it will result into leading any changes
| | 05:34 | I might have already made to
existing column fields. That's okay.
| | 05:39 | I didn't customize the GridView yet on
purpose so I'll click Yes and then I'll
| | 05:43 | take a look at the GridView and I'll
see that in fact it is displaying the
| | 05:47 | actual data I asked for. Now I'll
save my changes pressing Ctrl+S and then
| | 05:52 | preview the page in the browser by
selecting Debug > Start Without Debugging
| | 05:58 | and there is the result, the
actual data displayed on the screen.
| | 06:02 | Now before I complete the video, I'll
show you a couple of standard formatting
| | 06:05 | tricks you can use. I'll close the
browser and return to the GridView, open its
| | 06:11 | task list and select Edit Columns.
First I'll set the Header Text, I'll click
| | 06:17 | on each field, go to the Header Text
property and change it to a value that I
| | 06:22 | want the user to see at the top of the
column. For Title and price I'll simply
| | 06:27 | uppercase the first character. For
fullName I'll split that up into two words
| | 06:33 | of Full Name. And for pub_name I'll
replace that with the string of Publisher.
| | 06:42 | And I'll click OK.
| | 06:43 | I will also deal with the price. When
I run the page right now I see that the
| | 06:49 | price is displayed in a raw numeric
format. I'm going to fix that by applying
| | 06:55 | currency formatting. I'll close
the browser and go back to Visual Web
| | 06:59 | Developer. Once again I'll edit the
columns and I'll select the price. I'll go
| | 07:05 | to the data section of the BoundField
properties to the DataFormatString and
| | 07:10 | I'll use the following format. I'll
start with the brace, then zero meaning
| | 07:14 | that I want to format the first value,
the only one in this context, then a
| | 07:19 | colon and an uppercase C for currency.
I'll click OK and then I'll save and run
| | 07:25 | the page again. And you will see this
time that the numeric value is formatted
| | 07:30 | as a currency value.
| | 07:32 | In the last step I'll apply some
formatting, I'll go to the GridView,
| | 07:36 | I'll select Auto Format and I'll choose one
of the formats. I'm going to choose this
| | 07:41 | one, Classic and click OK, and that
applies Classic formatting to the GridView
| | 07:47 | with a bluish background, white
foreground for the heading and pretty standard
| | 07:51 | text in the middle and alternating row colors.
| | 07:54 | I will run the page and there is
the result presenting joined data in a
| | 07:59 | friendly, easy to look at HTML table with
alternating row colors and a colorful presentation.
| | Collapse this transcript |
| Replacing control style properties with CSS| 00:00 |
Once you have created an ASP.NET page
that presents data, you can then start
| | 00:05 |
refactoring the page for use as a
printed document. Refactoring a page for
| | 00:10 |
print has a couple of steps. First
you might want to go into any ASP.NET
| | 00:15 |
controls that have explicit style
settings, and replace those style properties
| | 00:20 |
with actual Cascading Style Sheet references.
| | 00:23 |
At runtime, you will be able to have
two sets of styles, one for presentation
| | 00:28 |
on the screen and the other for
printing, ASP.NET controls by default have
| | 00:33 |
explicit style properties. For this
demonstration, I'm working with the file
| | 00:37 |
DisplayData.aspx, which has an
SqlDataSource whose Select command joins
| | 00:43 |
multiple tables together, and then a
GridView that presents the data using one
| | 00:47 |
of the auto-format settings.
| | 00:49 |
let's take a look at the code for the
GridView. I'll select the GridView and
| | 00:53 |
then go to Source View. Then I'll press
Alt+Shift+Enter to go into full screen.
| | 01:00 |
In the GridView code down toward the
bottom of the declarations, there are a
| | 01:03 |
number of styles, each of these styles
has individual style properties which as
| | 01:08 |
I have shown in other demonstrations
are translated by the ASP.NET Framework at
| | 01:13 |
runtime into style declarations that
are inline which as I have shown in other
| | 01:18 |
demonstrations, are translated by
ASP.NET at runtime into explicit style
| | 01:23 |
declarations that are inline
within the rendered HTML table.
| | 01:27 |
The problem with this approach is that
if you wanted to change from one set of
| | 01:31 |
styles to another at runtime, you would
actually have to go in and change each
| | 01:35 |
individual property on each GridView
control. A better approach is to take
| | 01:40 |
these properties and translate them as
Cascading Style Sheet classes. I have
| | 01:44 |
already done some of the work. I'll
open the file Style.css and show you that
| | 01:50 |
this file contains a number of
classes named report header, report row and
| | 01:54 |
report alt row.
| | 01:56 |
These three CSS classes match the
settings that are generated by Visual Web
| | 02:01 |
Developer when you select a
particular auto-format. The row style, which is
| | 02:07 |
declared up at the top of the code,
the header style and the alternating row style,
| | 02:12 |
which are all used in the presentation,
have all been restated now as CSS classes.
| | 02:18 |
So, here are the changes I'm going to
make in the actual document, first I'm
| | 02:22 |
going to eliminate any styles that
won't actually be used. I'm not going to be
| | 02:26 |
using paging in this presentation, so
I'll remove the Pager style. Similarly,
| | 02:31 |
I haven't allowed the user to select
rows that's an Ajax style approach that
| | 02:36 |
isn't turned on right now, so will
delete that, and I'll also remove the Edit
| | 02:40 |
row style because this
GridView isn't used for editing.
| | 02:43 |
Then I'll move some of the code around,
I'll go up to the Row Style and select
| | 02:47 |
and cut that to the clipboard and then
go back down toward the bottom of the
| | 02:51 |
GridView and paste it in. For some
reason visual developers separates those
| | 02:56 |
style declarations, doesn't matter
where you place them as long as they are all
| | 03:00 |
within the GridView and I
would like to keep them together.
| | 03:03 |
Finally I'll remove one more, the
Footer style, because this particular
| | 03:07 |
GridView won't have a footer. So I'm
left with these three style declarations,
| | 03:11 |
the row style, the header style and
the alternating row style. Now,
| | 03:16 |
I'll replace the individual properties with
the CSS declarations. First, I'll remove
| | 03:21 |
all of the style settings, I'll go to
the row style and remove the back color,
| | 03:25 |
I'll go to header style and remove
back color, font bold, and fore color and
| | 03:32 |
then I'll go to alternating row
style and remove the back color.
| | 03:35 |
Now before I replace those settings
with the Cascading Style Sheet classes,
| | 03:40 |
I'll save and run the page. You will
see that the GridView is displayed now
| | 03:44 |
with a very plain appearance. By
removing all of the individual style
| | 03:49 |
properties and now rendering the text
as just plain old boring text. Now I'll
| | 03:54 |
close the browser and now let's
restore the look and feel. Going back to the
| | 03:59 |
Styles file, I'll be
using these three CSS classes.
| | 04:03 |
First in the Styles.css, I'll select
and copy the name of the class Report Row.
| | 04:07 |
I have double-clicked on the name of
the class to select it and then pressed
| | 04:11 |
Ctrl+C to copy. Then I'll go back to
the ASP.NET page and then the Row Style
| | 04:17 |
attribute, I'll add the CSS class
property and paste in the name of the class
| | 04:23 |
Report Row. Now, I'll do that same
thing for the header style, I'll go to
| | 04:26 |
Styles.css, I'll locate and select the
report header class and press Ctrl+C to copy.
| | 04:33 |
I will go back to the page and add
cssClass= and then paste in reportHeader and
| | 04:39 |
once more time for the alternating
row style. I'll go to Styles.css,
| | 04:47 |
double-click to select reportAltRow,
press Ctrl+C to copy, go back to the page,
| | 04:53 |
add the cssClass and press Ctrl+V
to paste and I'll make sure that the
| | 04:58 |
resulting markup in the ASP.NET page
is well formed. Each declaration of the
| | 05:03 |
cssClass should have an equals, a pair
of quotes and then the name of the class.
| | 05:08 |
As a reminder you don't put in the
dot before the class name when you are
| | 05:12 |
referencing the class name within your
ASP.NET document. The dot only goes in
| | 05:17 |
the actual css file when you are
creating the class. Now I'll save the changes
| | 05:23 |
to all of the documents. I'll go
back to DisplayData.aspx and I'll press
| | 05:28 |
Ctrl+F5 to run the page and when the
page runs now, you will see that the look
| | 05:33 |
of the page is restored. I'm now
positioned to be able to create two CSS files,
| | 05:39 |
one for presentation on the screen as
seeing here, and one for printing. And it
| | 05:43 |
will be up to the browser to switch
back and forth between them at runtime, but
| | 05:47 |
I'll show you how to do that in another video.
| | 05:50 |
| | Collapse this transcript |
| Creating a CSS file for printing| 00:01 | Once you've prepared a ASP.NET page
for printing by replacing any of the
| | 00:05 | ASP.NET controls style properties with
references to actual CSS classes,
| | 00:11 | the next step is to create links to
additional style sheet files. The link element,
| | 00:16 | which is the part of the HTML language,
you use the link HTML element to link
| | 00:22 | an HTML page to an external style sheet.
| | 00:25 | For this demonstration I'm working in
the file Printformat.aspx. In this file
| | 00:30 | the GridView control has its
styles already replaced with CSS class
| | 00:35 | declarations, and these CSS class
declarations are referring to classes that
| | 00:40 | are actually defined in the external
style sheet file, Styles.css. And the link
| | 00:46 | element within the head section of
the page is where that join happens.
| | 00:50 | Here's the first step, I'm going to
press Alt+Shift+Enter to go into Full
| | 00:53 | Screen, so I can see as much code as
possible. Then I'll go to the existing
| | 00:58 | link tag and I'll add a new attribute
called media and I'll set it to a value
| | 01:04 | of screen. This is a standard attribute
that all modern web browsers recognize.
| | 01:09 | When a web browser opens an HTML page
and it sees a link element with the media
| | 01:14 | set to screen, it recognizes that; that
means that this style sheet should only
| | 01:18 | be used for rendering on a
standard computer screen.
| | 01:22 | Then I'm going to create another link
element. I already have a file in place
| | 01:26 | called PrintStyles.css. It repeats
the same CSS classes, reportHeader,
| | 01:33 | reportRow and alternatingRow, but
gives them completely different values and
| | 01:38 | also designates a different standard
font family up at the top in the body
| | 01:42 | table selector. Instead of Ariel,
we'll be using Times New Roman.
| | 01:46 | So I'll go back to the page and I'm
going to make a copy of this link element.
| | 01:51 | I'll select those lines, press Ctrl+C
to copy, place the cursor right below the
| | 01:56 | link element and press Ctrl+V to paste.
Then I'll make two changes to the new
| | 02:01 | version of the link. I'll change the
href attribute printstyles.css and I'll
| | 02:07 | change the media from screen to print.
| | 02:11 | Notice all the available options for
the media attribute, in addition to screen
| | 02:15 | and print there is also handheld which
is used by cell phones and other small
| | 02:20 | devices, projection, Braille, aural and
so on. So there are my two style sheet
| | 02:26 | declarations. I'll save the change and
run the page by pressing Ctrl+F5. When
| | 02:32 | the page first appears, it looks
exactly the same as it did before, because
| | 02:36 | it's now using the screen style sheet.
| | 02:38 | But then I'll use my browser as to
Print Preview capability. In the Internet
| | 02:42 | Explorer you can get to this by right-
clicking on the page and selecting Print
| | 02:46 | Preview and then I'll expand the page
and you will see that I'm using the Times
| | 02:51 | font now, and all of the text looks
quite a bit different then it did on the
| | 02:55 | screen. Once you have created this
extra style sheet link you can then
| | 02:59 | customize the look of your report using
whatever CSS styles you know how to use.
| | 03:04 | But the technique of using multiple
style sheets is a critical element, when
| | 03:09 | you want to prepare a page so that it looks
different on the printer than it did on the screen.
| | Collapse this transcript |
| Suppressing elements in printed web pages| 00:01 | In ASP.NET pages that you want to
prepare for printing, there are times when
| | 00:05 | there are elements that you see on the
screen that you don't want to appear on the page.
| | 00:09 | In this example, I'm working with the
file SuppressingElements.aspx. I'll press
| | 00:14 | Ctrl+F5 to run the page in the
browser and then I'll show the same page in
| | 00:19 | Print Preview. Notice that the menu,
that is, the elements on the page that
| | 00:23 | appear on the screen that allows the
user to navigate around the website, also
| | 00:27 | appear on the printed page.
| | 00:28 | I would like to suppress that element,
so it doesn't appear when the document
| | 00:33 | is printed. There are two steps you
have to follow for this. First of all, the
| | 00:38 | element that you want to hide must
have a unique ID and that unique ID can't
| | 00:42 | change each time the page loads.
| | 00:44 | You have to deal with the actual HTML
elements and so you might have to do a
| | 00:48 | little bit of diagnosis on your page to
find out how the element IDs are being generated.
| | 00:54 | Let's run the page again. This time
when the page appears in the Internet
| | 00:57 | Explorer, I'm going to right-click on
the page and select View Source and then
| | 01:04 | I'll press Ctrl+F and I'll search for
the string home and I'll jump to the
| | 01:09 | anchor tags that constitute the menu.
| | 01:11 | I would like to hide this div tag.
Notice that it's being generated with an ID
| | 01:16 | of ct103_menuPanel. If you are
following the same steps on your computer,
| | 01:23 | you might find that ID is different on
your system and the reason is because this
| | 01:27 | content is generated by the Header
element. That is, the custom control that
| | 01:31 | I'm using in my page. And if
I go back to my source code in
| | 01:35 | SuppressingElements.aspx and I'll
press Alt+Shift+Enter to go to full screen,
| | 01:41 | I'll see that my use of the Header
control right here doesn't have an ID
| | 01:45 | attribute because I haven't applied an
ID. ASP.NET applies one for me and if I
| | 01:51 | can't predict what that id is going
to be, then I can't apply its Cascading
| | 01:55 | Style Sheet rules to it appropriately.
| | 01:58 | So the first part of getting ready to
suppress this entire header is to give it
| | 02:02 | an ID. I'll put in an ID element and
I'll set it to a value of myHeader. Now,
| | 02:10 | I'll save the changes and I'll run the
page again. And once again, I'll View
| | 02:16 | Source on the page, press Ctrl+F,
search for home and now I see that the div
| | 02:23 | tag id is my myHeader_menuPanel. This
is an id that will always be the same. So
| | 02:29 | now I'm going to select that ID in my
View Source editor and copy it to the
| | 02:34 | clipboard, because I'm going to use
that ID in a Cascading Style Sheet rule.
| | 02:38 | Now I'll close the browsers and return
to Visual Web Developer and get out of
| | 02:43 | full screen. Now I'll go to the
printstyles.css file and I'll open that code up
| | 02:49 | in full screen and I'm going to add a
new selector into my Cascading Style
| | 02:54 | Sheet file. This is going to be an ID selector.
| | 02:57 | I will put on the pound sign and then
paste in the ID of my div tag that's
| | 03:02 | being generated when the .NET page is
being rendered. Cascading Style Sheet ID
| | 03:07 | selectors apply to only a single element.
You prefix the selector name with the
| | 03:12 | pound sign just like you use a dot
for a Cascading Style Sheet class, but
| | 03:17 | unlike a class which can apply to
multiple elements, ID selectors are designed
| | 03:21 | to apply to only one, then I'll put
in the pair of braces and I'll add the
| | 03:25 | following properties.
| | 03:27 | First of all, Visibility, which I'll
set to a value of hidden. This means that
| | 03:32 | when I print the document, the menu
won't appear and I'm also going to shrink
| | 03:36 | the menu down to a tiny size like this.
I'll put in the height of 0 pixels and
| | 03:43 | a width of 0 pixels.
| | 03:46 | Now this technique won't work on all
browsers. I'll show you that on Internet
| | 03:49 | Explorer the panel size won't
actually change, but then I'll show you on
| | 03:54 | Firefox that it does and then go
back to SuppressingElements.aspx.
| | 03:59 | In this file's begin state, it
already has the links to the multiple style
| | 04:03 | sheets. Styles.css for rendering on
the screen and printstyles.css for
| | 04:08 | rendering on the printer. I'll run
the page and you will see that when you
| | 04:12 | render the page on the screen that
the menu is intact and still visible and
| | 04:17 | then I'll look at the same page using
Print Preview. I'll right-click on the
| | 04:20 | page and select Print Preview and
expand the width of the page and you will see
| | 04:25 | that the menu is gone and it's only
gone when you actually print the document.
| | 04:29 | Now on Internet Explorer, what you are
seeing is that the visibility element
| | 04:33 | does fine, but the width and height of
the elements are still the same. This
| | 04:37 | extra vertical space in the page above
the title is reserved for that menu even
| | 04:42 | though it's not visible.
| | 04:43 | But now I'll close Print Preview and
I'll go into Internet Explorer's address
| | 04:48 | bar and I'll copy the current URL to
the clipboard. Then I'll open up Firefox
| | 04:53 | and I'll paste that URL into Firefox
and you will see that the page looks
| | 05:00 | pretty much the same on the screen as
it did in the Internet Explorer. But then
| | 05:04 | in Firefox I'll go to the menu and
select File > Print Preview and you will see
| | 05:08 | that in Firefox, the height and width
attributes do work, setting the height to
| | 05:13 | 0 and the width to 0 pixels each means
that the element is completely gone from
| | 05:18 | the printed document.
| | 05:20 | So to find cross-browser solutions to
printing documents from HTML, you will
| | 05:25 | have to do a little bit of
experimentation and research. I do encourage you to
| | 05:29 | test these pages on multiple browsers.
Whichever browser your users are going
| | 05:34 | to be using to access your website, you
will want to make sure you have copies
| | 05:37 | of those browsers and that you have
tested the pages in all of the different
| | 05:41 | ways that you are planning for them to
be used, both rendered on the screen and
| | 05:45 | printed on the printer.
| | Collapse this transcript |
| Selecting data for a report| 00:00 |
The ASP.NET Framework makes it easy to
create a report that includes both the
| | 00:05 |
output data and the form controls
that the user interacts with, to indicate
| | 00:10 |
which data they want to present. For
this demonstration, I'll work with the
| | 00:13 |
file SelectData.aspx.
| | 00:16 |
In this version of the page, there is
an SQLDataSource with a joint table query
| | 00:21 |
and a GridView that's presenting the
data. When I run the page in the browser,
| | 00:25 |
I see that all of the data from the
table is displayed. The first step in
| | 00:29 |
creating this sort of filtered report
is to create a user interface that the
| | 00:32 |
user can interact with.
| | 00:34 |
I am going to use an ASP.NET control
called the DropdownList. In HTML terms,
| | 00:39 |
it's the Select control, but it will
be dynamically populated with data from
| | 00:43 |
one of the database tables. I first
need an SQLDataSource object that gets the
| | 00:48 |
data for that table. I'll place the
cursor in the page right before the GridView.
| | 00:53 |
The easiest way to get there is to
select the GridView, and then press the
| | 00:56 |
Left-Arrow key, then press Enter to
create a new paragraph. If you move the
| | 01:01 |
cursor up to the previous line, you
will see that the paragraph is there. Now
| | 01:05 |
type in a label, Publishers with a
colon at the end. Select that text and press
| | 01:11 |
Ctrl+B to make it bold, then go to the
database explorer, locate the publishers
| | 01:16 |
table and drag and drop it
right after the Publishers: label.
| | 01:20 |
That will result in creating the
GridView control; for the moment you can't see
| | 01:24 |
the Publishers: label, but that's okay,
just press the Delete key and you will
| | 01:28 |
see that the label is still there.
So now we have an SQLDataSource object
| | 01:31 |
that's getting data from the
publishers table, click on the SQLDataSource
| | 01:35 |
object and scroll up to the top of
the Properties view and change the id to
| | 01:40 |
PubSataSource. This will let you
easily distinguish between the SQLDataSource
| | 01:45 |
for the titles and the data
source for the publishers.
| | 01:48 |
All right, the next step is to add
the control that you want to show the
| | 01:52 |
publishers data. I'm going to click
off the SQLDataSource object so I can see
| | 01:57 |
that my Publisher:'s label is still
there in the background. I'll place the
| | 02:00 |
cursor right at the end of that string
and press the spacebar to put an extra
| | 02:04 |
space in, then I'll go to the Toolbox
panel and I'll locate the DropdownList control.
| | 02:09 |
I will drag the DropdownList into
the page and drop it right after the
| | 02:14 |
Publisher:'s label. It will look in
Design view like the DropdownList is
| | 02:18 |
dropping down to the bottom, but when
you actually run the page in the browser,
| | 02:22 |
you will see that the DropdownList
control is displayed right next to that
| | 02:26 |
label. That's where you want it.
| | 02:28 |
Right now the DropdownList doesn't
show any actual data, so I'll go back to
| | 02:32 |
Visual Web Developer and configure it.
I'll make sure that the DropdownList is
| | 02:36 |
selected. Then I'll open the task list
and select Choose Data Source. In the
| | 02:41 |
Data Source Configuration Wizard that
appears, I'll open the list of available
| | 02:45 |
data sources and select PubDataSource.
| | 02:48 |
For a DropdownList, you select two
data fields: one that the user sees called
| | 02:53 |
the Display field and the other that
provides the value for the DropdownList
| | 02:56 |
known as the Value field. In this table,
there are two columns. The pub_name
| | 03:01 |
column is the one you want the user
to see. So select that under the option
| | 03:06 |
Select the data field to display, and
then check that the data field for the
| | 03:10 |
value is set to pub_id and click OK.
| | 03:13 |
And now your DropdownList is
configured to display the data from the table.
| | 03:18 |
Test the page again and you should see
that the Publisher list is now displayed
| | 03:23 |
when you open that DropdownList. Now
we are going to connect the data source
| | 03:27 |
for the titles to this visual control.
| | 03:29 |
I will close the browser and return to
Visual Web develop. I'll go to the Data
| | 03:33 |
Source control that's being used to
manage the titles. And then I'll go to the
| | 03:38 |
Properties view. I'll double-click its
header and then resize it and locate the
| | 03:42 |
SelectQuery property. I'll click the
button to open the SelectQuery and then
| | 03:47 |
click the Query Builder to
rebuild the query visually.
| | 03:50 |
I will expand the Query Builder
window so I can see more it. I'm going to
| | 03:54 |
filter the data on the pub_id column
of the titles table. So I'll go to the
| | 03:59 |
titles table and select pub_id. Then
I'll go down to the Grid Pane in the
| | 04:04 |
middle and I'll resize it so I can see
that the pub_id column was added. The
| | 04:09 |
purpose of selecting the pub_id column
was not to display it, so I'm going to
| | 04:12 |
uncheck the option under Output. But
then I'll go the Filter and I'll put in
| | 04:16 |
the following filter, equals and then
starting with an @ character pub_id. This
| | 04:23 |
defines a parameter in the query.
| | 04:25 |
I will press the Tab key to save my
changes and then take a look at the SQL in
| | 04:30 |
the SQL Pane. The newly generated
query now has a WHERE class in the correct
| | 04:35 |
location that matches the parameter pub
_id to the pub_id column of the titles
| | 04:40 |
table. I'll click OK to close the
Query Builder. Now click Refresh Parameters
| | 04:46 |
and you will see that Visual Web
Developer detects the new parameter, pub_id,
| | 04:50 |
and shows it in the Parameters list.
| | 04:53 |
Now we need to indicate where that
parameter will be filled in from. Go to the
| | 04:57 |
right and pull down the list under
Parameters source and choose Control,
| | 05:02 |
meaning we are going to get the data
from a form control. Then pull down the
| | 05:05 |
list under controlID and choose
DropdownList1. This is the DropdownList that's
| | 05:11 |
displaying the Publisher data. And
then click OK. We are almost done.
| | 05:15 |
The last step is to go back to that
pull down list that showing the Publisher
| | 05:19 |
data and to cause it to post the page
back to the server every time the user
| | 05:24 |
select a new value. After selecting
the control, look in the Properties view,
| | 05:28 |
scroll up to the top and locate the
property AutoPostBack and set it to a vale
| | 05:33 |
of true. That means that whenever the
user changes the value, it will cause the
| | 05:37 |
page to repost and then in the .NET
Framework on the server, the query will be
| | 05:41 |
rerun with the new filter and the
GridView will show only the select records.
| | 05:46 |
Save your changes and run the page in
the browser. When the page first appears,
| | 05:51 |
it doesn't show any data. That's
because there are no titles in the titles
| | 05:55 |
table that are matched to the
Publisher ID for GGG&G. But now pull down the
| | 06:00 |
list of Publishers and try selecting
Binnet & Hardley, and you will see that
| | 06:04 |
the page reposts and when it displays now
it only shows the data for that publisher.
| | 06:10 |
Pull down the list again and choose
another one, New Moon Books, and once again
| | 06:15 |
you will see the filtered data for
just that publisher. Finally, check your
| | 06:18 |
preview, if you are using Internet
Explorer, right-click anywhere on the page,
| | 06:22 |
and select Print Preview. If you are
working in Firefox, go through the menu
| | 06:27 |
and it will display the currently
selected publisher, and the selected titles.
| | 06:32 |
So in this video I have shown you how
to construct a filtered report adding an
| | 06:36 |
ASP.NET form control bound to a
database table and then binding that control to
| | 06:41 |
the SQLDataSources Select command. The
result is that the user can select the
| | 06:46 |
data they want to see and the .NET
Framework handles all the filtering, all
| | 06:50 |
with doing very minimal programming.
| | 06:52 |
| | Collapse this transcript |
|
|
11. Managing Session StateUnderstanding ViewState and managing postbacks| 00:00 | The ASP.NET Framework includes a couple
of tools that make it easy to save data
| | 00:05 | persistently between page requests.
The ViewState object, which is a part of
| | 00:10 | all ASP.NET web form pages, allows you
to place data in an object that's been
| | 00:15 | persisted from one page to another when
those pages are posting to each other,
| | 00:20 | and session variables are placed where
you can put data that's saved between
| | 00:24 | page requests, regardless of
whether the pages are posting or simply
| | 00:28 | redirecting to each other.
| | 00:31 | For the exercises in this chapter,
I'll use a website that's part of the
| | 00:34 | Exercise Files. Go to the Visual Web
Developer menu and select File > Open Web
| | 00:40 | Site, locate the Sessions folder under
Ch11Sessions and open it, and then open
| | 00:46 | the file FilteredReport.aspx. This is
a filtered report page. It includes a
| | 00:52 | DropdownList server control that's
populated with data from one SQLDataSource
| | 00:57 | and when the user selects an item from
the pull down list, the filter is then
| | 01:00 | applied to another data source, which
drives the data that fills a GridView.
| | 01:05 | I have described how to build this
page in the chapter on Reports. I want to
| | 01:09 | use this chapter to describe how the
ViewState object works. I'll run the page
| | 01:14 | in the browser. When the page
first opens, it retrieves data from the
| | 01:18 | Publishers table on the server and
populates the DropdownList. When the user
| | 01:22 | selects an item from the DropdownList,
the page is posted back, the filter is
| | 01:27 | reapplied, and the GridView
presents the resulting records.
| | 01:30 | The ViewState object is being used
dynamically by the ASP.NET Framework.
| | 01:35 | You will notice that when the page reloads
after the postback that the DropdownList
| | 01:39 | still shows the item that the user has
selected. The .NET Framework is using
| | 01:43 | this object known as the
ViewState object automatically.
| | 01:47 | When you select the item, a property
is placed in the ViewState object, and
| | 01:50 | then when the page reloads, it looks
in the ViewState and gets the data out.
| | 01:55 | You can actually see the ViewState in
your page if you view the page's source
| | 01:58 | in the browser. In the browser I'll
right-click on the page ands select View
| | 02:03 | Source. The ViewState object is here.
| | 02:06 | You will see that it's a fairly heavy
object that's placed into the page, and
| | 02:11 | then this page right now is storing
quite a bit of information. It's storing
| | 02:14 | the name of the page, the data item
that the user selected in the DropdownList
| | 02:18 | control and also all of the data
that's being presented in the GridView.
| | 02:23 | This data is all in encrypted in a
format called Page 64, it's not readable to
| | 02:27 | the human eye but easy for the .NET
Framework to decrypt. The problem with the
| | 02:31 | ViewState object is that it is heavy
and it adds quite a bit of size to each
| | 02:35 | web form page, and in many
situations, you don't need all that data.
| | 02:40 | You can make your pages quite a bit
lighter by disabling the ViewState object
| | 02:45 | and controls that don't really need it.
An example in this case would be the
| | 02:49 | GridView. Although you do need
ViewState capability in the DropdownList, that
| | 02:54 | is, you want it to retain the user
selection between page loads, you don't need
| | 02:58 | to save all the data from the GridView.
| | 03:01 | Each visual control in the .NET
Framework supports a property called Enable
| | 03:05 | ViewState. I'll select the GridView
object and then go to the Properties panel,
| | 03:10 | I'll double-click it to make it float,
and then resize it and then I'll go to
| | 03:14 | the Enable ViewState property. Notice
that it's set to true by default.
| | 03:19 | I'll change its value to false.
| | 03:21 | You won't see anything change in the
visual presentation, but now I'll close
| | 03:25 | the Properties view and run the page
again. I once again choose an item from
| | 03:30 | the Publisher's pull down list and
then look at the source code, and you will
| | 03:34 | see that this time the
ViewState data is significantly smaller.
| | 03:38 | Particularly when you retrieve and
present large amounts of data, the ViewState
| | 03:42 | objects makes your web page quite a
bit larger, and on a slower network, this
| | 03:46 | can mean that it takes longer for the
page to load. One of the ways in which
| | 03:50 | ASP.NET developers tune their websites
is to go through the pages and turn the
| | 03:55 | ViewState capability off on those
controls that don't really need it.
| | 03:59 | It's also worth mentioning that you
can use the ViewState object and add
| | 04:02 | arbitrary properties to the ViewState
so that you can pass data between pages,
| | 04:07 | but this capability is limited to
the situation where you are using post
| | 04:11 | architecture, that is you are using
data entry forms, or the automatic ASP.NET
| | 04:17 | form object, and posting back to the server.
| | 04:20 | ViewState does not work when you are
simply loading multiple pages using what
| | 04:25 | are known as HTTP Get Request. To
persist data between those kinds of requests,
| | 04:30 | you will need to learn how to use
session variables. And I'll show you how to
| | 04:34 | do that in another video.
| | Collapse this transcript |
| Using session variables| 00:01 | When you need to persist data in memory
between page requests that's unique to
| | 00:04 | each individual user and those pages
aren't connected to each other through the
| | 00:09 | web form system, that is, they aren't
posting to each other, you can choose to
| | 00:13 | use session variables.
| | 00:15 | A session variable is stored in memory
on the server but a copy of the session
| | 00:19 | variable is stored for each individual
user session and that session in turn is
| | 00:24 | managed with cookies. A cookie is a
bit of data that's created on the server
| | 00:29 | and sent back to the browser along
with the response to what an http request.
| | 00:34 | In the ASP.NET Framework and with
many other application servers, session
| | 00:39 | cookies are created automatically.
| | 00:41 | Whenever a page is loaded, the server
will detect that a new user session is
| | 00:45 | starting and it creates a session
cookie known as the User Session Token and
| | 00:50 | sends that back to the browser with
its first response. The browser then
| | 00:54 | includes that cookie with each
subsequent request, essentially reminding the
| | 00:58 | server of which the user
session is making the request.
| | 01:02 | You can add arbitrary session variables.
Each session variable can be of many
| | 01:06 | types: strings, numbers or even
complex arrays containing complete data sets.
| | 01:12 | In this video, I'm going to
demonstrate how to create a session variable in
| | 01:16 | response to a button click and then
how to read that session variable in a
| | 01:20 | totally separate page. I'll start at
the file SessionVarCreate.aspx. In this
| | 01:27 | page, there is currently a TextBox
control with an ID of TextBox1 and a button
| | 01:32 | control with the text label of Set Variable.
| | 01:35 | I will double-click on the button and
that takes me to the buttons, Button1_
| | 01:39 | Click method. This is the event handler
function responding to the Click event
| | 01:44 | on the server. Within the server
environment, I'm going to create a variable in
| | 01:48 | the session scope. There is an object
named Session. It's a dynamic object,
| | 01:53 | which means that you can add arbitrary
property names. Within the function I'll
| | 01:58 | say Session and then I'll put in a
bracket and within the brackets, I'll add
| | 02:02 | the ID or the key for the property I
want to add. You can use any string value
| | 02:08 | as the key for the property.
| | 02:09 | I will use a property of mySessionVar,
then I'll close the expression with the
| | 02:15 | closing bracket, then I'll put in the
equal assignment operator and then I'll
| | 02:20 | assign the value of the SessionVar to
TextBox1.txt. The data typing of this
| | 02:26 | value is a string because the text
property of the TextBox returns a string.
| | 02:31 | But again, you can put in many kinds
of complex data into the Session object.
| | 02:36 | Now, after I have stored the data in
memory, I'll then redirect to the read
| | 02:40 | page using Response.Redirect and I'll
pass in the name of the page I want to go
| | 02:45 | to. SessionVarRead.aspx. Because I'm
using the Redirect command, I'm not
| | 02:52 | posting to the other page and
therefore, I would not be able to use the
| | 02:56 | Viewstate object to pass the data,
but when I set the value in the Session
| | 03:00 | object, I'm storing the data in server
memory and when the other page loads, it
| | 03:04 | will send that cookie and it
will have access to this data.
| | 03:07 | I will save that page and then go to
the page SessionVarRead.aspx. In this file
| | 03:14 | there is a button with a label of Read
Variable and a label control with an ID
| | 03:18 | of Output label. I'll double-click the
Read Variable button and that takes me
| | 03:22 | to the Click event handler for that
button and here I'll retrieve the value of
| | 03:27 | that session variable. Within the
button Click event handler, I'll set the
| | 03:32 | Output Label's Text property and
then once again, I'll use the value
| | 03:36 | Session["mySessionVar"].
| | 03:41 | There is one more bit of code you must
include though. The text property of the
| | 03:45 | Label object expects a string but there
is no way for the ASP.NET Framework at
| | 03:50 | this point to know that the value I
stored in the session with the key of
| | 03:54 | mySessionVar is a string.
| | 03:57 | In C#, you explicitly datatype
the returned value. Using this sort of
| | 04:02 | code, place the cursor before the
Session object and then to clear the datatype
| | 04:08 | of the object, use the datatype
within a pair of parenthesis. If you are
| | 04:12 | working in Visual Basic, you would
instead use the syntax as string after
| | 04:17 | Session mySessionVar.
| | 04:19 | Now I'll save the changes and I'll run
the page initially without coming from
| | 04:24 | the first page. When the page loads in
the browser, I'll click the button and
| | 04:29 | you will see that the Label text
property is left blank. That's because that
| | 04:33 | variable is not in session or server
memory yet, so I'll close the browser and
| | 04:38 | I'll return to the Create Page and
run that page in the browser pressing Ctrl+F5.
| | 04:43 | I will type in a value into the TextBox
and click the button Set Variable. That
| | 04:49 | takes me to the Read page, then I'll
click the Read Variable button and you
| | 04:53 | will see that the value
is retrieved and displayed.
| | 04:56 | Now, one of the questions that comes
up about sessions is do they persist
| | 05:00 | between browser sessions. That is to
say if the user closes all of the browser
| | 05:04 | windows and then opens the website again,
is that session data still accessible
| | 05:09 | to them? And the answer is No.
| | 05:11 | I will go back to the Read page and
load it into the browser again. Notice that
| | 05:15 | I have closed all of my browser
windows before this part of the test and I'll
| | 05:19 | click the button and show
that the data does not show up.
| | 05:22 | Here is what's going on. Remember I
said that cookies are used to link the web
| | 05:27 | browser session to the data on the
server. The types of cookies that are being
| | 05:31 | used here are called memory or session
cookies and the browser doesn't remember
| | 05:36 | those cookies between its on-sessions.
These kinds of cookies are not stored
| | 05:41 | persistently on disk by the browser;
they are just stored in memory.
| | 05:45 | So when the user closes all of the
browser windows, its session cookies are
| | 05:49 | lost and therefore, the data on the
server is lost as well. So data that you
| | 05:54 | placed into the session scope or into
the Session object is remembered between
| | 05:59 | page requests, but only for the
duration of the current browser session.
| | 06:03 | When the user closes all of their
browser windows, that results in destroying
| | 06:07 | the session cookies that are in
browser memory and the next time the browser
| | 06:11 | goes to the website, a new
session is started automatically.
| | 06:14 | Session variables again can store
many different types of data: strings,
| | 06:18 | numbers, arrays and many other complex
objects. The most common use of sessions
| | 06:24 | is to store things like shopping cards,
user information after authenticating
| | 06:28 | the user and so on and it's a
valuable way to glue together the pages of a
| | 06:33 | dynamic website built in ASP.NET.
| | Collapse this transcript |
|
|
12. Securing a Site with Forms AuthenticationTurning on forms authentication| 00:01 |
The ASP.NET Framework supports three
automatic modes of authentication known as
| | 00:07 |
Windows authentication, Forms
authentication and Passport authentication.
| | 00:12 |
Windows authentication means that you
build authentication against the built-in
| | 00:17 |
authentication system of
the Windows operating system.
| | 00:20 |
With Forms authentication, you work
against a database in which you store user
| | 00:24 |
information. And with Passport
authentication, you are authenticating users
| | 00:29 |
against their passport credentials, a
system of user names and passwords that's
| | 00:33 |
stored by Microsoft itself.
| | 00:35 |
In this chapter, I'll focus on Forms
authentication. The Forms authentication
| | 00:40 |
model requires configurations to your
website in the web.config file and then
| | 00:45 |
creation of the setup pages. In this
first step, I'm going to open a website.
| | 00:51 |
I'll go to the menu, and select File
> Open Web Site and then I'll open the
| | 00:56 |
folder Security.
| | 00:58 |
Then I'll go to the file web.config.
I'll open up the web.config file to full
| | 01:04 |
screen by pressing Alt+Shift+Enter.
When you first create a website, it's setup
| | 01:08 |
with Windows based authentication.
Press Ctrl+F for Find, and I'll search for
| | 01:13 |
the string authentication,
starting with the tag character.
| | 01:18 |
The authentication is set initially
with a mode attribute set to Windows.
| | 01:23 |
I'll change that value to Forms and save
the changes. And click the Full Screen
| | 01:28 |
button to return to regular display.
Once you have turned on Forms based
| | 01:32 |
authentication, you are then
ready to create the user interface.
| | 01:36 |
In the remaining videos of this chapter,
I'll describe creating a login page
| | 01:40 |
with Login.aspx and a page to add new
users called Signup.aspx. And I'll show
| | 01:46 |
you how to add logout
functionality through the Application menu.
| | 01:51 |
| | Collapse this transcript |
| Creating a page to log in users| 00:01 | ASP.NET 3.5 includes a set of
components known as the authentication or
| | 00:06 | security components. These components
can be dropped into ASP.NET pages to
| | 00:12 | configure a website that you want to be
authenticated. That is, that you want a
| | 00:16 | user to have to login to, to have
access to either the entire website or to
| | 00:21 | various components of the website.
| | 00:24 | For the demonstrations in this chapter,
I'll use the security website.
| | 00:28 | I'll build the login form using an existing
file called Login.aspx. After I open the
| | 00:35 | file, I'll then click the Design button
to look at the page in Design mode.
| | 00:39 | You will see that this is a very simple
ASP.NET page. It does not include the
| | 00:44 | standard header control that I have
used in other parts of the website.
| | 00:48 | When the login form is presented,
you typically don't want to present the
| | 00:52 | Application menu, for example. So here,
I'm only presenting the actual banner
| | 00:57 | graphic at the top of the page. And
otherwise, this is a completely blank page.
| | 01:03 | The first step to implementing a
security system is to create a login form.
| | 01:07 | That's what I'll do with this page.
With the file open, go to the Toolbox panel
| | 01:13 | and pin it into place if it's not
already setup that way. Then open the Toolbox
| | 01:18 | panel's Login category. You will see
a number of components listed there
| | 01:22 | including the Login, the LoginView,
the CreateUserWizard and others.
| | 01:28 | The first step is to create an object
called Login Status. The Login Status
| | 01:33 | object detects whether a user is
currently logged in. Drag the Login Status
| | 01:38 | object and place it inside the empty
paragraph. You will see that the Login
| | 01:42 | Status object has two views, the
Logged Out view which is displayed when the
| | 01:46 | user is logged out and the Logged In
view that's displayed when the user is
| | 01:50 | logged in. For the Login page, we are
primarily concerned with the Logged Out
| | 01:55 | view, what the user sees
when they are logged out.
| | 01:58 | Set the Views option to Logged Out,
the original setting. Then go back to the
| | 02:02 | Login category and locate the Login
component and drag and drop that and place
| | 02:08 | it directly on top of the Login Status
object. You will see that it drops in
| | 02:13 | above the Login Status. And it creates
a data entry form that asks the users
| | 02:18 | for their username and their password.
| | 02:20 | You can select the Auto Format option
and choose one of the standard looking
| | 02:24 | fields. I'll choose the Simple look
which matches the formatting that I have
| | 02:28 | applied to other components in the
website, and I'll click OK. Now press Ctrl+S
| | 02:33 | to save and then run the page
selecting Debug > Start Without Debugging. The
| | 02:40 | login form asks for the username and
password. I haven't actually created user
| | 02:44 | names and passwords yet, but I can go
ahead and type in values. I'll type in my
| | 02:49 | name, David and then a password and
click Log In. There's a good bit of
| | 02:54 | activity going on the first time I use
the page. I'll explain what's going on in a moment.
| | 02:59 | But when the Login page is finished
processing, I see the message 'Your login
| | 03:03 | attempt was not successful.' Please
try again. So that's the beginning of
| | 03:07 | creating the login architecture.
| | 03:09 | Now here's what was going on in the
background. The first time you run the
| | 03:13 | Login page, the .NET Framework
automatically creates a database. I'll go to the
| | 03:18 | App_Data folder, which is
automatically created in all ASP.NET websites that
| | 03:23 | are created in Visual Web Developer.
And I'll click the Refresh button at the
| | 03:27 | top of the Solution Explorer panel,
and you will see a new file has been
| | 03:31 | created called ASPNETDB.MDF. That's an
SQL Server database, which is actually
| | 03:37 | being stored locally with the website.
Then I'll go to the Database Explorer
| | 03:41 | panel and show that a data connection
has been created that connects to that database.
| | 03:46 | I will open the database file and open
it's tables list and you will see that
| | 03:51 | the database structure has been
populated automatically with the number of
| | 03:55 | tables. They are all prefixed with
aspnet and then there's an underscore
| | 03:59 | character and then
there's the name of the table.
| | 04:01 | I will describe the purpose of many
of these tables in a later video. But
| | 04:06 | you've successfully created your
login page and you've also successfully
| | 04:10 | created a database to store user names, passwords
and other aspects of the authentication system.
| | Collapse this transcript |
| Creating a page to set up new users| 00:00 | Once you have created a login page and
run it for the first time, resulting in
| | 00:05 | creating the authentication database,
you can then start adding users.
| | 00:10 | Once again, there is a component in the
ASP.NET 3.5 Framework for this purpose.
| | 00:15 | For this demonstration, I'll use the
file Signup.aspx. I'll open the file and
| | 00:21 | then take a look at it in Design view.
Notice that once again it's an empty
| | 00:24 | page with just a banner graphic at the
top and a paragraph. Next, I'll go to
| | 00:29 | the Toolbox to the Login
section and I'll select the component
| | 00:33 | CreateUserWizard. And I'll drag the
component and place it in the page.
| | 00:38 | The CreateUserWizard component
includes fields for user name, password, email
| | 00:44 | and a security question and answer.
And it requires that the user type in the
| | 00:48 | password twice. By default, it
requires a password that's at least seven
| | 00:52 | characters long and includes one non-
alphanumeric character, such as a pound
| | 00:58 | sign, an ampersand or something
else that's not a letter or a number.
| | 01:01 | Also, in the ASP.NET 3.5 authentication
model, the password is case sensitive.
| | 01:08 | You can choose how to communicate all
of this to your user. Once I have dropped
| | 01:11 | the component in, I'll then format it,
I'll go to the task list and select Auto
| | 01:16 | Format and I'll choose the same Auto
Format option that I used for the Login
| | 01:20 | form, Simple. And I'll click OK.
| | 01:23 | Now, the two pages have a similar look
and feel. I'll save the changes to that
| | 01:27 | file and then I'll go back to the
Login form and I'll select the Login
| | 01:31 | component. The Login component has a
way of creating a link automatically to
| | 01:36 | your signup page. With the Login
component selected, I'll go to the Properties
| | 01:41 | panel and double click its header
to make it float and then expand it.
| | 01:46 | Then I'll add two properties that the
user can use to get from the login form
| | 01:50 | to the signup form. I'll go to the
property CreateUserText and I'll type in the
| | 01:56 | text, Register as a new user. Notice
that after I type in that text and press
| | 02:01 | the Tab key, the text I typed in
appears in the Login form in the Design view.
| | 02:06 | Next, I'll go to the property
CreateUserURL. This is how you designate the page
| | 02:11 | you want the user to go to if they
click the link. I'll click into the property
| | 02:15 | and then click the Browse button
that appears and I'll select the file
| | 02:19 | Signup.aspx and click OK. I'll save my
changes and then run the page selecting
| | 02:27 | Debug > Start Without Debugging. When
the Login form appears, I'll click onto
| | 02:33 | the Register as a new user icon
and that takes me to the Signup form.
| | 02:37 | I will click into the form and type in
a username of newuser. Then I'll enter a
| | 02:42 | password twice, remember that the
password must be at least seven characters
| | 02:46 | and include a non-alphanumeric
character. Make sure you type the password
| | 02:51 | exactly the same both the times. Then
type in an e-mail address, type in a
| | 02:56 | Security Question and a Security Answer.
| | 03:00 | The login system has the ability to
prompt the user for the security question
| | 03:05 | and then allow them to get back into
their account later. I'll click Create
| | 03:09 | User and when the form completes its
operation, the newuser information will
| | 03:14 | have been added to the authentication
database. The Continue button currently
| | 03:17 | only goes back to the current page, but
now I'll go back and run the Login form again.
| | 03:23 | I will just go up to the web browser
URL and go to Login.aspx. I'll type in the
| | 03:30 | username and password that I created,
newuser and the user password. I'll click
| | 03:36 | the Log In button and I'm taken
automatically to the homepage of the website.
| | 03:41 | So, now I have created two of
the most critical components for an
| | 03:44 | authentication system, a Login
form and a way to add new users.
| | 03:49 | In other videos in this chapter, I'll
describe the structure of the database
| | 03:53 | that contains the authentication
information and then describe how to lock down
| | 03:58 | the website, so when a user tries to
navigate to various pages of the website,
| | 04:02 | they are automatically taken to the Login form.
| | Collapse this transcript |
| Understanding the security database| 00:01 | When you use the Login components,
it results in creating an SQL server
| | 00:05 | database named automatically ASPNETDB.MDF
and the security framework uses the
| | 00:11 | underlying SQL server engine that's
installed on the local machine to connect
| | 00:16 | to that database, populate it with tables
and then start adding user information.
| | 00:21 | The tables are named automatically.
They each have a prefix of ASP.NET_ and
| | 00:27 | then a suffix that describes the
purpose. When you create a new user, records
| | 00:32 | are added automatically to two of these
tables and as an ASP.NET administrator,
| | 00:37 | it's important to know about these
tables and understand a little bit about
| | 00:40 | their structure.
| | 00:41 | First of all, the aspnet_Users table
contains primary information about each
| | 00:47 | user. I'll go to the Database
Explorer, to the Tables list, locate the
| | 00:52 | aspnet_Users table, right-click and
select Show Table Data and you will see
| | 00:59 | that when I created the new user that
a record was created in this table with
| | 01:03 | the user name. Notice that the user
name is populated twice; once however you
| | 01:08 | have typed it and then once as the
lowercase version. It's the lowercase
| | 01:13 | version that's used to compare when you login.
| | 01:15 | This means that the user name itself
is non-case-sensitive while the password
| | 01:19 | is case-sensitive. There are other
columns in this table, but you will notice
| | 01:23 | that there is no storage here of the
user's password. That information and
| | 01:28 | other useful bits of
information are in a linked table called
| | 01:32 | aspnet_Membership.
| | 01:33 | I will open the data for that table as
well and show you that there is also one
| | 01:37 | record here linked to the record in the
user's table. The password is stored in
| | 01:43 | the Password column and it's stored
in a hash-encoded form that can only be
| | 01:47 | used to compare and not to retrieve.
| | 01:49 | Once again, there are other columns
here used for various conditions. There is
| | 01:53 | the email address, the lowercase
version of the email address, the password
| | 01:58 | question and the hashed version of the
password answer. If you want to remove a
| | 02:03 | user from the authentication model,
first go to the aspnet_Membership table and
| | 02:09 | remove the record there, then go to
the Users table and remove the record there.
| | 02:14 | If you try to remove the record from
the Users table first, you will find you
| | 02:17 | are not able to because there is a
database constraints to put in place
| | 02:20 | automatically that makes sure that
you don't orphan records in the linked membership table.
| | 02:26 | Other tables in the database structure
are used for row-based security and for
| | 02:31 | sharing user information across
applications. Those details are beyond the
| | 02:35 | scope of this tutorial, but if you
want to learn more about the database
| | 02:39 | structure, read the ASP.NET
documentation about the security system. This
| | 02:44 | architecture and the components that
I'm using are a part of ASP.NET 3.5 and
| | 02:50 | were not available in
earlier versions of the framework.
| | 02:52 | In earlier versions, to implement
this sort of authentication, there was a
| | 02:56 | certain amount of programming that
you had to do and in 3.5, it's all been
| | 03:00 | fairly automated. So, in the chapter
so far, I started off by creating the
| | 03:06 | Login component on a page of its own
and then I created the Create New User
| | 03:11 | wizard on a page of its
own and linked them together.
| | 03:14 | In the remaining steps, I'll show you
how to configure the website so that when
| | 03:18 | a user tries to visit a particular page,
access is denied and the user instead
| | 03:23 | is sent over to the Login form.
| | Collapse this transcript |
| Configuring security in the web.config file| 00:00 | After creating the user interface that
allows the user to login, the next step
| | 00:05 | is to lock down the rest of the website
so that when the user tries to navigate
| | 00:09 | to any page of the website they are
automatically redirected to the Login page.
| | 00:14 | To see the current behavior, open the
file Titles.aspx or any other web page
| | 00:20 | that presents data in the site
and run the page in the browser.
| | 00:25 | You should see that the page loads
successfully. Close the browser and return
| | 00:29 | to Visual Web Developer and then open
the file web.config. This is the XML file
| | 00:36 | in which you configure your website's behavior.
| | 00:39 | In the file, navigate to the end of
the system.web element. If you are using
| | 00:45 | the version that's included with the
Exercise Files, you will find that element
| | 00:48 | at the line 83. Notice in the version
that's included with the Exercise Files
| | 00:53 | that there is a commented out section.
This section isn't in there by default,
| | 00:57 | I placed it in there, so
it's not taking any action yet.
| | 01:01 | In order to lock down the entire website,
you simply create this authorization
| | 01:05 | element and within the authorization
element, you add a deny element with the
| | 01:11 | user's attribute set to a question mark.
That means that you are denying access
| | 01:15 | to any anonymous users.
| | 01:17 | To complete the task of locking down
the website then simply remove these
| | 01:21 | comment tokens and then press Ctrl+S
to save your changes to the web.config file.
| | 01:27 | Now, go to Titles.aspx again and try
running the page in the website. This time
| | 01:33 | you should see that instead of going
to the Titles page, you are redirected
| | 01:37 | automatically to the Login page.
| | 01:39 | Take a close look at the URL in the
web browser though. Notice that you are
| | 01:43 | redirected to Login.aspx and a
return URL attribute is passed in that
| | 01:49 | references the page you try to get to
and then log in with the username and
| | 01:53 | password that you have added to
the authentication database earlier.
| | 01:57 | I will login with the user name and
the password that I used and then I'll
| | 02:01 | click the Login link and you will see
that the page I originally requested, the
| | 02:06 | Title list is successfully loaded.
| | 02:08 | As long as I keep the browser open,
I'll be able to navigate around in the
| | 02:12 | website. If I close the web browser
and then try to reopen a page of the
| | 02:17 | website, I'll once be redirected back
to the Login form. This is because the
| | 02:24 | Login system is using session based
cookies; cookies that are only stored in
| | 02:29 | the browser's memory, rather than on disk.
| | 02:32 | So when you close the browser's windows
on the client, that makes it forget the
| | 02:36 | cookies and then the next time, the
servers doesn't recognize the user and asks
| | 02:41 | the user to login again.
| | 02:42 | So now, I have created the user
interface for logging in and I have also locked
| | 02:47 | down the remainder of the website so
only authenticated users can access those pages.
| | 02:52 | The last step is to create a Logout
feature, which I'll do in a separate video.
| | Collapse this transcript |
| Creating a page to log out users| 00:01 | In websites that require the users to
login before they can have access to the
| | 00:04 | sites resources, you typically want to
create an explicit Logout feature. Even
| | 00:10 | though the user can logout by closing
all of their browser windows. The users
| | 00:15 | don't always know that and it gives
them a sense of security knowing that there
| | 00:19 | is something they can click on to
explicitly logout from the site.
| | 00:23 | For this demonstration I'll start in
the controls file Header.ascx. In this
| | 00:29 | file there is a panel that contains a
number of hyperlinks. Right now the user
| | 00:34 | navigates around the website by using
the hyperlinks in the panel starting at line 12.
| | 00:40 | I will look at the file in Design
view and I'll show you that it has the
| | 00:44 | hyperlinks and when you are looking at
it in Design view, you won't see all the
| | 00:48 | styles applied. So it doesn't look
quite the way it will in the whole website.
| | 00:52 | I'll click into the panel that
contains the hyperlinks. I'll click into the
| | 00:55 | panel that contains the hyperlinks, put
in a spacebar, pipe character, which is
| | 00:59 | the character on this same key as the
backslash. Just press the Shift key when
| | 01:03 | pressing that key and you will get
that separator character. Then put in
| | 01:07 | another space. Instead of creating an
explicit hyperlink, I'll use another one
| | 01:12 | of the Login controls. I'll go to the
Toolbox to the login section and I'll
| | 01:17 | drag in a LoginStatus object. The
LoginStatus object has two states. The
| | 01:22 | default state shown here is called
the Logged Out state and it creates a
| | 01:26 | hyperlink that takes the user to the
login page. In the Logged In state, it
| | 01:31 | shows a hyperlink with the text Logout
and when the user clicks on that link,
| | 01:36 | it logs them out and
redirects them back to the Login page.
| | 01:41 | Now I'll save the changes and then
I'll open up the file styles.css. In this
| | 01:46 | file there is a class selector for
menuPanel. It's at line 16 and the menuPanel
| | 01:52 | rules include a width property that's
setting the width of that panel to 250
| | 01:57 | pixels. Because I have added a new
Hyperlink I need to make it wider.
| | 02:01 | I'll change it from 250 pixels to 300
pixels. I'll save my changes by pressing
| | 02:07 | Ctrl+S and then I'll close that file.
| | 02:11 | Now I'll open up the Titles.aspx page
and I'll run it in the browser. Because I
| | 02:16 | have locked down the website, I'm not
initially logged in, I'm taken to the Log
| | 02:20 | In form. Notice the image is broken for
the moment. We'll fix that in a moment.
| | 02:25 | I'll login with my username and
password, newuser and the password I created,
| | 02:32 | and then I'm directed to the Titles
page or whichever page I requested. And
| | 02:37 | here is Logout link.
| | 02:38 | Notice that the user doesn't see any
difference between the explicit hyperlink
| | 02:43 | and one that is created by an ASP.
NET control, such as the Log In status
| | 02:47 | control and now I'll click the Log Out link
and that takes me back to the Log In page.
| | 02:53 | So now you have a way for the user to
login and logout. So now about the image.
| | 02:59 | The image is broken because when you
Log Out, you are no longer authenticated
| | 03:03 | against the website and the web server
is preventing your accessing resources
| | 03:08 | on the website. So in the Log In form
your best approach is to strip it of all
| | 03:13 | visual elements other than the Log In
components itself. Close the browser and
| | 03:18 | reopen the file Login.aspx and I'll
scroll down to the panel containing the
| | 03:23 | image. It's at line 11 on my file. Now
simply delete the entire panel. So now
| | 03:29 | all I'm left with, it's a login
component wrapped inside a paragraph. I'll save
| | 03:33 | my changes, run the page in the
browser and there is the Login form.
| | 03:37 | Any styling that you want to apply
should be done directly in the page, rather
| | 03:41 | than in the external style sheet.
This is because that external style sheet
| | 03:45 | file may not load into the browser
correctly when the user isn't logged in due
| | 03:50 | to the restrictions of the ASP.NET
authentication model. But you now have a
| | 03:54 | complete system. The user can log in,
I'll click into the form and type in the
| | 03:59 | username and the password and press
Enter. As long as I keep the browser open,
| | 04:05 | I can navigate around the website
freely and when I click the Logout link, I'm
| | 04:10 | taken back to the Log In form and I can
then either Log In again or close the browser.
| | Collapse this transcript |
|
|
13. Deploying a Web SiteInstalling IIS on Windows XP| 00:01 | In order to deploy your ASP.NET
website you will need work with Internet
| | 00:05 | Information Services or IIS. IIS is
Microsoft's enterprise level web server.
| | 00:12 | It's included with many editions of
Windows including Windows XP Professional,
| | 00:17 | Windows Server 2003, Windows Server
2008 and many editions of Windows Vista.
| | 00:23 | In this video I'll describe how to
install IIS on Windows XP Professional. In
| | 00:29 | order to work with ASP.NET 3.5 you
will need to be working with at least
| | 00:32 | Windows XP Service Pack 2, which is
the version I'm working on right now, and
| | 00:38 | you will need access to your Windows
Media CD. That is the CD from which you
| | 00:42 | installed the Windows operating system.
That's because the installation files
| | 00:46 | for IIS are on the CD rather than
part of the default installation of the
| | 00:51 | operating system itself.
| | 00:53 | From the Windows menu, go to the
Control panel. I'll go to the Start menu and
| | 00:58 | select Control panel and in the
Control panel if you see the Category View,
| | 01:02 | which will only have a few options,
switch to this the Classic View by clicking
| | 01:07 | the appropriate link. Then from the
Control panel Classic View double-click on
| | 01:12 | Add or Remove Programs. Click on Add/
Remove Windows Components. It might take a
| | 01:18 | few moments for Windows XP to scan
your computer, to see what components were
| | 01:22 | already installed and then it
presents this, the Windows Components Wizard.
| | 01:27 | Scroll down a bit and you will see
an item labeled Internet Information
| | 01:31 | Services. Check that option and then
click the Details button. The Details
| | 01:36 | button shows a list of the
subcomponents for IIS. You will need to install most
| | 01:41 | of the items that are already selected
here. The one that's totally optional is
| | 01:45 | the SMTP Service.
| | 01:47 | SMTP stands for Send Mail Transfer
Protocol and it's a service that you can use
| | 01:52 | if you want to send mail from your
own server. Setting up SMTP is a fairly
| | 01:58 | complex operation and there are
security considerations that I won't go into
| | 02:02 | here. So for this purpose I'll just
deselect it. But I'll leave all the other
| | 02:06 | items selected that are already
selected including World Wide Web Service,
| | 02:11 | Internet Information Service SnapIn,
Documentation and Common Files and then I'll click OK.
| | 02:18 | Then I'll click Next and that
causes the installation to proceed. The
| | 02:23 | installation process installs the
actual software and also creates a default
| | 02:28 | directory structure named c:/inetpub/www.root.
That folder will become your IIS
| | 02:37 | default documents folder.
| | 02:39 | So that if a user navigates to your
website and provides just the root folder
| | 02:44 | address you will actually be
addressing files in the wwwroot location.
| | 02:49 | Once the installation is complete you
will see this message, Completing the
| | 02:53 | windows components wizard, click Finish.
Then close the Add or Remove Programs
| | 02:58 | window and return to the Control panel.
Go to Administrative Tools and from
| | 03:04 | there into Services. In the Services
panel scroll all the way down to the
| | 03:09 | bottom and you will find an item
labeled World Wide Web Publishing that's the
| | 03:14 | actual IIS service and you can stop
and start your server from this item.
| | 03:19 | Right after installation it's a good
idea to stop the service and then restart
| | 03:24 | it. In some circumstances you might
find you actually have to reboot the
| | 03:28 | computer, before you can address your
server for the first time. Now the first
| | 03:32 | time you go into the server, you might
see some errors. I'll go to our browser
| | 03:36 | and type in http://localhost. It might
take a few moments to address the server
| | 03:43 | for the first time and you
might see this pop up login dialog.
| | 03:48 | The reason this dialog appears is
because the default user that's being used to
| | 03:52 | manage your IIS service is not
authenticated for the www.rootfolder. So there
| | 03:58 | is a bit of a set up process to follow.
I'll Cancel the dialog and then I'll
| | 04:03 | hold down the Window key and press E,
for Windows Explorer and I'll navigate to
| | 04:08 | C: > Inetpub.
| | 04:11 | The wwwroot folder is right here.
This is the folder that by default is
| | 04:16 | secured. I'll right-click on it and
select Sharing and Security. In the
| | 04:22 | Properties dialog look for a Security
tab. Now if you don't see the Security
| | 04:28 | tab, press Escape go back to Windows
Explorer, go to Tools > Folder Options. In
| | 04:37 | the Folder Options dialog click View,
scroll down to the bottom of the options
| | 04:43 | and deselect this option, Use simple
file sharing. Then click OK and then once
| | 04:48 | again right-click on
wwwroot and select Properties.
| | 04:53 | This time you should see the Security
tab, click on it. Then in the list of
| | 04:58 | group or user names go down to Users,
click on it and then in the Permissions
| | 05:04 | list click on the check box under
Allow and then I'll click OK. And you will
| | 05:10 | have granted permissions for all the
users on the computer to access this folder.
| | 05:15 | Go back to the browser and once again
navigate to the http://localhost. Once
| | 05:21 | again you might see the login dialog.
That's because by default you are trying
| | 05:26 | to access a file. Which is also
secured so there is one more step in the
| | 05:30 | process to testing your server. Press
Escape or click Cancel and then create a
| | 05:36 | new file. I have already created
the file that's needed. Its name is
| | 05:40 | Default.htm. And I'll open it in a
Text Editor, I'll use WordPad and show you
| | 05:46 | that it contains the simplest possible web page.
| | 05:49 | It has a pair of http tags, a pair of
body tags and a Heading1 with the words
| | 05:54 | Hello World! I'll take that file and
copy it to the Clipboard and then I'll
| | 05:59 | navigate to my wwwroot folder and paste
it into place. Then I'll go back to the
| | 06:05 | browser again and I'll type in again
http://localhost and this time I should
| | 06:13 | see the string Hello World!
displayed in large text.
| | 06:17 | Don't worry about any security
prompts you might see. After the next step,
| | 06:21 | which will be installation of ASP.NET
3.5 and its integration with IIS,
| | 06:28 | you will be ready to start
deploying your websites right away.
| | Collapse this transcript |
| Installing ASP.NET 3.5 on Windows XP| 00:01 |
After installing Internet Information
Services on Windows XP, the next step is
| | 00:06 |
to download and install the .NET Framework.
| | 00:09 |
You can get the .NET Framework from
the website www.asp.net. I'll navigate to
| | 00:15 |
that website now. I'll go into
Internet Explorer and go to www.asp.net.
| | 00:23 |
From the home page, I'll go to the
section labeled Get ASP.NET - Free and click
| | 00:29 |
on ASP. NET Framework. And from there
I'll go down to Microsoft .NET Framework
| | 00:34 |
Version 3.5. At the time of recording
the most recent version was 3.5 Service
| | 00:41 |
Pack 1. Click the link to download.
After you have downloaded the file, double
| | 00:46 |
click it to open it, the name of
the file is dotnetfx35setup.exe.
| | 00:53 |
After a few moments spent loading the
installation components, you will see
| | 00:57 |
this screen. Take a look at the
licensing document and then if you accept it,
| | 01:02 |
click the appropriate icon. If you
would like to send information about setup
| | 01:06 |
experiences, you can check this option, I won't.
| | 01:09 |
And then click Install. During the
installation process, additional files will
| | 01:14 |
be downloaded from the Microsoft
website. So you will need access to the
| | 01:18 |
Internet throughout this process.
| | 01:20 |
The installation process runs fairly
seamlessly, so you can walk away, get a
| | 01:24 |
cup of coffee and when you come back,
the installation should be complete.
| | 01:30 |
After the installation is complete,
it's a good idea to reboot your computer
| | 01:34 |
and then you will be ready for the
next step, to actually deploying your website.
| | 01:39 |
| | Collapse this transcript |
| Deploying a site on Windows XP| 00:01 |
Once you have installed the .NET
Framework you are then ready to deploy your
| | 00:04 |
website. There are a few steps
involved. First, you will place the website
| | 00:09 |
somewhere on disk. Then you will create
a virtual directory, an alias pointing
| | 00:14 |
to the location on disk of the website.
| | 00:17 |
Then you will go into the Windows XP
Security Settings for the website folder
| | 00:22 |
and you will provide security access
to the folder for the .NET Framework's
| | 00:26 |
user and then finally you will go
into the IIS Administrator and provide
| | 00:30 |
anonymous access.
| | 00:32 |
Let's go through the steps. I'll be
working with a folder called TheNightOwl.
| | 00:37 |
Now you are going to setup a virtual
directory. You can setup the virtual
| | 00:41 |
directory initially using Windows
Explorer. I'll right-click on the folder
| | 00:46 |
TheNightOwl and I'll go to Sharing and Security.
| | 00:50 |
In the Properties View, I'll go the Web
Sharing, and then I'll Share the folder
| | 00:55 |
by selecting that option. This dialog
pops up labeled Edit Alias. An alias is
| | 01:01 |
essentially a virtual directory name,
a pointer to the physical directory on disk.
| | 01:07 |
Aliases for the web are typically
created using all lowercase. So I'll set my
| | 01:12 |
Alias as simply nightowl. The Access
permissions that are presented by default
| | 01:18 |
are the minimum that are needed. Read
access to get to the files and Script
| | 01:23 |
access to execute your ASP.NET scripts.
Click OK to save the virtual directory
| | 01:29 |
and then click OK again.
| | 01:31 |
Now, the next step is to provide
Windows XP file access for this folder to the
| | 01:35 |
user that's used to run the ASP.NET
website. Right-click on the folder again
| | 01:40 |
and select Sharing and Security. Go to
the Security tab and take a look at the
| | 01:46 |
different options. There is security
available for Administrators, System, and Training.
| | 01:52 |
None of these three categories include
the user that's used to run the ASP.NET
| | 01:57 |
website and IIS. So to easily grant
that permission I'll click the Add button
| | 02:04 |
and I'm going to assign very broad
permission. I'll type in the word Users and
| | 02:09 |
Check Names and I see BARDOTECHDEE1/
Users. This means I'm going to be granting
| | 02:16 |
these access permissions to all users
on the computer and that's okay.
| | 02:21 |
I'll click OK and then with the new Users category
selected, I'll select Full Control and click OK.
| | 02:30 |
Now the next step is to provide
anonymous access through the Internet
| | 02:34 |
Information Services Management Console.
I'll go to the Start menu and select
| | 02:40 |
Control panel. Within the control
panel I'll double click on Administrative
| | 02:45 |
Tools and from there go to
Internet Information Services.
| | 02:51 |
This is the Internet Information
Services Management Console. It was installed
| | 02:56 |
during the IIS installation. I'll go to
the tree on the left and open the local
| | 03:01 |
computer and from there open the Web
Sites and then select Default Web Site.
| | 03:07 |
With Default Web Site selected in the
panel on the right, I'll see a list of
| | 03:11 |
all the physical files and folders
within the root folder and I'll also see any
| | 03:17 |
virtual directories including the
nightowl virtual directory that I already setup.
| | 03:22 |
Now, I'll right-click on nightowl and
I'll go to Properties. In the Properties
| | 03:27 |
screen, I'll click on Directory
Security and then I'll click the Edit button
| | 03:32 |
under Anonymous access and
authentication control. When you create a brand new
| | 03:37 |
virtual directory in Windows XP Service
Pack 2, Anonymous access is disabled by default.
| | 03:43 |
I will check to select Anonymous
Access and notice that now I'll be working
| | 03:48 |
with the username IUSR and then the
name of the machine. I'll click OK and then
| | 03:54 |
click OK again. And now I'm finally
ready to test my website. I'll go to a
| | 03:59 |
browser and then I'll type in the
address of the website. Because I'm still
| | 04:04 |
working on the local machine it will
start with http://localhost and then the
| | 04:11 |
virtual directory name that I created, nightowl.
| | 04:14 |
It may take a few moments for the
server to respond on the first attempt. It's
| | 04:18 |
doing a little bit of backend processing.
But once it's finished with that you
| | 04:22 |
will see the default homepage of the
website rendered on the screen in the
| | 04:26 |
browser. Once the homepage is loaded
you should be able to navigate around to
| | 04:31 |
other pages without any further delays.
| | 04:33 |
Now I'm loading a version of the
website that doesn't use any database
| | 04:36 |
functionality, just to simplify this
process. But if you have already installed
| | 04:41 |
your copy of SQL server and set up
your database, you should be able to take
| | 04:46 |
other versions of the nightowl website
from other chapters of the video series
| | 04:51 |
and deploy those instead and your
database access should work right away
| | 04:56 |
without any hesitation.
| | 04:57 |
So that completes the process of
deploying an ASP.NET website using Internet
| | 05:03 |
Information Services and
ASP.NET 3.5 for Windows XP.
| | 05:07 |
| | Collapse this transcript |
| Installing Information Internet Services (IIS) on Windows Vista, Windows 7, and Windows 8| 00:01 |
In Windows Vista, Internet
Information Services is included in the primary
| | 00:05 |
installation, but not enabled
automatically. To turn on IIS in Vista,
| | 00:11 |
follow these steps.
| | 00:13 |
Start off in the Control panel. Go to
the Start menu and select Control panel
| | 00:19 |
and from there click on Programs.
In the Program section look under the
| | 00:23 |
category Program and Features and
click Turn Windows features on or off. It
| | 00:29 |
will take a few moments for the
Windows Features panel to come to life.
| | 00:33 |
It first scans your computer to find
out what features are turned on and which
| | 00:38 |
are turned off. In the Windows
Features list, locate Internet Information
| | 00:42 |
Services and open it up. Don't
install the entire category. You will be
| | 00:47 |
installing a lot of software that you
don't need. Go to the category World Wide
| | 00:51 |
Web Services and click that entire
category. And then go to Application
| | 00:56 |
Development Features, and minimally
turn on .NET Extensibility and ASP. NET.
| | 01:03 |
If you also want to use older versions
of the Microsoft Server Software,
| | 01:07 |
you can turn on ASP or Active Server Pages.
Also go to Web Management Tools and
| | 01:14 |
turn on the IIS Management Console,
IIS Management Scripts and Tools and the
| | 01:19 |
IIS Management Service. Finally go to
Common Http Features and make sure that
| | 01:25 |
all the options are
selected under that category.
| | 01:28 |
You can turn on certain other
features such as, Basic Authentication under
| | 01:32 |
Security, Request Filtering, URL
Authorization and Windows Authentication, if
| | 01:38 |
you need these features. Click OK and
then take a break. It will take Windows
| | 01:44 |
Vista a few minutes to complete the
installation that you have requested.
| | 01:47 |
When you are done with this part of the
installation, the next step would be to
| | 01:51 |
download and install the .NET Framework.
And I'll describe that in a separate video.
| | 01:56 |
| | Collapse this transcript |
| Configuring ASP.NET 3.5 on Windows Vista| 00:00 | Once you have installed Internet
Information Services on your computer,
| | 00:04 | you then need to either install
or link up the .NET Framework.
| | 00:09 | If ASP.NET version 3.5 wasn't
previously installed, you can download it and
| | 00:15 | install it. Go to this website www.asp.net.
On the homepage of the website, go
| | 00:22 | to the Get ASP.NET - Free section
and click on ASP.NET Framework. Go to
| | 00:28 | Framework Version 3.5, at the time of
this recording, the most recent version
| | 00:32 | was SP1 or Service Pack 1 and then
download the Installer. Run the Installer
| | 00:38 | following all the prompts.
| | 00:40 | The process of installing the .NET
Framework on Windows Vista in this fashion
| | 00:44 | is exactly the same as for Windows XP.
If you haven't already watched that
| | 00:48 | video, watch the detailed video for
installing .NET on Windows XP and you will
| | 00:53 | see the steps exactly.
| | 00:55 | Now if you have already installed the
.NET Framework version 3.5, as part of
| | 00:59 | let's say Visual Web Developer then you
have one step to follow to connect the
| | 01:04 | two together. Go to a command window.
In Vista you can click on the Start
| | 01:09 | button and then type in cmd and
press Enter. From there switch to this
| | 01:15 | directory, C:\Windows\Microsoft.NET\
Framework\v2.0.50727. That's not a mistake.
| | 01:29 | Even though you are going to be working
with Version 3.5, you actually register
| | 01:34 | Version 2, and then you will have
access to all of the ASP.NET components from
| | 01:38 | Version 2 through the 3.5 Version
that you have already installed.
| | 01:42 | Now to connect the components together,
type in this command, aspnet_regiis -i
| | 01:55 | for install, and press Enter. And
you should see the message 'Finished
| | 02:00 | installing ASP.NET.' Once you have
done that operation, your installation of
| | 02:05 | ASP.NET 3.5 and your installation of
IIS will be connected together and you
| | 02:11 | will be ready for the next
step deploying a website.
| | Collapse this transcript |
| Deploying an application on Windows Vista| 00:01 | Once you have installed Internet
Information Services and configured the .NET Framework
| | 00:05 | you are ready to deploy your site.
For this demonstration I'll use
| | 00:09 | the folder TheNightOwl, which contains
a set of Web site files. I'll copy that
| | 00:14 | folder to the Clipboard and then go to
the Desktop and paste the folder there.
| | 00:21 | You can place your website files
anywhere on disk. In a normal Web site
| | 00:25 | deployment I wouldn't place these
files on the Desktop, but I'm doing it here
| | 00:28 | just for easy visibility.
| | 00:30 | Now the next step is to go in to the
Internet Information Services Management console.
| | 00:35 | The easiest way to get to run
Windows Vista is to go to the Start menu
| | 00:39 | and then Search input start typing
Internet Information and you will see the
| | 00:44 | Internet Information Services
Management application appear. Click the link to
| | 00:49 | open the software and then maximize it.
| | 00:52 | If you watch the similar videos for
XP you will notice that the Manager in
| | 00:56 | Vista is very different. It's much
more graphically oriented and instead of
| | 01:01 | simple lists, shows you icons for each
task. In the Connections section on the
| | 01:05 | left, open the tree and go to Sites. Then
go to Default Web Site. Right-click on
| | 01:12 | Default Web Site and select Add
Application. On Vista, an ASP.NET enabled Web site
| | 01:19 | is called an application.
| | 01:21 | The alias can be anything you like but
on the web it's typically all lowercase.
| | 01:26 | I'll set my web site or application
alias to NightOwl. Then I'll click the
| | 01:30 | Browse button to select the physical
path. I'll navigate to my computer's
| | 01:34 | Desktop and select the
folder TheNightOwl and click OK.
| | 01:39 | If you click the Connect As button
you will see in a dialog that you are
| | 01:43 | automatically connecting as the
application user. Click OK to accept that and
| | 01:49 | then click Test Settings. You should
see the message that access to the path
| | 01:53 | on disk is not verifiable. That's okay.
I'm going to be showing you how to
| | 01:58 | check security next. Click Close,
click OK and then just minimize Internet
| | 02:04 | Information Services Manager.
We may need to get back there later easily.
| | 02:09 | Next go to the folder on the Desktop
TheNightOwl. Right-click on it and select
| | 02:14 | Properties. In the Properties dialog
click Security and then click the Edit button
| | 02:20 | to modify the Security settings
for this directly. In the list of group
| | 02:24 | or use names, click Add, type Users
and click Check Names and then click OK.
| | 02:32 | Simply for the ease of use I'm
granting broad security to all users of the
| | 02:36 | computer. If you want to fine-tune
the security little bit more, you can
| | 02:40 | identify the user name that's being
used run.net and only grant security to
| | 02:45 | that user. With the Users group
selected I'll go down to the Permissions for
| | 02:49 | Users pane and select Full Control
and I'll click OK and click OK again.
| | 02:55 | And now I'm ready to test my Web site.
I'll go to the menu and open Internet
| | 02:59 | Explorer and now navigate
the Web site using the URL
| | 03:04 | http://localhost/nightowl. After a
moment the Web site appears and I can click
| | 03:14 | around in the hyperlinks getting from
page to page. If you have gotten this
| | 03:18 | far, that means you have successfully
deployed an ASP.NET Web Site using IIS
| | 03:25 | and ASP.NET 3.5 on Windows Vista.
| | Collapse this transcript |
| Scripting a database for deployment| 00:00 | The last step in deploying a website,
either on your own dedicated server or
| | 00:05 | through a hosting provider is to
transfer your database structure and data if
| | 00:10 | necessary. Visual Web Developer
includes a tool that allows you to create a
| | 00:14 | text file, a script that describes
everything about your website including its
| | 00:20 | tables, columns, data types and so on.
And even includes all of the data that
| | 00:24 | you have added to the database. When
you use the Scripting tool you can choose
| | 00:29 | to export just the database
structure or the structure and the data.
| | 00:34 | To get to this tool go to the Database
Explorer and go to the Data Connection
| | 00:38 | that you are using to connect your
database. Right-click on the Database
| | 00:42 | Connection and select Publish to provider.
| | 00:45 | The Database Publishing Wizard has two
modes that you can use. Click Next on
| | 00:49 | the introductory screen and select the
database you want to work with, which in
| | 00:53 | my case is mybookstore.
| | 00:56 | In this screen you select either
scripting to a file or publishing to a shared
| | 01:01 | hosting provider. If you are working
say with a hosting provider and you are
| | 01:05 | renting SQL server space from that
company, they'll give you information that
| | 01:10 | allows you to connect to their database.
| | 01:12 | If you don't have that connection
information you can instead save the
| | 01:15 | structure and data information in the
text file. I'm going to place the text
| | 01:19 | file on my Desktop. I'll click the
Browse button, I'll navigate to my Desktop
| | 01:24 | and I'll name the file mybookstore.
sql. I'll click Save to return to the
| | 01:30 | Database Publishing Wizard
and then I'll click Next.
| | 01:33 | In this screen you indicate certain
options. The first option Drop existing
| | 01:38 | objects in script, when set to True,
means that when you run the script, if
| | 01:43 | there are any tables of the same
name as the tables that you are about to
| | 01:46 | export then those will be dropped or
deleted from the database. Use this
| | 01:51 | feature with care.
| | 01:52 | The next object, Schema qualify,
generates a script that doesn't qualify object
| | 01:57 | names. Next you indicate which version
of SQL Server you are going to be using.
| | 02:03 | I'm assuming that I'll be deploying
to SQL Server 2008. But there is also
| | 02:07 | support for the syntactical
differences that you'll encounter if your target
| | 02:11 | SQL Server installation is version
2000 or 2005. And finally in Types of data
| | 02:18 | to publish, you can indicate whether
you want to publish data only, schema and
| | 02:23 | data, which is the default, or schema only,
which would mean just the database structure.
| | 02:28 | After setting your options click Next.
This is the Review Summary screen. After
| | 02:33 | checking all of the options click
Finish. I'll click Close and then I'll
| | 02:38 | minimize everything to take a look at
my Desktop. And I'll find the new file
| | 02:43 | mybookstore.sql. I'll right-click on
the file and then open the file in a Text
| | 02:48 | Editor. And you'll see that the
database file contains all the SQL commands
| | 02:53 | that are needed to drop the existing
structure in the target database, create
| | 02:57 | the new structure and then populate
the database with data which is done
| | 03:02 | through all of these Insert commands
that you'll find further down in the file.
| | 03:06 | To use this file, check the video
earlier in this video series where I
| | 03:10 | described how to import a database
from an SQL Script file like this one.
| | 03:16 | So now you have all the tools you need.
To set up your Internet Information
| | 03:19 | Services installation, install ASP.NET
3.5 and export your database structure
| | 03:26 | and data to an SQL file that you can
then import into your hosting provider or
| | 03:32 | your dedicated SQL Server Instillation.
| | Collapse this transcript |
| Exporting database scripts in SQL Server Management Studio 2012 (NEW)| 00:00 | The Database Publishing Wizard that was
included in Visual Web Developer 2008 is
| | 00:05 | not a part of Visual Studio Express 2012.
If you go to the Database Explorer and
| | 00:10 | right-click on your data connection,
you'll see that the tool to get to that
| | 00:15 | wizard is no longer available. That
ability, however, to export the structure
| | 00:21 | and data from one or more database tables
is now available in SQL Server Management
| | 00:27 | Studio for SQL Server 2012, and I'll show
you how to do that here. I'm working with
| | 00:32 | that same database, My Bookstore, this
time seen through SQL Server Management
| | 00:38 | Studio. I'll go to my database, My
Bookstore. I'll right-click and choose
| | 00:43 | Tasks > Generate Scripts, and that takes
me to something called the Generate and
| | 00:49 | Publish Scripts wizard. On the
introduction screen, I'll click Next. Now,
| | 00:53 | I'll indicate whether I want to script the
entire database or only a single table.
| | 00:59 | Those are your choices. I'll export just
one database table: My Author's table.
| | 01:05 | I'll select it and then click Next. Now
I'll indicate how I want to save my
| | 01:11 | output. I'm going to save a script file to
a particular location on disk, so I'll
| | 01:16 | select this first option for the output
type and the default option for a Save to
| | 01:21 | File. And then here's a very important
step. I'll click the Advanced button, and
| | 01:27 | this takes me to a list of options for my
scripting. There are many options
| | 01:32 | available. I'm just going to change two of
them. First of all, I'm going to add both
| | 01:38 | Drop and Create statements, so I can use
the resulting script to remove an existing
| | 01:43 | table and create a new one. I'll change
the option to Script DROP and CREATE. Then
| | 01:49 | I'll scroll down to the bottom of the
first list and I'll change the Types of
| | 01:55 | data to script from the default of Schema
Only to Schema and Data. And again, there
| | 02:01 | are many other options available that you
can investigate. I'll click OK and that
| | 02:07 | takes me back to the Scripting Options
window. Now I'll specify which file I want
| | 02:13 | to create. I'll browse, and for
convenience, I'll put the resulting file
| | 02:19 | on my desktop, and I'll name the file
authors.SQL. When I click Save, I'm taken
| | 02:25 | back to the Scripting Options window and
then I'll click Next. I'll review my
| | 02:30 | selections and click Next again, and the
export is executed. If you see Success
| | 02:35 | under the Result column, it's all good.
I'll click Finish to close the wizard.
| | 02:40 | I'll minimize all of my software tools to
return to the desktop. And then I'll go to
| | 02:46 | the resulting file, author.SQL. I'll open
that in the text editor, and you can use
| | 02:51 | any text editor you like. I'm using
TextPad. And I'll scroll down to show that
| | 02:56 | the resulting SQL file has SQL statements
to create the table and all of its
| | 03:02 | structure, plus insert statements for all
of the data. You'll find one insert
| | 03:07 | statement for each of the original rows
that was in the database. You can now take
| | 03:12 | this resulting script and use it to create
the table on your production site and
| | 03:17 | populate it with your existing data.
| | Collapse this transcript |
|
|
ConclusionWhere to go from here| 00:00 | In this course, I described how to get
started building ASP.NET-based web pages
| | 00:05 | and websites. If you want to learn more
about any of the software components,
| | 00:10 | there are a number of courses in the
lynda.com online training library that you
| | 00:15 | might find useful. For example, if you
want to learn more about Visual Studio--
| | 00:20 | not just the express version but the full
licensed versions--and about the C#
| | 00:25 | programming language, we have courses for
these. Visual Studio 2010 Essential
| | 00:30 | Training takes a look in depth at all of
the tools that are available in Visual
| | 00:35 | Studio professional, and C# Essential
Training will help you understand more
| | 00:40 | about what you can do with this powerful,
object-oriented programming language. If
| | 00:45 | you want to learn more about SQL Server,
there are a number of available courses,
| | 00:51 | including SQL Server 2008 Essential
Training; SQL 2012 New Features; SQL
| | 00:57 | Server Triggers, Stored Procedures, and
Functions; and SQL Server Reporting
| | 01:03 | Services in Depth. And finally, this
course focused on the web forms framework,
| | 01:09 | but there are other ways of building
ASP.NET websites. And you can learn about
| | 01:14 | these in these courses. Up and Running
with Web Matrix and ASP.NET shows you how
| | 01:20 | to use another introductory tool, Web
Matrix, that you can choose instead of
| | 01:25 | Visual Studio Express. This course focuses
on building ASP.NET web pages with a
| | 01:31 | special syntax called Razor. It's useful,
more concise than traditional ASP.NET
| | 01:37 | notation, and might be appealing.
And finally, for a more advanced approach for
| | 01:43 | building the ASP.NET websites, look at
ASP.NET MVC 4 Essential Training. All of
| | 01:49 | these lynda.com courses can help you
advance your ASP.NET programming skills
| | 01:55 | and help you build more powerful, more
flexible, dynamic websites.
| | Collapse this transcript |
|
|
