I want to be able to display some text, but also have the text be modifiable via jQuery.
<%= Html.DisplayFor(model => model.DeviceComponentName)%>
HtmlHelpers have overrides that allow you to pass in an object, or a dictionary, to add attributes to the generated html tag:
@Html.DisplayFor(model => model.DeviceComponentName, new { id = "myId" })
@Html.DisplayFor(model => model.DeviceComponentName, new Dictionary() { { "id", "myId" } })
or
@Html.DisplayFor(model => model.DeviceComponentName, new { id = ViewData.TemplateInfo.GetFullHtmlFieldName("DeviceComponentName") })
@Html.DisplayFor(model => model.DeviceComponentName, new Dictionary() { { "id", ViewData.TemplateInfo.GetFullHtmlFieldName("DeviceComponentName" } })
UPDATE:
After reviewing the updated code, and re-reading the question, here is what I would suggest - which is similar to your first idea.
">
<%= Html.DisplayFor(model => model.DeviceComponentName)%>
You shouldn't need to add an extra div inside the TD, because you can modify the value within the td directly via the jQuery. I believe the following should accomplish this:
$('#DeviceComponentName').html('newValue');