Concatenating in Razor - html

Question

I am trying a simple concatenation in razor.
I get all kinds of squiqly lines when I add this in my model RAZOR:
<input type="checkbox" id="ck1-#track.TrackID"
onclick="$('#ck2-#(track.TrackID)').prop('checked', $(this).prop('checked'))" />
However it outputs perfectly OUTPUT:
<input type="checkbox"
id="ck1-500004524"
onclick="$('#ck2-500004524').prop('checked', $(this).prop('checked'))">
I am trying to get the exact html as in the output, but without all of the squigly.
I understand this is most likely covered in other posts, but I am still trying to get the grasp on the way Razor concatenates strings, it seems to be different each time I need it.
Thank you in advance,

Answer 1

As mentioned, Razor isn't friendly to injecting variables into html attributes. Part of the reason is that linking event handlers in Mark-up is an outdated practice.
best practice is the "Unobtrusive way"
$(function () {
$('#').click(function ()
{ $('#ck2-#(track.TrackID)').prop('checked', $(this).prop('checked')) })
})

Answer 2

Having #code inside of html/javascript strings e.g "#code" or '#code' will almost always give you squiggly lines.

Answer 3

On lines where I am mixing HTML markup & Razor syntax, I preface the line with a #: which I've found resolves a lot of issues.
Also, check out http://weblogs.asp.net/scottgu/archive/2010/12/16/asp-net-mvc-3-implicit-and-explicit-code-nuggets-with-razor.aspx
This snippet is good advice:
When necessary, you can also explicitly scope code expressions using a
#(expression) syntax to provide greater clarity around your intent, as
well as to disambiguate code statements from static markup.

Answer 4

Thank you for everyone that helped, one of the answers suggested that the 'unobrusive way' would be better than hardcoding javascript into the elements. Here is what I came up with:
<input type="checkbox" class="ckSelectCol" />
$(function () {
$('.ckSelectCol').each(function () {
$(this).change(function () {
dupCheckBox(this);
});
});
});
What this is doing is finding all checkboxes that have a class ckSelectCol and adding a change eventhandler, the change event handler is the function that I wish to be called on change.
This can be done a multitude of ways, I chose this way as it decouples the javascript from the page, can easily be reused and makes the page lighter.
If anyone has any suggestions, please respond.
Once again, I appreciate all of the input that I received on this post.
-Edward