Video: How Do I: Create a Custom User Control in ASP.NET?

In this video Chris Pels will demonstrate how to create a custom user control in ASP.NET that can be used throughout a web site or across many web sites. Start out by learning the basics of creating a user control that will be used in multiple pages including validation, controlling formatting using style elements, and loading/saving data for the user interface elements. Throughout the video considerations for building user controls that can be easily maintained and used across multiple pages are discussed.

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

Hi my names Chris sells this video were to learn how to build a custom user control in ASP net get started let s add a new website to her empty solution is to the regular ASP net website and cold website DB sore objective is to build a custom user control that we can use anywhere in the website just like we can use a text box or a button control that comes with ASP net and what I like to do which is by no means required is to create a folder called controls and I put my user controls in that folder I should say I put user controls in this folder that are potentially used in in various places across my website and a general user controls in another practice I do is let s say I have a folder called events and the

Minute 1

Ascendance folder contains webpages that relate to event based functionality if I have user controls that are specific to those event pages what I do is create a child folder called controls and I put the user controls in that folder and the reason for doing this is one it provides a nice organization so that the user controls related to events are contained within the events folder and it also provides the flexibility to secure this controls folder should I need to do so to get started building our user control we need to do is add a new item to our controls folder and it needs to be a Web user control template item and we re going to call this address is going to do is to build and address basic user control that we can use throughout our website

Minute 2

Now this creates an ASC ex file very similar to the ASP X Files you see there s nobody or form tag in here but we do add any kind of HTML to the user control that we would add to a webpage it also see that it has a control tag indicating it is a user control has the language specified much like a page as well as there is a code file behind the user control in the same way that we have one for a webpage solicited started designing our user control and I ve start by putting a given element which will be key in the outer master container for all the HTML that will put in our use control and just to demonstrate a principle to put the word address here in one of the things is that you can t use a user control as the start

Minute 3

Page so in order to see these control live on a webpage you need to put it on a webpage and what I tend to do is to either create a temporary webpage to control or I put it on one of the pages that you will be used on in the live site has some developing it so I can run that page and see what the control looks like and how it performs on a live site slips do that seated within the door to default aspx and one easy way to put a user control the pages to go into the design mode and would disconnect take the address user control and drag and drop it on the page and you can see we re getting the address text that I put in my use control and now will run missing at sea that will be open if you are use control it even in its simple form here on a live webpage

Minute 4

Are building our user control and we won t does have a layout with a couple launch the user to enter their address city state postal code in country economies gives to do the formatting for a user control and the first thing I want is a label for address line 1 label will put that inside this is 1 ns if and in that one would have put a text box where the user can enter the information for address line 1 format this a little bit and unused classes to format are elements in a little bit and just enough so we can have a nice readable format and its first monoclonal input element and then the second one we are

Minute 5

In a call input label and the third one local input data so this is for address line 1 less use as a basis for our other input elements where the edge of shrine to the city state postal code and country hunches go back up and start putting some of the IDs of us they will address one text will be addressed on an Xbox to be address one as well now nanometer the rest of near

Minute 6

He had Xbox and then we ll follow that up with state and an Xbox first aid postal code text box for

Minute 7

Russell code and are less one will be for country and the text box as a Saddam can control some of the formatting with CSS styles close go ahead and create a theme for our website and you call a default and inside the default theme we can add a new stylesheet family in the coldest default screen and here we need to put if you have classes that we created with input element

Minute 8

And we had input label and read input data for input element let s just put pay a little bit of a margin of five pixels on the top zero underwrite it five on the bottom end zero on the left don t her label him as just put a little bit of padding it was good to pixels so all the way around and its copy that is the same thing for input data to back up your input element in an all clear both of them use some floats here on our label and we want our

Minute 9

Label to float left and we also want our data to float left hand with our label we also want the text to align to the right for you and for the lets make sure government over your tour web config and specify the theme and use it as the default save that plus check out how this looks and what I think you ll find when creating a user control was specifying a theme in the CSS is that what you were going to design mode were not seeing the exact layout and that s another reason for dropping music control over here in the page let s fire up the fault they as to ask take a look and worked getting reasonably close to what we want for a layout on the page

Minute 10

Lets you specify a a few properties of some of our text boxes because so will be longer than others and will give us 50 columns for address and the max length let s say our database is 50 as well and will do the same thing for address to hand the Max Planck and our city lets make that 35 columns but a potential max length or 50 and the state is made to speak to columns have used the abbreviation for doing in the max length is to now another alternative is we could put a drop down list in here that is data bound to a table in our database that lists all the states would have a standardized list of states and the venues of primary key

Minute 11

To store the state value in our address is not something to consider renowned postal code and let s make this 10 columns to the max length of 10 and are doing is just as a US base address and country again let s make that 25 columns but the max length will make 50 switches run the page and do it again picture were getting what we want and indeed now it s much closer to what we won t buy would want to align these labels and text boxes as well as extremely like in our user controls have done some standardized validation s first delegation know we would like is to have the city be a required field take gay required field validator and we ll put that

Minute 12

Out here to the right of the text box and will call that required validator or city paying their message to hold the city is required in the text version display in this case is the letter are now one can do is give this a CSS class of validation message and Germany to specify the control to validate which in this case is TXT city looks to school over to the CSS and Ed are validation class held at two things one is the color once you read and we want the font

Minute 13

Wait for people backdoor tour use controlled and if you check out our default aspects will see that it is showing up grid in bold has we wanted it so drew back out and add a few more validation controls let s say we also want the state to be required just can copy and paste unamused for city music with state however you need to make a few changes we want to have it validate the state said it will call it required validator for state and Lucas changed us as to state is required to does do a few more validations and also

