Passing values from JavaScript to C# ASP.NET Core Razor Pages for SQL Querying

Question

I am making a simple web-shop application prototype and need to pass shopping cart items (which are stored in localStorage) to our SQLServer. The localStorage is as follows

 {"grootfigure":{"name":"Groot figure","tag":"grootfigure","price":600,"inCart":2},"owlfigure":{"name":"Owl figure","tag":"owlfigure","price":350,"inCart":4},"dragonfigure":{"name":"Dragon figure","tag":"dragonfigure","price":475,"inCart":5}}

The first idea was to pass the quantity of each product in cart to each counter variable in C# and then use a separate method in C# to run an SQL Query. But this seemed difficult to accomplish.

When I tried to pass variables between JS and C# by

function addOwl(){
            @Globals.String = localStorage.getItem('productsInCart')
            alert(@Globals.String)

            
        }

I get this in the web browser console

Uncaught ReferenceError: addOwl is not defined at HTMLButtonElement.onclick (cart:71:68)

Any ideas how I can easily run SQL query from localStorage values? Thank you

Answer 1

You need to understand where, when and how both JavaScript and C# are executed in Razor Pages.

C# is executed on the server, before the output is sent to the browser. Once the server executes the C# code, it produces text (which may be plain text, HTML, CSS, JavaScript, etc), which it then sends out. It then discards the request.

By contrast, JavaScript is only executed in the browser, not on the server. It knows nothng about C#, and cannot call C# code directly.

Specifically, the line of code...

@Globals.String = localStorage.getItem('productsInCart')

..will be interpreted by the server-side C# as " get the value of the String property of a C# object named Globals and insert that into the output that will be sent to the browser ."

Given that you probably don't have that, I would expect a compiler error at this point. If you're not getting that, then it sounds like you aren't giving us the full story.

Assuming it can find such an object with such a property, let's say it has the value jim , it will mean that the following text (that's very important, the server treats all of this as text, it doesn't know about JavaScript, and will not attempt to interpret it) will be sent to the browser...

function addOwl(){
            jim = localStorage.getItem('productsInCart')
            alert(jim)

            
        }

This is almost certaily not what you want.

So, to answer your basic question, the way to send data from your JavaScript to the server, where it will be used in your C# is to use AJAX. There are other ways, but this is probably the simplest.

If you use jQuery, then it gives you JavaScript functions to make this relatively easy. You'll need to write some C# code to accept the AJAX request.