.NET Core separating JavaScript from CSHTML and access ViewData

Question

Is there a way to access ViewData from a separate JavaScript file like the way you can access it from embedded JavaScript code on your CSHTML?

I would like to separate my JavaScript code and have the data load directly in my JavaScript file instead of using a hidden field in my HTML and then access pull it by GetElementById as it seems tedious to pass the data from the HTML to JavaScript and then back to HTML again.

CSHTML file

@using StatisticOndoAppCore.Models.ViewModels;
@using { var info = (Shop)ViewData["ShopInfo"]; }

Embedded JavaScript code

subscriptionShopData = [
        { y: 'Uge ' + @info.currentWeek,         a: @info.creationsCurrentWeek },
        { y: 'Uge ' + @info.currentWeek - 1,     a: @info.creationsLastWeek },
        { y: 'Uge ' + @info.currentWeek - 2,     a: @info.creationsCurrentWeekMinusTwo },
        { y: 'Uge ' + @info.currentWeek - 3,     a: @info.creationsCurrentWeekMinusThree }
    ];

new Morris.Bar({
        element: 'bar-subscriptions-shop',
        data: subscriptionShopData,
...

score 1 · Answer 1 · edited Jul 08 '17 at 12:19

You can't access ViewData in JavaScript files, because JavaScript files are static files. But you can use a hidden input (or data attributes) and set value with ViewData. Then it enables you to access value of the hidden input in JavaScript.

See a similar Stack Overflow question: Access a Model property in a javascript file?

Update (the below code may be useful, but it is not tested)

@section scripts
{
    <script>
       $(function(){
        var  subscriptionShopData = [
        { y: 'Uge ' + @info.currentWeek,         a: @info.creationsCurrentWeek },
        { y: 'Uge ' + @info.currentWeek - 1,     a: @info.creationsLastWeek },
        { y: 'Uge ' + @info.currentWeek - 2,     a: @info.creationsCurrentWeekMinusTwo },
        { y: 'Uge ' + @info.currentWeek - 3,     a: @info.creationsCurrentWeekMinusThree }
       ];
    });
    </script>
    <script src="..."></script>// use subscriptionShopData  variable in this js
}

Thank you for the reply - that was what i wanted to know if i could avoid. But can see that i have to do it that way then. — tjaydk, Aug 08 '16 at 11:23

.NET Core separating JavaScript from CSHTML and access ViewData

CSHTML file

Embedded JavaScript code

1 Answers1