SharePoint Development Study Notes 3-Visual Web part and custom configuration interface

Visual Web Part

When using vs2010 to create a Sharepoint project, we can see a visual web part project template ().

 

In the past, a Web Part in SharePoint generally used class projects, and almost all the presentation styles and controls were written by hand.CodeOr use a third-party user control package to implement it, and the debugging operation is relatively troublesome.

Currently, this template provided by vs2010 directly uses user controls for Web part design. It can be developed just like a common webpage, and during debugging and running, vs2010 will automatically deploy it on the site you selected for running on a temporary basis, and debugging will become quite convenient.

 

First, you need to run vs2010 with the permission of the Computer Administrator to create a visual web part project. Of course, if not, vs2010 will also warn you.

 

Next, create a new visual web part project. After you click the create button, vs2010 will pop up a window asking you to select the local site for debugging ().

 

 

Enter your own SharePoint site, and click Finish to create your project. Vs2010 also redirects to the user control immediately after the project is successfully created. Then we can open the design view and drag the server or HTML control directly. In addition, we can load the JS libraries such as jquery directly here ().

 

 

The complete function is very simple, that is, enter your name, click the button, the text in the lower line will show your welcome text.

 

Click debug and run. The previously deployed site is automatically displayed. Enter the user name and password to go to the page. Click site settings and select edit. ()

 

 

Click Add Web part on the page, locate the previously created web part in the Custom directory, and click Add. ()

 

 

After that, the completed Web part will appear on the site interface of SharePoint. ()

 

 

Custom Web part configuration page

SharePoint automatically displays a text box on the configuration page for attributes of the string, integer, floating point, and other data types in the webpart. For enumeration types, Sharepoint is automatically displayed as a drop-down list, for the boolean type, the check box is automatically displayed in Sharepoint.

 

What if there are other more complex types? SharePoint also supports customizing the webpart configuration interface. In this case, the editorpart class is used.

 

Next, in the above project, we need to create a new class in the project, and just run the name webparteditor to introduce the namespace: system. web. UI. webcontrols. webparts, and let this class inherit the editorpart class, and implement its two methods: applychanges and syncchanges. Simple Description:

• Applychanges: transmits values to the webpart on the configuration page;
• Syncchanges: transmits values from webpart to the configuration interface.

 

The webparteditor code is as follows:

 

 

Using system; using system. collections. generic; using system. LINQ; using system. text; using system. web. UI. webcontrols. webparts; using system. web. UI. webcontrols; namespace visualwebpartproject2 {class webparteditor: editorpart {dropdownlist ddl_text; protected override void oninit (eventargs e) {// ensure that the control is created ensurechildcontrols (); base. oninit (E);} // create the control protected override void createchildcontrols () {controls. clear (); ddl_text = new dropdownlist (); ddl_text.items.add ("configuration 1"); ddl_text.items.add ("configuration 2"); controls. add (ddl_text);} // draw the appearance of the custom configuration interface protected override void rendercontents (system. web. UI. htmltextwriter writer) {writer. write ("configuration options:"); ddl_text.rendercontrol (writer);} public override bool applychanges () {return true; // throw new notimplementedexception ();} public override void syncchanges () {// throw new notimplementedexception ();}}}

 

In the webpart class, we also need to implement a method of the iwebeditable interface. Note that this interface has already been referenced in the webpart class. Here we only need to override the createeditorparts method. The Code is as follows:

 

Using system; using system. componentmodel; using system. web; using system. web. ui; using system. web. UI. webcontrols; using system. web. UI. webcontrols. webparts; using Microsoft. sharePoint; using Microsoft. sharepoint. webcontrols; using system. collections; namespace visualwebpartproject2.visualwebpart1 {[toolboxitemattribute (false)] public class visualwebpart1: webpart {// Visual Studio might automatically UPDA Te this path when you change the Visual Web Part project item. Private const string _ ascxpath = @"~ /_ Controltemplates/visualwebpartproject2/visualwebpart1/visualwebpart1usercontrol. ascx "; protected override void createchildcontrols () {control = page. loadcontrol (_ ascxpath); controls. add (control);} // rewrite this method on the custom configuration page. Public override editorpartcollection createeditorparts () {arraylist controllist = new arraylist (); webparteditor epart = new webparteditor (); // assign an ID. Otherwise, an error is returned. id = This. ID + guid. newguid (). tostring (); controllist. add (epart); return New editorpartcollection (controllist );}}}

 

In this way, the custom configuration interface is ready, as shown in figure