从 @Html.DisplayFor 和 @Html.HiddenFor 获取值答案

【问题标题】：Getting a value from @Html.DisplayFor and @Html.HiddenFor从 @Html.DisplayFor 和 @Html.HiddenFor 获取值
【发布时间】：2014-12-11 07:06:26
【问题描述】：

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;
    }

jQuery

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

我正在尝试学习一些 MVC 和 jQuery。

谁能解释一下为什么打电话给我

var myID_Visible = $.trim($("#VisibleID" + i).val()); 返回一个空字符串，但是

var myID_Hidden = $.trim($("#HiddenID" + i).val()); 返回我的 item.ID 的值？

唯一的区别是第一行 jQuery 引用 @Html.DisplayFor（返回空字符串），而第二行引用 @Html.HiddenFor（返回实际值）。

为什么我不能从@Html.DisplayFor 获得值？

【问题讨论】：

标签： javascript jquery asp.net-mvc asp.net-mvc-4

【解决方案1】：

因为@Html.DisplayFor() 不呈现控件并且您不能使用.val()。而是使用

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

虽然这将取决于@Html.DisplayFor() 正在呈现的html（您使用的是显示模板吗？）。你需要检查生成的html。

默认情况下DisplayFor 只会呈现属性的文本值。你需要做类似的事情

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;
}

在脚本中

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

【讨论】：

.text() 在@Html.DisplayFor() 上仍然返回一个空字符串
如我所说，检查DisplayFor 生成的html。默认情况下，它只会呈现文本（在这种情况下，您无法通过这种方式访问）。如果您有一个显示模板，那么它将取决于正在渲染的周围元素。
我已经用可能的解决方案编辑了答案以访问该值。但请注意，您应该在这样的 foreach 循环中从不呈现控件（HiddenFor()、TextBoxFor() 等）
就像我说的我刚刚开始使用 MVC/jQuery。不推荐在这样的 foreach 循环中呈现控件（HiddenFor()、TextBoxFor() 等）的任何具体原因？
这就是我提到它的原因:)。通过使用foreach 循环，您的渲染控件具有重复的name 属性，因此在回发时无法将集合绑定到您的模型。您需要使用for 循环for(int i = 0; i < Model.Count; i++) { @Html.HiddenFor(m => m[i].ID) ....}。这将使用索引器<input name="[0].ID" ..> <input name="[1].ID ..> 等正确命名控件

【解决方案2】：

一些输入有 .html() 而不是 .val() 试试：

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

编辑

另外，去掉i之前的@，你已经在C#代码里面了

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

【讨论】：

.html() 仍然返回与 .val() 相同的结果

【解决方案3】：

原因在this 和that 中有解释。但是，对于您的情况，我更喜欢这样：

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;
}

所以在脚本中我们可以调用它：

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

希望这可以帮助你，干杯！

【讨论】：

【解决方案4】：

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

渲染的 html 看起来像：

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

而

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

渲染后的 html 看起来像

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

因此，为了显示您应该使用的价值，$("#VisibleID1).html()@Shadi 指出

【讨论】：