MVC3 Html.DisplayFor — Is it possible to have this control generate an ID?

Question

I want to be able to display some text, but also have the text be modifiable via jQuery.

<%= Html.DisplayFor(model => model.DeviceComponentName)%>


        

Answer 1

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<string, object>() { { "id", "myId" } })

or

@Html.DisplayFor(model => model.DeviceComponentName, new { id = ViewData.TemplateInfo.GetFullHtmlFieldName("DeviceComponentName") })

@Html.DisplayFor(model => model.DeviceComponentName, new Dictionary<string, object>() { { "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.

<td class="editableValue" id="<%= ViewData.TemplateInfo.GetFullHtmlFieldName("DeviceComponentName") %>">
  <%= Html.DisplayFor(model => model.DeviceComponentName)%>
  <button type="button" id="ComponentTreeButton" class="nestedDialogButton">...</button>
</td>

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');