Asp.net 2.0 tutorial Web parts webpart

Source: Internet
Author: User
Respect the author. Keep the words www.it55.com.

Friends who have used Baidu space or MSN may be refreshed by the powerful personalized features of their websites. In fact, these things are not mysterious. In Asp.net 2.0, relying on the flexible functions of webparts, we can easily implement the same functions.
Webpart is a new control of vs2005. It enables users to drag and drop controls on pages, adjust positions and content, and add, delete, and modify controls. as in the previous section, webparts still requires SQL Server 2005 express support.
Next we will create a simple webpart instance, let's go!
First, drag the "webpartmanager" space in the "webparts" tool list on the left-side toolbar to the webpage:

Webpartmanager is a management and control center for webpart. It allows you to adjust and operate the webpart mode, including communication between webparts. therefore, you must first add webpartmanager to the page. webpartmanager does not occupy any position on the front end after running the page. It is hidden, although it is visible in design mode.
Here we need to talk about the five modes of webpartmanager (displaymode ):
(1) browsedisplaymode: browser mode, which is the default value. You can only view and cannot operate web parts.
(2) editdisplaymode: editing mode. the operation in this mode requires an editorzone. Then, you can put the appearanceeditorpart, behavioreditorpart, layouteditorpart, and propertygrideditorpart controls in the editorzone. They are the controls for editing Web parts, you can edit the behaviors and appearances of Web parts.
(3) designdisplaymode: design mode. In this mode, you can drag and drop the control position (in the webpartzone defined)
(4) catalogdisplaymode: Directory mode. A catalogzone is required for running in this mode. catalogzone has a template column, which can contain controls predefined by developers, in HTML mode, add Title = "directory to be displayed" to the control in the mode column. Then, you can put the control in catalogzone into webpartzone.
(5) connectdisplaymode: communication mode. This mode allows Web parts to communicate. There are two types of communication: Static and Dynamic. The provider and listener must be set.
Then drag two webpartzone controls to the page:

Webpartzone is a container for storing webpart controls. With this container, we can place webpart controls on the page.
Then, we place a calendar control in webpart Control 1 (in the toolbar "standard" tool list), and the system automatically encapsulates it as a webpart control, this is the content part of our website. of course, server controls, user-defined controls, and Web custom controls can also be placed here:

As mentioned above, webpartzone is a container for storing webpart controls. In this case, which container should the setting box for webpart editing be placed in? The answer is editorzone.
Editorzone is a container and only provides a storage area. Therefore, you must add one or more controls to the editorzone, such as appearanceeditorpart, behavioreditorpart, layouteditorpart, and propertygrideditorpart. They are controls for editing Web parts. They can edit web part behaviors and appearances.
Drag an editorzone and add an appearanceeditorpart to the editorzone:

Similarly, we also need a catalogzone control to display and manage the Control List on the page. The catalogzone control is also a container, so we also need to add at least one of the declarativecatalogpart, pagecatalogpart, and importcatalogpart controls to it.
Here we add a pagecatalogpart control to the catalogzone control:

The pagecatalogpart control displays the remaining available webpart controls on the current page in a list and allows them to be added to the page.
In this example, there is only one webpart control, so there is no communication problem between the webpart control, so the connectdisplaymode mode of webpartmanager is not involved in this article.
Finally, we need to make a drop-down menu so that we can select several webpartmanager modes to view the application methods of the preceding controls.
In the toolbar "standard" tool list, add the dropdownlist control to the page and add four item items for it, which correspond to the four modes of webpartmanager:




The background events of the dropdownlist control are as follows:

Protected void dropdownlistincluselectedindexchanged (Object sender, eventargs E)
{
Switch (dropdownlist1.selectedvalue)
{
Case "Browse ":
This. webpartmanager1.displaymode = webpartmanager. browsedisplaymode;
Break;
Case "edit ":
This. webpartmanager1.displaymode = webpartmanager. editdisplaymode;
Break;
Case "design ":
This. webpartmanager1.displaymode = webpartmanager. designdisplaymode; # P # page title # e #
Break;
Case "catalog ":
This. webpartmanager1.displaymode = webpartmanager. catalogdisplaymode;
Break;
Case "Connect ":
This. webpartmanager1.displaymode = webpartmanager. connectdisplaymode;
Break;
}
}

So far, our webpart journey is over. The following section of the. ASPX pageCode:

 

<Form ID = "form1" runat = "server">
<Div>
<Asp: webpartmanager id = "webpartmanager1" runat = "server">
</ASP: webpartmanager>

</Div>
<Asp: webpartzone id = "webpartzone1" runat = "server">
<Zonetemplate>
<Asp: Calendar id = "calendar1" runat = "server"> </ASP: Calendar>
</Zonetemplate>
</ASP: webpartzone>
Webpartzone1
<Br/>
<Br/>
<Asp: webpartzone id = "webpartzone2" runat = "server">
</ASP: webpartzone>
Webpartzone2 & nbsp; <br/>
<Br/>
<Asp: editorzone id = "editorzone1" runat = "server">
<Zonetemplate>
<Asp: appearanceeditorpart id = "appearanceeditorpart1" runat = "server"/>
</Zonetemplate>
</ASP: editorzone>
<Br/>
<Asp: catalogzone id = "catalogzone1" runat = "server">
<Zonetemplate>
<Asp: pagecatalogpart id = "pagecatalogpart1" runat = "server"/>
</Zonetemplate>
</ASP: catalogzone>
<Br/>
<Asp: dropdownlist id = "dropdownlist1" runat = "server" autopostback = "true" onselectedindexchanged = "dropdownlist1_selectedindexchanged">
<Asp: listitem> browse </ASP: listitem>
<Asp: listitem> edit </ASP: listitem>
<Asp: listitem> Design </ASP: listitem>
<Asp: listitem> catalog </ASP: listitem>
</ASP: dropdownlist>

</Form>

Complete ProjectSource codePackaging:
Upload/2007_05/07051600539435.rar

Some running results are as follows:




# P # paging title # e #





Through the drills in this section, do you already feel the strength of Asp.net 2.0? Powerful is still behind, hey. Next learning: Member qualifications and role management

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.