Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

Intro to Visual Web Developer

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
[Microsoft ASP.NET] [www.ASP.net] Hi folks! Joe Stagner from Microsoft here. And welcome to this video series on building ASP.NET web applications using Microsoft Visual Web Developer Express. Visual Web Developer Express, or VWD, is the free version of Microsoft Visual Studio that's specifically tailored for building web applications using ASP.NET. The visual web developer IDE experience is the same as if you purchased the Professional version of Visual Studio or one of the Team System versions of Visual Studio. The only difference, of course, is that if you purchase Pro or Team System versions of Visual Studio, you can enjoy all of the advanced features that come with the version of Visual Studio that you purchase. But for lots of developers, they find Visual Web Developer Express to be perfectly suitable for all kinds of web applications development. In order to use Visual Web Developer Express, point your browser at Microsoft.com/Express, choose the download button at the bottom of the page, scroll down and find the Visual Web Developer 2008 Express Edition box, choose your language, and click "Download." You'll download a file to about 2½ megabyte installer. That will be on your desktop. Why don't you go ahead and do that now, pause the video, run the installer, and choose the options that you need to install. All of the appropriate components will be downloaded from the web and installed on your machine. Then you can restart the video, and you can follow along as we take a tour of the Visual Web Developer Express integrated development environment for ASP.NET. Now I've shown you the direct download installation mechanism as a default because you'll need to use that if you're installing a version of Visual Web Developer other than the English language version. But there is a new and better way of installing not only Visual Web Developer, but other portions of the Microsoft Web Platform— and that is Microsoft's new Web Platform Installer. To get it, go to Microsoft.com/Web, click on the "Get the Microsoft Platform" button, and then choose the version that you want to install—either the currently shipping version or the beta version. Now I've already downloaded and installed the Web Platform Installer on my machine, so I'm just going to go ahead and run it. When I run the Web Platform Installer, it will ask for permissions and then say, "Please wait while we load the latest Platform products." This is interesting because what it means is we're pulling a real-time feed of all of the updates that are available for the Microsoft Web Platform. Because we're interested in installing Visual Web Developer, I can choose "Web Platform," the "Tools" section—I've already installed Visual Web Developer, but if I hadn't, I would just set the check box, click "Install," and it would automatically install for me. And as we look around, not only can we install different attributes of IIS or ASP.NET, but as tools and frameworks as well, and even third-party applications. So you definitely want to check out the Web Platform Installer. And if you're installing the English language version, it's the easiest way to install tools like Visual Web Developer Express. Now that we have Visual Web Developer installed—whether we downloaded the manual installer or we installed it through the Web Platform Installer, we're ready to get started. Okay, now that we've installed Visual Web Developer Express, let's go ahead and fire it up. Choose "Start," "All Programs," "Microsoft Web Developer 2008 Express." Notice this message—"Updating the news channel." That's the first thing that I want to show you is that this is a collection of news items that are pulled via RSS, so they're always current. And these news items are all of interest to web developers using Microsoft technologies. It's a great way to stay current on what's going on in the world of ASP.NET. If you look over to the left of this RSS news feed, there's also a Headlines feed here that is specific to Visual Web Developer Headlines. Up a little bit is this Getting Started section. And I really want to point this out to you because I think that this is often overlooked by developers just because it's called "Getting Started." But this is a list of links that are launch padded into lots of great resources for ASP.NET developers, whether you're just getting started or whether you're very experienced. So these links contain things like a video tour of the IDE features, all the way down to links into the ASP.NET forums where myself and my teammates and lots of other ASP.NET experts spend lots of time answering difficult questions that you might encounter during your ASP development learning experience. So don't overlook the Getting Started section. Next we want to look at this Recent Projects box. This is where we get started doing actual development work with Visual Web Developer Express. And if we had already created some ASP.NET applications, we would see them listed in this Recent Projects collection. But since we just installed Visual Web Developer Express, we don't have any recent projects. So we're going to choose either Create a Website or Create a Project. Now in our case, we're going to choose Create a Website. But I want to show you what's in Create a Project, just to contrast it for you. So if I choose "Create," "Project," we have a dialogue that will let us create a new project type. Now you can create a web project or just a website. A web project has some additional options, and we'll cover that in a future video. In our case, we're just going to create an ASP.NET website, so I'm not going to click "Okay" here, but I just want to show you what's available in this new project dialogue. The first thing is, if we look in Project Types, we can choose the language of our choice for development, be it Basic or Visual C#. And then within our language, we can choose whether we want to build a web application, and then we can choose which type of web application we want to get started with— an AJAX Server Control, a standard web application, Dynamic Data Application, even a WCF—a Windows Communication Foundation service application. We could choose a Silverlight application, or we could even build just a standard class library— which is not technically speaking a web application or web related, it's just a standard code class. So I'm going to go ahead and cancel out of this because we're going to go ahead and just create a standard website. So I'm going to choose "Create," "Website," and this is the new website dialogue. Now what you see here is a collection of installed templates. And templates are basic formats the Visual Web Developer will use to build the shell of the type of website that you choose to create. So we can choose an empty website. I'm going to choose a standard ASP.NET website. But we could also use a Dynamic Data website, a Silverlight Script website, etcetera. I'm just going to choose "ASP.NET Web Site," and then down here there are a couple of other choices that we have to make. First we have to choose our language—either Visual Basic or C#. I'm going to choose Visual Basic. The next we need to choose is our location. Now there are 3 choices here. We can choose either the File System—and what that means is I don't even need a web server installed on my development machine to start building ASP.NET applications. I can just use the file system. But if I have a web server and I specifically want to use that web server, I can by choosing Location "HTTP." Or if I've created a shared hosting account out there on the web some place, I can use FTP as well. In our case, we're going to choose "File System." I'm going to browse to my desktop, and I'm going to create an application right on top of my desktop. And we'll just call it "JoesWebSite." I'm going to choose "Open." This tells me that "the folder doesn't exist. Would you like to create it?" And I'm going to say, "Yes." Now when I choose "Okay," let's watch what happens. So notice that that template has been used to generate the shell of an ASP.NET website that we can start to build on now. If I look at my desktop, I've created that "JoesWebSite" Folder as the root directory for my web application. What you're looking at here is the HTML markup for the Default.aspx page. But before we start working on code, let's go ahead and take a look at some of the features that are available in the IDE. As you can tell by looking at Visual Web Developer Express, this is a really feature-rich development environment. And one of the things I really encourage you to do is take some time and just explore the IDE. Look at the various sections, see how they respond to the work that you're doing, look at all of the menu items. Lots of times there are features in a rich application like Visual Web Developer that we don't even know about until somebody tells us about them, or until through experimentation we actually stumble across. So take some time and look. The first thing I want to point out, though, is in this center window that you're looking at where we're displaying the Default.aspx page in this tab, notice the Start tab's still available to us, so this is a multi-tabbed interface. Here we have the markup for our aspx page. But before we decompose the various sections of Visual Web Developer or how this aspx page works, I want to point out to you that we have 3 different ways of working with a specific page in Visual Web Developer Express. The first is the Source Code view, which is what we are currently looking at. So this is where I can enter JavaScript. Now the first thing we note here is look at this—I entered a left angle bracket, which is the beginning of a tag. And Visual Web Developer pops up this window called IntelliSense. IntelliSense is context sensitive help for everything that you're doing in Visual Web Developer Express. So when I say it's context sensitive, that's a really interesting concept in the sense that I typed a left angle bracket so it knows I'm entering a tag. And what you see here is a list of all of the ASP.NET tags and all of the HTML tags that I might want to enter. For example, if I want to enter a table—a straight HTML table, not an ASP.NET control— then it automatically finds it. And they're sorted in alphabetical order, and it does type ahead. So with each letter that I type, it moves to the next appropriate choice in that list. Now this valuable for 2 reasons. Not only does this work in HTML, by the way, but it works in source code if you're using Visual Basic or C#. It works all across the various areas of work that you'll be doing in Visual Web Developer Express. So it's just an amazingly powerful tool. And it's powerful for 2 reasons. First of all, as you can imagine, I just hit "tab" here, hit "table." Notice that IntelliSense adds the end table tag for me. So it can really increase my productivity because it means I don't have to type everything. And you can learn to use IntelliSense very effectively to write code quickly. The other thing that makes it extremely useful is, maybe you're not yet an expert developer with HTML or JavaScript or Visual Basic or C#. It's a great learning tool for you to explore all of the properties and methods that are available in the various .net objects. Or even if you've written a custom object, but you don't remember all of the details of this implementation, IntelliSense will help you with that. And we'll be looking at IntelliSense throughout all of the project building that we do in this video series. So the first thing that I want to do—let's get rid of those table tags. The first thing that I want to do is just enter some text. So say, this is "Joes Web Site." So this is just standard text in between a div tag in my Default.aspx page. So if we showed this page in a browser right now, all it would show is "Joes Web Site." This is the HTML view. But sometimes when we're coding, we want to see what this would actually look like when the page is rendered. So the next thing we want to note is there are 2 other views that are supported in Visual Web Developer Express. One is Design view, and the other is this new feature in Visual Web Developer called Split view. If I choose Design view, you'll see here's the next—Joes Web Site. So this is actual WYSIWYG version of the webpage that we're coding in. If I add some more text, and then I switch back to Source view, you'll notice that it's been added here. The third option is Split view. Notice how Split view shows us both our Source view and our Design view at the same time. So we can make changes in one and have them reflected in the other. So if I scroll down a little bit and say—let's add some more text. Notice right here that as soon as we're done changing that text, we get a message in Design view that says, "Design view is out of sync with Source view. Click here to synchronize the views." So just click there and notice the change is reflected in Design view. If I make changes in Design view, they're dynamically made in source view. So this gives us full flexibility on how we're going to work with our particular aspx pages. The next thing we want to do is start to have a look at some of the support tools that are available here in our IDE. Let's begin our IDE tour by looking at the top of Visual Web Developer Express. First we'll see these menu items. Like all Windows applications we have drop down menus, and many of those menu items have sub-menus. I highly recommend that you take a few minutes to look at all of the menu items and all of the sub-menu items. You don't have to select them and see what they do, but just walk through the menu structure to see some of the functionality that might not be immediately apparent to you, but that is built into Visual Web Developer Express. Lots of times in a feature-rich application like VWD, we don't even know the functionality is there until somebody tells us about it. So if we navigate all of those menu items, it'll give us just a jump start in understanding how rich the functionality that's available in VWD is. Right below the menu items, we can look at this button bar and we can see the accelerators for things like save a file, open a file, etcetera. These should be common to you using Windows applications as well. Next let's take a look at these toolbars. They're a collection of formatting toolbars that are displayed by default. If I right click on the toolbar area, I can select and deselect the toolbars that I want to be displayed when I run Visual Web Developer Express. And it might be specific to the way that you develop or what kind of features you're using. The other thing to note is that these toolbars can change context based on the context of our usage in Visual Web Developer Express. And what I mean by that is, for example, here I am in design mode. If I highlight some text, I can go up here to the formatting toolbar, and click on the "Bold" button. Notice that my text gets converted to both. But if I switch into Source Code view, notice that that formatting toolbar is grayed out because it's only available in design mode. So the interesting thing here is that Visual Web developers are pretty clever about figuring out what you're doing at any given point in time and activating and deactivating the features that are appropriate to the portion of the work experience that you're using at that particular point in time. Next, let's drop into the middle area of the Visual Web Developer Express IDE and look at the various panels that comprise the entire IDE experience for Visual Web Developer. Now before we look at the specifics, I want to note that each one of these areas—so for example, this Toolbox, the Solution Explorer, the Properties window— all of which we'll explore in some detail—these are all dockable, and they're configurable by you. So for example I could say, "I don't want the Toolbox to be there. I want the Solution Explorer to be over there." Now notice when I'm dragging it, notice these guides that I can use to specify where things go. I can also say, "I want the Properties window over on that side as well, but I want it to be in the bottom. And then I want the Toolbox to be over on the right-hand side." So you can change the layout to be anything that's conducive to the way that you work. And don't fear if you make a mess of things, and you want to get them back. It can be a little bit difficult to get things back to normal, but it's okay, because starting with Visual Web Developer 2008, we added this Reset Window Layout feature. So just choose that menu option, click "Yes," and the Windows layout goes automatically back to the way it was when you first installed Visual Web Developer Express. Now another thing to note here is that all of these windows are auto-hidable. So notice this little pushpin. If I unclick that pushpin, on each window that I don't want to stay displayed, it'll go away; so I can maximize my use of screen real estate. In my case, I usually just keep them displayed. I normally develop at a larger screen resolution than what I'm able to record the video in, so let's just keep them viewed right now. So the first thing we're going to do is look at the Solution Explorer window. You'll note also that in the same location, there's a tab for the Database Explorer. Database Explorer is for working with database connections and the various objects that are in a database. But since we're not going to use a database in the application we're going to build today, we're not going to use the Database Explorer. We'll use the Database Explorer in one of the upcoming videos. So here we have the Solutions Explorer. The other thing I can do, by the way, for each of these panels, if I want to undock them, I can just double click on the name, and it will pop out of it's docking location. Or I can expand it and we can look at it in a little bit larger format. And if I want to put it back, by the way, I just double click on the name again, and it'll hop right back into the spot that it was in. So you don't have to drag it out and drag it back in and mess with all the positioning. Just double click and it pops out, double click again and it pops back in. So here's the Solutions Explorer. And you'll see here, in the Solutions Explorer we have a collection of all of the artifacts that are part of our website. To begin with, we have this directory called "App_Data." App_Data is where data that's specific to this website will be stored. And in our case we're not going to have any, so that folder's going to remain empty. At the bottom we have this item called "web.config." If I double click on web.config, you'll see this is a kind of scary set of XML. Now don't worry if this freaks you out a little bit because you don't need to understand the details of what the web.config file does to get started. We won't do much with the web.config file in this application, but just suffice to understand that this is where all of the configuration information for our website will be stored. I'm going to go ahead and close that. The part of the website that we're going to be working with is this aspx. And the one that's generated when we create the website is Default.aspx. Now we chose Visual Basic. So if we expand this tree a little bit, we also see nested here this Default.aspx.vb file. This is ASP.NET's way of separating server logic written in Visual Basic or C# and markup language like HTML and JavaScript that lives in the .aspx file. Now if you chose C# as your language, this file would be named "Default.aspx.cs." This file is mapped to by the first line in our .aspx file. So note where this says—Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb." So that's just the default naming structure. You could use something different if you wanted to; that would be fine. But this is what you get by default, and this is how the aspx file and the code-behind file that contains your VB or your C#, yet associated together. So that's the Solutions Explorer. You'll also notice at the top there are additional tabs. And each one—if you hover over each one of these tabs, it'll tell you what it's functionality is. So you can nest or unnest files by default. You can view the code, view in Designer. So you can select the file—these are actually also deployment mechanisms and configuration mechanisms—and we'll explore all of those in future videos in this series. So that's the Solutions Explorer. Now let's go ahead and examine the Properties panel. So if we look at the Properties panel—again if we double click it, we can pop it out of it's docking position. And notice here that the BODY tag is currently selected, and in the Properties window are all of the properties that apply to the BODY tag in my aspx page— so things like text, style, CSS, class, background, background color, etcetera. Now if in that IDE, either in Source or Design or Split view, I change the item that I've selected. So for example, I'm going to select the "form" tag. Notice that the Properties window dynamically changes to reflect the properties of the object that I just selected. I can view these either alphabetically or I can group them, which is the default view. Here they're grouped by ASP.NET miscellaneous. And if this an ASP.NET object, I can also view the events that are available for that particular object. So that's the Properties window. Next, let's bring our attention over tho the left-hand side of the IDE and look at the Toolbox collection. So you'll notice there's a collection of controls here in the Toolbox. There are other tab options. This is the CSS Properties panel, and this is the Manage Styles panel. We'll get to those in subsequent videos. But for now we're looking specifically at the Toolbox. Again, if I want to undock the Toolbox, I can. As we scroll in the Toolbox, we can see these are the standard—I can compress all these, for example. We'll look at them one at a time. These are HTML controls. These are standard ASP.NET controls. And that—if you're just starting out, that might be a little confusing to you— the fact that there are HTML and ASP.NET controls. Before we conclude this video, I'll contrast and compare the 2 for you. Also we can see things like Data controls, Validation controls, Navigation controls, Login controls, etcetera. So let's actually use some of these controls. Remember I said that there's a difference between standard ASP.NET controls and HTML controls. I'm going to switch the IDE into Split view here, and I'm going to scroll down in the Toolbox, and I'm going to expand the HTML control section, and I'm going to add a button to my page. Now this is an HTML button. So you'll note here that in the source portion of Split view, the tag reads, input id="Button" type="button." Now I'm going to go grab an ASP.NET button control. So if I scroll back up in the Toolbox and grab a button control out of the standards collection, notice now the markup is different. It says asp:Button ID="Button2" runat="server" Text="Button1" So now notice we have 2 buttons, and the only difference is the case of the default text. So I want to point out to you that even though these look the same on our page, they're very different in our markup. An HTML button is just client side. There's no code-behind—so there's no VB or C# that can be associated with this HTML button. But an ASP.NET button control has properties and events that I can program against in my VB or C# code-behind. Let's get rid of those for now, resync. And we'll do a little bit more tour of the IDE, and then we'll go ahead and write our first Hello World application. So we're going to do a lot of application building throughout this video series, but I didn't want to conclude without building the quintessential Hello World application in ASP.NET. So in order to do that, let's use a couple of ASP.NET controls. First, I'm going to grab a label control and I'm going to drop it onto my webpage. Let's do a little positioning. And then I'm going to grab an ASP.NET button control and I'm going to drag and drop one of them onto my webpage. Now let's go ahead and go into Split view, and let's notice that if we select the label control, notice a couple of things happen. So first of all, over here in the Properties window, we're looking at the label control. Now you'll notice this display has changed just a little bit since when we first showed it to you. And I want to point out this lightning bolt right here. This lightning bolt appears because now that we're looking at an ASP.NET control, there are events associated with that. And if I want to look at the events, I can click on that lighting-bolt button. So if I do that, notice Disposed, Init, Load, PreRender, Unload, etcetera. All right—that's for the label itself. If we select the "Button" to look at its properties, I can select events. Notice that there's this Button Click event. So what we want to do is, we want to catch this Button Click event— notice that I can name it anything that I want; this is just the default. We want to catch this Click event and implement a handler that gets fired off that executes some of our code—either VB or C# code—when this event is fired, because the user clicks on the button. That's what we're going to do in our Hello World application. So let's look at this label control. You can see here it says, ID="Label1." Let's change the ID to be something more meaningful. So we'll call it "JoesLabel." Notice this text here. This text property says, "Label." Let's change that so it says, "JoesLabel." And then resync Design view, and you can see that the text that is assigned to the text property of our label control is displayed in Design view. But what if we didn't want any text by default. If I delete that so that the text property is empty to begin with, what Design view shows instead is the name of the label control in parentheses. So we don't just get empty space. We want to know that it's there. So the next thing we want to do is we want to work against this Button control. Now remember we said we need to implement an event control on event handler for the Click event of this button in our code-behind. Well we could do all that manually if we want to, but one of the primary design purposes behind Visual Studio and Visual Web Developer Express is to facilitate the developer's productivity. So one of the ways that you can do that is by things like default event handlers. So if I select the "Button" control and I double click, you'll note that immediately we're popped into our code-behind, and we have this event handler prewired for us. Now I'm going to take the center code window here, and I'm going go full screen by pressing "Shift" + "Alt" + "Enter." Notice I've gone full screen here. And now we have this subroutine in Visual Basic— assuming you selected Visual Basic as your programming language— and the Button1_Click event handler. And it says, "Handles Button1.Click." Now these are just default names. You can use different names if you wanted to—that's up to you. I'm just going to go with the default ones, and I'm going to program against the controls that I put on my aspx page. So what I want to do very simply is, because the user clicked on the button, I want to put some text in the label that's also on my Default.aspx page. Now remember we called that "JoesLabel." Now notice what's happening here. If I just go back a little bit, this is that rich Intellisense. Now it's working against the .net framework. Notice things like IWebPartTable and Join—those are not properties that I created; those are default methods and properties that are available because of the usage of the .net framework that we're experiencing. However, we created a control named "JoesLabel" on our page, and that's available here in Intellisense as well. So Intellisense is really smart about merging the stuff that's available because you're using .net along with the stuff that you're custom developing to give you a complete Intellisense experience. So I don't have to type the whole thing—because I've highlighted "JoesLabel," I can click "Next" and it fills in "JoesLabel" for me. Now let's suppose that I'm new to ASP.NET development, and I know that I want to assign a value to something in JoesLabel, but I don't know exactly what property I need to go after. I can just hit the period key and look—here is the complete list of properties and methods that are available for a type—a control of type label. So I can select down—these are the common ones; I can also choose the extended set if I want to. So I'll go back to Common and I'll scroll through the list here. Notice I can set things like the background color, the border color. I'm going to go all the way down, and notice I get all of these because these are properties that are available with the control of type label. I'm going to choose the Text property. So I'm just going to double click on the Text property. That's the one that I'm going to program against. So I'm going to set the Text property equal to some text value. So watch what happens when I press the space bar—boom! I get another version of Intellisense that comes up and says, "Hey." Because this is object oriented programming, when you do an assignment, you're actually calling a built-in method—either a get or a set. If you don't understand all the details of what you're doing when you're programming, no problem—you don't need to dive under the covers to get started with ASP.NET. Certainly the more you understand, the more it will help you; but suffice to say that Intellisense is going to guide me through all of that knowledge. So notice here it says "1 of 2," so I can iterate through those and see the different versions of the setters and getters that are available for this property. I'm just going to say " =," and when I do that, notice it's giving me a collection of things that I might try and assign to that property. But in my case I'm just going to use a string because Intellisense told us that this method is expecting a string. So I'm going to say, "Hello ASP.NET World." Now I'm going to add an error—an intentional error—into our code. So I'm going to go and put just some junk text. Then I'm going to go back to the full IDE, and you can do that either by choosing "Shift" + "Alt" + "Enter" or just click on the full-screen button. And there's several things that I can do here. I could just try and run this, but I could also build separately. So I'm going to say, "Build this page." Notice that I get this error list that pops up. In fact, there's output in the error list. And the error list tells me, "Hey, there's an end of statement expected in this file on line 6 at column 48 in this project." And notice it's highlighted with this blue, squiggly mark underneath. And if I hover over the section of my code that has the squiggly mark, the error message is displayed to me—"End of statement is expected." By the way, if I just started—so I could choose "Debug," "Start Debugging," or I could hit "F5," or I could just click on the "Start Debugging Accelerator," I'll get a message that says, "Hey, I can't actually run this because there are build errors. Do you want to run the last successful build?" —assuming that there was one. I don't want to do that. I want to fix the error. So let's go ahead and—by the way, if there are multiple errors, you can double click on the error message, and notice it automatically highlights the place in the code editor where the error was encountered. So I'm going to go ahead and get rid of that error. Now I can build and I would be successful. Or I don't have to explicitly do a build step—I could just say, let's go ahead and run it in the debugger. Now what you see here is a dialogue that says, "Debugging is not enabled." Remember I said that the configuration for our website is held in that XML file, web.config. What this dialogue says is, "Debugging is not yet enabled in the web.config file, but I can automatically enable it for you." So we're going to say, "Yes," go ahead and automatically configure web.config to enable website debugging." Now this tells me that script debugging is disabled in Internet Explorer— and that's usually off by default, and a lot of times you don't want to turn script debugging on by default for all of your web browsing. We want to continue debugging, but if we're going to be writing JavaScript— so client-side JavaScript code in our application; we're definitely going to want to go into Internet Explorer and turn JavaScript debugging on. In our case we don't have any client-side JavaScripts, so that's okay. We'll just say, "Yes," go ahead and run this anyway. Now notice a couple of things have happened here. Notice down here, I have a little new icon that says, "ASP.NET Development Server - Port 1179." When we first selected the project type that we were going to create, we said use the file system instead of HTP or FTP. We can use the file system because Visual Web Developer has a web server built in, and it's a secure web server. So it only gets started when you're going to run a project for debugging on your development machine. And it will only answer requests from the same IP address as the machine that it's running on. And it dynamically selects an HTTP port number to work against. This means that it's very secure, rather than having an application that is running against the web server that might get picked at by somebody else in your organization. So it's a pretty secure way to get started doing ASP.NET development. Next, this is our web application. Remember we wired a button event handler and when we click on it, there's the text that we expected to get, displayed in our label control. Let's stop this for a second. Let's go over and take a look at a couple of things. First, here in our web.config file, if I do a search for debug, we note that this section got manipulated by the IDE—debug="true." So we didn't have to go in and do that by default. Now the more advanced you get as an ASP.NET developer, the more you'll understand all of the different sections of the web.config file. But it's nice to know that Visual Studio will manipulate it for us to do some of the simpler things that we might want to do, like debugging. The other thing that we want to note is there is a built-in debugger in Visual Web Developer Express. So for example, if I want to step through my code, just over here on the left hand column in the Source View window, I can click—and notice I get that red dot— and this creates a debugging breakpoint. If I now go ahead and run my application again— again this is just that script warning—now I can go in. If I click on the "Button," notice when the Visual Web Developer IDE goes to execute this line of code, that's the breakpoint. So it tells me here are all of the local variables. For example, the sender is the Text Button. These are the Event Arguments. This is the page context that we're running on. This is the Call Stack. This is the Immediate Window, so I can do some immediate work—like I can set the value. So I can say, "JoesLabel.Text =." I could set it to something just to find out what the results are, so if this happens immediately, it's not in code. And then, of course, this is the Output. So we're going to do some more with debugging as we move forward, but I just wanted to introduce the debugger to you. Now I can either look in the debug menu at the keys that I can press to step into, over, or out of. I can enable or disable all the breakpoints, I could restart, or in my case I could just hit "F5" and "Continue," and there are the results of our webpage. So that's Hello World and a tour of Visual Web Developer Express. Let's take a quick review of what we've done in this one video. We've downloaded and installed Visual Web Developer Express, gained an understanding of how it compares with the other versions of Visual Studio. We've taken a tour of the IDE. We've looked at all of the various windows that we'll be using by default— the Toolbox, the Solutions window, the Properties window— and the various ways that we can look at our code using either Source view or Design view or Split view. We've chosen a project type—an ASP.NET website. And we've chosen our language—either VB in my case, or perhaps C# in your case— and then we've written some code. We've understood the difference between ASP.NET controls and HTML controls. We've programed an event handler, executing a little logic in our code-behind file, and then actually looked at how we could start with using the debugger in Visual Web Developer Express to examine what's taking place in our code as it executes. Hopefully that's a great start to get you started with this first video of developing web applications with ASP.NET and Visual Web Developer Express. And hopefully you'll tune into the subsequent videos so you can round out your understanding of the power of Visual Web Developer Express in ASP.NET. [Microsoft ASP.NET] [www.ASP.net]

Video Details

Duration: 39 minutes and 27 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 5
Posted by: neudesicasp on Sep 20, 2013

Microsoft Visual Web Developer is the FREE version of Visual Studio for developing ASP.NET applications. This video will show how to get and install it and take you through a general tour of the IDE and its features.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.