WebSharper uses jQuery internally for some functionality, so it has a predefined resource for it. You just need to add a Require attribute on your Bootstrap resource to use it. Like this:

1
2
3
[<Require(typeof<WebSharper.JQuery.Resources.JQuery>)>]
type BootstrapJs() =
    inherit Resources.BaseResource("url-of-bootstrap.js")
By on 11/22/2016 11:08 AM ()

I have the following code, which works to add jQuery and Bootstrap for the Home page.

1
2
3
4
5
6
7
[<Require(typeof<JQuery.Resources.JQuery>)>]
type Bootstrap() =
    inherit Resources.BaseResource("//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/",
        "js/bootstrap.min.js", "css/bootstrap.min.css", "css/bootstrap-theme.min.css")

[<assembly: Require(typeof<Bootstrap>)>]
do ()

The About page does not include this resource unless I insert some client side functionality.

1
2
3
4
5
6
7
8
9
10
11
[<JavaScript>]
module Client =
    let RequireBootstrap () = span []

module Site =
    let AboutPage ctx =
        Templating.Main ctx EndPoint.About "About" [
            h1 [text "About"]
            p [text "This is a template WebSharper client-server application."]
            client <@ Client.RequireBootstrap() @> // this line is required to add the Bootstrap resource
        ]

Is there a way to include the resources without the commented line above?

EDIT:

I see the question http://www.websharper.com/question/80373/websharper-ui-next-templating-not-recognizing-custom-iresources is similar to mine. Since the template is shared between the Home and About pages, if I add Bootstrap to the template I will either miss the jQuery dependency on the About page or add jQuery twice on the Home page. I guess the issue is that the Bootstrap client side functionality is unknown by WebSharper, however I was expecting that some usage of the Require attribute would help.

Regards, cadull

By on 11/22/2016 2:40 PM ()

Have you tried:

1
2
3
4
5
6
7
let styledElement() =
    div [
        text "A page containing this element will include style.css"
        Doc.WebControl (Web.Require<MyResource>())
        // Or equivalently:
        Doc.WebControl (Web.Require(typeof<MyResource>))
    ]

Copied from here http://websharper.com/blog-entry/4636/websharper-3-6-6-released.

It should add the tag without having to add clientside code.

By on 12/14/2016 7:51 AM ()

Thanks Kimserey, this produces the desired result.

For future reference, using the Require attribute works for client side code; it does not add dependencies when applied to server code.

By on 1/11/2017 2:39 PM ()
IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy
Built with WebSharper