Web Parts are the main ingredient that runs on SharePoint. Doesn’t matter which version of SharePoint you refer to, Web Parts have always been one of the core elements that allow users to interact with the SharePoint platform and developers to perform custom actions on the SharePoint data.
The following is a no-brainer Web Part that adds two text fields and a button. Clicking on the button will give us the value of the number input in the first text field raised to the power of itself.
Fire up Visual Studio 2010, click on new project, navigate to the SharePoint section and select New Empty SharePoint project. Make sure you target the 3.5 .NET FrameWork version. It will normally point to version 4 by default.
You will then be presented with a dialog box asking for the SharePoint Web Site URL. That is the URL of the Site Collection where you need your new web part to be available on. Make sure you input the correct URL, validate and check the options below. You’re given the option to create a sandboxed solution or a farm solution. At this point, the web part will work just fine as a sandboxed solution so go on and select that option.
You will notice that once the dialog box is gone, you’re not presented with a canvas or some empty class to work on. You need to add a new item. Right click on your project name -not the solution, add new item and select web part from the list. You can now start coding your web part.
As already said, we need a couple of text boxes and a button. Unfortunately, we can’t drag and drop visually. We need to hand code. So go on and add the following.
Label lblInitialValue = new Label();
Label lblCalculatedValue = new Label();
TextBox txtboxInitialValue = new TextBox();
TextBox txtboxCalculatedValue = new TextBox();
Button btnCalculateValue = new Button();
string strInitialValue = “”;
You can omit the labels if you so want. I’m just adding them to make sure that in the future I’ll know what this web part’s supposed to do. Be sure to add these in the public class declaration.
Once you have the elements, move to the CreateChildControls(); this is where the controls will be assigned default values and will be drawn on the page. Add the following:
this.txtboxInitialValue.Text = “”;
this.txtboxCalculatedValue.Text = “”;
this.lblInitialValue.Text = “Value to Raise to Power : “;
this.lblCalculatedValue.Text = ” Initial Value * Initial Value = “;
this.btnCalculateValue.Text = “Calculate Result”;
this.Controls.Add(lblInitialValue);
this.Controls.Add(txtboxInitialValue);
this.Controls.Add(btnCalculateValue);
this.Controls.Add(lblCalculatedValue);
this.Controls.Add(txtboxCalculatedValue);
Now, everything has been added to the list of what needs to be drawn. Last couple of touches, add the code to the button and draw the controls. Create a new event handler for the button click event and then use the CreateChildControls(); method.
btnCalculateValue.Click += new EventHandler(btnCalculateValue_Click);
base.CreateChildControls();
Execute your code and you’ll see that whatever numeric value you enter in the Initial Value field, it will be raised to the power of itself and be displayed in the Calculated Value field.
