Friday, April 4, 2008

Nested Master Pages

To demonstrate the use of Nested Master Pages, I will create an application that display the Home page and Project pages of the application. This application consists of 3 Master pages and 2 Content pages. Out of 3 master pages, 1 is the main or parent master page and 2 are secondary or child master pages. One content page is for Home page and second content page is for Project pages.

1) To start with, first you have to create a Parent or Main master page, named ParentMasterPage.master. Following is the code snippet for it:


<%@ Master Language="C#" AutoEventWireup="true" CodeFile="ParentMasterPage.master.cs"
Inherits="BCLMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ParentMasterPage Page</title>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!object.Equals(Session["Projects"], null))
{
if (!object.Equals(Request.QueryString["deleteProjectName"], null))
{
string strPageLink = Request.QueryString["deleteProjectName"];

string strExistingProjects = Session["Projects"].ToString();
strExistingProjects = strExistingProjects.Replace(strPageLink + ";", "");

Session["Projects"] = strExistingProjects;
}

string strExistingProjs = Session["Projects"].ToString();
string[] strProjs = strExistingProjs.Split(new char[] { ';' });
for (int i = 0; i < strProjs.Length - 1; i++)
{
string strProj = strProjs[i];

StringBuilder strbNewTab = new StringBuilder();
strbNewTab.AppendFormat(@"<div style=""display:inline;background-color:Yellow;"">");
strbNewTab.AppendFormat(@"<a href=""ProjectDefault.aspx?projectName={0}"">{0}</a>", strProj);
strbNewTab.AppendFormat(@"<a href=""Home.aspx?deleteProjectName={0}"">", strProj);
strbNewTab.AppendFormat(@"<img alt=""Close"" src=""Images/Close.GIF"" />");
strbNewTab.AppendFormat(@"</a>");
strbNewTab.AppendFormat(@"</div>&nbsp;&nbsp;");

//string strExisting = divTabs.InnerHtml;
divTabs.InnerHtml += strbNewTab.ToString();
}


}
}
</script>

</head>
<body style="margin: 0px 0px 0px 0px;">
<form id="form1" runat="server">
<table border="1" cellpadding="0" cellspacing="0" style="height: 100%; width: 100%;">
<tr style="height: 60px;">
<td align="center" style="background-">
<asp:ContentPlaceHolder ID="ProjectHeader" runat="server">
<span style="font-weight: bold; ">PARENT MASTER PAGE SECTION</span>
</asp:ContentPlaceHolder>
</td>
</tr>
<tr style="height: 20px;">
<td>
<div id="divTabs" runat="server">
<div style="display: inline; background-color: Yellow;">
<a href="Home.aspx">Home</a></div>
&nbsp;&nbsp;
</div>
</td>
</tr>
<tr>
<td>
<asp:ContentPlaceHolder ID="ProjectBody" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</form>
</body>
</html>
Note: For time being please ignore the JavaScript section.

2) Then create secondary master page for Home page, named PersonalMasterPage.master. Following is the code snippet for it:

<%@ Master Language="C#" MasterPageFile="~/ParentMasterPage.master" AutoEventWireup="true"
CodeFile="PersonalMasterPage.master.cs" Inherits="PersonalMasterPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ProjectBody" runat="Server">
<table border="1" cellpadding="0" cellspacing="0" style="height: 660px; width: 100%;">
<tr>
<td align="center" style="width: 200px; height: 100%; background-">
<span style="font-weight: bold; ">PERSONAL LEFT <br />PANE SECTION</span>
</td>
<td valign="top" style="height: 100%;">
<asp:ContentPlaceHolder ID="ProjectData" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</asp:Content>

3) Now create another secondary master page for Project pages, named ProjectMasterPage.master. Following is the code snippet for it:

<%@ Master Language="C#" MasterPageFile="~/ParentMasterPage.master" AutoEventWireup="true"
CodeFile="ProjectMasterPage.master.cs" Inherits="ProjectMasterPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ProjectBody" runat="Server">
<table border="1" cellpadding="0" cellspacing="0" style="height: 660px; width: 100%;">
<tr>
<td align="center" style="width: 200px; height: 100%; background-">
<span style="font-weight: bold; ">PROJECT LEFT <br />PANE SECTION</span>
</td>
<td valign="top" style="padding:10 10 10 10;">
<asp:ContentPlaceHolder ID="ProjectData" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</asp:Content>

