Video: Creating a Web Forms User Interface C#

Presenter:Bob Tabor (from LearnVisualStudio.NET)

In this lesson, you will explore the various ASP.NET 2.0 server controls available in Visual Web Developer Express Edition. In addition, you will begin to get familiar with the windows in Visual Web Developer.


Click here to go to original video page

The following text is a software generated transcript of the video. Click on a minute link to jump to a location within the video

Minute 0
Gauguin and the souls and our objective is to demonstrate the very seems net server controls that can be added to her web applications will also talk about positioning controls using absolute positioning and tools that help was a line size and controls but as we begin a one did a brief overview of visual Web developer 2005 express edition windows that are available noticed in the previous video this series of lessons is intended for those who already know some see sharp syntax as well as HTML or if you know see shark on the soon that you re somewhat familiar with the various windows are available in the Visual Studio IDE all the express edition tools used the same interactive development varmint interface with similar Windows toolbars and menus however I realize that some were watching this might need a quick refresher saw want to spend just a moment overview if you the basics but please know that portions of this video were
Minute 1
Digitally recorded using the Visual Basic programming language options however due to the nature of the topic matter that should really interfere in any way with your understanding of the material in other words although you see references Visual Basic ties from his video is nothing specific to Visual Basic or see shark so please don t be alarmed for this particular lesson the functionality that I may demonstrate is exactly the same for both the sharp Visual Basic sola start a great little sample application as springboard for discussions for me to file new website like we did yes in the previous video mature is that a website is selecting to go to the very end and removed the default name or type in less than zero to and Michelin was Visual Basic and click okay and so now we have our default aspx and are less enough to project
Minute 2
Source is often the previous lesson were in the majority of our work was in this main area in the center of the screen and the main area is home to a number of different tabs ever tell a different file we did and new tab that we can change to the temple full tabs open switch easily between all one file and the other also individual files depending on the type of father they are have different ways of viewing a file in the case of the default aspx notice of the very bottom of the We have the design view versus the source view that allowed us to do for ways to look at the exact same file the actual source code versus visual designer that allowed us to kind of see what you see is what you get it while were building our visual interface of the tabs can be arranged for your convenience by just holding down on the name of a tab and dragging it to the left or the right to consider output default aspx at the anvil
Minute 3
Is to tabs or I did drag it and put it to beginning of the list of tabs are also in some cases I may want to see two tabs at the exact same time in which case I can right click on a tab and select new horizontal task group which creates two groups of tabs in the main area this operative tabs here in the lower set of tabs is the only one here at the bottom and get that Tabak buys a selecting of moved to the previous tab group in addition to working with the tabs in the main areas is also serious windows that are documents the left or the right hand side as we saw the previous lesson and before we talk about the functionality of these specific windows let s talk about Windows in general within the Visual Studio IDE first of all you ll notice I currently have one of the windows and auto hide most of what I cover my mouse cursor over the tool
Minute 4
Asked out on the left hand side note is that it jettisons out and when I remove my mouse cursor is then disappears again off to the left hand side however by selecting the little pin and pushing its downs and now that it s in the down position noticed that the auto hide feature is turned off also knows that I can resize the window by using the crosshairs icon that appears whatever I hover my mouse cursor over just the right position for the side of the window also whatever the auto hide is turned off I can rip the the given window from its current position and I can t just leave it floating in my development environment if I choose or I can dock it to different side of the designer interface noticed that I get these little helper
Minute 5
Those that appears all helper icon so that helps me decide exactly where this will be positioned a farmer to drop at this time you see at this point armory here it will become a tab group with the properties window or I can drag material become part of the tab group of the solution Explorer or I can make its own Group to the right of the solution Explorer to the left of the solution Explorer or underneath our between the solution is for the properties window on his drop here you see now shares attack area with the properties window or I can begin drag the taskbar off and drop it after the place here on the left inside select auto hide and once again it disappears now in that case I accidentally drag the properties window also was put the
Minute 6
Back in a place or by pressing the tab group and so see if I can reduce to a part there were ago now at a rate so we have properties in the back in his position in town the toolbox to hear turn on auto hide or back to where we were we started so whatever we have only three or four windows open this is not a huge issue but as we ll discover we begin to build our applications are we more more windows involved and will need to find good places for them that are comparable forces would evolve our web applications canalis take a moment to talk about the windows themselves on the dock are turned off the auto hide and it s open up the default aspx page in the main area notified to the toolbox becomes populated with the controls and 40 used to the controls would produce video labeled attacks and the button control on notice that this will
Minute 7
Box is split up into a number of different sections that are only visible whatever reusable stroll bar on the right hand side I can use the minus button next to the standard in order to rolloff baths category of toolbox items so I can see all the categories are language data controls delegation controls which will use in this lesson navigation controls login controls which will use and enough several less ugly lesson I tend to Web parts HTML controls which are traditional HTML controls not the ASP net server control variants and the General tab or we can drag and place are a favorite controls for a quick access on expand the standard control area again so I can see all my controls once more the other window that we use quite a bit was the solution Explorer solution Explorer
Minute 8
Allows us to view all the files are associated with a given solution or in the case of the solution was project as we have here is the website a loose collection of old individual files you can see all the files are associated with a given website and also see relationships between files by using a little plus minus buttons that appear in order to view all the files are associated in this case the default aspx photo is the perfect spot for the code behind file for the default aspx file to VB file contains the code behind for that page as we noted to produce Lawson and finally the properties window which allows us to see all of the properties that we can change for them the currently selected item and we can change the currently selected item by either selecting it from the drop down box in the properties window or by selecting the item in the visual designer and then making up
Minute 9
To changes in this case I can change the text all our button that we ve added two okay by simply placing mouse cursor into the setting side next to the label side does it also harassed lot property that you can see a description of the use of that property underneath the property window and to view any events that are supported by the button I can just click the school topple the events toggle button which will allow me to see and then also great event handler for a given event is supported by that button so back to the properties with a because we won t talk about events and writing code to handle properties and events database volatility of the next loss in the series connection there was talk about a serious toolbars are available noticed that whenever working with the Web application we did a special
Minute 10
Toolbar that allows us to modify and format the visual aspects all of our webpage that were currently working on this is called formatting toolbar notice that I got to this list of toolbars or right clicking in the toolbar area anywhere the toolbar area and selecting or checking a toolbar that s available so for example I m I want to use the layout total bar which all demonstrators use in just a few moments here knows why do they add that the toolbar extends off to the right hand side starts here with these little buttons that are arranged vertically and this is a handle for the toolbar so on the place my mouse for sure over no senators and will cross and I m going to hold my left mouse button down and dragged down and notice I created a new line for his toolbar and I can position in place and rotated to the right and left him in a position over here
Minute 11
And this will come in handy just a few moments with us how we add or remove tools are toolbars from a toolbar area by either checking or unchecking various items of the first toolbars are available okay so for now that s probably enough of a discussion of the various windows and toolbars and how to manipulate them within the Visual Studio environment was talk about how to position the actual controls that we drag drop for more toolbox onto the designer surface and one the first is that you ll notice is whatever we start to drag and drop items onto our designer like for example I drive the label and retry place an order in the lower right hand corner that automatically pops open to sit right next to the button control of Atreides again with a text box it still goes right next to label so how can we get some more flexibility with the layout of the text and the controls that we add to our webpages
Minute 12
Will take a look at the source view of this webpage to get clue we need to do as you can see we have our controls the button label and the text box controls but there s no paragraph tag or so break tag between these controls and that s why they line up automatically next to each other so in order books in order to change the position I would have to use number of spaces with using the keyboard which is not a very effective way to go about it and had to change their vertical positioning I may have to use the anarchy in the keyboard a number of times in order to introduce some break tags are paragraph tags to my webpages again that s not the perfect solution for what many of us have done the passes to insert tables and use them in order to lay out our webpages on the go to layout insert table in the menu to and in this allows me to select the room number of rows and columns that I want to include within an
Minute 13
Evil but I m going to introduce to my webpage I can also set things like the alignment the borders so petty insults basic burgers while I m even adjust individual soul properties if I wish to it this time or I can select them individually and set in the properties window is the click the okay button for now and notice that it reduces for me a 3 x 3 table into my webpage so I can drag and drop for example I ll put my Xbox thereupon might label in this cell melting the okay button and own drag and drop it down to the cell in a rush my application to see that I ve got some more advanced layout control over my webpage that I had previously in this is certainly one option and option that most people take the router designed webpages to use tables are
Minute 14
Do that there s also another option will delete everything from here by the selecting with the mouse cursor than hitting the delete key my keyboard getting all went to the top of layouts menu again without position and go all the way down to the auto position options on the select this change positioning to the following for controls added when using the toolbox paste or drag and drop and so at this point I m going to have absolutely position controls whenever I drag and drop them from the toolbox and click the okay button now celestial had tried to younger drag and drop the toolbox items are the button from the toolbox and now notice that I can position it anywhere on the webpage of the houses accomplished was to look at the source view and notice that a style tag is now inserted into the
Minute 15
Commission for my button control which gives me as the index which means you know how are the controls overlapping the left position and slopes the top position here that extends on two lines and has been that is positioned absolutely Qu bec tour design view and we can position the labels while no one would drop it might place it over left and sub we can drag it around to it to its position as Glenn delete these two controls often play around for options to salute at more switchback Leal position auto position options on the remove the checkbox from here and click okay which was his back to a relative position
Minute 16
Errs are absolutely positioned areas in which interviews into a relatively positioned webpage to notice that I have relative position here and I have absolutely positioned areas here in in these areas I can drag and drop controls so this is kind of in between solution or I can now reposition groups overall simply position controls within a relatively positioned webpage and yet there are still other options as well I can I believe set each individual control and change it to be absolutely positioned
Minute 17
Actually selecting it in the going to lay out menu one more time going down to the position submenu and then selecting absolute for this single control so there are my options for moving things run everything else is currently relatively positioned this one control now has been changed to be absolutely positioned so while the emphasis between relative and absolute positioning because I find this to be one thing that confuses developers when they think they re wanting to work with and absolutely positioned varmint but only getting relatively positioned results so hopefully this will answer one of the big question marks in your mind and really comes down to the source code is added to each of the controls when we relatively positioned that last button as you see here is selected at the bottom of all this did was just a hot as
Minute 18
Our property and set some of its sub properties to left the position equals absolute and top equals 113 pixels so on the other two controls the button the text box don t have the properties of about that let s go ahead and delete always controls off analyst who want from your okay one more feature want to show you before we move on is less inserted table to set our 3 x 3 table of enough say that I want to select a given cell in order to modify the features of that sell what I can do is also use these will selection areas down upon them to to select an individual cell or to select the content of the cell and so this gives me the ability to select an entire row at a time the entire table and individual cell or
Minute 19
The content that s inside of the cell and organ bona fides properties this was going to delete this as well to make you aware of that navigational ability that you have to this solemn tag selector here at the bottom of a known to the fun stuff I promise you to take a tour of some of the controls that are in the toolbox was today right now for small for this example what I wanted to do is go to lay out many one more time could position in opposition options and a change Dion the auto position to absolutely positioned and click okay so not everything we add to our form will be absolute positioned effects of this example what I want to do is create or really simple a little data entry interface that we might use on like our company s intranet for example where we allow law on a project manager to take a look at the various subprojects are going on and out what this
Minute 20
As those projects are what Department of their billable to so forth and lower our own our staff to into the current status is for beers projects remake is very simple so we will make it too complicated to give us a spring board in order to demonstrate Senators controls that will come in contact with virtually every day while using visual Web developer 2000 Vice President so what s the first controls that were able to use our previous lesson will wear the label controls and these are simply just textual labels with a programmatic interface to use in the previous video you recall to change the content of that label by setting its property for the whole world or whatever the case might be so in this case was change this to name is really use the labels this time as labels in the classic senses were building like Windows applications right we wanted to
Minute 21
I ll give the user some indication over what those controls that they are that these labels are associated with will actually do and the first controls would use it as a text box control and text boxes are simply to allow users to input any free form kind of information things that can t be predicted from so we allow off the numeric characters to be entered here on also changed the name of or the IDE of our controls as we go along using the fairly new naming standard on were going to for simple and lowercase names uppercase text box okay I think we ve all seen test box before this allows for free form input now if we have a situation were trying to collect data where there s only a limited number of options we might use something like a drug
Minute 22
With talks is in position with those on our form here and remains this data is drop down and this is where we may want to only allow the user to select from her pre selected or pre entered number of options so we can do here is either were good for the soul arrow in the upper right hand quarrymen I ve seen this up to this point if you re just new to the express edition tools this gives us a list of quick tasks that are associated with that given control and we can either data bind this particular controller for the talk about in lessons ugly 78 over right now are a hard code the options in by clicking the little edit items link and are quick tasks menu and select the add button to enter our first list item so instead
Minute 23
To either be down in progress or not started or completes or might choose us select one as the first option type and Remus said the selected option to true so we want this by the fall of the page loads up to be the first option that s visible and we might even does move it up to the top of the list and then in order to did God create the proper progression here we may want no move this not started this number two auto ahead of the in progress all usable arrow buttons to move each list item up and down the list and now we have select one not started in progress and complete the select one list item has a selected option of
Minute 24
Rousseau by default will be selected and click the okay button and own a click the little back or oh to close the quick tasks dissidents were going to use a series of radio buttons and radio buttons are popular whenever you have a true false or yester no type question or a limited number of options on that are available to the user that are both visible the same time no differs from the drop down list box and so much of the drop down list box only allows us to soul I m sorry it allows us to select from may be harder to hundred different options were the radio buttons because of the amount of space they take up only a lot was made to put 56 within a group for selection so understanding the propensities of each of the controls and choosing the right controls for the situation ought to make all the difference when designing your your forms
Minute 25
So this case were going to change this to a marketing radio button is the ID Emma change the text that appears next to the actual radio button by setting its text property Tamil changes into counting call this the accounting radio button up to zealous glens has replication to see how it works and thus far as I can select either marketing or counting right although I have two selections here what I do wrong well we can and we need to actually group these two together to let ASP net and its the the web browsers know that these are grouped together so treat them as one or the other but not both in the dude
Minute 26
At we will place them into a group will call this group named departments sold at to make sure that both controls have their group name properties set to Department knowledge tried this time that we ve set that option and see if it takes the things that are apace and now we can see a one or the other selection but not bow great analyst at a checkbox and checkboxes are popular for whatever we need a yes no type question of response from the user so no call this our approval checkbox were going to leave its check property to false by default it will not be checked but really change the text property to requires a
Minute 27
Approval is a list test is now sleeping typing here we can select something there and choose one of the leaves and in your click on or off requires approval great salon only use a couple more controls in this example and they will probably use a lot more as we continue through this series of lessons in his controller demonstrate is the use of the hyperlink and will put this right axis requires approval and the hyperlink controls great whatever we want to dynamically change the link or of the URL that a given hyperlink appoints two so we can dynamically programmatically change the hyperlink if we wish to by setting its properties within the code
Minute 28
Ride for application so in this case I m a Texan like more information and to provide a help area and I can set the navigate URL new some project folder if I wished you that s currently off my local hard drive or I can type into your own learn Visual Studio loops net I can also change the target from the current window to a new blank window to have options there as well and not escape over the rest of the controls within the standard area and talk about some of the valve looks attack I am going to add a button control and was replaced as here and call this the okay button
Minute 29
And a button and had a label them a usable but later in this example call this success label and read move attacks for your I m also going to add one more label that will usually are in this example called status labeled and remove the text property can call the status label that both move on and talk about validation controls no doubt you visit a website may be a website where you try to pay for something online and there were certain fields which were required fields and so if you forgot to fill in a required fields at the web browser would stop you before submitting that webpage back to the Web server and was a
Minute 30
Forgot information one of the following fields you forgot to fill in the name you didn t pick a stat is you didn t choose the department and so on peso ASP net 2 0 makes it very easy to add these types of field requirements as well as other types such as required fields but also check one field based on the values that are within another field are some preset values through the use of a series of validation to so you can see here that the full validation section or interview is choose is required field validator on a place one right next to our text box and recalled lists name required fields for the rebel and only the system properties of this control first and I wanted to a select control to validate them give me a list of controls that this
Minute 31
Particular validation control can work with Irina selects the name text box next I want to change the error message on a change this to justice star so if there is an error in the pool star next to it actually was for the first time was to simulate this required fields and will change the school but later to use this type smells runner application and would get click the okay button but notice because I can enter anything into this bit the required field message came up now attacked in some additional information click okay again and noticed that it goes away nothing really happens is we haven t written a code behind or form however you can see the utility of the required fields
Minute 32
Validation control which requires that in this particular case something is filled out in the name text box before of the form will be allowed to submit back to the Web server Cool and very easy to do was take this one step further Michelin move the status label dongle but and the next control that I want to use is a compare validator very similar to require field but instead of checking to make sure that the text property is not empty in this case will make sure that it s not equal to some value I want to make sure that the user makes a selection in the status drop down so that select one and then is not submitted back to the Web server if will stop the the submission of that form before
Minute 33
Makes it back to the Web server if they have refused to select a status from this truck that was so what s going to set the properties of this control first of all we want to set the control validates as the status drop down here we have some options were to have to think through little bit for small we want the tight to be set to strange and we want to value to come pair select one it s and we need to make change the operator so bad it s not equal to select one does another we set these properties when run replication again I ll tighten some data there and I m slowly select one and noticed that whenever click the okay button
Minute 34
Compare router are forgot to change the eager message of property but you can see that it actually kicked a gear and by selecting not started it goes away and does another neat feature is well noticed that both are now lit up both of them validator controls are lit up because both conditions are all are found to be in in violation of the validation rules about setup and so you don t have to nickel and dime your end user by saying he forgot the name let them thought the main click okay and then say all will now you forgot the status and so forth to show them everything is wrong all on time of very cool lead changed some of the properties here we will change your message on both of these and we will change the
Minute 35
Pacts to be a name is required and it s will change the text here to be status is what to think about us backwards actually us status is required to undergo name is required and now really use a third validation control great and then validation trolls called validation summary is a little list everything in one big list at the bottom of our webpage or photographer we prefer to put it so that the user need only look at one place to get a full explanation of everything that s wrong before trying to resubmit the webpage
Minute 36
Now I have not set any properties for this validation summary control but by virtue of the fact that it exists on our web form it s now ready to be used so run my application I m not a filling name or status button and click the OK button and noticed that it does put the red asterisks next to same status but the very bottom it gives us the full explanation of the problem names required status required to make this as firmly of the as air messages I want to I can even a odd begun opening line that says the 26 the following brawls before summoning form during the excellence move on from there okay so we re nearing the end I want to show you some neat functionality that s contained within the layout toolbar so we are in talks about
Minute 37
Per in the previous video believer in the beginning of this video and that is to help us determine where we want to or how we line up the items on reforms to concede that the left hand side of the name status Department labels are slightly audible one of status mighty push ups a little bit more than the Department so I can do is select all the controls and noticed that the name control has white carrots around his selection the others have black or great out character on their selection which means that when ever we use the layout toolbar is going to use the current settings of the name because it s why carrots is the last select one as the settings for in this case the left hand side snow Radcliffe is one less and if you saw was as a rule is
Minute 38
Mall just meant that status in part made to remove over to the right sold it and could tell the same can be true whatever I select and came and the text box I may want will lie in their tops or a line in the middle s is probably a better way to go about it so it calculates with the middle ex wife position is of name in the sense that a wide position for our text boxes well know to use other controls to decrease the horizontal spacing or increase I m sorry increase results facing or to remove any horizontal spacing as I did accidentally okay or I have the freedom to select and use the arrow key on my keyboard to move things around to the right or to the left up or down in now this particular case may be what I wanted to
Minute 39
Is some movies will be closer to the other assaults varies off first thing I want to do is make the vertical spacing equal so whatever the spacing is between name and status will be the same space spacing between Stassen Department soldier will select this can make it equals the moves desktop solution but to want select all three controls and were going to align their laughs and that s when the select a controls tear and align their medals do the same here looks and align their medals and pay Gannon s will do the same here and align their medals looks cut amid a mistake there so
Minute 40
Can I do I can go back by selecting at its undue life middle pay the reason is because I had the wrong item selected social and picture department selected and right click a line middles again moving everything up rates and might just move this menu weekend and use this to align the last and dismayed will do the same thing here will line up to us okay so we have some precision control over the layout of our forms by using the toolbar so I would encourage you to play around with the toolbar the layout toolbar and try her hand and see if you can make it do exactly what you wanted to tickets of precision control some fidelity over how your your controls are placed on your Web form win absolutely positioned and finally the slow summer talk about the
Minute 41
Concept of post back and post back is really a mechanism that gives our end users illusion that they re working with a much more robust application then what they are typically experiencing with out web based applications and makes them feel like working with a Windows forms application is much more interactivity and we ll talk about how this is accomplished in lessons reinforced on what you too deep into this but you recall from the previous lesson in how we were able to write code behind a button in order to of change the text property of the label and we did that we gave the user is the illusion that merely by clicking the button that change the actual label to a different value when in fact what happened behind the scenes was that it has begun it struck out the label to the text that we wanted a place in it we built the webpage and send it back to the user though there was a brief flicker on the web
Minute 42
Age because of the process of sending that information from the user s client browser all the back to the Web server the Web server or a recompose in the webpage based on the input from the event handler and then sending the webpage back to the end user s client web browser though ideally that would help happen so quickly that it would give the user the illusion of of a very interactive of engaging interface to the application so in this particular official might be something like this song were going to change the success label text property equal to success so whenever they change for the absent information and fill out this form select is
Minute 43
Addison s selects amused options and then click the okay button this is the than the illusion that all the information was saved and that now they can continue on using the application notice that not only was this label change but any of their previous entries were also preserved during the post and the reloading of data back into the web browser at again all this is handled with mechanisms that are automatically available to you in ASP net 2 0 will talk about view state in hell that is accomplished in another lesson but let s expand this concept there are some controls that are naturally use to post information back for simple buttons for sample we would expect a button on a form to post the data that was collected from of the form fields back to the Web server and so the Web server can you save them in a database or can can process them in some way to pay for
Minute 44
In cases where we may want other controls may be through the selection of at a given status or are of the selection of a radio button or checkbox to maybe change the available controls are visible on the form maybe there is some type of database lookup based on the selection of a status sword in another case they be on based on the selection of a country you might change out whether states or provinces are our available within the given the next drop down is available on the form where the case of beating a higher degree of interactivity slow somewhat how to do that right now just like you can write code behind the click event of a button you can also write code behind the selected index changed event of a drop down combo box is that you can t Windows forms applications will be due here is status label text you selected and an add in or the status dropped
Minute 45
Known text property is in the house where applications see that s all we need to do so ideally will happen is I would type in some values here and then select in progress and that we would see something pop open in our little label horror of status label that was off to the right hand side of our status drop down box over that didn t happen in this case the reason is because we have to let the ASP net runtime engine noises originally composing the page that needs to add in some special JavaScript to our webpage in order to make this happen so sort of an act that will do is select a drop down combo box in the Gore properties in and finds the auto close that property within the behavior section of her properties window for this controlled intranet to true
Minute 46
Do not by doing so immediately whenever a new selection is made the entire webpage will be posted back to the Web server the message that this post back was triggered as a result of a selection within our status drop down what triggered the event handler for the status dropped else within it an exchange of skewed code recompile the page set back out to the use of consuls for the application now and have been some here are ambitions select in progress and those in a region that there is a little flicker and also now we see our little status label you selected in progress and is so damn can create very interactive controls interactive webpages that include controls attribute that can post back to the Web server based on the your users interactivity with those particular controls that use anything you get
Minute 47
Radio buttons and checkboxes let s see how we enabled this left right click and select view source and now your webpages been added a lot of JavaScript effect you see here there s a function is created to post back on also in our drop down list box itself here to see it is replaced with a select control HMO control can then be on change Dom event triggers and in line JavaScript call to set timeout is called books to post back in taxes in a bunch of stuff that s specific to that particular function as a night to see how this is actually enabled after that happens the post back and sends all the data from our form back to the Web server and then as you know what happens from there so okay so closely found it interesting was quickly review the
Minute 48
Is it we talked about in this lesson talked about some of the main area of the tabs in the main area how to position Windows person for the purpose of the solution Explorer the toolbox how to navigate to the toolbox of uncontrolled looking for look briefly at the properties window look at how to also get to the events for of our forgiving controls we talked about adding or removing toolbars from our IDE looked at enabling absolute positioned using layers positioning on our graphical elements using either tables or absolute positioning we looked at navigating its listing table on the season will tax collectors at the bottom of blog posts back and auto post back and a lot more so we asked with a little water ground is a short period of time here in less than two and in the next less organ expands of the things we introduced here mainly talking about events and post back every human rights more
Minute 49
Love an interesting lesson number three as well so be Joyce s video please visit WW to learn Visual Studio net to download water or former videos just like this one and all skill levels on many different topics related to see shark Visual Basic ASP net and more thinking