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

Stack Overflow用户

提问于 2014-09-06 21:54:28

回答 1查看 1.1K关注 0票数 3

我有一个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>
     }

现在，一旦我单击Details链接，就会调用一个控制器操作方法，该记录的详细信息将显示在document-detail-contentsREVW内的第一行下面，如我的视图中所使用的那样，可以看作如下：

这是第一个record.Now的详细信息，如果我单击第3条或其他任何一条记录的详细信息，则显示详细信息的位置与以下视图中所示相同：

在这里，我希望在链接为clicked.Functionality的特定记录下面显示详细信息，clicked.Functionality正在正常工作，只要单击details，我就可以将details描述为div。

我觉得在tr中使用我的div的位置是错误的，因此每次在细节点击时相同的位置都会被刷新。

我对此进行了大量的搜索，甚至发现了很多实现this.For ex：http://jsfiddle.net/ME3kG/30/(我想要这样的东西)的花招。

但是在这里，细节是预先写好的，在我的例子中是在单击icon.But时使用的，我将在单击该记录的details链接之后动态地获取详细信息，我想我已经清楚了我的需求。那么，这是否可以由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';
            });
        });
    });

javascript

jquery

asp.net-mvc-4

razor

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-09-06 22:25:14

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