You are on page 1of 5

Understanding WebSharper ASP.

NET integration
Ordinary ASP.NET applications are heavily server-based: content is rendered on the server and sent to the client, and any client interaction typically involves a server roundtrip. This can be eased somewhat using Ajax techniques (Asynchronous JavaScript and XML) on the client, where content or data is retrieved from the server asynchronously. Such content then is integrated into the presentation layer (on the client) once it becomes available after the call. WebSharper makes it even easier to communicate with the server by enabling clients to make RPC calls seamlessly, as easily as making a client-side call. Here is a short snippet to illustrate:
01 namespace WebSharperProject 02 03 module Server = 04 05 06 07 08 module Client = 09 10 11 12 13 14 15 16 type SimpleClientServerControl[<JavaScript>]() = 17 inherit Web.Control() [<JavaScript>] let Main () = Server.GetData () |> List.map (fun i -> LI [Text <| "Value= " + i]) |> UL [<Rpc>] let GetData () = [1; 2; 3]

18 19 20 [<JavaScript>] override this.Body = Client.Main () :> Html.IPagelet


TOP

The four pillars of ASP.NET and WebSharper Integration


There are four main pillars of integrating WebSharper content into ASP.NET applications. For instance, for the above SimpleClientServerControl to be embeddable into ASPX markup files, you need to fulfill the following:

1) Web.Config must contain the declaration for the WebSharper HTTP module

This module is responsible for all RPC communication and comes already configured in the WebSharper Visual Studio project templates for ASP.NET. You should see something like this:
1 <configuration> 2 3 4 5 6 7 8 9 </httpModules> ... <system.web> ... <httpModules> <add name="WebSharper" type="IntelliFactory.WebSharper.Web.RpcModule, IntelliFactory.WebSharper.Web"/>

2) Web.Config must contain declarations for your WebSharper content

You need to declare where your WebSharper resides and assign a tag prefix to that location. Example:

01 <configuration> 02 03 04 05 06 07 08 09 10 11 12 </controls> ... <system.web> <pages> <controls> <add tagPrefix="WebSharper" namespace="IntelliFactory.WebSharper.Web" assembly="IntelliFactory.WebSharper"/> <add tagPrefix="ws" namespace="WebSharperProject" assembly="WebSharperProject"/>

Here the first entry makes the WebSharper ScriptManager available, and it should remain in Web.Config for all WebSharper applications. The second entry declares that there is a WebSharperProject assembly with a namespace with the same name. This is what the default WebSharper ASP.NET and other ASP.NET-based Visual Studio project templates write by default. If you change the name of your WebSharper assemblies, or the namespaces they contain, you should update this entry or add further entries to cover those namespaces.

3) Your ASPX pages must contain the WebSharper script manager

Make sure that the <Head> section in your ASPX pages is defined with runat="server" and that the ScriptManager control is nested underneath:
1 <head runat="server"> 2 3 <WebSharper:ScriptManager runat="server" /> ...

4 </head>

4) Adding your WebSharper web control to your ASPX markup

Assuming that your WebSharper content is properly configured in Web.Config as described above, you can embed your WebSharper web controls in ASPX markup directly. For the SimpleClientServerControl above, this is done by inserting:
1 <ws:SimpleClientServerControl runat="server" />

Even though it may seem that your WebSharper control runs on the server (as would be indicated by the runat="server" clause in your ASPX embedding), this is not the case. Instead, this server control embeds a placeholder in your host page, and the WebSharper ScriptManager control takes care of "bringing it to life" by populating it when your page loads on the client, also referencing any dependencies it may have to ensure correct behavior.
TOP

Running the WebSharper samples from this site


The samples on this site are all declared within the Samples namespace. This means that you should add an entry in your Web.Config to reference this namespace. Keeping the default assembly name from the WebSharper Visual Studio template for ASP.NET ( WebSharperProject) projects, this should look something like this: 01 <configuration> 02 03 04 05 06 07 08 09 10 </controls> ... The samples also contain a WebSharper web control wrapper type. For instance the Hello World sample has this: <system.web> <pages> <controls> ... <add tagPrefix="samples" namespace="Samples" assembly="WebSharperProject"/>

1 type HelloWorldViewer[<JavaScript>]() = 2 3 4 5 [<JavaScript>] override this.Body = HelloWorld.Main () :> Html.IPagelet Here, the name of the wrapper type is what you can embed in your ASPX markup: 1 <samples:HelloWorldViewer runat="server" /> At this point, you should see the sample code running. inherit Web.Control()

You might also like