AddThis Social Bookmark Button

Print

Building Web Parts, Part 1
Pages: 1, 2

Creating Web Parts Using Web User Control

Let's take a look at the second method of adding a Web Part to a portal page: creating a Web User control from scratch and dropping it onto a WebPartZone. The control we're going to build will allow users to search Google.



1. First you need to create a new control. Add a new Web User control to your project by right-clicking on the project name in Solution Explorer and then selecting Web User Control. Name the Web User control "Google.ascx."

2. Since we're going to display the Google logo to identify our Web Part, we need to create a folder to store the image. Add a new folder to the project and name it Images (right-click on the project name in Solution Explorer and select Add Folder -> Regular Folder). Save the Google.gif image in the C:\ Webparts1\Images folder (see Figure 6).

Figure 6
Figure 6. The image in the Images folder

3. Now you need to implement your control. First, insert a 2-by-2 table into the Web User control (Layout -> Table) to organize its contents. Add an Image control, a Textbox control, and a Button control to three of the table cells, as shown in Figure 7. Associate Google.gif with the Image control and add the word "Search" to the Button control.

Figure 7
Figure 7. Populating the Web User control with the various controls

4. It's time to add the code that will carry out a search when the user enters a search term in the text box and clicks the Search button. Double-click on the Search button and type the following code, which will send a search query to Google.com using the terms in the text box:


Protected Sub btnSearch_Click(ByVal sender As Object, _
                              ByVal e As System.EventArgs) _
                              Handles btnSearch.Click
  Response.Write(Page.IsValid)
  Dim queryStr As String = HttpUtility.UrlEncode(txtSearch.Text)
  Response.Redirect("http://www.google.com/search?q=" & queryStr)
End Sub

5. You can now drag and drop the Google.ascx Web User control from the Solution Explorer onto the WebPartZone2 control in Default.aspx (see Figure 8).

Figure 8
Figure 8. Dragging and dropping a Web User control onto a WebPartZone control

6. Note that the Google control is untitled. To add a title, switch to Source View and add the <title> attribute to the newly added Web User control, assigning it the value "Google Search":


<uc1:Google title="Google Search" runat="server" ID="Google1" />

7. To see how the Web User control looks in IE, press F5. Your portal page should now resemble the one shown in Figure 9.

Figure 9
Figure 9. Displaying the two Web Parts on the page

Customizing the Look and Feel of Web Parts

By default, the look and feel of Web Parts controls is determined by the default layout set by the WebPartZone control. By default, Web Parts display their various options (such as Minimize, Close, etc.) as hyperlinks. You adjust the look and feel of Web Parts by altering the properties of the containing WebPartZone control, and you can customize the look of the option links by adding your own images. Let's see how you can do that.

Remember, the settings in a WebPartZone control affect the WebPart controls it contains. So you have to set each WebPartZone control in order to adjust the look and feel of its Web Parts.

1. First, you'll need some images to use as icons. Add the images shown in Figure 10 to the Images folder of your project.

Figure 10
Figure 10. The images stored in the Images folder

2. Now you'll want to assign each of the images to one of the option links. Select the WebPartZone1 control and view its Properties window. Locate the following properties and set their ImageURL properties as follows::

  • CloseVerb.ImageUrl="Images/CloseVerb.gif"
  • EditVerb.ImageUrl="Images/EditVerb.gif"
  • MinimizeVerb.ImageUrl="Images/MinimizeVerb.gif"
  • RestoreVerb.ImageUrl="Images/RestoreVerb.gif"

3. Apply the Professional scheme to the WebPartZone1 control by clicking on the "Auto Format..." link in the WebPartZone Tasks menu (see Figure 11). Likewise, apply the Colorful scheme to the WebPartZone2 control.

Settings applied to a WebPartZone control affect all the Web Parts controls contained in that Web Part zone. If a Web Part is moved from one Web Part zone into another, it will assume the behavior of the Web Part zone it is in.

Figure 11
Figure 11. Apply a scheme to the WebPartZone control

4. Press F5 to test the application. You will realize that the Calendar control in the first WebPartZone control has icons displayed next to the Minimize and Close links. In contrast, the Web User control in the second WebPartZone control does not have the icons (see Figure 12). This is because you only configured the first WebPartZone control to display icons. In the next article, you will learn how to allow your user to rearrange the various Web Parts on the page.

Figure 12
Figure 12. Examining the two Web Parts in the two WebPartZone controls

Summary

In this article, you have seen how to create new Web parts using Web server controls as well as Web User controls. In the next article, you will see how to move the Web Parts from one WebPartZone into another.

Wei-Meng Lee (Microsoft MVP) http://weimenglee.blogspot.com is a technologist and founder of Developer Learning Solutions http://www.developerlearningsolutions.com, a technology company specializing in hands-on training on the latest Microsoft technologies.


