Archive for January, 2008

Author: Tobias Zimmergren
Url:
http://www.zimmergren.net

Short post! I just bumped into this feature of the Windows Live Messenger application which enables you to actually add a web-based messenger to your site or blog.

Check out http://settings.messenger.live.com/applications/websettings.aspx to create one for yourself.

 

First off, click the little green MSN-guy (it’s green if the person is online)
getlive1

 

You’ll get some dialogs asking you for either your Live Passport or if you’d like to be anonymous and then you need to enter a verification code. After that, you’ll see the dialog below in a browser window, being able to chat with the person. If I’m online, you can try it out!

 getlive2

MOSS 2007: Using AJAX UserControls in SharePoint

January 10th, 2008 by Tobias Zimmergren

Author: Tobias Zimmergren
Url:
http://www.zimmergren.net
 

This post merely shows you how you can use the AJAX functionality in SharePoint by using UserControls.

What we need to be able to follow the steps in this article

In the following sections I will describe how you an use the SmartPart by Jan Tielens to host your custom usercontrols in SharePoint. The SmartPart is widely used by a number of people. However, there’s also the approach of writing your own wrapper if you want full control of your usercontrol wrapper. Liam Cleary has blogged about doing so here.

If you’ve checked the aforementioned requirements, let’s get started

First off, we’ll install the AJAX Control Toolkit

Add the AJAX Control Toolkit to your SharePoint Server

Download the AJAX Control Toolkit from here and extract all the files into any folder. Search for the AjaxControlToolkit.dll file and make sure you copy it to the same webapplication’s /bin directory as you configured for AJAX use. This means that you simply copy the AjaxControlToolkit.dll file to e.g. C:InetpubwwwrootwssVirtualDirectories80bin if that’s the webapplication you’ve configured AJAX for.

It might look something like this:

 ajaxusercontrols1

We’re ready for some development, create a new project
  1. Launch Visual Studio
  2. Create a new Web Site with ASP.NET AJAX Support

     ajaxusercontrols2
    Note: The only reason that I create an entire Web Site project is so I can test my UserControls and debug easily on my own development machine before I actually deploy them.

  3. Create a new Web User Control by adding a new .ascx file to your project (I usually delete the .cs file and the reference to the CodeBehind for easy deployment if there’s no sensitive code in order to limit the UserControl to one file with embedded code)
  4. It could now look something like this

     ajaxusercontrols3

Add the AJAX Control Toolkit to your Visual Studio toolbox
  1. Right click in the Toolbox and choose "Add Tab" and choose a name for the new section. (My choice was "AJAX Control Toolkit")
  2. Right click inside the newly created tab, and click "Choose Items…"
  3. Press "Browse" and navigate to your AjaxControlToolkit.dll which you’ve got somewhere on your machine by now and then click "Open"
  4. You now have a Toolbox filled with the AJAX Control Toolkit controls to use within your project.

     ajaxusercontrols4

Add a reference to the AJAX Control Toolkit in your UserControl
  1. Switch to designview of your UserControl
  2. Dragging any chosen AJAX Control or Control Extender onto the UserControl will automatically add the reference to the correct Namespace for AJAX in your UserControl. You might want to change the TagName to something more useful than cc1 as it’s named automatically.

     ajaxusercontrols5

Create a simple Hello World UserControl
  1. Drop a TextBox in the UserControl
  2. Drop a "CalendarExtender" in the UserControl – It’s found in the AJAX Control Toolkit toolbox 
  3. Set the CalendarExtender’s TargetControlID property to the ID of the TextBox control.
    The code might look something like this:

    <%@ Control Language="C#" AutoEventWireup="true" %>
    <%@ Register Assembly="AjaxControlToolkit"
                 Namespace="AjaxControlToolkit"
                 TagPrefix="ajaxToolkit" %>

    <script runat="server">
        // If there were any server side code, it would go here since I don’t use a code behind or pre-compiled assembly to host the code
    </script>

    Pick a date by clicking in the textbox!<br />
    <asp:TextBox ID="TextBox1" runat="server"/>
    <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server"
    TargetControlID="TextBox1" />

    The UserControl might look something like this when you add it to a page and run:

     ajaxusercontrols6

  4. If you’re happy with this very simple Hello World UserControl which uses the AJAX Control Toolkit to extend a Calendar popup, move on to the next section :)
