ASP.net Razor MVC5 insert @{} inside javascript within my cshtml page

Question

new to razor so here is my question.

I am wanting to add some dynamic code to my JavaScript created button:

$('<button ' +
    '"class="btn btn-default btn-outline" ' +
    'id="addEvent" ' +
    'style="top: -20px; position: relative;" ' +
    'data-tooltips="' + @Html.Raw(new ETTData.Models.Held.tips()._tips["RequestID"]) + '">' +
    'Add New Event' +
 '</button>').insertBefore('#theDT_paginate .pagination');

As you can see above, the data-tooltips is the area where I am trying to insert razor code.

Though it seems not to be working. It's just displaying like this:

$('<button ' +
    '"class="tips btn btn-default btn-outline" ' +
    'id="addEvent" ' +
    'style="top: -20px; position: relative;" ' +
    'data-tooltips="' + example 1 + '">' +
    'Add New Event' +
  '</button>').insertBefore('#theDT_paginate .pagination');

And giving the error of:

Expected ')'

I've tried the example that I found HERE but that does not seem to work?

You cannot use razor syntax in javascript ... An alternative way is to store whatever you want to use in javascript in the html file because you can use razor syntax in html and the in javascript access the data that you have stored in html ... Hide the data in html file and just query it in javascript .. — Daniyal Awan, Mar 14 '17 at 18:08
I remember running into timing issues with something like this in the past. try pulling the raw part out into a variable and then setting the tooltip to the variable — Matt Bodily, Mar 14 '17 at 18:23

score 2 · Accepted Answer · answered Mar 14 '17 at 18:22

Since you are embedding the C#/Razor code into the javascript, you really don't need to use the concat for that part since JS doesn't know the differece. Try

'data-tooltips="@Html.Raw(new ETTData.Models.Held.tips()._tips["RequestID"])">' +

Which should result in:

'data-tooltips="example 1' +

That said, your @Html.Raw output is "example 1". Do you really want that space in there?

Unless "example1" is a JS variable defined previously, then you do want the concat but you want to get rid of that space.

Great example there Bryan. Thanks! – StealthRT Mar 14 '17 at 18:50 — StealthRT, Mar 14 '17 at 18:50

ASP.net Razor MVC5 insert @{} inside javascript within my cshtml page

1 Answers1