4) Create Home content page named Home.aspx that inherits Personal Master Page. Following is the code snippet for it:

<%@ Page Language="C#" MasterPageFile="~/PersonalMasterPage.master" AutoEventWireup="true"
CodeFile="Home.aspx.cs" Inherits="Home" Title="Home Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ProjectData" runat="Server">
<table cellpadding="0" cellspacing="0" border="1" style="width: 100%;">
<tr>
<td valign="top">
<table border="0" cellpadding="5" cellspacing="0" style="width: 100%; margin: 10px 10px 10px 10px;">
<tr>
<td style="height: 20px;" valign="top">
<b>Project OverView Links</b>
</td>
</tr>
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="ProjectDefault.aspx?projectName=Gene">Gene</a><br />
<a href="ProjectDefault.aspx?projectName=Cancer">Cancer</a><br />
<a href="ProjectDefault.aspx?projectName=Brain">Brain</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<br />
<em>Other Data Section</em>
</td>
</tr>
</table>
</asp:Content>

5) Create Project content page named ProjectDefault.aspx that inherits Project Master Page. Following is the code snippet for it:

<%@ Page Language="C#" MasterPageFile="~/ProjectMasterPage.master" AutoEventWireup="true"
CodeFile="ProjectDefault.aspx.cs" Inherits="ProjectDefault" Title="Project Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ProjectData" runat="Server">
<table cellpadding="0" cellspacing="0" border="1" style="width: 100%;">
<tr>
<td>
<div style="color: Blue; font-style: italic; font-weight: bold;" id="divPage" runat="server">
</div>
<b><em>Tab is selected</em></b>
</td>
</tr>
<tr>
<td>
<br />
<em>Other Project Data</em>
</td>
</tr>
</table>
</asp:Content>
CS file code:

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class ProjectDefault : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string strRequestedPage = Request.QueryString["projectName"];
divPage.InnerHtml = strRequestedPage;

if (object.Equals(Session["Projects"], null))
{
Session["Projects"] = strRequestedPage + ";";
}
else
{
string strExistingProjs = Session["Projects"].ToString();
if (!strExistingProjs.Contains(strRequestedPage))
Session["Projects"] = strExistingProjs + strRequestedPage + ";";
}
}
}




Following are the snapshots for Home and Project pages:











Top Green color section refers to Main Master Page and left Gray and Olive color sections refers to Personal Master Page and Project Master Page section respectively in above two figures.


Following is the snapshot of solution explorer of above application:






Now how the above application works:

I have created 3 links in Home page, on clicking of which I am entering its value in session and opens the Project page with modified query string. Similarly on clicking the cross of tab I am deleting that project entry from session and redirect the application to home page.

Wednesday, April 2, 2008

Custom theme in SharePoint

1. On the SharePoint Server go to the Themes folder e.g. C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\THEMES

2. Copy one of the theme folders from there and paste it in the same directory and give the folder a unique name, say MyTheme.



3. Find the .inf file in the copied folder, and rename it with the name given to the folder i.e. in this example rename that .inf file with MyTheme.INF

4. Open the .inf file and assign the same name i.e. MyTheme to the title in the [info] section of the file, and in the [titles] section replace the previous names with your new name.



5. There is one theme.css file in that MyTheme folder, open that, delete all the classes from that file and place your own css classes in that file.

6. Open “C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\SPTHEMES.XML” file with notepad



7. Add the following lines under tag



<templates>

<templateid>MyTheme</templateid>

<displayname>MyTheme</displayname>

<description>This is custom theme.</description>

<thumbnail>images/MyTheme.gif</thumbnail>

<preview>images/MyTheme.gif</preview>

</templates>




8. Where Template ID must be that of same name as that of the folder.

9. In order to display thumbnail and preview correctly, you will need to capture the screen and save the file in "C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\IMAGES" folder with MyTheme.gif name. You can change the .gif file name if you change the thumbnail and preview file names in tag.

10. Do an iisrest for the server to recognize the new theme.

11. Open your SharePoint site and go to the theme page by typing following URL in address bar: _layouts/themeweb.aspx


12. Select the theme and apply it to your site by clicking the Apply button.

Tuesday, March 25, 2008

