Introduction to Visual Web Developer 2008 Express Edition
..............................................................................................................................................1 Introduction to Visual Web Developer 2008 Express Edition.............................................1 Part 1: Setup.................................................................................................................1 Part 2: Creating a Web Site..........................................................................................2 Part 3: Overview of Environment................................................................................3 Part 4: Writing ASP.NET code.....................................................................................6 Part 5: Compiling, Running, Saving and Publishing...................................................8 Part 6: Templates and Customization...........................................................................9 Part 7: Styles..............................................................................................................10 Part 8: Data................................................................................................................12 Part 9: Where to go from here....................................................................................14
Hello. My name is Jacqueline Russell and I am a Product Manager at Microsoft for the Visual Studio Express Editions which are a set of free, easy-to-use tools for hobbyists and amateurs to create unique projects and all sorts of different software applications. I’ve been creating windows and web applications for my own amusement and for friends and family for quite a while now. If this is your first software project, then you’re in for a treat, and don’t worry – if I can do this stuff, then you can too! In this introductory video, I’ll go over some of the main features of Visual Web Developer 2008 Express, and cover some of the most common tasks you’ll be doing as you create your websites. By the end of this video, you’ll be more familiar with the development environment and able to get started creating your first dynamic web pages. If you are already an experienced Express user, then you may not learn anything new from these introductory videos. But regardless of your skill level, Visual Web Developer 2008 Express is a great tool to help you start actively participating in the World Wide Web!
Part 1: Setup
============= First, let's get started by downloading and installing the software, which you can do from the Visual Studio Express website. On the Downloads section of the website, then click on Visual Web Developer Express to begin the download process. If you have installed a beta version of Visual Studio 2008 Express, then it is important to uninstall this before continuing. If you would
like to create an installation CD or if you need to perform an installation disconnected from the internet, then you can download an IMG file that contains the complete setup in the Offline Download section. ~~~ Run Setup ~~~ When you start the install process, this first screen asks if you want to give feedback to Microsoft on your setup experience. <Next> Then you will be asked to accept the license agreement. <Next> The next screen presents some additional installation options. Note that if you’ve already installed another Express product and selected these options, then this screen may not appear.
The MSDN Express Library is a useful additional download that installs product documentation and help files locally onto your computer, so you can access support information while disconnected from the internet. And if you plan on creating data-driven websites like e-commerce sites to display products and inventory, or club sites that display and maintain member lists, then you’ll want to download a copy of the free SQL Server Express Edition as well.
<Next> This screen shows us what’s about to be installed (this list may vary based on existing installed components): • .NET Framework 3.5
VWD Express MSDN Library SQL Server Express Edition
Please be patient during the installation process – on some older computers the installation may take up to an hour. You will also be prompted to reboot your computer so make sure you have saved any open documents. On this last screen you can check for any updates. When you get a chance I would highly recommend that you register the product. This quick step gives you access to some free resources such as e-books to help you get started working with Visual Web Developer Express, some free images from Corbis to use on your websites, hosting discounts, and more. It also allows you to enjoy uninterrupted use of Visual Web Developer Express because otherwise, the software will expire after 30 days.
Part 2: Creating a Web Site
================================== Now that the installation is complete, you can run the application from the Start menu, under "All Programs". The first time you run it, it may take a few moments to load. ~~~ Run Visual Web Developer 2008 Express ~~~
The first thing you’re presented with is something called the Start Page. This has some useful links: • You can open projects you've worked on recently
See samples and tutorials in the Getting Started section And view the latest news headlines for recreational developers
Let's dive right in and create a new Web Site. From the File menu, select New Web Site. ~~~ File | New Web Site… ~~~ The window that appears offers several different project templates that can be used as starting points for your project, depending on what type of web application you want to create.
• • • •
The “ASP.NET Web Site” offers a good starting point for most interactive webbased applications. The “ASP.NET Web Service” is used if you want to expose data or logic to others on the Internet or an internal network. The “Empty Web Site” starts with no files whatsoever, which would be good if you want to build a web site from scratch. Something that’s new in 2008 is the “WCF Service” template. WCF stands for Windows Communication Foundation and is a new communications model that makes it easier for applications to communicate with each other over a network.
Let's go ahead and build a new ASP.NET website. You can choose a location for your website – either on your local computer’s File System, on an HTTP web server, or on a remote file directory system accessed by FTP. We’re going to build our website out on our local computer. Later on we can move the files over to a web server to publish them to the public. You can also choose between two different languages to create websites: Visual Basic, or C#. Both languages have very similar features, and both fully leverage the Microsoft .NET Framework – so the decision of what language to use is a matter of personal preference. When creating a web site on your computer’s file system, by default, your project is stored in a folder under “Documents” | “Visual Studio 2008” | “WebSites”. We can name our new website anything that we'd like. Let’s change the name from “WebSite1” to "MyFirstSite". ~~~ Type in “MyFirstSite” ~~~
Part 3: Overview of Environment
============================================ Visual Web Developer is nice enough to give us a head-start on our project by providing us with an initial first page for our website that is already started for us. This page is called “Default.aspx” since it will be the default page that will appear first when your website is referenced in a browser. If you are familiar with HTML pages, you’ll notice that ASP pages are similar with a few differences:
• • •
The filename extension is .aspx instead of .html or .htm There is a directive at the top of the page with some information about the language and code behind file There is a form tag that has been inserted into the body of our HTML page
What we see first is a Split view of our default page – we see the HTML markup, or “Source” view on the top, and the rendered HTML that we would see in a browser, or the “Design” view on the bottom. To switch between views, you can use the buttons at the bottom left of the page. ~~~ Switch to Design View ~~~ Notice also that our Default.aspx page is being displayed in this central area as a tab overlaying the Start Page. You can have multiple pages open in this area, and navigate to each one by clicking on the tabs. On the right side of this main workspace area is a window called the Solution Explorer. In the same way that you can manage and navigate files on your computer system with the Windows Explorer, you can use the Solution Explorer to manage and navigate the files in your solution. Right now our MyFirstSite project contains a folder and 2 files: • The App_Data folder holds any data sources that you may have set up for your website – right now this is empty • Default.aspx is our main page
Web.config is an XML file that contains configuration settings for our website. We’ll see how to modify this file a bit later on.
You can create new folders, and add new files with the Solution Explorer. Let’s add a new folder and some images to our website. We can do this by right-clicking on our website and selecting New Folder. Let’s name it “images”. ~~~ Right-click on MyFirstSite | Select New Folder | Rename “images” ~~~ Now let’s add some sample images to this folder by right-clicking on it and selecting Add Existing Item. We can just browse for the images on our file system here. ~~~ Right-click on images folder | Select Add Existing Item… | Browse to select sample images ~~~ Just below the Solution Explorer pane is the Properties Window. This window shows all the properties or settings that are associated with the currently-selected object. You can use the Properties window to modify the settings of an object just by changing the value in the right column next to the name of the property. Let’s set some properties for our default page. First of all, we should make sure the entire Document object for our page is selected which you can do by clicking on the page and verifying that Document is the currently selected object in the Properties Window drop down box ~~~ Properties Window Drop-down box | Select DOCUMENT ~~~ Now let’s change the Title of our page from “Untitled Page” to “My First Website” and press Enter. Title = My First Website
Notice that in our Source view window the Title of our page has changed. And let’s also change the background color of our page. We can do this by clicking on the “…” button next to the BgColor property and selecting a color. BgColor = #ffccff There are a lot of different properties listed here, so if you’re not sure what property does what, you can click on a property name to get a description at the bottom of the Property Window. To format the text on your page, you can use the Formatting toolbar here at the top when you are in the Design view similar to the toolbar that’s found in programs like Microsoft Word. Let’s add some text to our page. ~~~ Click Design View | Type “My First Website” <Enter> | Select Text ~~~ Now let’s format this text. ~~~ Click drop-down set to Heading 1 | Set Font = Broadway | Set Foreground Color = Blue ~~~ By the way, if you can’t see this Toolbar, go to the View menu, Toolbars and make sure Formatting is checked. ~~~ View | Toolbars | Formatting ~~~ On the left side of the screen you’ll see a tab that says Toolbox. If you don’t see this tab, you can go to the View menu and select Toolbox. When you hover the mouse over this tab, the window will pop out and then pop back in when you move the mouse away. Let’s go ahead and pin this window in place using this pushpin icon on the top right corner. The Toolbox contains a list of all the different types of controls you can use in your project. You can think of controls as common building blocks that provide interactive functionality on a web page. Examples of some controls are checkboxes, calendars, and grids of data. Notice that the controls in the Toolbox are grouped into categories depending on what they’re used for. You can expand or collapse these groups by clicking on the plus or minus signs. For example, there are different categories for controls dealing with Data, Validation, Navigation, Login and more. ~~~ Collapse/Expand groups & Scroll slowly (keep mouse off controls) ~~~ To place controls on the page, simply drag and drop them from the Toolbox onto the default page in either the Design or Source views. ~~~ Drag label, textbox, button, radiobutton onto web page ~~~ You may notice that we can’t just place controls anywhere we want on our web pages – by default, all web page elements are laid out sequentially in what’s known as “flow layout” from left to right, top to bottom – like you would read a book. Creating a custom layout is accomplished by such techniques as placing controls in a table or by using Cascading Style Sheet settings.
Let’s use a Table to format our web page. We can do this by selecting Insert Table from the Table menu. ~~~ Place cursor before Label control | Table | Insert Table | ~~~ In this Insert Table dialog we can set the number of Rows & Columns as well as some other Table settings like border size & background color. Let’s set this to 3 rows and 2 columns. ~~~ Rows = 3 ~~~ Alright, now we can drag and drop our controls into our table cells. ~~~ Drag Label into Col1, Row3 | Drag TextBox & Button into Col2, Row3 ~~~ You can also delete any controls by right-clicking on them and selecting Delete or just pressing Delete on the keyboard. ~~~ Right-click on Radio Button | Select Delete ~~~ Now let’s add some images to our page. We can do this by simply dragging and dropping an image file from the Solution Explorer on to our page. And let’s place these images in our table. ~~~ Drag images into Col1, Rows1-2 from Solution Explorer ~~~ Notice this handy Accessibility dialog box that prompts us for any textual descriptions we want to tag our images with. This Alternate text will show as a popup tooltip when people hover their mouse over our image. ~~~ Alternate Text = Sunset | Alternate Text = Blue Hills ~~~ We can resize our images by clicking and dragging on these white box handles that appear when we select our image. ~~~ Resize images ~~~ Now let’s add a caption to our images. ~~~ Type “Sunset” and “Blue Hills” in Col2, Rows1-2 ~~~ We can also change the width and height of our table rows and columns simply by dragging them to the appropriate size. ~~~ Resize Table ~~~
Part 4: Writing ASP.NET code
===================== Now that we’ve seen some of the basic formatting tools and ingredients that are available to us, let’s make our page actually DO something. Each ASP.NET web page is defined both by its design, which we have seen so far, and also by its underlying code. So far, we’ve only seen the ASP page. But if we look in the Solution Explorer, we’ll notice that under our Default.aspx page, there is a Default.aspx.vb file – this is our code behind file. I can open this up just by double-clicking it.
Part 5: Compiling, Running, Saving and Publishing
====================== Compiling or Building your website is the process of converting all the code that you’ve written into a format that can be run on the web server. This also has the effect of doing some checking to your code for mistakes. Let’s build our project and see if there are any errors. Selecting “Build Web Site” from the Build menu, we can see the results at the bottom of the screen. ~~~ Build | Build Web Site ~~~ So far so good. Now for the fun part! Let's see how our website works by running it. We can use the green "Play" button on the toolbar, or we can also select "Start Debugging" from the "Debug" menu. If you hadn’t yet compiled your code before doing this, it will automatically compile everything before running, so you can skip the Build stage if you are confident you don’t have any bugs. ~~~ Debug | Start Debugging ~~~ This question that comes up is asking if we’d like to set up the website for debugging, or if we want to run it without debugging. Since we are still working on our website, and it isn’t final yet, we’ll choose the enable debugging option. Here is our beautiful website. Now for the moment of truth – what happens we when enter some text in the textbox and click the button? ~~~ Type “Hello Everyone!” | Click Button ~~~ Sure enough, the code that we wrote updates the Label control to display this text. Notice the URL that was used for our website. It says Localhost: followed by a port number, and then the name of our website and ASP page. Conveniently, Visual Web Developer Express includes a small web server that you can run on your local computer to test your web projects. Because of this, you don’t have to constantly upload files to a remote web server to test your changes. You can see some of the details about this little web server here in the Windows Notification area. ~~~ Double-click ASP in System Tray ~~~ Let’s go back to Visual Web Developer and save our website. We can do this by selecting File | Save All. ~~~ File | Save All ~~~ To set security and application configuration properties for our website, we can open up the Website Administration Tool by selecting “ASP .NET Configuration” from the “Website” menu. ~~~ Website | ASP .NET Configuration ~~~ Remember that web.config XML file we saw in our Solution Explorer? This administration tool will actually set the properties contained in that file. So when we’re ready to publish our website, we should make sure that we disable debugging because that can slow performance considerably.
~~~ Select Application | Click Configure Debugging | Uncheck Enable Debugging | Close ~~~ Now let’s see how we can publish our website to the public. To “Publish” a website is simply the process of copying all the files in our project over to a web server. The web server that you use must be running Microsoft Internet Information Services and the .NET Framework to be able to host your ASP .NET website. The process of copying the files over to a web server is very easy – you can either click the “Copy Website” button on the Solution Explorer toolbar window, or select “Copy Web Site” from the Website menu. ~~~ Website | Copy Web Site… ~~~ If you’ve ever used an FTP client, this window may look familiar. Click the “Connect” button to connect to the destination web server. ~~~ Click Connect ~~~ This can either be on the local file system, a local Internet Information Services installation, an FTP site, or a remote web server. Once you’ve made a connection, you can just copy your files over. ~~~ Select local File | Click Open ~~~ ~~~ Close Copy Web Site Window ~~~
Part 6: Templates and Customization
======================== As you’re building out your website, you’ll probably want to add new pages and other things. To do this, in the Solution Explorer, right-click on your website and select “Add New Item”. In the window that appears, you can pick what you’d like to add from this list of pre-installed templates. There’s a lot of things here, but don’t let that scare you. We’ll describe some of the more common templates that you’ll be using. ~~~ Right-click My First Website | Select Add New Item ~~~
• • • •
Style Sheets are good for managing all the styles for your website in 1 place
One template in particular I encourage you to look at is the Master Page. This is a useful way to maintain a uniform layout for all your web pages. Unfortunately due to time constraints I won’t be able to cover creating a Master Page in this video, but I did want to show you an example. This sample shows how a Master Page can set a consistent layout for all the web pages on your site – see how every page has the same Heading and left navigation menu? http://quickstarts.asp.net/QuickStartv20/aspnet/samples/masterpages/masterpages_v b/default.aspx You can learn more about Master Pages on www.asp.net. In order to customize your development environment, you can set some configuration options found in the Tools | Options window. ~~~ Tools | Options ~~~ Here you can specify things like window layout, font styles, keyboard shortcuts and more. For example, I can remove the line numbers from my Code Editor and Source View windows by unchecking the Line Numbers box. ~~~ General | Source View| Line numbers ~~~ And you can also set things like fonts and colors. ~~~ Environment Fonts and Colors | Set Item foreground/background colors ~~~ To see all the configuration options available to you, click the Show all settings checkbox. ~~~ Click Show all Settings checkbox | Click OK | Show changes ~~~
Part 7: Styles
======================== You’ve seen how to set page and text properties such as color and font through the Properties window and the Formatting Toolbar, but if you have a large website with many pages and lots of different styles, it can become pretty confusing to maintain. A ‘Cascading Style Sheet’ or CSS file helps you maintain a common set of styles that you can apply to all elements and pages of your website. So similar to what a Master Page does for the common components of your web pages, a Stylesheet can do for the shared styles of your website. Let me add an existing style sheet to our website, but of course you can create your own as well. ~~~ Right-click Website | Select Add Existing Item… | Browse to Sample.css ~~~ Let’s look at some of the style rules that are defined here. ~~~ Double-click Sample.css ~~~
If we right-click anywhere in our body style rule, we can select Build Style to modify any of these settings. ~~~ Right-click in body style rule | Select Build Style… ~~~ Notice the the background property is also set to show an image. If we click on the Manage Styles window underneath our Properties window (if you don’t see this window, from the Format menu in Design view, you can select CSS Styles | Manage Styles). ~~~ Click Manage Styles Window ~~~ In this window we can define a new style, or attach a stylesheet. We see that we already have a style that was defined when we set the format for our Heading. We see a preview of that style, and if we hover our mouse over it, we can see the formatting rules for that style, and if we right-click on it, we can apply it to the currently selected element on our web page, or we can modify it which we’ll do. ~~~ Hover over style1 | Right-click on style1 | Select Modify Style… ~~~ In this modify style dialog box, we can change pretty much any style property – including the font, the alignment, background, positioning, and more. ~~~ Font Family=Comic Sans, Size=20, Weight=bold ~~~ Let’s attach the sample stylesheet that we just added to our website. ~~~ Click Attach Style Sheet | Select Sample.css ~~~ Notice the new styles that get added to our project. You can have inline styles such as our style1, as well as styles that are defined in a style sheet. Let’s also look at a couple other windows that will help you manage your website’s styles. The Apply Styles window is an easy way to apply your defined styles to selected elements on your page ~~~ Click Apply Styles Window ~~~ Just select an element in either the Design or Source view of your page and click on the selected style that you want to apply. ~~~ Select Sunset caption | Click on style1 in Apply Styles Window ~~~ You can also clear the styling on an element as well. ~~~ Click Clear Styles in Apply Styles Window ~~~ The CSS Properties Windows is a handy way to see what styles are currently being applied. ~~~ Select Sunset caption | Select Heading ~~~
If you click on the Summary button at the top, you can get a summarized view of properties that have been set. You can also change any of the property values for the select style from here. ~~~ Change color = green ~~~
Part 8: Data
========================== Many web sites become very useful when they can display the most up-to-date information and allow users to input and edit information. One of the best ways to store information is in a database. In this section, we will create a connection to an existing sample database from Microsoft called Adventure Works which is modeled after a fictitious bicycle company, and show you how easy it is to display data on your web pages. In order to use a database like this, you must have installed SQL Server Express Edition, either during the original installation, or you can add it in later by running through the Setup process again and choosing “Add Optional Products”. You can also find Adventure Works and other sample SQL databases at http://www.codeplex.com. We’ll start by adding a GridView control from the Data category of our Toolbox onto our webpage ~~~ Drag GridView control onto web page ~~~ Then using this GridView Tasks menu, we can select “New Data Source” to connect to our database ~~~ Choose Data Source New Source ~~~ This opens up the Data Source Configuration Wizard. There are several different sources available to us, including an Access database file, an ODBC data source, and a SQL Server database instance. In this case we’ll connect to a SQL database file on the local computer. ~~~ Select Database | Click OK ~~~ We need to create a new data connection, so let’s click on this New Connection button. ~~~ Click New Connection ~~~ We can browse to find our AdventureWorks_Data.mdf sample data file. And you can select Test Connection to make sure that we set this up properly. ~~~ Browse | Select AdventureWorks_Data.mdf | Click Test Connection | Next ~~~ This next screen asks us if we want to save our data connection. We do, leave this box checked and click Next. ~~~ Click Next ~~~
Now we need to configure the SQL statement to retrieve our data. Let’s specify a custom SQL statement. ~~~ Click Custom Radio button | Next ~~~ Since I’m lazy and I always seem to forget my T-SQL syntax, let’s use the Query Builder to help us. ~~~ Click Query Builder ~~~ Let’s only use the Product table for this example – but you can build your query off of multiple tables if you wish. ~~~ Scroll down, select Product | Add | Close | Resize Query Builder window ~~~ In this top section of the Query builder we see all the fields in our Product table. We don’t really need all of these, so let’s just select the “Name” field. ~~~ Check Name ~~~ In this bottom section of the Query builder, we can see what this SQL query actually looks like. ~~~ Click OK | Next ~~~ So, that’s about it. We can test the query here. Looks good. ~~~ Click Test Query | Click Finish ~~~ Now let’s click AutoFormat to choose a style for our GridView. ~~~ Click smart tag | Click AutoFormat | Select Brown Sugar ~~~ And we can also click these boxes to enable paging, sorting and selection from our table. ~~~ Click smart tag | Check Paging, Sorting, Selection ~~~ OK, there’s nothing else we have to do in order to work with our data – pretty easy huh? Let’s do 1 more thing that will make something happen when a user selects a Product from our table. Double-click on the Grid View to get to the Select event in our Code Editor. ~~~ Double-click GridView ~~~ Now let’s add this line of Code to make the selected Product name appear in our Label. Label1.Text = “You selected ” & GridView1.SelectedRow.Cells(1).Text Let’s run it to see how it looks. ~~~ Click Green Play button ~~~
We can see that we can page through the results and we can sort it alphabetically too. When we click on a row, sure enough our label text gets updated. Another way to access data is through a technology called ‘LINQ’. LINQ stands for “Language Integrated Query” which allows you model data constructs and work with data directly in your code. If you’re new to data storage concepts, that may not mean much, but basically it gives you easier accessibility to your data, and more flexibility in working with your data directly in your program. Unfortunately we don’t have time to cover LINQ in more detail here, but if you’re planning on creating a website that makes use of databases or XML data files, I encourage you to explore this method of data access. There are many resources and tutorials on the web that will help you understand and use LINQ in your web applications.
Part 9: Where to go from here
======================== So now that we’ve covered some of the main features of Visual Web Developer 2008 Express, inevitably as you’re creating your own websites you’ll have questions about how to achieve certain functionality. Visual Studio offers excellent help features to help answer those questions. From the Help menu you can Search for certain topics or use the “How do I” help feature to find out about specific tasks. Also when you’re programming if you want to learn about a specific method, property or keyword, you can just select the term in the Code Editor and press the F1 key to bring up the related Help article. ~~~ Select Cells | Press F1 ~~~ A great place to learn more about programming is the Beginner Developer Learning Center at http://msdn.com/beginner. ~~~ IE Navigate to msdn.com/beginner ~~~ Here you’ll find all sorts of free tutorials and lessons to increase your programming knowledge. You can pick from Windows or Web development learning tracks and choose lessons from Tier 1 – 3 difficulty levels. There’s also a How-To reference library if you just want a quick refresher on a certain topic, and the Kid’s Corner contains lessons specifically for kids. If you run into a problem and need to ask a question, you can do that in the ASP .NET forums. You can find links to the forums and other resources on the Visual Web Developer Express Start Page. ~~~ Click ASP .NET Forums link on Start Page ~~~ We hope you’ve learned something with this quick introduction to Microsoft Visual Web Developer 2008 Express Edition. You’re now ready to start building out some amazing Web Sites!