How To Add Id To @html.displayfor

I'm trying to add id to @Html.DisplayFor(model => model.ScreenWidth, new { @id = 'width'}) and then use document.getElementById('width').innerHTML = w; Why is it not working?

Solution 1:

The DisplayFor helper doesn't generate any HTML tags, it just outputs the formatted text. So you cannot add id attribute to it. What you could do instead is to wrap it in a tag (div or span):

<div id="width">
    @Html.DisplayFor(model => model.ScreenWidth)
</div>

and then be able to manipulate the contents of this tag:

document.getElementById("width").innerHTML = w;

Solution 2:

One other approach to this is to create a customised Display Template that you can then use to render both the value and, say, a <span> tag that contains your id attribute.

If you want your id set to something custom, rather than the name of the property:

Create a file called SpanWithId.cshtml in Views\Shared\DisplayTemplates (create any of those folders if they are missing) and add this code:

<span id="@(ViewBag.HtmlID)">@Model</span>

And then in your view, you can use it like this:

@Html.DisplayFor(model => model.ScreenWidth, "SpanWithId", new { HtmlID = "project-name" })

That code is an adaption from Phillip Smith's answer here

If you want your id and name set to the name of the property:

Create a file called SpanWithIdAndName.cshtml in Views\Shared\DisplayTemplates (create any of those folders if they are missing) and add this code:

@{var fieldName = ViewData.TemplateInfo.HtmlFieldPrefix;}
<span id="@fieldName" name="@fieldName">@Model</span>

And then in your view, you can use it like this:

@Html.DisplayFor(model => model.ScreenWidth, "SpanWithIdAndName")

That code is an adaption from David Clarke's answer here

Solution 3:

Alternatively you can use this as well

      <span id="width">@Html.Displayfor(model => model.ScreenWidth) </span>

Solution 4:

I am assuming that you are just wanting to display a label. This is how I accomplished this.

<label id="lblName">
    @Html.Raw(@Model.ObjectA.ObjectB.ObjectC.ToString())
</label>

Then if I want to change the value in jQuery, I can:

$('#lblName').text("New Value");