Display ToolTip in Javascripts

Following are the HTML and Javascripts code to display tooltip:

Html Code ---


<span id="spanName" style="font-weight: bold;" onmouseover="javascripts:DisplayToolTip('true');"
onmouseout="javascripts:DisplayToolTip('false');"></span>


<div id="divToolTip" style="position: absolute; display: none; z-index: 20;
background-color: #FFFFE1; border: solid 1px Black;">
</div>


<script type="text/javascript">
function DisplayToolTip(flag)
{
document.getElementById('divToolTip').style.left = window.event.x;
document.getElementById('divToolTip').style.top = window.event.y;

if(flag == 'true')
document.getElementById('divToolTip').style.display = 'block';
else if(flag == 'false')
document.getElementById('divToolTip').style.display = 'none';
}
</script>



Following image, shows how the ToolTip will appear after implementing the above code:








AJAX Rating control

Html code for Rating control ---

Page register directive ---


<%@ Register Assembly="AjaxControlToolkit, Version=1.0.11119.29799, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e"
Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

AJAX Rating Control code ---


<ajaxToolkit:Rating ID="RORating" runat="server" BehaviorID="RORatingBehavior" CurrentRating="0" MaxRating="5" StarCssClass="ratingStar" WaitingStarCssClass="savedRatingStar" FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar" RatingAlign="Horizontal" RatingDirection="LeftToRightTopToBottom" Style="padding-top: 5px;" />

If you want to access the Rating control in Client side or in Javascrips then you have to set the BehaviorID of control.

Few examples of Get/Set of Rating Control:


//Rating
$find("RORatingBehavior").set_Rating(Number("2"));
var ratingValue = $find("RORatingBehavior").get_Rating();
$find("RORatingBehavior").set_ReadOnly(false);
$find("RORatingBehavior").set_ReadOnly(true);

To view the complete list of Get/Set APIs, you have open the Rating Control (in Javascripts) in Debug mode (Quick Watch) in Visual Studio. Following are the snapshots of Rating control in Quick Watch:

Note: APIs names are self-explanatory. 

JavaScript’s side APIs Snapshots:









If you are unable to see the contents of snapshots properly then following are its contents:

Get APIs :


get_AutoPostBack()
get_CallbackID()
get_ClientState()
get_ClientStateFieldID()
get_element() get_element()
get_EmptyStarCssClass()
get_events()
get_FilledStarCssClass()
get_id()
get_isInitialized()
get_isUpdating()
get_MaxRating()
get_name()
get_Rating()
get_RatingDirection()
get_ReadOnly()
get_StarCssClass()
get_Stars()
get_Tag()
get_WaitingStarCssClass()


Set APIs :


set_AutoPostBack()
set_CallbackID()
set_ClientState()
set_ClientStateFieldID()
set_EmptyStarCssClass()
set_FilledStarCssClass()
set_id()
set_MaxRating()
set_name()
set_Rating()
set_RatingDirection()
set_ReadOnly()
set_StarCssClass()
set_Tag()
set_WaitingStarCssClass()


Methods/Events Handlers :


_keyDownHandler()
_mouseOutHandler()
_onError()
_onKeyDownBack()
_onMouseOut()
_onStarClick()
_onStarMouseOver()
_partialUpdateBeginRequest()
_partialUpdateEndRequest()
_receiveServerData()
_starClickHandler()
_starMouseOverHandler()
_update()
_waitingMode()
add_disposing()
add_EndClientCallback()
add_MouseOut()
add_MouseOver()
add_propertyChanged()
add_Rated()
beginUpdate()
constructor()
dispose()
endUpdate()
initialize()
raiseEndClientCallback()
raiseMouseOut()
raiseMouseOver()
raisePropertyChanged()
raiseRated()
registerPartialUpdateEvents()
remove_disposing()
remove_EndClientCallback()
remove_MouseOut()
remove_MouseOver()
remove_propertyChanged()
remove_Rated()
updated()

Friday, March 14, 2008

Hide Web part title


There are two ways to hide the Title of a particular web part:
1) Modify the *.webpart file.
By changing the settings related ChromeState and ChromeType we can hide Title.



<webParts>
<webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
<data>
<properties>
<property name="ChromeState"
type="chromestate">Normal</property>
<property name="ChromeType" type="chrometype">None</property>
</properties>
</data>
</webPart>
</webParts>





