Create your first SharePoint 2010 application. In this article, you will learn: 1. Create a solution to read and write List data using the server-side object model and Visual Web part. 2. Use Visual Studio 2010 to create and deploy a solution. 3. Use the chart Web part to present the list data. 4. integrate different visual web parts in the solution on a Web parts page. Final effect:
Preparation: first, create two necessary lists: customer sales and total sales. The first list Stores Company and fy10's sales information. It contains a company column (single line text, modified by the title column) and four columns Q1, q2, Q3, and Q4 (single line text), like this:
The second list consists of two columns. Year (single line text) and sales (number ). Like this:
Create an application: There are four steps in total. First, develop
Add record to customer sales list . Create a blank solution and provide a project framework. 1. Open Visual Studio 2010.2. Click file-create a project. 3. Navigate to another project type and select Visual Studio solution. 4. Click the blank solution and name it myfirstspsolution. The main interface for adding records to the sales list is a visual Web component. 1. Right-click solution and choose add> new project. 2. Select a blank SharePoint project, name customersaleswebpart, and click OK. Deployed as a field solution. 3. Right-click the project, choose add> new item> visible Web component, and name it custsalesvwp. 4. Right-click custsalesvwp. ascx and select View viewer. 5. Create the following interface, which contains 6 labels, 5 text boxes, and 2 link buttons. The Code should be like this: 6. Right-click custsalesvwp. ascx and click View code to switch to the Code view. 7. add reference to using Microsoft. SharePoint; 8. The final code should be as follows: 9. Deploy the solution. 10. On the SharePoint site, create a new Web parts page. Click All website content-create-page-Web parts page. Name the sales dashboard. 11. Add a Web part and find custsalesvwp in the Custom class. Click Add. Test this visual web part to ensure it works properly. Add a new record to the customer sales list and verify the record.
Click Add to view the list:
Click Clear to clear the data:
To view the customer sales data, create a read-only Web component and load and display the data in the customer sales list. In ASP. NET applications, Data Grid is a very effective method. This time we use this function to load and refresh data. 1. file -- New -- project. 2. Select a blank SharePoint project and name it customersaleslist. Click Add to solution. 3. deployment as a field solution. Click Finish. 4. Right-click the project and choose add> new item. 5. Select the visible Web component, name it "salesvwp", and click "add. 6. Right-click salesvwp. ascx and select View viewer. 7. Drag two labels, one DataGrid, one link button, and one update panel. The final code should be like this: the interface is like this:
8. Right-click the project and add the -- class named customersales. Add some code: 9. Right-click salesvwp. ascx and select view code. 10. Add some code. The final result is as follows: 11. Right-click the project and select generate solution. Then, deploy the solution. 12. Click website operations> Edit page> Add Web parts on the previous page. 13. Select the salesvwp Web Part in the M class. Click Add. 14. You can see:
Click load and you will see:
View total sales to create a Web part with the overall sales volume. 1. Right-click solution and add -- create a project. 2. Select a blank SharePoint project, name it totalsalesvisualwebpart, and click OK to deploy the project as a field solution. 3. Right-click the project, add -- new item, select a visible web part, name it totalsalesvwp, and click Add. 4. Drag two labels, A DataGrid, and a link button. The final Code view is as follows: 5. Right-click the project, add -- class, and name salestotals. 6. Right-click the project and select view code. 7. Add the code. The final result is as follows: 8. Right-click the project and select generate. Then deploy the solution. 9. Add Web parts on the same page. 10. Find totalsalesvwp in the Custom class and click Add. 11. You will see:
Click load:
Add a chart Web part to present the data in the total sales list in the chart view. 1. Edit the previous page. 2. Add Web parts. In the business data class, select the Web Part of the chart and click Add. 3. Click Edit this Web part to customize your chart. 4. Select the column chart in step 1.
5. Receive the default value of step 2. 6. Step 3: select the title of the displayed chart. Name FY 10 sales. Click automatic preview to view the chart layout. Click Finish.
7. Right-click the Web parts drop-down arrow and select connect to Data. 8. Select the connection list and click Next. 9. Select the totalsales list and click Next.
10. You will see a table layout and click Next.
11. In this step, you can set custom changes to the icon appearance. Here, the default value is received, and the X field is selected as sales. Click Finish.
On the page, you will see:
The final page is as follows:
