VB.net pass grid-template-areas and grid-template-columns values via ViewBag in MVC site

Question

I have an embryonic site using VB.net MVC 5 and in the _layout page I have my main structure (header, nav, footer etc). The tag is also in the layout page and the only thing that is in the View pages is the body html. I'm using a grid to arrange the elements of my content and I am trying to figure out how to set the grid-template-areas and grid-template-columns values on a per-page basis. Currently the below styles are contained within the layout page.

<style>
    .cc-grid {
        grid-template-columns: 50% 50%;
        grid-template-areas: 'cap1 cap1' 'cap2 cap3' 'cap4 cap3';

    }
</style>

What I've tried is to use a viewBag parameter to pass the grid-template-areas string ('cap1 cap1' 'cap2 cap3' 'cap4 cap3') as a property as below:

grid-template-areas: @ViewBag.Areas;

and then in the actual content assign the value using:

@ViewBag.Areas = "'cap1 cap1' 'cap2 cap3' 'cap4 cap3'"

The value of the string is passed (I tested by putting the @ViewBag.Areas into

tags and it did display the correct string. It just appears to be an issue with rendering the value within the CSS.

If it's not possible to use ViewBag in the CSS, what would be the best way to set this kind of style attribute on a per-page basis vs in the layout page?

When I inspect the page in Edge, it is rendering as this:

grid-template-areas: 'cap1 cap1' 'cap2 cap3' 'cap4 cap3';

So it looks as though the single quotes are getting rendered as &#39.

Thanks in advance,

Terry

Answer 1

Thanks to this answer:

Javascript, Razor and Escape characters. Like apostrophe

Basically I had to use html.raw as so:

ViewBag.Areas = Html.Raw("'cap1 cap1' 'cap2 cap3' 'cap4 cap3'")