Introduction
Today, in this article let's play around with one of the interesting and most useful concepts in SharePoint 2010.
Question: What is Visual Web part?
In simple terms "It is the component that is being developed as per the user requirements in object modeling methodology and then they are deployed onto a SharePoint site, which can be accessed by the user". I think we are now good to go and implement this wonderful concept.
Step 1: Open SharePoint Server 2010 and navigate to central administration. Click on manage web applications. Navigate to any site created previously. Create a blank site in the site collection.
![Output1.png]()
![Output2.png]()
Step 2: Choose empty SharePoint project and deploy as farm solution.
Step 3: Add a new visual web part item. The complete code of the visual webpart1.ascx looks like this:
<%@ 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="SharePointWebpartProject.VisualWebPart1.VisualWebPart1UserControl" %>
<div>
<h1 style="text-align:center; font-family:Verdana; font-size:large; color:Maroon">Visual Web Part - SharePoint 2010</h1>
<center>
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Please Enter First Number" Font-Size="Small" Font-Bold="true" Font-Italic="true" Font-Names="Verdana"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Please Enter Second Number" Font-Size="Small" Font-Bold="true" Font-Italic="true" Font-Names="Verdana"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="Button1" runat="server" Text="Addition" Width="165px"Font-Names="Verdana" BackColor="Orange" onclick="Button1_Click" />
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="Button2" runat="server" Text="Subtraction" Width="165px"Font-Names="Verdana" BackColor="Orange" onclick="Button2_Click" />
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="Button3" runat="server" Text="Multiplication" Width="165px"Font-Names="Verdana" BackColor="Orange" onclick="Button3_Click" />
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="Button4" runat="server" Text="Division" Width="165px"Font-Names="Verdana" BackColor="Orange" onclick="Button4_Click" />
</td>
</tr>
</table>
<br />
<br />
<table>
<tr>
<td colspan="2">
<asp:Label ID="lblResult" runat="server" Font-Names="Verdana" ForeColor="Brown"></asp:Label>
</td>
</tr>
</table>
</center>
</div>
Step 4: The complete code of IArthmetic.cs looks like this:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace SharePointWebpartProject
{
public interface IArthmetic
{
double Add(double a, double b); double Sub(double a, double b); double Mul(double a, double b); double Div(double a, double b);
}
}
Step 5: The complete code of Arthmetic.cs looks like this:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace SharePointWebpartProject
{
public class Arthmetic : IArthmetic
{
public double Add(double a, double b)
{
return a + b;
}
public double Sub(double a, double b)
{
return a - b;
}
public double Mul(double a, double b)
{
return a * b;
}
public double Div(double a, double b)
{
return a / b;
}
}
}
Step 6: The complete code of visualwebpart1.ascx.cs looks like this:
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;namespace SharePointWebpartProject.VisualWebPart1
{
public partial class VisualWebPart1UserControl : UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
TextBox1.Focus();
}
protected void Button1_Click(object sender, EventArgs e)
{
if (string.IsNullOrEmpty(TextBox1.Text) || string.IsNullOrEmpty(TextBox2.Text))
{
lblResult.Text = "Please Enter Some Values";
}
else
{
lblResult.Text = "Addition Result of " + TextBox1.Text + " and " + TextBox2.Text + " is: <b>" + objArthmetic.Add(Convert.ToDouble(TextBox1.Text), Convert.ToDouble(TextBox2.Text)).ToString() + "</b>";TextBox1.Text = "";TextBox2.Text = "";}}protected void Button2_Click(object sender, EventArgs e)
{
if (string.IsNullOrEmpty(TextBox1.Text) || string.IsNullOrEmpty(TextBox2.Text))
{
lblResult.Text = "Please Enter Some Values";
}
else
{
lblResult.Text = "Subtraction Result of " + TextBox1.Text + " and " + TextBox2.Text + " is: <b>" + objArthmetic.Sub(Convert.ToDouble(TextBox1.Text), Convert.ToDouble(TextBox2.Text)).ToString() + "</b>";TextBox1.Text = "";TextBox2.Text = "";
}
}
protected void Button3_Click(object sender, EventArgs e)
{
if (string.IsNullOrEmpty(TextBox1.Text) || string.IsNullOrEmpty(TextBox2.Text))
{
lblResult.Text = "Please Enter Some Values";
}
else
{
lblResult.Text = "Multiplication Result of " + TextBox1.Text + " and " + TextBox2.Text + " is: <b>" + objArthmetic.Mul(Convert.ToDouble(TextBox1.Text), Convert.ToDouble(TextBox2.Text)).ToString() + "</b>";TextBox1.Text = "";TextBox2.Text = "";
}
}
protected void Button4_Click(object sender, EventArgs e)
{
if (string.IsNullOrEmpty(TextBox1.Text) || string.IsNullOrEmpty(TextBox2.Text))
{
lblResult.Text = "Please Enter Some Values";
}
else
{
lblResult.Text = "Division Result of "+TextBox1.Text+" and "+TextBox2.Text+" is: <b>"+objArthmetic.Div(Convert.ToDouble(TextBox1.Text), Convert.ToDouble(TextBox2.Text)).ToString()+"</b>";TextBox1.Text = "";TextBox2.Text = "";
}
}
#region Instance VariablesArthmetic objArthmetic = new Arthmetic();#endregion
}
}
Step 7: Now build and deploy the solution. The output of the application looks like this:
![Output3.png]()
Step 8: The Nothing entered application looks like this:
![Output4.png]()
Step 9: The Addition operation application looks like this:
![Output5.png]()
I hope this article is useful for you. I look forward for your comments and feedback.