我有一个MVC 4应用程序,其中我的一个视图看起来像这样：

该视图的相应代码为：

<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内,可以看到：

这是第一条记录的详细信息.现在,如果再次单击第三条记录或其他任何记录的详细信息,则显示详细信息的位置与下图所示相同：

在这里,我希望详细信息显示在单击链接的特定记录的下面.功能在这里工作正常.单击详细信息,我还可以切换(隐藏/取消隐藏)details 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';
            });
        });
    });

解决方法:

问题是您为所有元素赋予了相同的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,