Subtitles of the Movie

Now let's dig a little deeper into the HTML Server Controls. The HTML Server Controls provide you with a number of features such as Event-based programming on the server with your Standard HTML Controls. You can handle Events and client-side script. Now this becomes really the delineation between whether I want to use a Web server Control or an HTML Control because with HTML Controls I can do client-side scripting and I'm going to show you an example of that. But if I turn the HTML Control into a Server Control then I can do some really cool things to it on the server side because ASP.NET will jump in and create a Class for it and do all kinds of cool stuff for it. If all that makes sense, good, if it don't, don't worry about it. Once I turn an HTML Control into a Server Control I get automatic maintenance of the control state, and we'll talk about ViewState in a separate set of videos and you'll understand what I mean by that. The HTML Server Control, if it runs on the server side can interact with the ASP.NET Validation Controls, so we can take care of that and we can also bind data to certain control properties on the server side, so if we're going to the server side connecting to a database and bringing stuff back we can bind what's coming back from the database directly to some of those HTML Server Control properties. Now, having said all that let's jump out into the Visual Web Developer and take a look at what you can actually do with some of this stuff. Now notice right here I have just a standard, I've got two ASP.NET buttons that I got out of the Standard section here and I dropped them on the page and if you go look at the Source you can tell these are asp buttons, right, here they are. Go back to Design - also I have a Calendar Control here that's left over from something else, don't worry about it, but it looks impressive so I leave it there. Now what I'm going to do is, notice if I go down into the HTML section, keep in mind, if you don't see this HTML section, alright, you're in a place where you can't use it. Notice everything went away there and when I go back to my Default.aspx page you'll see it and on the Source page you'll see it. What I want to do is take an Input Button, pull it up here and drop it on. Now, it looks like the other ones - it's lowercase is the only way we can tell the difference - but if I go out to my Source you can see that there it is. The first thing that I want to do is show you that it gave it an ID of Button3 and if I go to my code right here notice right now when we run this we're just telling it on the PageLoad to set the Focus on Button2. So let's run this and we're going to do server side stuff right now and then we're going to do some client side. But I want to show you how it's working right now. Right now we're setting the Focus on Button2. Well let me show you something cool that we can do. If we go back to our Source code and our Button3 and if we just add the runat equal server information here and we really should get in the habit of putting the quotes around it, now if I go out to my code you will notice that I can access that button as a Class, so I can call Button3 and then I can call Methods and Properties on it. How cool is that? Well, I'm going to set the Focus on Button3 and I'm just going to remove this on Button2. So all I did was, is I went out here and I added the runat server attribute to that HTML Control that I dropped on and then I could program against it here and when I run it you'll notice that as soon as it comes back and it runs on the server side the PageLoad will set the Focus on Button3. Notice there's my focus. Pretty cool. I hope that make sense. Now let's do something that's really cool with it. Let's just take Button3 off of here. Actually we'll take this back to Button2. We're going to go back to Button2 so when we run this now, just I want you to see this so I don't confuse you here in just a second, so now when we run it Button2 gets the Focus, there we go and we now want to treat this not as a server button, OK, we're going to treat this as client side. There's an easy way to do this. Go back out here and since I don't have runat server I'll double-click on the button and notice this sets up JavaScript. Notice it wrote this JavaScript language in the script tag here and it put a function on Button3 onclick and notice down here when I clicked on it without the runat server stuff - it likes to do it with it, but I don't want to confuse you - notice it puts an onclick event that says: Return whatever the Button3 onclick function runs. So we're going to hop up here and I'm going to put a little JavaScript in here: document.getElementById and we'll put Button3 in there and close it and then we're going to set the value of that equal to Hello and then we close JavaScript with a semicolon. Now what's going to happen now is that only when we click on Button3 will the value change from Button to Hello right here, but until we click on it nothing's going to happen because there's no runat server on this Button3, you'll notice here, no runat server and so it'll just get passed through by ASP.NET and just get sent back to the browser. So let's go back to our Form, there it is, OK, so let's run this and see what happens. First of all, no errors, so I got lucky on my coding. And so notice, this is going to come up and there's our Focus, but notice, every time I click on one of these Web server Controls you'll notice that it says Loading up here. It's making a trip back to the server. But here's our Button3 and remember we did client side script to change this to Hello? Well, notice that as soon as I click it changed to Hello. Now if I go back to the server it's going to reset it back to Button. If I click it again instantly client side it hits Hello. That's kind of some of the nuances you can do with those HTML Controls, with those HTML Controls you can either choose to run those things on the client side or on the server side by adding runat equals server. So that should help you delineate between whether you want to run a Web Server Control or an HTML Control on the client side, or an HTML Control as a server side Control.