Microsoft SharePoint 2010 : WebParts and SharePoint Pages - Writing Visual WebParts

Next, you are going to start writing WebParts using Visual Studio 2010. These WebParts are deployed using WSP's or solution packages. The first kind of WebPart you will write is a Visual WebPart. The word visual simply refers to the fact that you get visual editing experience when developing this WebPart in Visual Studio. This is possible because a Visual WebPart is based on an ASCX, also known as a user control. This WebPart being an ASCX also presents a significant limitation. The deployment of this WebPart requires an ASCX file to be copied on the file system. Since the deployment requires you to make changes to the file system, a Visual WebPart always has to be deployed as a farm solution.

However, the visual editing experience during development is quite useful as well. Let's go ahead and master this technology of developing a Visual WebPart.

Start by creating a new solution in Visual Studio 2010 and base it on the Visual WebPart project type. Note that SharePoint asks you which web site you intend to debug this solution on, but it does not allow you to create it as a sandbox solution. Once your solution is created, Visual Studio will open the ASCX file that will contain the UI for your Visual WebPart. You can go ahead and give your feature a proper name, by renaming your files to something meaningful. However, the examples stick with the default names for brevity.

Once the ASCX opens, you can use various controls that ship with SharePoint and ASP.NET to build a UI for your Visual WebPart. You may also write code-behind to enhance the logic of your Visual WebPart. This can be done by right-clicking the Visual WebPart ASCX and choosing view code.

However, this example uses only declarative code in the ASCX to demonstrate a way of showing the countries list using both SharePoint and ASP.NET controls. To achieve this, go ahead and add the code shown in Listing 1 in your ASCX.

Example 1. Visual WebPart Code

<h1>My Visual WebPart</h1>
<br />

<SharePoint:SPDataSource runat="server" ID="countriesList" DataSourceMode="List" SelectCommand="<Query><OrderBy><FieldRef Name='Title'
Ascending='true'/></OrderBy></Query>">
  <SelectParameters>
    <asp:Parameter Name="ListName" DefaultValue="Countries" />
  </SelectParameters>
</SharePoint:SPDataSource>

<asp:GridView ID="GridView1" runat="server" DataSourceID="countriesList"

					  

EnableModelValidation="True" AutoGenerateColumns="False"
  AllowPaging="True">
  <Columns>
    <asp:BoundField DataField="Title" HeaderText="Country Name"/>
    <asp:BoundField DataField="Population" HeaderText="Country Population" />
  </Columns>
</asp:GridView>

					  

Note that the code used for this ASCX uses both SharePoint controls and ASP.NET controls running in tandem.

Go ahead and build then deploy your solution. Note that this is a farm solution so it will do an IISReset. Drop the WebPart on the homepage of your site collection, and you should see the WebPart in action, as shown in Figure 1.

Figure 1. Your Visual WebPart in action