How to create custom visual web part in SharePoint 2010

No.of Views4198
Bookmarked0 times
Downloads 
Votes0
By  Dhananjay Kumar   On  22 Nov 2010 09:11:26
Tag : SharePoint , Development and Programming
In this article we will see,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.
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 

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.

Image Loading

Step 2

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

Image Loading

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

Image Loading

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

 Image Loading

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. 

Image Loading

Step 5

Add SPGridView on the Web Part

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

Image Loading

Add the below markup to create one SPGridView

Image Loading

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

Image Loading

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.

Image Loading

Step 8

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

Image Loading

After clicking Insert select WebPart to insert

Image Loading

From the custom category select visual web Part.

Image Loading

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. 

Image Loading

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.

 
Sign Up to vote for this article
 
About Author
 
Dhananjay Kumar
Occupation-Software Engineer
Company-Infosys Technolgies,Pune
Member Type-Gold
Location-India
Joined date-20 Jul 2009
Home Page-http://dhananjaykumar.net/
Blog Page-http://dhananjaykumar.net/
Dhananjay Kumar is Microsoft MVP on connected system. He blogs at http://dhananjaykumar.net/ . You can follow him http://twitter.com/debugmode_/ and reach him at dhananjay.25july@gmail.com
 
 
Other popularSectionarticles
Comments
There is no comments for this articles.
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top
</