Question

我有一个MVC 4应用程序，其中一个视图显示如下：

enter image description here

此视图的相应代码为：

<tbody>
   @foreach (var item in Model)
      {
        <tr id="document-row-@item.DocumentId">
           <td>                        
               @Html.DisplayFor(modelItem => item.DocumentName)
                 <div id="document-detail-contentsREVW">

                 </div>
           </td>

           <td>
               @Html.DisplayFor(modelItem => item.CreatedDate)
                  <div class="pull-right"> 
                           @Ajax.ActionLink("Details", "DocumentDetail", "Documents", new { Area = "SmartDocs", id = item.DocumentId.ToString() , currentStatus = item.CurrentStatus.ToString()}, new AjaxOptions
                        {
                           InsertionMode = InsertionMode.Replace,
                           HttpMethod = "GET",
                           LoadingElementId = "ajax-loader",
                           UpdateTargetId = "document-detail-contentsREVW",
                        }, new { @class = "details-link" })

                 </div>
            </td>
        </tr>
     }

现在，当我点击“详细信息”链接时，将调用一个控制器操作方法，该记录的详细信息将以表格格式显示在第一行的正下方，位于 document-detail-contentsREVW 中在我看来使用，可以看作：

enter image description here

这是第一条记录的详细信息。现在，如果我点击第3条或任何其他记录的详细信息，显示详细信息的位置与下图所示相同： enter image description here

在这里，我希望详细信息显示在已点击链接的特定记录下方。功能在这里工作正常。点击详细信息我能够切换（隐藏/取消隐藏）细节div。

我觉得在tr中使用我的div的位置是错误的，因此每次在详细信息点击时刷新同一个地方。

我搜索了很多，甚至找到了很多小提琴来实现这一点。对于前者： http://jsfiddle.net/ME3kG/30/ （我想要这样的事情）

但是这里的细节是预先编写的，并且在点击图标时使用。但在我的情况下，我会在点击该记录的详细信息链接后动态获取详细信息。我想我很清楚我的要求。那么，这可以通过jquery来完成，或者我怎样才能实现这个目的..？提前谢谢。

以下是我的剧本：

   $(function () {
        $('.details-link').on('click', function (e) {
            e.preventDefault();
            $(this).closest('tr').find('.document-details').toggle();
            $(this).text(function (i, v) {
                return v === 'Details' ? 'Hide' : 'Details';
            });
        });
    });

Answer 1

问题是您已为所有元素提供了相同的ID。除了无效的html之外，@Ajax.ActionLink()方法正在使用id=document-detail-contentsREVW更新第一个元素（不一定是相应行中的元素）。您需要在循环中创建唯一的ID。如果您的模型是IList，那么您可以使用（例如）;

@for (int i = 0; i < Model.Count; i++)
{
  var id = string.Format("document-detail-{0}", i);
  <tr id="document-row-@item.DocumentId">
    @Html.DisplayFor(m => m[i].DocumentName)
    <div id=@id></div> // id will be "document-detail-0", "document-detail-1" etc
    ....
    @Ajax.ActionLink("Details",.....
    {
      ....
      UpdateTargetId = @id,

如果你的模型是IEnumerable，在循环之前声明一个计数器，并在foreach语句中增加计数器

@{int i = 0;} // declare counter
@foreach (var item in Model)
{
  var id = string.Format("document-detail-{0}", i++);
  <tr id="document-row-@item.DocumentId">
    @Html.DisplayFor(m => item.DocumentName) // same as before
    <div id=@id></div>
    ....
    @Ajax.ActionLink("Details",.....
      ....
      UpdateTargetId = @id,

使用Jquery在表的每一行下添加额外的div

1 个答案: