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 ASP.NET Controls

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
[www.ASP.net] [Joe] Hi folks, Joe here from Microsoft with video number 6 in this video series on building ASP.net web applications using Microsoft Visual Web Developer. In this video, we're going to take a look at using the intrinsic ASP.net controls. So to get started, let's create a website by choosing 'create website.' Selct the ASP.net website template, and clicking OK to generate our default .aspx page. Now you can see as you puruse the toolbox, there are a loarge number of ASP.net controls that you get out of the box with ASP.net. We're just going to look at the first 3, just so you can get a basic understanding of how to navigate the properties, methods, and events for these controls. And then in future videos, we'll drill down into the different controls and see how to use them in a more complete fashion. The first 3 controls we're going to look at are the 3 simplest controls that you'll probably use on every single web application that you build using ASP.net. The label control, the button control, and the text box control. So let's start by recreating a basic hello world application using the label and the button control. Note here, I'm in source view. I can grab this label control, I can drag and drop it into source view if I want or I can just set the cursor where I want it and double-click on the label control and you'll notice it's automatically inserted into my project. Likewise, if I'm working in design mode I can set the cursor where I want and double-click on the button control to insert it. The other thing I could do of course is I could drag and drop the button control if I wanted to. So I can use either drag and drop or double-click. You see here, now the button has been inserted. Let's look at the properties collection for this button control. Like most of the controls, or at least all the controls that have visual art effects, meaning that the server site controls will generate html code to be rendered in the browser when the page is displayed, there are a collection of visual properties that you can set here in the properties explorer. Things like background color, text, so the actual text we'll set to Click Me. Notice also that if I'm using cascading style sheets, and I had included some CSS classes in this web page, I could use this dropdown to select the CSS class to control the visuals if I wanted to. There's also a collection of behavioral properties— things like whether or not it's enabled. On client click is interesting, because it hints to the fact that while this is a server side contol it has some client side behavior. We might want to program against both the client side click event or the server side event, or both. There's also a data section for database expressions or if we're doing databinding for example. Notice here some of these properties, you can set like tool tip. Those are the properties, but if we look at the toolbar in the properties window we can see this lightning bolt. And if we click on it what we'll see is not the properties collection, but the events collection for this particular control. You'll recall when I was iterating through some of the page level events that we might be interested in handling, I mentioned that there were a number of them that had control equivalent events. For example, this is the control's init event, load event, pre-render event, unload event. And if I want to code against one of those, I could just double-click right here in the properties explorer and I'll generate an event handler for those. Also, there are action events. These events are specific to the control type we're working with, for example, the click event. Now if I want to generate a click event handler for this, there are 2 ways that I could do it. One is I could just double-click right here in the properties window, and I would generate an event handler for the click event. Now, button is a pretty simple control. Really the only control-specific event that we could program against here, is the click event. But if there were multiple control-specific events, and I double-clicked on the control in design view, what I'll get is a generated event handler for whatever the default event for that control is. Since the only custom event for this control is the click event, if I double-click on it notice it will hop into code behind, and we've generated this method for this event, the dot click event. So here, let's just go ahead and quickly re-create hello world. So we'll say lable one dot text, which is the text property, of the label one instance of the label control. Then I'm going to set it to a string value. We'll just say Joe's hello world. Now I can go ahead and run this. It asked us if we want to turn debugging on and we will. Notice if I hover over the button, I get the tool tip that I entered as a property. If I click on the button, we get the Joe's hello world message, just as we'd expect. Now let's just add a text box and take the next step in understanding how ASP.net server side controls work. So let's go ahead and insert a text box into our page here. Let's look at the properties collection. Now you'll notice that there are some additional properties here, things like auto-complete type, auto post back is particularly interesting. This says, "After the text is modified, do you automatically want to post back to the server?" We can say, "yes." So we might say based on the value of this text box, we need to rebuild the page, because we're going to display some information that's specific to the value that was entered in this text box. And you'll actually find lots of ASP.net controls have this auto post back property. If we look at the events collection, notice there's a specific event for text change. So maybe we don't want to do a full page post back, maybe we just want an event handler for the text changed event. So if I want to program the text changed event, I'll double-click on that event in the properties window. And I've generated a text changed event handler and wired it up to the text changed event for the text box one instance of the ASP.net text box control. So here I could say, "Let's just take whatever was in the text of that label control," "and let's fill it with whatever was in the text box." So let's go ahead. Now if I enter text and then hit enter to finish my entry, notice that that event gets fired and the label control is updated with the text I entered in the text box. Now one thing you want to remember to do as you're learning, is to go into view source mode. And you can see here what's taking place under the covers in our ASP.net application. As we move forward in the subsequent videos, we'll drill down into some of the more complex controls. But I just wanted to give you a start looking at these controls, seeing that there are collections of properties and events, and that these properties and events will differ from one control to the next. Some set will be common, some set will be specific to the control that you're working with. So that's a start. Now you're ready to get started playing with these controls. And moving forward in the subsequent videos in the series, we'll look at how to combine both these controls and some of the more advanced controls that come in the ASP.net control collection to start to build really rich web applications using ASP.net and Visual Web Developer. [www.ASP.net]

Video Details

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

Controls driven development can really increase your development productivity. This video provides a basic introduction to the standard ASP.NET controls.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.