Skip to content

Instantly share code, notes, and snippets.

@jkone27
Created March 25, 2021 13:09
Show Gist options
  • Save jkone27/55680bcec6e287738b7f4af6487a97f1 to your computer and use it in GitHub Desktop.
Save jkone27/55680bcec6e287738b7f4af6487a97f1 to your computer and use it in GitHub Desktop.
Feliz.ViewEngine in F# aspnetcore MVC and NET5
//useful links for F# FE stuff
//https://github.com/dbrattli/Feliz.ViewEngine
//https://dzoukr.github.io/Feliz.Bulma/
//https://github.com/zanaptak/TypedCssClasses
//https://www.w3schools.com/css/css_howto.asp
open Microsoft.AspNetCore.Mvc
open Feliz.ViewEngine
open Zanaptak.TypedCssClasses
open Microsoft.AspNetCore.Hosting
//all this stuff is not needed for in-memory view
//[<CLIMutable>]
//type ViewModel = { Name: string }
//Views/[ControllerName]/[ViewName].cshtml
module Constants =
[<Literal>]
let bootstrapCdn = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
// A "Bootstrap" type pointing at a remote Bootstrap CSS file.
type Bootstrap = CssClasses<Constants.bootstrapCdn, Naming.PascalCase>
[<Route("")>]
type ViewController() =
inherit Controller()
[<Route("")>]
[<HttpGet>]
member this.Index() =
//vs cshtml files... not neeed anymore
//this.View({ Name = "hello"})
// NO I/O and strongly typed html !!!
// it's functions/expressions so we can refactor HTML as we like!
let head =
Html.head [
prop.children [
Html.link [
prop.rel "stylesheet"
prop.href Constants.bootstrapCdn
]
]
]
let header =
Html.div [
prop.className Bootstrap.Container
prop.children [
Html.h1 [
prop.className [ Bootstrap.ContainerLg ; Bootstrap.H1 ]
prop.text "Hello Feliz.ViewEngine from ASPNETCORE"
]
]
]
let body =
Html.body [
prop.children [
header
]
]
let html =
Html.html [
prop.children [
head
body
]
]
|> Render.htmlView
this.Content(html, "text/html")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment