Getting a value from @Html.DisplayFor and @Html.HiddenFor

Question

The HTML

    int i = 1;
    foreach (var item in Model.MyDataset)
    {
    <td class="tdBorder">
    @Html.DisplayFor(x => item.ID, new { id = "VisibleID" + @i })
    @Html.HiddenFor(x => item.ID, new { id = "HiddenID" + @i })
    </td>
    i += 1;
    }

The jQuery

 for (i = 1; i <= rowCount; i++) {
            var myID_Visible = $.trim($("#VisibleID" + i).val());
            var myID_Hidden = $.trim($("#HiddenID" + i).val());
        }

I'm trying to learn some MVC and jQuery.

Would some one explain to me why calling

var myID_Visible = $.trim($("#VisibleID" + i).val()); returns an empty string but

var myID_Hidden = $.trim($("#HiddenID" + i).val()); returns the value of my item.ID?

The only difference is that the first jQuery line refers to a @Html.DisplayFor (returns empty string) while the second jQuery line refers to a @Html.HiddenFor (returns actual value).

Why can't i get a value from the @Html.DisplayFor?

score 3 · Answer 1 · 2014-12-11T07:51:54.553

3

Because @Html.DisplayFor() does not render a control and you cannot use .val(). Instead use

myID_Visible = $.trim($("#VisibleID" + i).text())

although this will depend on the html that @Html.DisplayFor() is rendering (are you using a display template?). You need to check the html generated.

By default DisplayFor will just render the text value of the property. You would need to do something like

int i = 1;
@foreach (var item in Model.MyDataset)
{
  <td class="tdBorder">
    <span id="@i">
      @Html.DisplayFor(x => item.ID)
    </span>
    @Html.HiddenFor(x => item.ID, new { id = "HiddenID" + @i })
  </td>
  i += 1;
}

and in the script

myID_Visible = $.trim($('#' + i).text());

edited Dec 11 '14 at 07:51

answered Dec 11 '14 at 07:08

.text() still returns an empty string on @Html.DisplayFor() – StackTrace Dec 11 '14 at 07:14
As I said, check the html that `DisplayFor` generates. By default it will just render the text (in which case you cant access this way). If you have a display template then it will depend on what surrounding elements are being rendered. – Dec 11 '14 at 07:15
I've edited answer with possible solution for accessing the value. But note your should **NEVER** render controls (`HiddenFor()`, `TextBoxFor()` etc) in a `foreach` loop like this – Dec 11 '14 at 07:22
like i said i'm just getting started with MVC/jQuery. Any specific reasons why rendering controls (HiddenFor(), TextBoxFor() etc) in a foreach loop like this this is not recommended? – StackTrace Dec 11 '14 at 07:26
2

That's why I mentioned it :). By using a `foreach` loop your rendering controls with duplicate `name` attributes so there is no way that the colletion can be bound to you model when posting back. You need to use a `for` loop `for(int i = 0; i < Model.Count; i++) { @Html.HiddenFor(m => m[i].ID) ....}`. This will correctly name the controls with indexers ` – Dec 11 '14 at 07:35

Shadi · Answer 2 · 2014-12-11T07:37:33.883

1

Some input has .html() rather than .val() try:

var myID_Visible = $.trim($("#VisibleID" + i).html());

EDIT

Another thing, remove the @ before the i, you are already inside a C# code

@Html.DisplayFor(x => item.ID, new { id = "VisibleID" + i })

edited Dec 11 '14 at 07:37

answered Dec 11 '14 at 07:10

Shadi

2,236
2
22
22

.html() still returns same result as .val() – StackTrace Dec 11 '14 at 07:15

score 1 · Answer 3 · edited May 23 '17 at 10:30

The reason is explained in this and that. For your case however, I prefer to make it like this:

HTML

int i = 1;
foreach (var item in Model.MyDataset)
{
  <td class="tdBorder">
    <p id="VisibleID@(i)">@Html.DisplayFor(x => item.ID)</p>
    <p id="HiddenID@(i)">@Html.HiddenFor(x => item.ID)</p>
  </td>
i += 1;
}

So in the script we can call it:

for (i = 1; i <= rowCount; i++) {
    var myID_Visible = $("#VisibleID" + i).text();
    var myID_Hidden = $("#HiddenID" + i).text();
}

Hopefully this can help you, cheers!

score 0 · Answer 4 · answered Dec 11 '14 at 07:28

@Html.DisplayFor(x => item.ID, new { id = "VisibleID" + @i })

rendred html looks like:

<span id="VisibleID1">item id value here</span>

whereas

@Html.HiddenFor(x => item.ID, new { id = "HiddenID" + @i })

rendered html looks like

<input type="hidden" id="HiddenID1" value="item id value here">

So in order to have display for value you should you use, $("#VisibleID1).html() as noted by @Shadi

Getting a value from @Html.DisplayFor and @Html.HiddenFor

4 Answers4