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

Build Your First ASP.NET Application with ASP.NET Web Forms

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] [] Let's take a look at getting started using ASP.NET web forms. I'm going to launch Visual Web Developer Express, and I'm going to build my web forms applications with this. So let's go to file, new project, and in the new projects templates, you see this thing called ASP.NET web application, and I'm going to create a new web application called "Hello Web Forms". So the Hello Web Forms will be created for me by Visual Studio, but let's take a little look around some of the things that are in Visual Studio. First of all, there's the Solution Explorer over here. Now, this Solution Explorer allows me to take a look around My Solution and all of the goodies that are in My Solution, and we can see here we have this page called Default.aspx. Now, an aspx page is a special kind of page that just runs on the server; it's like an ACML page except it's got code that executes on the server and then gets injected back into the template that's provided by the aspx and then rendered as html on the page itself. It also has this thing called a code behind. So if I go in here, and I take a look at the code behind, so the default at aspx is code behind called Default.aspx.cs or .vb if you're using Visual Basic, and this defines the code that runs on the server, so for example, if I have on my page and I want to do something when the page loads, I can write some code here that will take action when the page actually loads. And if I look at the default .aspx itself, it looks a lot like html, and that's because it's very similar to html. Html defines the template around which ASP.NET injects the code that will be rendered within the browser. So if I take a very, very simple example—if I say, h1 "Hello World," the effect is exactly the same as if I had just written a static html code without any ASP code, without any server site code running within it whatsoever. So if I execute this, the first thing that will happen is Visual Studio will say, "Hey, you haven't turned on debugging yet," do you want to turn on debugging?" And if you do it, it modifies the configuration file called web.config to enable debugging. It's a good idea to allow it to debug, so I'm going to say yes, and now it's going to execute my page, and I'm going to see "Hello World" on the page. Now if you look closely up here, I see it runs on local host 61942; that number will change based on your experience, and this is a random port generated on local host using what's called a development server. Now a development server ships with Visual Studio, and it gives you a very simple, very lightweight server to put your applications on test and debug them before you deploy them to the full IIIS, which you could also do on your local machine or on a remote machine for staging and testing. But as you can see here, I'm running on that one, and I have this. Then if I do a quick View Source and take a look at the source code, we'll see here that static html has been sent back to me because I haven't done anything server-side—I've just said, "Give me an H1 with 'Hello World' in it." So let's make this a little bit more interesting, and instead of me putting it as static html on the page, let's do something on the server to actually generate this. So if I click here, that gives me what's called Design view, and when I take a look at my page, I have a Design view that allows me to visually design it, I have the Source view that gives me the code as we've seen here, and I have a split view which gives me both, but I'm going to select Design view, and this allows me to design my html page. Now we see here that I have a layout on the page, and you can see my h1 tag is being indicated, and I want to say—for example—drop a label inside the h1 tag so that I know that this will happen as an h1, and when I look at the source, we can see my h1 tag is here, and I now have this control called a label, which runs on the server and gives me this default text called label. So if I were to execute this application now, what would happen is the server would see that this is a server site control that needs to be executed and to do something, and all the label does is give me some text, and it's going to give me the text that says "label," but I don't want it to say label, I want it to say "Hello World," so I could do that either by typing "Hello World" in here, and it would generate "Hello World", or remember earlier we said we have the code behind, so we can execute some code. So now I can execute some code. Now, that label was called "label 1," and I can say when the page loads, set label1.text to "Hello World." I'm going to save that, and I'm going to execute it. And when I execute it, I'll see that it says "Hello World," and if I do a view of my source, we can see that it's generated a span with the ID label 1, and it put "Hello World" within there, but this is still within my h1 tags. So this is the concept of placing a control on a page, and then the server executes on that control. There are 2 ways that it does it: number 1 is by the configuration of the control—by me setting it up and setting its properties— but also there's the concept of writing code on the control to be able to do something. Let's take a look at doing something a little bit more complex. I'm going to delete my label, and I'm also going to delete the declaration of the label here, and we're going to start building some data and building a database and seeing if we can start manipulating some stuff in the database. Visual Studio gives us this concept of being able to add a database directly to My Solution. Now you can see here I have a template called the SQL Server Database, so we're going to add a database in here, and I'm going to call it "Friends." So now we can see that Visual Studios has gone off, and in here in the App Data folder, it's created this thing called an .mdf, which is a database for my friends, and if I double-click on that, the Solution Explorer opens the Database Explorer. If I look at the bottom of Solution Explorer, there are actually 2 tabs— Solution, which is on my code, and Database Explorer, which is my actual database, and this contains all of the goodies of a database including the diagrams and tables and all of that. What I'm going to do is data is typically stored in a table, so I right click on the Tables node and say add new table, and I'm going to create a new table to store my friends in with an ID and a name. I'm going to use something called NVARCHAR Max, which the binding that we're going to see later really likes to use, and it just saves me writing code. I'm going to say it's in NVARCHAR Max, and then on ID— as you saw there earlier—if I type an invalid data type, Visual Studio won't let me put it in so that I would have a broken database, so it made sure I fixed it before I continue, which is a really, really nice error-checking feature. But back to database—so, I'm going to set a primary key, and then my primary key is going to be ID, and when you enter data, the ID is just something I want to have ordered in increments— the first one would be 1, the second would be 2, etc. This—in database terms—is called an identity, so when I look through, I have a properties window for here—for my database and for this ID field—the ID field, so I'm going to say I want this to be an identity starting at 1 and incrementing by one, so I'm going to save that. My table needs a name; I'm going to call it "Friends." So now I have a friends table set up in the database, the next thing to do is put some data in it. So again, if I look at my tables, friends is here now, so what I can do is open and show my table data, and it's going to give me a similar spreadsheet-like interface that allows me to type in my data. So I'm going to type in a couple of friends—Scott Guthrie, and I'm going to add in Scott Hanselman, and put in his page, so now I have 2 folks in my database—I'll just leave it at 2— and I close this down, and my database is ready to go. Now remember earlier we were speaking about with and with ASP.NET web forms, we've got controls and the concepts of controls, so here I have my designer that we were looking at earlier, and I'm just going to remove the h1 tag because I don't want this to look in h1. So you saw I highlighted and deleted it, it went back to my source, and now H1 is gone. So I go back to my design, and one of the neat things that I can do is take my database and drag and drop it onto my design surface, and Visual Studio will say, "Hey, you know what? You're trying to do something with data, so I'm going to give you a control called a Grid view for looking at that data." So I drop it onto my design surface, and now I get a grid view. The grid view is pre-populated with ID name and link. The grid view has a data source that connects the ASP.NET page to the database— that was created for me in order to configure to point to the database and pull stuff from my friends table— and now all I have to do is just decorate it, so I'll say I want it to have this look and feel, and I say I want enabled paging and sorting and editing and deleting of records— all these kinds of things, and we see all of these take place on my grid, so this is a grid view control and a SQL data source control which were created for me. If I look at my source for my page, we can see— if you remember the ASP label run-at server earlier— we have an ASP grid view run-at server, and we have an ASP SQL data source run at server, and the SQL data source has the built-in connection string— that's the instructions to tell the page how to get the data from the database. There are a number of commands like delete and insert and select and update and all that good stuff as well as parameters if I want to be able to delete, etc. anything from my database. Now remember earlier on we said it has this thing called the connection string that shows me how to get it from the database. My configuration file from my website stores all that good stuff, and we'll see what the connection is in here, and if you're familiar with SQL server, there's a thing called a connection string that defines how to talk to the database, and you can see here—here's the source of the database, the database itself is friends.mdf, and you note that I'm using integrated security, so just log in that way. Then within the grid, we can see we have my SQL that is going to be selecting stuff from Friends with friends from my table. So everything was automatically generated for me— I have server site controls—this one connects to the data and then the Grid view takes from the SQL data source— we can see here it says the SQL data source is my data source for this one— and decorate it, so let's take a look. I'm going to save that out, and I'm going to execute it. Again, execute is just the play button or press F5, and bang! Now I'm rendering the data from my database, and I can do things such as editing, so I'm going to say, "Oh you know what, Scott Hanselman has 2 Ns in his surname," and then Scott looks at this video and says, "No I don't—I've only got 1 N in my surname," I can go in, and I can edit that, and I can change it. Now let's say I have this full edit of the database, and I say, "After all of those problems with his name, Scott's not my friend anymore; I'm going to delete him." So as you can see with web forms using a controls paradigm, on my page I can place a control, the server executes code— in this case it executed the fetch of the code from the database— and it renders it as html, and that's the magic of web forms. To learn more about web forms, go take a look at the ASP.NET site. You can see the ASP.NET web form site here, and it's chalked full of resources that will help you to learn how to use ASP.NET web forms for controls based rapid web development.

Video Details

Duration: 11 minutes and 28 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 6
Posted by: neudesicasp on Aug 30, 2013

Microsoft's Laurence Moroney shows you how to build your first ASP.NET application with ASP.NET Web Forms.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.