How to create custom visual web part in SharePoint 2010

Introduction

In this article we will see, 

1.    How to create custom WebPart.
2.    How to use SPGridView on visual WebPart.
3.    How to use LINQ to SharePoint
4.    How to deploy the WebPart in SharePoint site.

Step 1

Open Visual studio 2010 and create new project. From SharePoint 2010 project template select Visual Web Part project.

Step 2

Provide the SharePoint site URL, where you want to debug and deploy the Visual Web Part.

Before clicking on Finish, click on Validate button to validate whether you are able to successfully connect SharePoint site or not. 

Step 3

Create DataContext class or LINQ to SharePoint proxy class.

Open the command prompt and change directory to

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\BIN

Type command

CD C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\BIN

Now we need to create the   context class for corresponding list definitions.

C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\BIN> spme
tal.exe /web:http://dhananjay-pc/my/personal/Test1 /namespace:nwind /code:Product.cs

In above command we are passing few parameters to spmetal.exe, they are as below

a.    /web:Url   

Here we need to provide URL of SharePoint site
/web:http://dhananjay-pc/my/personal/Test1 /

://dhananjay-pc/my/personal/Test1 / is  URL of SharePoint site, I created for myself. You need to provide your SharePoint site URL here.

b.    /namespace:nwind

This would be the namespace under which class of the list will get created. In my case name of the namespace would be nwind.

c.    /code:Product.cs
This is the file name of the generated class.  Since we are giving name Product for the file then class generated will be ProductDataContext

Step 4

Add created DataContext class to the Project or LINQ to SharePoint proxy class.

Now add this class to the project. To do this, right click on the visual web part project and select Add existing item.  Then browse to C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\BIN and select Product.cs

Add references to the Project

Microsoft.SharePoint 
Microsoft.SharePoint.Linq 

Right click on Reference and select Add Reference. To locate Microsoft.SharePoint and Microsoft.SharePoint.Linq dll browse to C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\ISAPI. All the SharePoint dll are here in this location. 

Step 5

Add SPGridView on the Web Part

Now open the Visual Web Part project and open VisualWebPart1Usercontrol.ascx

Add the below markup to create one SPGridView

In markup in DataField we need to provide column name of SharePoint list to bind the list items to SPGridView column

VisualWebPart1UserControl.ascx

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %> 
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="VisualWebPart1UserControl.ascx.cs" Inherits="VisualWebPartProject1.VisualWebPart1.VisualWebPart1UserControl" %>
<%@ Import Namespace="Microsoft.SharePoint.WebControls" %>
<SharePoint:SPGridView ID="sp1" runat="server" AutoGenerateColumns="false" >
<HeaderStyle HorizontalAlign="Left" ForeColor="Blue" Font-Bold="true" />
<Columns>
<SharePoint:SPBoundField DataField="ProductId" HeaderText="Product ID" ></SharePoint:SPBoundField>
<SharePoint:SPBoundField DataField="ProductName" HeaderText="Product Name" ></SharePoint:SPBoundField>
<SharePoint:SPBoundField DataField="ProductPrice" HeaderText="Product Price" ></SharePoint:SPBoundField>
</Columns>
</SharePoint:SPGridView>

Step 6

Now write code behind for SPGridView
Add the namespaces

Write the below code to fetch the List items from SharePoint list using LINQ to SharePoint
VisualWebPart1UserControl.ascx.cs

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using Microsoft.SharePoint;
using Microsoft.SharePoint.Linq;
using nwind;
using System.Linq; 

namespace VisualWebPartProject1.VisualWebPart1
{
    public partial class VisualWebPart1UserControl : UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {

            ProductDataContext context = new ProductDataContext(SPContext.Current.Web.Url);
            EntityList<Test1_ProductItem> products = context.GetList<Test1_ProductItem>("Test1_Product");
            var result = from r in products select r;
            sp1.DataSource = result;
            sp1.DataBind();
        }
    }
}

In above code Test1_Product   is name of the SharePoint list.

Step 7

Deploy the WebPart to SharePoint site.  For that we need to right click on the Visual Web Part project and click Deploy.

Step 8

Open the SharePoint site where you have deployed the visual web part and select the Edit page option .
After that select Insert

After clicking Insert select WebPart to insert

From the custom category select visual web Part.

Note:  Name of the project we created in first step. Name I gave was VisualWebPart1 .  In custom category you will find name you gave of the project in step1.

After selecting the WebPart click on Add button.  And after clicking button on the home page you will get the custom WebPart  populated with Test_Product list items. 

Conclusion

In this article we learned,How to create custom WebPart,How to use SPGridView on visual WebPart,How to use LINQ to SharePoint  and How to deploy the WebPart in SharePoint site.