2) Modify the Web part settings by SharePoint site.
a) Click "Modify Shared Web Part" menu.




b) Select "Chrome State" as "Normal" and "Chrome Type" as "None".




3) So the final result of changes will be…




Note: Some others interesting Web part properties are:





<webparts>
<webPart xmlns="http://schemas.microsoft.com/WebPart/v3">
<data>
<properties>
<property name="AllowMinimize" type="bool">False</property>
<property name="AllowClose" type="bool">False</property>
<property name="AllowEdit" type="bool">False</property>
<property name="ShowActionLinks" type="bool">False</property>
</properties>
</data>
</webPart>
</webparts>




Properties names are self-explanatory.


Thursday, March 13, 2008

JavaScript usage in Web Part


If you want to use JavaScript in your Web part then you have two options:


1) Refer to some external JavaScript file.



ClientScriptManager cs = Page.ClientScript;
// Include the required javascript file.
if (!cs.IsClientScriptIncludeRegistered("tab_javascript"))
cs.RegisterClientScriptInclude(this.GetType(), "tab_javascript",
"/_layouts/BCLBlast/tab.js");


I placed the JavaScript file at following location:


C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\BCLBlast







2) Write JavaScript in Web Part file.



// Initialize javascript variables to have list of all tabs and headers
if (!cs.IsClientScriptBlockRegistered("tabs_list"))
{
string tabVariables =
@"<script type=""text/javascript"">" +Environment.NewLine +
@"var tabs = [{0}] ;" + Environment.NewLine +
@"var tabheaders = [{1}] ;"+Environment.NewLine+
@"var _currentTab = null ;" + Environment.NewLine +
@"</script>";

string tabPages = "", tabHeaders = "";
for (int i = 0; i < SearchInformationSources.TotalSearchProviders; i++)
{
tabPages += "\"tab" + i.ToString() + "\", ";
tabHeaders += "\"tabheader" + i.ToString() + "\", ";
}

if (tabHeaders.Length > 1)
{
tabPages = tabPages.Remove(tabPages.Length - 2, 2);
tabHeaders = tabHeaders.Remove(tabHeaders.Length - 2, 2);
}

cs.RegisterClientScriptBlock(GetType(), "tabs_list",
String.Format(tabVariables, tabPages, tabHeaders));
}



Whole code snippet is as follows:





protected override void OnPreRender(EventArgs e)
{
ClientScriptManager cs = Page.ClientScript;
//Include the required javascript file.
if (!cs.IsClientScriptIncludeRegistered("tab_javascript"))
cs.RegisterClientScriptInclude(this.GetType(),
"tab_javascript", "/_layouts/BCLBlast/tab.js");


// Initialize javascript variables to have list of all tabs and headers
if (!cs.IsClientScriptBlockRegistered("tabs_list"))
{
string tabVariables =
@"<script type=""text/javascript"">" + Environment.NewLine +
@"var tabs = [{0}] ;" + Environment.NewLine +
@"var tabheaders = [{1}] ;" + Environment.NewLine +
@"var _currentTab = null ;" + Environment.NewLine +
@"</script>";

string tabPages = "", tabHeaders = "";
for (int i = 0; i < SearchInformationSources.TotalSearchProviders; i++)
{
tabPages += "\"tab" + i.ToString() + "\", ";
tabHeaders += "\"tabheader" + i.ToString() + "\", ";
}

if (tabHeaders.Length > 1)
{
tabPages = tabPages.Remove(tabPages.Length - 2, 2);
tabHeaders = tabHeaders.Remove(tabHeaders.Length - 2, 2);
}

cs.RegisterClientScriptBlock(GetType(), "tabs_list",
String.Format(tabVariables, tabPages, tabHeaders));
}
}




Here you to have to implement the OnPreRender method to write the JavaScript code.

AJAX in SharePoint 2007

Scenario:
I like to use AJAX Tab control in SharePoint as a web part.
For this I created an ASCX user control that contains the AJAX tab control and test the user control in ASP.Net's ASPX page. After successfully running the AJAX tab control in ASPX page, I use the tab control in Web part (regarding how to use ASCX in Web part, please refer earlier post).