Minute 14

Required down here for the postal code make the necessary changes change the name nor the idea should say in the control to validated as the postal code militants change them as MLS validation were going to use is to put a regular expression validator and we ll put that on the postal code syringe with a table entry in the right format is called this regular expression validator or postal code and will set the control to validate the postal code and set the CSS class of the

Minute 15

Litigation message that this was a postal two must be in the format and will put the error text ads are an expression route and use one of the canned expressions that we have here in ASP net for the US zip code and imagining a back to text with something a little more in Florida that will save format must be now we could put more complex validation here free wanted to but the key point is that whatever they ll taste we put here in our addressees control will be applied consistently across the application or website where

Minute 16

User control is placed us just go back to our default page and what I d like to do is get a button so we can post back to South validation and for the moment I will just put the button here on the page is through a quick test before we leave the validation prep the webpage will just click a button to submit reduce see that we get our validation error messages indicating a seal the required questions for three digits rather than required for meta postal code and we do get the format message whoever you saw that its offset to the right is what we need to do is go back over to our address and we need to make this display dynamic for the required are and that means that it will shift over to them for basically that the required validator doesn t take up any space

Minute 17

Bus is invalid in other thing that we might want to the 30s control is the ultimate expose properties that could be set by the container that using the control and let s say that we want to have an enabled property for our use control much like over here on the default page for the button button has been enabled property now by default in our user control will not have an enabled property so in order to add that all we need to do is to put down into the code behind and we need to add a public property called enabled and to set it and get it as a couple approaches and what we ll do is we ll created private variable called_enable

Minute 18

Bouillon sweet to many here to our enabled property and will say_enabled run another will return_enable hand down here will set it you will need to do is to ask the set the enabled property of far contained controls in this case the text boxes to address one enabled value passed in an address to value and we have city state

Minute 19

Postal code and country and now we go back over to default SPX with user control is located nor use it we can set the enabled property in one of two ways feel free to link to the address tag for the user control will see there is now an enabled property and we could set it here enable people s true or false we could also go into the code behind and we could set the property programmatically here that s been downloaded that simply go to address one which is the ID of the user control on the default page and there s enabled product

Minute 20

Said that defaults and now if we start up the webpage and since we set it to false to see that I cannot get access to any of our text boxes on a page so it s just get rid of that because we don t want down around so we could go back over here for a code behind him he could at properties for other operations that or settings that we want for our user control when the other issues meets the address news control like this is how do we set or get the values of the address elements inside our user control and there s two approaches to that and one would be that we create a property for each of those still in the go ahead and do that lets say for cities to see how that would work so okay a public

Minute 21

Property city as a string and I just noticed that we should ve typed our enabled property here in so we ll just do that to you as my Tafoya so when he gets a code of the right code is in now what we want to do is we want to return the text from our text box and will commit and then if we say we want to do the opposite said if the value passed to the property so that we can create additional properties for the other fields such as the State postal code etc no of this approach of creating properties for each of the UI elements in Saturday s

Minute 22

Troll does provide a lot of flexibility so that whatever is containing this user control could individually set properties it also doesn t provide as much about blackbox type approach where you control knows how to load its data is saved as stated and may need to perform intermediary validations are conferred conversions of fields as it does so sue a second approach and you can decide in and which is best for you you may need may use both is to create two properties or if it s a two methods one that loads the data and one that saves the data lets create the first one and we ll call it load data and will have it take the data lets say a data table is input

Minute 23

Patent system data data table and his returns a Boolean whether or not it was successful and then we might actually do a second method for function calls to save data and this would also take a data table and return a Boolean that many she s not that she would need to do what we did up here with the city property and in the case of save data we would need to take our to save the data to our data table that had perform any

Minute 24

Validation and said they would be true with our low data is we would want to take the values from the data table and put them into the July elements and everyone one of forget to return either true or false to pay upon the success of loading or saving our information in one point made here just to be clear that were not loading and saving the data to the database and these two methods but simply transferring it from the user interface elements to some sort of sort structure that would then be returned and it would be saved to the database as another part of the application

Minute 25

In our example by specified a data cable as the container in which we get data in and save data another alternative would be if you have created an address class so that you have an address object you could pass in the address object and load the data from it or save the data back into it and looking forward with net framework 3 51 we have the entity classes if you have an address entity than you might pass bad in and you could use some the new features like the link data source to bind it to the user interface elements in the right approach is really up to your situation what you feel my work best for your team no one laughing like to do is may be somewhat obvious but I want to do it regardless just so everyone is clear on Islam and at a

Minute 26

Us new page to the events folder called default aspx and then run to open a page up in the design mode and we can go over to our address user control over their and drag and drop it onto this page and you can see we have all of the functionality of our addressees control here on the default paging events folder which is identical to what we have in the default aspx in the root of the website and this is an extremely powerful and useful approach to groups of user interface elements that are common across your website in fact almost any time you have the same group of elements used in two or more places it may be worthwhile to consider creating a user control because they not only is the look of the control standardized but all of the functionality such as saving and loading data into the user interface elements as

Minute 27

As well as the validation is similar and if you externalize the formatting abuse control to a group of standard style class names to get a lot of flexibility controlling the look of you use control from one place to the next so encourage you to download the sample code take a look at a little more detail and can bet how you can use it as a basis for creating user controls for use in your websites as as Chris tells thanks for watching this video on how to create a custom user control in ASP net

Click here to go to original video page