Lesson 8:
User Controls

Introduction

This week in Chapter 8: User Controls you will learn how to create your own custom controls that can be added to Web forms at will. The techniques demonstrated in this chapter are foundational to building your own custom Web applications. If you have ever built a Web-based or Flash-based game, you will appreciate the modularity and functionality offered by user controls. Some of the other important concepts you will learn this week include ClientID mode, how to add logic to your user controls, and how to create your own data type which you will use for implementing view state properties in your user control.

One of the instructional techniques that I have been studying and analyzing during my PhD studies is known as game-based learning or gamification; it is a broad category that covers using simulations and other immersive techniques to involve learners at a deeper level than they are currently engaged by modern day instructional methods. User controls interest me a lot because the are the building blocks for creating these newer types of interactive learning tools in Web-based delivery systems. Anyway, I don't expect you to get as geeked out as I do about User Controls, but I hope you'll find them easy to create and apply to your site and will take some time later on in your Web development career to examine the ultimate potential of this technique.

Also, there is a handy tip for Visual Studio users discussed on page 299 on how to quickly insert a commonly used code snippet into your code files. While editing a code file you can type the letters prop and then press the Tab key twice to have a new property snippet inserted at the current position of your insertion point. This is a technique you will most likely use a lot in your professional career. You will most certainly be using it again when we get to the chapters that deal with the data access layer.

Creating a user control is the same process as creating a Web form. All the tools and code-behind options available in a Web forms are available when creating a user control. The only real difference is that the @Control directive is used instead of the @Page directive you are used in Web forms. The advantage you get is that they can be added to other controls so you get a building block process from abstract to more concrete objects being created, each one being built on and further refining the previous one.

Adding a user control to a Web form or another user control is a two step process:

1. Register the control in the Web form or other user control

2. Add user control code to Web form or other user control

Assignment

In order to receive full credit for your Week 8 assignment you must complete the following:

• Read all of Chapter 8: User Controls in your text book to learn about ASP.NET user controls, how to register them locally and sitewide, how to add logic to them, and configure a view state property for them.
• Add a Banner.ascx file into a Controls folder off the root of your Website using the instructions below.
• Register the Banner.ascx user control sitewide and add it to your FrontEnd.Master file using the instructions below.
• Add logic and a view state property so that banner selection in your control can be displayed programmatically.
• Publish to the following to your student folder on the IA.MSJC.EDU Web server:
  • Web.config file from the root of your site
  • Direction.cs file in your App_Code folder off the root of your site
  • FrontEnd.Master file in your MasterPages folder off the root of your site
  • About folder off the root of your site
  • Controls folder off the root of your site
  • Images folder off the root of your site
• Verify that your control can be viewed in proper orientation on ALL pages from the student Web server.
• Post the URL used in the last step to Canvas by the due date listed in the Syllabus for Assignment 8

Instructions

Use the following step-by-step instructions for completing this week's assignment. Remember to use C# when copying code snippets from your text book.

Step 1 Complete all the steps in the Try It Out Create a User Control on pages 275 - 277 to add your banner images to a new Images folder off your root and to create a Banner.ascx file in a Controls folder off the root of your Web site.

Step 2 Complete all the steps in the Try It Out Adding the User Control to Your Page on pages 278 - 279 to register and add your control to the FrontEnd.Master file in your MasterPages folder FrontEnd.master file in the MasterPages folder off the root of your site.

Step 3 Complete all the steps in the Try It Out Registering User Controls in the Web.config File on page 281 to register your control sitewide.

Step 4 Complete all of the steps in the Try It Out Creating Smarter User Controls on pages 286 - 288 to modify your user control, create a Direction.cs file in your App_Code folder, and modify the code-behind for your user control to allow your pages to select which banner to use when displaying your user control.

Step 5 Complete all the steps in the Try It Out Implementing the NavigateUrl Property on pages 290 - 292 to implement view state properties which survive postback.

Once you have you have successfully completed the steps listed above, you are ready to complete steps 6, 7, and 8 below.

Step 6 Publish the following to your student folder on the IA.MSJC.EDU Web server.

• Web.config file from the root of your site
• Direction.cs file in your App_Code folder off the root of your site
• FrontEnd.Master file in your MasterPages folder off the root of your site
• About folder off the root of your site
• Controls folder off the root of your site
• Images folder off the root of your site

Don't publish any other files or folders at this time.

Step 7 Using a Web browser on your computer, verify that you can view your user control on ALL pages on the student Web server in the proper orientation.

e.g. http://IA.MSJC.EDU/7-digitStudentIDNumber/Reviews or http://IA.MSJC.EDU/7-digitStudentIDNumber/About etc.

Step 8 Post the URL for your updated CSIS786 Web site to Canvas for scoring by the due date listed in the Syllabus for Assignment 8.

Please email me if you have any questions at all!

⇑Table of Contents

Lesson Summary

In this lesson you learned how to:

• Create and implement custom user controls and why they are useful
• Consume (or use) user controls in your pages
• Improve the usefulness of user controls by adding the coding logic to them

Congratulations, that's it for this assignment. You can get a head start on your next lesson by reading chapter 9 in your textbook.

⇑Table of Contents