Note: While testing the tab control in ASPX page, I kept the Script Manager element in the ASCX page. Later on while deploying the tab control in SharePoint, I moved the Script Manager element to Master page (mentioned in detail in current article at a later stage).


Steps:



1) Install ASPAJAXExtSetup.msi

C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.61025



2) Made following changes to site web.config :

Note: In this link it is mentioned in detail ---
http://www.asp.net/ajax/documentation/live/ConfiguringASPNETAJAX.aspx



a) <sectionGroup>



<configuration>
<configSections>
<sectionGroup name="system.web.extensions"
type="System.Web.Configuration.SystemWebExtensionsSectionGroup,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35">
<sectionGroup name="scripting"
type="System.Web.Configuration.ScriptingSectionGroup,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35">
<section name="scriptResourceHandler"
type="
System.Web.Configuration.ScriptingScriptResourceHandlerSection,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"
requirePermission="false"
allowDefinition="MachineToApplication" />
<sectionGroup name="webServices"
type="System.Web.Configuration.ScriptingWebServicesSectionGroup,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35">
<section name="jsonSerialization"
type="System.Web.Configuration.ScriptingJsonSerializationSection,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"
requirePermission="false"
allowDefinition="Everywhere" />
<section name="profileService"
type="System.Web.Configuration.ScriptingProfileServiceSection,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"
requirePermission="false"
allowDefinition="MachineToApplication" />
<section name="authenticationService"
type="
System.Web.Configuration.ScriptingAuthenticationServiceSection,
System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"
requirePermission="false"
allowDefinition="MachineToApplication" />
</sectionGroup>
</sectionGroup>
</sectionGroup>

-------
-------

</configSections>

-------
-------

</configuration>




b) <controls>



<pages enableSessionState="false" enableViewState="true"
enableViewStateMac="true" validateRequest="false"
pageParserFilterType="
Microsoft.SharePoint.ApplicationRuntime.SPPageParserFilter,
Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" asyncTimeout="7">

<controls>
<add tagPrefix="asp" namespace="System.Web.UI"
assembly="System.Web.Extensions, Version=1.0.61025.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35" />

</controls>

-----
-----
</pages>




c) <assemblies>



<compilation batch="false" debug="true">
<assemblies>
-----
-----
<add assembly="System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" />
</assemblies>
-----
-----
</compilation>




d) <httpHandlers>


<httpHandlers>

------
------

<add verb="*" path="Reserved.ReportViewerWebControl.axd"
type="Microsoft.Reporting.WebForms.HttpHandler,
Microsoft.ReportViewer.WebForms,
Version=8.0.0.0, Culture=neutral,
PublicKeyToken=b03f5f7f11d50a3a" />
<add verb="*" path="*.asmx" validate="false"
type="System.Web.Script.Services.ScriptHandlerFactory,
System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" />
<add verb="*" path="*_AppService.axd"
validate="false"
type="System.Web.Script.Services.ScriptHandlerFactory,
System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" />
<add verb="GET,HEAD" path="ScriptResource.axd"
type="System.Web.Handlers.ScriptResourceHandler,
System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" validate="false" />

</httpHandlers>




e) <httpModules>



<httpModules>
------
------
<add name="ScriptModule"
type="System.Web.Handlers.ScriptModule, System.Web.Extensions,
Version=1.0.61025.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35" />
</httpModules>



f) <SafeControls>


<SafeControls>
-----
-----
<SafeControl Assembly="System.Web.Extensions, Version=1.0.61025.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TypeName="*"
Safe="True" />

</SafeControls>



g) <system.web.extensions>

<configuration>
------
------
<system.web.extensions>
<scripting>
<webServices>
<!-- Uncomment this line to enable the authentication
service. Include requireSSL="true"
if appropriate. -->
<!--
<authenticationService enabled="true"
requireSSL = "truefalse"/>
-->
<!-- Uncomment these lines to enable the profile service.
To allow profile properties to be retrieved and modified in
ASP.NET AJAX applications, you need to add
each property name to the readAccessProperties and
writeAccessProperties attributes.
-->
<!--
<profileService enabled="true"
readAccessProperties="propertyname1,propertyname2"
writeAccessProperties="propertyname1,propertyname2
" />
-->
</webServices>
<!--
<scriptResourceHandler enableCompression="true"
enableCaching="true" />
-->
</scripting>
</system.web.extensions>