Deploy the UserControl to SharePoint
  1. Copy your newly created UserControl (in my case, it’s called ZimmerAJAX.ascx)
  2. Paste the UserControl to C:InetpubwwwrootwssVirtualDirectories80UserControls (assuming you’re deploying on the standard port 80 site)
    Note: The UserControls directory might not exist at this point, then you’ll have to create it manually. The reason that this folder needs to exist is that the SmartPart which will host our UserControl is looking for controls placed inside that folder, unless you’re creating your own UserControl Wrapper WebPart, as Liam Cleary explains here

When you’ve copied the file to the UserControls directory, the SmartPart will automatically be able to find it.

Add the SmartPart to your site
  1. Navigate to the site where you want to host your UserControl
  2. Click "Site Actions" – "Edit Page"
  3. Click on one of the Web Part placeholders ("Add a Web Part")
  4. Look for the SmartPart and add it to your page.

    ajaxusercontrols7

Note: If you havn’t added a ScriptManager to either the Masterpage or the default.aspx page, you’ll need to use the SmartPart with AJAX instead. In my case I’ve already configured my masterpage to include a ScriptManager.

Configure the SmartPart to use your AJAX-based UserControl
  1. Click on "Edit" – "Modify Shared Web Part"
  2. Choose your UserControl from the DropDown at the top of the settings, and click Ok or Apply to apply your changes!

     ajaxusercontrols8

  3. Click "Exit Edit Mode" to exit the edit mode of the page, and view your UserControl
    ajaxusercontrols9 

That’s a wrap!

Now your AJAX-enabled UserControl is hosted within a wrapper webpart (SmartPart) and have full AJAX Extensions support.

Thanks for tuning in. See you soon!

Cheers!

Author: Tobias Zimmergren
Url:
http://www.zimmergren.net

In this very short and straight-on post I’ll just mention how you can configure your SharePoint installation to enable support for ASP.NET AJAX 1.0 since a lot of people have been asking me about it.

Before we make any changes in the web.config we need the following:

  • A backup of the web.config file (important, because if something goes wrong you might need to revert to the old one)
  • SharePoint (WSS 3.0 or MOSS 2007)
  • ASP.NET 2.0 AJAX 1.0 Extensions
  • Be in the mood for some copy/pasting the following 5 minutes

Copy/Paste time

Locate your default web.config file (usually here: "C:InetpubwwwrootwssVirtualDirectories80web.config").
Edit the web.config file according to this scenario:

  1. Locate the <configSections> element and add the following code inside it:

      <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>

  2. Within the <system.web> element, locate the <pages> element and insert the following snippet:

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

    EDIT: Thanks to Hardik Bhilota for pointing out that I was missing a comma after the version number. Cheers

  3. Within the <assemblies> element, insert the following snippet:

    <add assembly="System.Web.Extensions, Version=1.0.61025.0,
    Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

  4. Within the <httpHandlers> element, insert the following snippet:

    <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"/>

  5. Within the <httpModules> element, add the following snippet:

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

  6. And since we need to ensure that the assembly is trusted, locate the <SafeControls> element ad add the following snippet:

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

  7. Within the <configuration> element, add the following snippet:

    <system.web.extensions>
      <scripting>
        <webServices>
        <!– Uncomment this line to enable the authentication
        service. Include requireSSL="true" if appropriate. –>
        <!–
          <authenticationService enabled="true"
          requireSSL = "true|false"/>
        –>
        <!– 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>
    <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>

You’re all set

Save your web.config file, restart IIS (iisreset.exe for convenience) and enjoy your ASP.NET 2.0 AJAX 1.0 support in SharePoint.
This isn’t a big deal to accomplish, so that’s all you get from this blogpost.

In the next blogpost I’ll talk about how you can easily create a UserControl, hosted with the SmartPart, with support for AJAX.