HTML Helper in JavaScript?

Question

In Razor I can do this:

<p @Html.MyCustomDataAttributeFor(person) >@person.Name</p>

To render something like this:

<p data-custom-person-id="1234567890" >Fred</p>

Must I really then do this in (unobtrusive) JavaScript:

$('p[data-custom-person-id="1234567890"]').css('background-color','red');

When I'd prefer to do this:

$('p[@Html.MyCustomDataAttributeFor(person)]').css('background-color','red');

If only I could, otherwise should the data attribute generated by the HTML helper change, my client side code will no longer style the element.

Is this javascript in a view file? What server side language are you using? If the JS is in a view file (where I'd assume your Razor code is) then you should be able to do what you want. — matthewpavkov
– matthewpavkov, Commented Jan 22, 2013 at 7:43

Robert Fricke · Accepted Answer · 2013-01-22 08:06:23Z

4

Could you point the script to a .cshtml-file?

 <script type="text/javascript" src="/myscript.cshtml"></script>

I think I've done this for both .php and .aspx so I don't see a reason it shouldn't work. In those cases it makes the server first process the file.

Otherwise you could use a customer HttpHandler that parses whatever text you want server-side before it's sent to the client.

The easiest however, would be to set some Javascript variables from Razor, ie:

<script type="text/javascript">
    var customerId = '@Html.MyCustomDataAttributeFor(person)';
</script>

And then write:

$('p[' + customerId + ']').css('background-color','red');

answered Jan 22, 2013 at 8:06

Robert Fricke

3,6531 gold badge23 silver badges35 bronze badges

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

Comments

gurvinder372 · Accepted Answer · 2013-01-22 07:44:39Z

1

data-custom-person-id="1234567890" is rendered to the browser after server has converted @Html.MyCustomDataAttributeFor(person) to that value. On the client side you will not be receiving these text at all. So, you cannot use those statements for client side styling.

answered Jan 22, 2013 at 7:44

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

2 Comments

Grokodile Over a year ago

You mean the razor output is once per request but the JavaScript is cached so hard coding is the only way?

gurvinder372 Over a year ago

@Grokodile Yes. Razor code is converted to Javascript code on server only and sent to the browser. So, you need to hard-code only

Collectives™ on Stack Overflow

HTML Helper in JavaScript?

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related