</configuration>




h) <system.webServer>


<configuration>
------
------
<system.webServer>
<validation validateIntegratedModeConfiguration="false"/>
<modules>
<add name="ScriptModule"
preCondition="integratedMode"
type="System.Web.Handlers.ScriptModule,
System.Web.Extensions, Version=1.0.61025.0,
Culture=neutral,
PublicKeyToken=31bf3856ad364e35"/>
</modules>
<handlers>
<remove name="WebServiceHandlerFactory-Integrated" />
<add name="ScriptHandlerFactory" verb="*"
path="*.asmx"
preCondition="integratedMode"
type="
System.Web.Script.Services.ScriptHandlerFactory,
System.Web.Extensions, Version=1.0.61025.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add name="ScriptHandlerFactoryAppServices"
verb="*" path="*_AppService.axd"
preCondition="integratedMode"
type="System.Web.Script.Services.ScriptHandlerFactory,
System.Web.Extensions, Version=1.0.61025.0,
Culture=neutral,
PublicKeyToken=31bf3856ad364e35"/>
<add name="ScriptResource"
preCondition="integratedMode"
verb="GET,HEAD"
path="ScriptResource.axd"
type="System.Web.Handlers.ScriptResourceHandler,
System.Web.Extensions, Version=1.0.61025.0,
Culture=neutral,
PublicKeyToken=31bf3856ad364e35" />
</handlers>
</system.webServer>

</configuration>




3) Adding a ScriptManager into a SharePoint MasterPage

Note: If you are using custom master page, then directly made required change in that. Otherwise, if you are using the default master page, then open your desired SharePoint site in SharePoint Designer. Open the default.master file located at “http:///_catalogs/masterpage/default.master” in SharePoint designer and made the required change in it.


Add the following into the markup of your page. A recommended location is right beneath the
WebPartManager registration (search for <WebPartPages:SPWebPartManager id="m" runat="Server" />).



<asp:ScriptManager runat="server" ID="
ScriptManager1 "></asp:ScriptManager>



4) In Web part solution you have to add the reference of System.Web.Extensions.

5) Following is the code of Web part file:



using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

namespace BlastWP
{
[DefaultProperty("Text")]
[ToolboxData("<{0}:SampleAJAXTab runat=server>")]
public class SampleAJAXTab : WebPart
{
private Control _control;

protected override void CreateChildControls()
{
this.EnsureUpdatePanelFixups();

_control = this.Page.LoadControl
(@"~/UserControls/BlastWP/TabbedPhases.ascx");
this.Controls.Add(_control);
}

private void EnsureUpdatePanelFixups()
{
if (this.Page.Form != null)
{
string formOnSubmitAtt = this.Page.Form.Attributes["onsubmit"];
if (formOnSubmitAtt == "return _spFormOnSubmitWrapper();")
{
this.Page.Form.Attributes["onsubmit"] =
"_spFormOnSubmitWrapper();";
}
}

ScriptManager.RegisterStartupScript(this,
typeof(SampleAJAXTab), "UpdatePanelFixup",
"_spOriginalFormAction = document.forms[0].action;
_spSuppressFormOnSubmitWrapper=true;", true);
}
}
}




Note: Here there is a hack related to AJAX Update Panel (refer method EnsureUpdatePanelFixups()).



6) After building the Web part solution, you have to follow normal steps like:


a) Strong name the Web part solution.
b) Create a *.webpart file.
c) Register dll in GAC.
d) Make entry of dll in site's config file.
e)Import *.webpart file in SharePoint.




Note: Currently the Tab headers are not coming properly in AJAX tab control.


Sample References:



  1. AJAX Control Toolkit
    http://www.codeplex.com/AtlasControlToolkit

  2. Installing ASP.NET AJAX
    http://www.asp.net/ajax/documentation/live/InstallingASPNETAJAX.aspx

  3. ASP.Net AJAX
    http://asp.net/ajax/default.aspx

  4. Configuring ASP.NET AJAX
    http://www.asp.net/ajax/documentation/live/ConfiguringASPNETAJAX.aspx

  5. Using the AJAX Control Toolkit in SharePoint
    http://weblogs.asp.net/jan/archive/2007/02/26/using-the-ajax-control-toolkit-in-sharepoint.aspx


Google