Customize Web parts using user controls

Walkthrough: Use user controls to customize Web parts

This walkthrough illustrates how to create an ASP. NET user control, which provides user-specific default values on the Web page based on personalized settings of Web components.

ASP. NET web part control set allows you to generate a page with a modular layout, so that you can modify the appearance and content of the page according to their preferences. A major feature of a Web part is "personalized settings", which allows you to save user-specific settings for each page and reuse these settings in future browser sessions.

By using Web Components and personalized settings, you can generate a webpage that contains a feature that is useful to many web applications: You can provide user-specific default values in the form. This walkthrough shows how to provide user-specific default values by implementing user controls (user controls can be considered personalized Web Part controls. For example, this development method may be useful when you create an application for filling in online forms for the Customer Service proxy. Web parts and personalized settings allow your page to recognize each proxy. The user control allows each proxy to save the default values for fields on the form. Then, these default values are automatically entered when you access this page later.

Note:

The user control you created in this walkthrough is not a control inherited from the webpart class. However, in this walkthrough, you will understand that the user control can be usedWebpartControl. During this walkthrough, the user control is added to a webpartzonebase region. In this way, ASP. NET can encapsulate the user control in the genericwebpart control. Then, the user control can be like any otherWebpartControls work the same way, and you can use personalized settings.

With this walkthrough, you will learn how to perform the following tasks:

• Create a user control with customizable attributes. The values of these attributes can be stored in long-term storage.

• The user-specific default value is displayed on the form on the webpage.

• Use the user control as the realWebpartControl.

Note:

You can use the ASP. NET configuration file to develop such applications. However, in this case, you will not store user-related information to be reused in the entire application (such as in the shopping cart application. Instead, you save user-specific preferences or settings for each control page by page. For more information about the configuration file, see ASP. NET configuration file properties overview.

Prerequisites

To complete this drill, you must:

• You have installed and configured Internet Information Service (IIS) on the computer on which you want to host the website ). For more information about how to install and configure IIS, see the IIS Help documentation attached to the installation, or refer to the online IIS documentation on the Microsoft technet site (Internet Information Service 6.0 technical resources.

• The ASP. NET Website of a single user. If such a site has been configured, it can be used as the starting point of this drill. Otherwise, to view details about creating a virtual directory or site, see how to create and configure a virtual directory in IIS.

• Configured personalized settings providers and databases. Web Part personalization is enabled by default, and it uses sqlpersonalizationprovider and Microsoft SQL Server Standard Edition to store personalized settings data. This walkthrough uses SSE and the default SQL provider. If SSE is installed, no configuration is required. SSE is provided as an optional part of Microsoft Visual Studio 2005 installation. It can also be downloaded from Microsoft Visual Studio for free. To use a full version of SQL Server, you must install and configure an ASP. NET Application Service database, and configure the SQL personalized settings provider to connect to the database. For more information, see Create and configure an Application Service database for SQL Server. You can also create and configure custom providers to use other non-SQL databases or storage solutions. For more information and code examples, see implementing membership providers.

Create customizable user controls

In this part of the drill, you will create a user control that provides the user interface (UI) for the proxy information form. The control also discloses the personalized attributes of name and phone information.

Note:
You do not need to enable personalized settings for Web parts. It is enabled by default. For more information about personalized settings, see Web Part personalized settings overview.

Create customizable attributes for User Controls

1. Create a new file in the text editor. Add the following control declaration to the beginning of the file, and add start and end<SCRIPT>Mark. Your code should look similar to the following code example.

   Visual Basic

   <%@ control language="VB" classname="AccountUserControl" %>
   <script runat="server">
   </script>
   

   C #

   <%@ control language="C#" classname="AccountUserControl" %>
   <script runat="server">
   </script>
   

2. In<SCRIPT>Add the code to create two personalized properties:Username, The other is calledPhone, As shown in the following example.

   Note:
   Each property hasPersonalizableAttribute ). This enables personalized settings of Web parts to store attribute values in the provider database.

   Visual Basic

     <Personalizable()> _
   Property UserName() As String
   
   Get
   If Textbox1.Text Is Nothing Or Textbox1.Text.Length < 0 Then
   Return String.Empty
   Else
   Return Textbox1.Text
   End If
   End Get
   
   Set(ByVal value As String)
         Textbox1.Text = value
   End Set
   
   End Property
   
     <Personalizable()> _
   Property Phone() As String
   
   Get
   If Textbox2.Text Is Nothing Or Textbox2.Text.Length < 0 Then
   Return String.Empty
   Else
   Return Textbox2.Text
   End If
   End Get
   
   Set(ByVal value As String)
         Textbox2.Text = value
   End Set
   
   End Property 

   C #

     [Personalizable]
   public string UserName
     {
   get
       {
   if(Textbox1.Text == null | Textbox1.Text.Length < 0)
   return String.Empty;
   else
   return Textbox1.Text;
       }
   
   set
       {
         Textbox1.Text = value;
       }
     }
   
     [Personalizable]
   public string Phone
     {
   get
       {
   if(Textbox2.Text == null | Textbox2.Text.Length < 0)
   return String.Empty;
   else
   return Textbox2.Text;
       }
   
   set
       {
         Textbox2.Text = value;
       }
     }
   

3. Name the file accountusercontrolcs. ascx or accountusercontrolvb. ascx (depending on the language in use) and save it in the root directory of the website.

   Security considerations

   The control has a text box used to accept user input, which is a potential security threat. User input on the webpage may contain malicious client scripts. By default, ASP. NET web pages verify user input to ensure that the input does not contain HTML elements or scripts. Once this verification is enabled, you do not need to explicitly check scripts or HTML elements in user input. For more information, see script intrusion overview.

Now that you have added a customizable property to save the default value, you can add the user interface control to the user control to display the user's name and phone number.

Add User interface controls to user controls

1. In<SCRIPT>Add a label control and a Textbox Control to contain the user's name and use<Div>Mark and wrap the two controls, as shown in the following code example.

   <div>
   <asp:label id="Label1" runat="server">Name</asp:label>
   <asp:textbox id="Textbox1" runat="server" />
   </div>

2. AddLabelControl andTextboxControl to include the user's phone number and use<Div>Label and wrap the two controls, as shown below.

   <div>
   <asp:label id="Label2" runat="server">Phone</asp:label>
   <asp:textbox id="Textbox2" runat="server" />
   </div>

3. Add<Div>Mark included<Asp: button>To save the user information by executing the send-back operation. The Code should be similar to the following example.

   <div>
   <asp:button id="Button1" runat="server" 
     text="Save Form Values" />
   </div>

4. Save the file.

Reference a user control as a Web Part Control

Now that you have created a user control with personalized attributes, you can create a web form page and use the user control as the Web Part Control. To be able to use the personalized settings function, you must use this control as the Web Part Control.

Reference a user control as a Web Part Control

1. Create a new file in the text editor. Add the following page declaration to the beginning of the file.

   Visual Basic

   <%@ page language="VB" %>
   

   C #

   <%@ page language="C#" %>
   

2. Add a declaration under the page declaration to reference the user control you created earlier, as shown in the following example.

   Visual Basic

   <%@ register tagprefix="uc1" 
       tagname="AccountUserControl" 
       src="AccountUserControlvb.ascx"%>
   

   C #

   <%@ register tagprefix="uc1" 
       tagname="AccountUserControl" 
       src="AccountUserControlcs.ascx"%>
   

3. Under the Control Reference, add the following basic Page Structure and use the user control as the Web Part Control.

   Note:
   To use a user control as a Web Part Control, the page must contain<Asp: webpartmanager>And must be<Asp: webpartzone>Element and<Zonetemplate>The element contains the user control, as shown in the following code example.

       <title>Personalizable User Control</title>
   <body>
       <form id="form1" runat="server">
         <asp:webpartmanager id="WebPartManager1" runat="server"  />
         <asp:webpartzone id="zone1" runat="server" headertext="Main">
           <zonetemplate>
             <uc1:AccountUserControl 
               runat="server" 
               id="accountwebpart"
               title="Agent Information" /> 
           </zonetemplate>
         </asp:webpartzone>
       </form>
   </body>
   

4. Name the fileHostaccountcontrol. aspxAnd save it to the directory where the user control is located.

   Now, you have created a user control that can be customized and referenced as a Web Part Control on the web forms page.

The final step is to test the user control.

Test customizable user controls

1. Load in a browserHostaccountcontrol. aspxPage.

2. Enter a value in the "name" and "phone" fields, and click "Save form values.

3. Close your browser.

4. Load the page again in the browser.

   The previously entered value should be displayed in the form. These values are stored in the personalized attributes. When you reload the page in a browser, these values are restored from the database.

5. Enter a new value in the form, but do not click this button to save the new value. Close your browser.

6. Load the page again in the browser. The value re-displayed in the form should be the original value you have entered and saved to the personalization attribute.

Subsequent steps

This walkthrough demonstrates the basic tasks for creating user controls with personalized attributes. The controls you create allow you to save user-specific settings for a specific control and page, and display these saved settings when the user re-accesses the page through a new browser session. Recommendations for further research include:

• Study other components involved in creating a Web Part Page. For more information, see the Walkthrough: Create web parts page.

• Learn more about using user controls. For more information, see ASP. Net user control overview.

• Learn how to create custom web widget controls that provide easier programming than user widgets and all functions of web widgets. For more information, see how to use a user control as a Web Part Control.

See
Msdn: http://msdn2.microsoft.com/zh-cn/library/784d8z92 (vs.80). aspx
Concept

Overview of ASP. NET Web Components
Web parts personalized settings Overview