Wednesday, 8 June 2011

How to create tab control using multview in sharepoint 2010

Please Copy and paste this code to your visual web part coding

<%@ 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="Change_Search.VisualWebPart1.VisualWebPart1UserControl" %>
<style type="text/css">
       
    .linkStyle
    {
        background-image:url('../../../_layouts/images/Change%20Search/unselected.jpg');
        color:White;
        padding-top:12px;
        padding-left:15px;
        text-decoration:none;
       
        }
       
       .linkSelect
       {
              background-image:url('../../../_layouts/images/Change%20Search/sel.jpg');
        color:White;
        padding-top:12px;
        padding-left:15px;
        text-decoration:none;
       }
      
      .divStyle
      {
         
          width:600px;
          height:200px;
          background-color:#8055be;
          color:White;
          padding:0px;
         
      }
</style>

<div>
    Change Search<br />


    <asp:LinkButton ID="LinkButton1" runat="server" CssClass="linkSelect"
        Height="23px" Width="105px" onclick="LinkButton1_Click" ForeColor="White">One</asp:LinkButton>

    <asp:LinkButton ID="LinkButton2" runat="server" CssClass="linkStyle"
        Height="23px" Width="105px" onclick="LinkButton2_Click" ForeColor="White">Two</asp:LinkButton>
  

    <asp:LinkButton ID="LinkButton3" runat="server" CssClass="linkStyle"
        Height="23px" Width="105px" onclick="LinkButton3_Click" ForeColor="White">Three</asp:LinkButton>


  

<asp:MultiView
    ID="MultiView1"
    runat="server"
    ActiveViewIndex="0"  >
   <asp:View ID="Tab1" runat="server">
        <div class="divStyle">
          
           One Section
        </div>    

     </asp:View>
    <asp:View ID="Tab2" runat="server">
       
        <div class="divStyle">
     Two Section
        </div>
    </asp:View>
    <asp:View ID="Tab3" runat="server">
       
        <div class="divStyle">
       Three Section
        </div>      

    </asp:View>
</asp:MultiView>

</div>



This section for the code behind file

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Linq;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using Microsoft.SharePoint.Linq;

namespace Change_Search.VisualWebPart1
{
    public partial class VisualWebPart1UserControl : UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }

      

        protected void LinkButton1_Click(object sender, EventArgs e)
        {
            apply_unselect_style();
            LinkButton1.CssClass = "linkSelect";
            MultiView1.ActiveViewIndex = 0;
           
        }


        public void apply_unselect_style()
        {
            LinkButton1.CssClass = "linkStyle";
            LinkButton2.CssClass = "linkStyle";
            LinkButton3.CssClass = "linkStyle";


        }

        protected void LinkButton2_Click(object sender, EventArgs e)
        {

            apply_unselect_style();
            LinkButton2.CssClass = "linkSelect";
            MultiView1.ActiveViewIndex = 1;

        }

        protected void LinkButton3_Click(object sender, EventArgs e)
        {
            apply_unselect_style();
            LinkButton3.CssClass = "linkSelect";
            MultiView1.ActiveViewIndex = 2;
        }



        }

     

       

          
         
    }