Return to ONDotnet.com.


  • Wish article had separate images....
    2005-06-15 11:25:42  CRJones [View]

    Appears that the author intended for the icons and image to be separately downloaded. Would be great if the images were available without having to cut them out of larger image...
  • Web Parts
    2005-08-25 05:08:11  Ravikanth [View]

    Was interested in utilizing web parts in my aspx page. Wanted to know whether i could use web parts without having installed Share Point Server Portal on my server.
  • Where to find the missing images
    2005-11-28 07:03:42  murpke [View]

    I downloaded his examples from his book 'ASP.NET 2.0: A Developer's Notebook '

    You will find the images under the folder chap03-WebParts

    http://examples.oreilly.com/aspnetadn/

  • I can't see verbs
    2006-05-24 15:48:03  KHuang [View]

    I can't see the verbs (close and minimize) of the web parts on the page I created according to the demo.

    • I can't see verbs
      2006-07-14 11:20:34  ShawnZ [View]

      I have the same problem when I uploaded my website to our production server. It works fine on my local PC.

    • I can't see verbs
      2006-08-14 02:16:50  Arcalis [View]

      I have a similar problem
      code goes like this , pl let us know if you have found solution.

      <asp:webpartmanager runat="server" id="MyWebPartManager" />
      <asp:LoginStatus ID="LoginStatus1" runat="server" />
      <asp:webpartzone id="SideBarZone" runat="server" headertext="Sidebar" ToolTip="SideBarZone">
      <CloseVerb ImageUrl="images/CloseVerb.jpg"
      Enabled="True"
      Text="Close"
      Description="Closes the WebPart"
      visible="True" />

      <HelpVerb Text="View Help" />
      <ExportVerb Text="Export WebPart Definition" />
      <DeleteVerb Text ="Delete WebPart" />
      <MinimizeVerb Description="Minimize the control" ImageUrl="~/Images/RestoreVerb.GIF" />
      <RestoreVerb Description="Restore the control" />

      <zonetemplate>
      <rp:Reports AutoPostBack="True" id="Reports" runat="server" OnLoad="Reports_Load" />
      </zonetemplate>
      <PartStyle BorderStyle="Solid" BorderWidth="1px" />
      <TitleBarVerbStyle BorderStyle="Groove" BorderWidth="2px" />
  • Image to open the menu
    2006-06-09 04:39:17  Chintan1979 [View]

    Hi,

    Even after downloading all the required images, I can't see the image button that appears next to the title and on click of which menu appears to minimise and close. I can see that 'Down Arrow' key at the design time but can't see at the run time. Please assist.

    Thanks

    Chintan
  • Webpart demo
    2006-06-26 00:07:49  mamboboy [View]

    Hi, i did the webpart demo, and it seems OK I guess, but when i complile and run this my calendar says june 2006, yet the demo screen calendar says may 2005. Has anyone else noticed this?
  • Customising Content
    2006-07-13 17:01:00  Biggles_on_Tour [View]

    It seems to me that WebParts should be a great way of customising controls. But this article seems to suggest otherwise...

    Currently, ASCX controls seem very limited in their ability to contain dynamic content. Say I have some container - like a rounded square table, and I want to reuse the code I used to build it around the site, and modify the SkinIDs of various items within it, am I right in the assumption that this can only be done by writing Custom Controls? I'd hoped Web Parts could do the job, but it seems as though they can't.


  • Close
    2007-01-24 15:11:37  stanlj [View]

    I clicked close and now the calendar is gone. How do i get it back?
  • Making Google Search functional??
    2008-01-03 06:54:43  kencar [View]

    Okay I give up... been playing around with the expample for a google search (or any other search) web part for my page and I can't imput data to the textbox in the control. Is there some trick to this? Does it require SharePoint or something because the only other references i've found all are talking about SharePoint and this is just a IIS 6.x web serve and a .NET site that i'm working with....

    What's happening is that the page renders fine, but there is no way to type text into the textbox and therefore execute a search with the value of the text box in the redirect.

    Any help would be apprecitate this is taking way too long to figure out.
    • Making Google Search functional??
      2008-01-03 07:44:12  kencar [View]

      If you would.. delete this.. I found what my issue was and it had nothing to do with this article. There was a Z-Index that was nailing my webpart and rendering it useless.
  • Accessing webparts again
    2008-12-18 12:25:40  amitguitarist [View]

    I closed the calendar and now I cannot access it. I guess some information is stored in the database aspnetdb. Is there any way to remove it.
    • Accessing webparts again
      2009-06-24 02:05:37  v.vivek [View]

      Delete records from aspnet_parsonilazationallusers table in database in app_data folder..
  • Create Custom SharePoint WebParts, it is simple.
    2009-10-01 02:48:06  sarangasl [View]

    Nice !!!!!!!!

    Try this too,
    Custom SharePoint WebParts (http://sarangasl.blogspot.com/2009/09/in-this-article-im-going-to-describe.html)
    • Create Custom SharePoint WebParts, it is simple.
      2009-12-17 05:36:44  AbdulSami [View]

      http://www.codeproject.com/KB/aspnet/IntroToWeb_Parts.aspx