CODEWITHSUNDEEP
javascriptasp.net-mvcrazor
Zet
Zet

Reputation: 571

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?

Upvotes: 2

Views: 20089

Answers (4)

Spencer Sullivan
Spencer Sullivan

Reputation: 575

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

Upvotes: 0

tomRedox
tomRedox

Reputation: 30563

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

Upvotes: 1

Bits_Please
Bits_Please

Reputation: 568

Alternatively you can use this as well

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

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1039508

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;

Upvotes: 10

Related Questions