javascript-使用jQuery在表的每一行下添加额外的div

2019-10-29 05:34:33 阅读：200 来源： 互联网

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

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

标签：razor,asp-net-mvc-4,javascript,jquery
来源： https://codeday.me/bug/20191029/1957981.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-使用jQuery在表的每一行下添加额外的div