Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
As your ASP.NET website expands and includes more pages, you'll find circumstances where you want to reuse code. That is, to create a file that does presentation or executes some kind of logic that you want to reuse on many pages. Candidates for this kind of control include commonly used menus, presentations of images and anything else that repeats on many pages. For this demonstration, I'll use a beginning website and then click the Design button, so you can see what the page looks like. This is the basic design for all pages in the website. There is a graphic banner at the top, a set of hyperlinks below the banner that are the menu and then a Heading 1 for the page title.
If you open another of the pages, for example Authors.aspx, and look at that file in Design view, you'll see that the top content is exactly the same, the image and the hyperlinks. The heading has the same look and feel, but the details of the text are different. I'd like to be able to take the image presentation, the hyperlinks, and the heading and turn them all into a reusable control that I can then call or implement in all of the pages. When you create user controls, they're going to be created as server-controls.
That is, they're files just like ASP. NET pages that are processed by the ASP.NET server. It's commonly recommended that when you create these controls that you place them in a special folder under your website. I have already created that folder in my website. It's called Controls. It already has one file called Header with Props that I'll use in a different video, but for this video, I'm going to create the control from scratch. I'll start by clicking on the folder where I want the control to be placed.
Then I'll go the menu and I'll select Website > Add New Item. In the list of Visual Studio installed templates, locate Web User Control. When you select that item from the list, you'll see that a name is set by default with a file extension of .ASCX. All custom controls have this file extension and that distinguishes them from pages which have the file extension .ASPX. Just like ASP.NET pages though, within a control you can select your choice of language, Visual C# or Visual Basic, you can place the scripting code for the control in a separate file if you like.
I am going to keep any scripting code and any HTML mark up in the same file. All I'm going to change here is the actual file name of the control I'm creating, and I'm going to name it Header.ascx, and I'll click the Add button. Notice that because I had already selected the Controls folder that the file was placed in that folder. Now, take a look at the top of the file. The file begins with a Control declaration. It has a Language attribute indicating which language is being used, C# in this case, and a ClassName, which you can modify, if you like.
Because I said that I was going to do everything in a single page, I have a script section with a runat = server attribute. Any code that I place within that scripting section will be processed by ASP.NET, rather than by the browser. Now, I'm going to populate the control with some HTML markup. I'll go to the homepage Default.aspx and I'll look at it in Source View. I'll press Alt+Shift+Enter so I can open it up to full screen, and I'm going to select just this content.
I'll select the panel that contains the image and the next panel that contains the hyperlinks. And I'm going to cut that content to the Clipboard. And I'll save the changes in Default.aspx. I'll return to Header.ascx and I'll place the cursor after the scripting section and I'll paste in that code. Now, all the HTML code that I need to present the image and the hyperlinks for the menu are in this server control. I'll clean up the code a little bit, then I'll press Shift+Tab to unindent the code. Because this code is no longer embedded in a larger HTML page, it doesn't need to be indented.
I will save the changes and now I'm ready to use the header control in my page. I'll go back to Default.aspx and I'm going to look at the page in Design View, and I'll also press Alt+Shift+Enter again to get out of Full Screen View. Now, to place the control on the page, I'm going to place the cursor at the beginning of the homepage, and I'll press Enter once to create a paragraph of above. Notice that because I had placed the cursor inside an h1 tag that the new content is also an h1. I'll fix that later. For now, it gives me a large area to drag and drop the control.
I'll go to the new control in the Solution Explorer, and I'll drag it and drop it into the Heading. You'll see as a result that the Header appears on the screen. Visual Web Developer is actually rendering what the page will look like taking into account both the control and the rest of the content. Now, I'll do my clean up. I'll go into Source View and I'll eliminate the Heading 1 that was placed at the top of the page. Here's what the code looks like. uc1: header with a run at equals server attribute. There's some more code up at the top that I'll explain in a separate video.
For now, all I'm going to do is run the page. I'll save my changes and select Debug > Start Without Debugging. When the page is rendered on the screen, ASP.NET puts together the main page plus the user control, and renders it as a complete web page. You'll now be able to use this control and as many pages as you like to create a common look and feel for the whole website.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 96107 Viewers
56 Video lessons · 109946 Viewers
71 Video lessons · 78748 Viewers
131 Video lessons · 37774 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.