In this exercise, you will develop and deploy a Visual Web
Part that reads data from a list and displays
in a DataGrid. In this exercise, you will:
1. Create a Visual
Web Part.
2. Generate Linq proxy
code.
3. Use a Linq
provider to read data from a SharePoint list.
4. Render the data
using the SPDataGrid web control.
Task 1 - Create a new
SharePoint Project
In this task, a solution and
project will be created. It will contain the rest of the development work in
1.
Open Visual Studio 2010 by going to Start Menu | All Programs |
Microsoft Visual Studio 2010 | Microsoft Visual Studio 2010.
2.
From the menu, select File | New | Project.
3.
In the New Project dialog window, choose Visual C# | SharePoint | 2010
from the Installed Templates.
4.
Select Visual Web Part from the Project Item
5.
In the SharePoint Customization Wizard:
·
Enter your SharePoint
site address for the local site.(What is the site do you want to use for
debugging)
·
Set the trust level to Deploy as a farm
solution.
·
Click Finish button.
6. Visual Studio will create the
new SPCHOL200-Ex1 project and add the necessary files.
7. Notice that Visual Studio also
creates a Visual Web Part named VisualWebPart1. Within the Solution Explorer,
expand VisualWebPart1 and open VisualWebPart1.webpart.
8.Change the value of the property
element with the name attribute value of Title to SPLinqDemoTitle and the value
of the property element with the name attribute value of Description to
SPLinqDemoPart Description. This will change the Title and Description property
of the Visual Web Part once it is deployed. Save the file.
<?xml version="1.0" encoding="utf-8"?>
<webParts>
<webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
<metaData>
<type name="SPCHOL200_Ex1.VisualWebPart1.VisualWebPart1,
$SharePoint.Project.AssemblyFullName$"
/>
<importErrorMessage>$Resources:core,ImportErrorMessage;</importErrorMessage>
</metaData>
<data>
<properties>
<property name="Title" type="string">SPLinqDemoTitle</property>
<property name="Description" type="string">SPLinqDemoPart Description</property>
</properties>
</data>
</webPart>
</webParts>
Task 2 - Generate
LINQ-to-SharePoint proxy class to access list data
In this task, you will use the new spmetal.exe code generation utility and generate the Linq-to-SharePoint proxy code.
1. In the Solution Explorer, right-click on the
Project and select Open Folder in Windows
Explorer.
2. Hold Shift key and right click anywhere in
the Explorer Window and select Open Command
Window Here to open
the command prompt window in the current project directory:
3. Type the following command in the command
prompt and press Enter to set the path to the
SharePoint 2010
folder:
set path=%path%;c:\program files\common files\microsoft
shared\web server extensions\14\bin
4. Type the following command in the command
prompt and press Enter to generate the Linq-to-
SharePoint proxy code.
spmetal.exe /web:http://your web site address /namespace:Your
Project name.VisualWebPart1 /code:SPLinq.cs
Note – you may get
warnings about content types for list Form Templates. You can safely
ignore this warning
and continue
5. Close the command window and switch back to
Visual Studio.
6. In Visual Studio, right click on the Project
and select Add | Existing Item.
7. Select SPLinq.cs from the Add Existing Item
dialog window and click Add:
8. In the Solution Explorer, right click on
References and select Add Reference.
9. Switch to Browse tab and enter C:\Program
Files\Common Files\Microsoft Shared\Web Server Extensions\14\ISAPI in the File
Name text box. Press Enter to change directories.
10. Select
Microsoft.SharePoint.Linq.dll.
11. Click OK to add
the reference to your project.
Task 3 - Access the SharePoint
list data in Visual Web Part
In
this task, you will add code to your solution that will allow the Visual Web
Part to retrieve SharePoint
list
data.
1. In Solution Explorer, expand VisualWebPart1
and double-click on VisualWebPart1UserControl.ascx.
2. Visual Studio will open the Visual Web Part
User Control.
3. Add the following code to the user control to
construct your grid view.
<%@
Import Namespace="Microsoft.SharePoint.WebControls" %>
<SharePoint:SPGridView id="spGridView" runat="server"
AutoGenerateColumns="false">
<HeaderStyle HorizontalAlign="Left" ForeColor="Navy" Font-Bold="true" />
<Columns>
<SharePoint:SPBoundField
DataField="Id"
HeaderText="Id"></SharePoint:SPBoundField>
<SharePoint:SPBoundField DataField="Path"
HeaderText="Path"></SharePoint:SPBoundField>
<SharePoint:SPBoundField DataField="Title"
HeaderText="Title"></SharePoint:SPBoundField>
</Columns>
</SharePoint:SPGridView>
4. In the Solution
Explorer, right click on VisualWebPart1UserControl.ascx and select View Code.
5. Add the following
using statements to the code behind:
using Microsoft.SharePoint.Linq;
using
Microsoft.SharePoint;
using
System.Linq;
6. Insert the
following code inside the Page_Load method:In my application I have created a
Document Library with a name “Venkat Photos” ,if you observe your SPLinq.cs
file, you will observe
var
dc = new SPLinqDataContext(SPContext.Current.Web.Url);
var
venkatPhotos = dc.GetList<VenkatPhotosPicture>("Venkat Photos");
var empQuery =
from photo in
venkatPhotos
select new
{
photo.Id,
photo.Path,
photo.Title
};
spGridView.DataSource = empQuery;
spGridView.DataBind();
Task 4 – Build and Deploy the Visual
Web Part
1. In the Solution Explorer, right click on Your
Project and select Deploy. This will build and
deploy the Visual Web
Part to the local SharePoint site
2. Open Internet Explorer and browse your
website
3. Click the Edit icon in the top menu to open
the SharePoint Ribbon to the Editing Tools.
5. Switch to Insert tab in the Ribbon and click
on Web Part to insert a Web Part to the page.
6. Under Categories, Select Custom.
7. Under Web Parts, select SPLinqDemoTitle web
part.Put your cursor in the area of the page where you want the Web Part to
appear. This must be a zone that accepts Web Parts.
8. Click Add to add the web part to the page.
This will add the SPLinqDemoTitle web part to the
selected layout zone.
9. Click on Page, click the down arrow on the
“Save and Close” button, and select Stop Editing
to save the page and
stop editing. Click Yes when prompted to save the changes you made.
10.You will see list
of items displaying on the Grid.
Posts
