How to add id to @Html.DisplayFor parameter?

Question

I looking for decision how to add a id to @Html.DisplayFor, that to this id I could tied jQuery method.

    @Html.DisplayFor(model => model.Price)
         


        

Answer 1

The DisplayFor helper method simply renders the value of the expression you are passing to it. So in your case, let's say your Price property value is 235.34, The markup rendered by razor will be

<dd>
  235.34
</dd>

If all you care about reading the value of the Price property, you may consider keeping the value inside a hidden form element. You can use the HiddenFor helper method.

<dd>
    @Html.DisplayFor(model => model.Price)
    @Html.HiddenFor(a=>a.Price)
</dd>

This will render the below markup

<dd id="item">
    235.34
<input id="Price" name="Price" type="hidden" value="235.34" />
</dd>

You can see that now you have an input element with id Price. That means you can read the value in jQuery like

var v = $("#Price").val();

Another option is keeping the value in HTML5 data attributes.

<dd id="price" data-price="@Model.Price">
     @Html.DisplayFor(model => model.Price)
</dd>

and you can read it like

var v = $("#price").data("price");