Knockout JS and Razor - How to assign data to Razor variables?

Ali Aziz 1

I am working with a multi layer web application that uses various web technologies. It interacts with a WebAPI to get the data via Knockout JS.

I will try to narrow the scope of my question to this:

I have a span tag

<span id="title" data-bind="text: FullTitle"></span>

I would like to get the content of that span and assign it to a Razor variable.

I have tried:

@  
{  
 var Test = <span id="title" data-bind="text: FullTitle"></span>  
}

But this doesn't render the knockout code and it just assigns the full span code to that variable. I just want to get the full title when knockout pulls it into the Test variable.

Note: the span works outside the razor block and displays the full title on the cshtml view.

Any ideas?

Thanks in advance.

AgaveJoe 26,191 Reputation points

2022-04-21T12:59:29.133+00:00

I would like to get the content of that span and assign it to a Razor variable.

I think you might misunderstand a few fundamental web development concepts. Razor executes on the server and Knockout JS is an API that runs in the browser. It is impossible to assign a Razor variable from Knockout. You must submit an HTTP request, containing the parameter, from your Knockout application to an MVC Action. The Action passes the value to a View which assigns the variable.

I think a Knockout support forum is a better place to get help with Knockout.
Zhi Lv - MSFT 32,011 Reputation points Microsoft Vendor

2022-04-22T07:31:37.077+00:00

Knockout JS and Razor - How to assign data to Razor variables?

You can't assign the knockout JS data to the razor variable. The Razor code blocks' C# code are the "Server side" code, but the Knockout JS is the client side code, it will be executed by the browser only. So you can't access the knockoutjs data in the Razor code blocks.

You could get the FullTitle from the MVC controller, then send it to the view through the Page model, then you can access the FullTitle in the Razor code blocks.

Besides, not sure the usefulness of the Razor variables, if you want to use it in another html element, you could consider directly assigning the value to the html element via knockout.js or JavaScript, without using the Razor variables.