Requirements
Download ASP.NET AJAX 1.0 from http://www.microsoft.com/downloads/details.aspx?FamilyID=ca9d90fa-e8c9-42e3-aa19-08e2c027f5d6&displaylang=en
Concepts
Read an overview of the new features in ASP.NET 2.0 http://quickstarts.asp.net/QuickStartv20/aspnet/doc/tipstricks/default.aspx
An exciting new feature for controls are Client-side CallBacks, which allow a control to execute an out-of-band request back to the server to obtain additional data, without posting the entire page. This feature relies on browser support for callback handling (usually through XMLHTTP), as specified by the SupportsClientCallbacks property in browser capabilities.
The TreeView control takes advantage of this feature to enable populating tree nodes on-demand when a parent node is expanded on the client. GridView and DetailsView also take advantage of this feature to implement paging and sorting when EnableSortingAndPagingCallbacks is set to true. A control registers itself as being able to receive callback events by implementing the ICallbackEventHandler interface. This interface allows the page to invoke registered delegates for returning callback data to the client. There are two methods of the ICallBackHandler interface, RaiseCallbackEvent and GetCallbackResult. RaiseCallbackEvent accepts an argument for context (args passed from the client), which can be used to process the event. GetCallbackResult returns a String that represents the data to return to the client. The reason this interface is separated into two methods is to allow for asynchronous processing, for example to retrieve data from a data source control. The control then registers a client-side callback function that knows how to create the arguments to pass to the server-side delegate, and an error handling function to be invoked when an error in callback processing occurs. Finally, the control emits references to callback events using Page.ClientScript.GetCallBackEventReference. An example below demonstrates the use of client-side callbacks to implement a cascading DropDownList scenario. In this case, the Page itself implements the ICallbackEventHandler interface, for demonstration purposes.
Check the Partial Page Rendering Overview at http://msdn2.microsoft.com/en-us/library/bb386573.aspx
Check Implementing Client Callbacks Programmatically Without Postbacks in ASP.NET Web Pages at http://msdn2.microsoft.com/en-us/library/ms178208.aspx
Create the Solution
Create a Visual Studio solution containing two projects:
· AjaxNavigation (SharePoint Solution)
· AjaxNavigationTestClient (Web Site)
The idea is to develop and test the AJAX User Control in the AjaxNavigationTestClient and the copy the control to the SharePoint Solution so it can be tested and deployed in SharePoint.
Registering a Site Map Provider
Register a Site Map Provider named SPNavigationProvider in the AjaxNavigationTestClient web.config:
<siteMap defaultProvider="CurrentNavSiteMapProvider" enabled="true">
<providers>
<add name="CurrentNavSiteMapProvider" type="System.Web.XmlSiteMapProvider" siteMapFile="Web.sitemap" />
</providers>
</siteMap>
Add a new Web.sitemap file in the root of AjaxNavigationTestClient:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="/Default.aspx" title="Home Page" description="">
<siteMapNode url="/Page1.aspx" title="Page 1" description="">
<siteMapNode url="/SubPage1a.aspx" title="Sub Page 1a" description="" />
<siteMapNode url="/SubPage1b.aspx" title="Sub Page 1b" description="" />
</siteMapNode>
<siteMapNode url="/Page2.aspx" title="Page 1" description="">
<siteMapNode url="/SubPage2a.aspx" title="Sub Page 2a" description="" />
<siteMapNode url="/SubPage2b.aspx" title="Sub Page 2b" description="" />
</siteMapNode>
</siteMapNode>
</siteMap>
Creating the User Control
Create a User Control and name it AjaxNavigation.ascx.
Drop a TreeView Control, open TreeView Tasks and select New Data Source. Create a new Site Map Data Source and set the SiteMapProvider property to the name of the site map provider to use (SPNavigationProvider, as shown in the previous step).
Apply skinning to the TreeView control using the out-of-the-box skinning features.
Copy the User Control to the SharePoint Solution
Copy the AjaxNavigation.ascx to SharePoint Solution folder /TEMPLATE/CONTROLTEMPLATES
Copy the AjaxNavigation.ascx.cs to SharePoint Solution folder /CODE
Modify the control declaration, so the .ascx can use appropriate inherited class (check the full assembly name for AjaxNavigation.dll in the GAC)
<%@ Control Language="C#" AutoEventWireup="true" Inherits="AjaxNavigation.UserControls_AjaxNavigation,AjaxNavigation,Version=1.0.0.0,Culture=neutral,PublicKeyToken=ef72d5cefb9f703d" %>
<%@ Import Namespace="AjaxNavigation" %>
Modify the ManifestTemplate.xml:
<Assembly DeploymentTarget="GlobalAssemblyCache" Location="AjaxNavigation.dll">
Deploy the Solution
Modify the deploy.cmd script as:
In the beginning of the script, insert:
@Set Path=C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\BIN;%PATH%
Modify:
SET SITE_URL="http://www.myPublishingPortal.local"
Register an external tool in Visual Studio named “Deploy SharePoint Solution” with the following parameters:
Command: $(ProjectDir)\DeploymentScripts\deploy.cmd
Initial Directory: $(ProjectDir)
Use Output Window
Select Tools > Deploy SharePoint Solution
Use the control in a Master Page or Page Layout
Using SharePoint Designer or Visual Studio, add the following lines to a Master Page or Page Layout:
<%@ Register Src="/_controltemplates/AjaxNavigation.ascx" TagName="AjaxNavigation" TagPrefix="my" %>
…
<my:AjaxNavigation ID="AjaxNavigation1" runat="server" />
Test the Master Page or Page Layout.
More Information
To develop a AJAX enabled Web Part – instead of an User Control – check the Walkthrough: Creating a Basic ASP.NET AJAX-enabled Web Part at http://msdn2.microsoft.com/en-us/library/bb861877.aspx
More details on SharePoint and AJAX integration at http://sharepoint.microsoft.com/blogs/mike/Lists/Posts/Post.aspx?ID=3
No comments:
Post a Comment