Back to Questions
1.8k
views3
comments
Translating an asp.net DropDownList
websharperquestioncode-review

I have a DropDownList which is setting a Session variable in its server-side "change" event. If I try to translate it to WebSharper, I have to write a Client code instead

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

let SetSession (el:Dom.Element) (ev:Dom.Event) = 
    let sel = JS.Document.GetElementById("DropDownList") |> As<HTMLSelectElement>
    let idx = el?selectedIndex |> As<int>
    let opt = sel.Item(idx) |> As<HTMLOptionElement>
    Console.Log(opt.Label)
    // can't do the following naive code from the client
    //Console.Log(HttpContext.Current.Session.[SessionBookCo])
    //HttpContext.Current.Session.[SessionBookCo] <- opt.Label
    //Console.Log(HttpContext.Current.Session.[SessionBookCo])
    

let SelectCompany () =
    select [attr.id "DropDownList"; attr.style "width:auto"; on.change SetSession] [ 
        Tags.option [] [ text Opt1]; 
        Tags.option [] [ text Opt2]
    ]

Clearly, I can't set the Session variable from JavaScript, therefore I write the RPC code in Remoting.fs

1
2
3
4
5
6
7
8
9

 [<Rpc>]
 let GetSession () =  async {
        let session = HttpContext.Current.Session
        return string session.[MyVar] }

 [<Rpc>]
 let SetSession (str:string) = async {
        let session = HttpContext.Current.Session
        session.[MyVar] <- str }

and I call it from the above Client

1
2
3
4
5
6
7

Console.Log(opt.Label)
let! before = Server.GetSession()
Console.Log("before: " + before)
do! Server.SetSession(opt.Label)
let! after= Server.GetSession()
Console.Log("after: " + after)
} |> Async.StartImmediate

So far, so good: everything works as expected! WebSharper is great!

Now however in my old asp.net DropDownList code-behind I have a (in c#)

1

Response.Redirect(Request.UrlReferrer?.ToString());

You have to consider that I have a Template with 2 different holes where I replace the body and the select option

1
2

.BropDown(dropdown)
.Body(body)

so I'm afraid I can't use a View Binding in WebSharper, is it correct?

The idea behind the Response.Redirect is that the server should produce a different table in the body (the session variable will be, eventually, a parameter for sql db retrieval)

Maybe I could just do as follows (in f#):

1

Response.Redirect("/myendpoint", 302) |> ignore

Can I be type-safe for the url string in the Client.fs?

I think I've done with this translation of the DropDownList and my first test is successful! :-) I can see the session variable correctly set from the other server RPC call for the SQL retrival!

Is there anything I am missing or is my WebSharper code fair enough?

.

Maybe I could just do as follows (in f#):

1

Response.Redirect("/myendpoint", 302) |> ignore

LOL, this is not going to work in the Client.fs: it's just wasting a network roundtrip. I have to check if the View Binding mechanism works between two different template holes or I have to find a different solution (no idea which one at the moment)

Edit

WebSharper is awesome! Triggering the Submitter does work between two different template holes! (while setting the Var has no effect, I'm not sure why...).

By on 7/23/2019 11:25 PM ()

(Sorry to post here, it doesn't seem related but) I've moved the latest changes of this project to the development server (IIS) and I see a strange error. All fine locally, so... something wrong in my manual deploy? Actually, now I've also used the automatic Web Deploy and the error persists: maybe it is not a deploy issue. It's unfortunate that I can't really analyse what's exactly happening with this stack trace: WebSharper scripts from the Chrome debugger are not clear enough for me, as a beginner.

1
2
3
4
5
6
7
8

WebSharper.Web.js?h=1514962264:481 Uncaught TypeError: Cannot read property 'apply' of undefined
    at typeFunction.get_Body (WebSharper.Web.js?h=1514962264:481)
    at typeFunction.Body (WebSharper.Web.js?h=1514962264:472)
    at a$1 (WebSharper.Main.js?h=-1912156602:579)
    at WebSharper.Main.js?h=-1912156602:598
    at Object.Arrays.iter (WebSharper.Main.js?h=-1912156602:2364)
    at WebSharper.Main.js?h=-1912156602:596
    at HTMLDocument.ready (WebSharper.Main.js?h=-1912156602:615)

or after some tentative changes

1
2
3
4
5
6
7
8
9
10

Uncaught TypeError: Cannot read property 'Client' of undefined
    at WebSharper.Web.js?h=1514962264:480
    at Object.Arrays.fold (WebSharper.Main.js?h=-1912156602:2298)
    at typeFunction.get_Body (WebSharper.Web.js?h=1514962264:478)
    at typeFunction.Body (WebSharper.Web.js?h=1514962264:472)
    at a$1 (WebSharper.Main.js?h=-1912156602:579)
    at WebSharper.Main.js?h=-1912156602:598
    at Object.Arrays.iter (WebSharper.Main.js?h=-1912156602:2364)
    at WebSharper.Main.js?h=-1912156602:596
    at HTMLDocument.ready (WebSharper.Main.js?h=-1912156602:615)

Edit It was indeed a deploy issue. I had to double check and manually move all the bin/content/scripts folders to the server. Afaics, I can't trust VS publish features for this kind of projects

By on 7/24/2019 12:06 AM ()

On a side note, is Async.RunSynchronously missing from JavaScript? Oh, I see it is written in the Documentation that "there is no way to use it"

I'm using it when I set the selected attribute of the options from the Client to store it in the Session... Should I duplicate the RPC with a synch version? The client function is returning the dynamic html dsl to the server page so it is not obvious that I can wrap it into an Async.StartImmediate... Anyway, I suspect that at the time of the html construction the Session is null, so, if I need to set a default value for the dropdown by reading it from a session variable, maybe I must intercept it during a later event (page load event? (*)): that should solve both two problems.

(*) Yep, I can fire the on.afterRender SetInitSession of the select itself

1
2
3
4
5
6
7
8

let SetInitSession (str:string) (el:Dom.Element) =
    Console.Log("Setting initial session")
    async {
        let sel = JS.Document.GetElementById("DropDownList") |> As<HTMLSelectElement>
        let opt = sel.NamedItem(str) // assuming attr.id is correctly set
        opt.Selected <- true
        do! Server.SetSession(str)
    } |> Async.StartImmediate
By on 7/23/2019 10:18 AM ()

    Topic tags

    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