how to access my mvc model in javascript for creating my qrcode

Question

I am trying to create a qrcode in my razor viewmodel (MVC) with a javascript libary called qrcode by davidshimjs, but I just can't seem to make it work with my model variable, if I use it like this:

<script src="~/js/qrcode.js"></script>
<script type="text/javascript">
new QRCode(document.getElementById("qrcode,"https://mywebpage.net/GameSession/GameStartPlayer/")</script>

Then it works just fine, but i need my gamesessionid (which is a string) to make it work for my program I have tried these options(not gonna add the scripts src in all ex. but it is always there): option 1:

 <script type="text/javascript">
    var guid = "https://mywebpage.net/GameSession/GameStartPlayer/" + @Html.Raw(Model.CurrentSessionId))
    new QRCode(document.getElementById("qrcode"), (guid);
    </script>

option 2:

 <script type="text/javascript">
new QRCode(document.getElementById("qrcode"), ("https://mywebpage.net/GameSession/GameStartPlayer/" + @Html.Raw(Model.CurrentSessionId);
</script>

option 3:

 <script type="text/javascript">
    var guid = @Html.Raw(Model.CurrentSessionId) 
    new QRCode(document.getElementById("qrcode"), `https://mywebpage.net/GameSession/GameStartPlayer/${guid}`;
    </script>

None of these worked (the program doesn't crash, the qr-code does just not show up). There was also a fouth one with @Html.Raw(Json.Encode(Model.CurrentSessionId)) but Encode didn't exist for me. I am not very good with javascript and my brain has been cooking a while now, i hope anyone knows the answer.

PS. i also tried with just a simple @Model.CurrentSessionId but this didn't work either and i can't set a breakpoint in my razor view either so I can't look what is going on :(

have a nice day!

Answer 1

You can't. and the reason is that they do not "live" in the same time. The Razor variables are "Server side variables" and they don't exist anymore after the page was sent to the "Client side".

When the server get a request for a view, it creates the view with only HTML, CSS and Javascript code. No C# code is left, it's all get "translated" to the client side languages.

The Javascript code DOES exist when the view is still on the server, but it's meaningless and will be executed by the browser only (Client side again).

This is why you can use Razor variables to change the HTML and Javascript but not vice versa. Try to look at your page source code (CTRL+U in most browsers), there will be no sign of C# code there.

In short:

The server gets a request.

The server creates or "takes" the view, then computes and translates all the C# code that was embedded in the view to CSS, Javascript, and HTML.

The server returns the client side version of the view to the browser as a response to the request. (there is no C# at this point anymore)

the browser renders the page and executes all the Javascript

But it would be possible if one were used in place of the variable in @html.Hidden field. As in this example.

@Html.Hidden("myVar", 0);

set the field per script:

<script type="text/javascript">
new QRCode(document.getElementById("qrcode"), ("https://mywebpage.net/GameSession/GameStartPlayer/" +  $('#myVar').val;
</script>

Something like that