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
– Daniyal Awan, Commented Mar 14, 2017 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
– Matt Bodily, Commented Mar 14, 2017 at 18:23

Bryan Lewis · Accepted Answer · 2017-03-14 18:22:47Z

2

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.

answered Mar 14, 2017 at 18:22

Bryan Lewis

6,0484 gold badges42 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

StealthRT Over a year ago

Great example there Bryan. Thanks!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related