在 asp.net mvc 网格中显示隐藏行

Question

我用 html table 标签制作了网格。在一个 TD 标签中我有这个代码

<td>
     <a onclick="$('#lightBox').css('display','inline')"></a>
     <div style="display: none" id="lightbox">
    <%--<%Html.RenderAction("LightBox","PremiumSharingAdmin",new {historyId = premium.SharingPremiumHistoryID}); %>--%>
          <img  src="Storage/Images/<%=premium.SharingPremiumHistoryID %>.jpg" title="image" width="100" height="100"/>
              <div>
                  <textarea readonly="readonly"> 
                      <%= premium.Content %>
                  </textarea>
              </div>
              <div>
                  <input type="text" readonly="readonly" value="<%= premium.SharingTitle %>"/>
              </div>
    </div>
</td>

这些标签为我提供了一些默认情况下隐藏的网格行的额外信息。

在另一边，我有 Link 标签，如果用户按下该标签，则显示该行。

但问题是，当我按下它时，它只显示第一条记录的详细信息，而当我按下其他记录时，它显示第一行的详细信息。

问题出在哪里？

这是我的整个 ASPX 视图

<% foreach (var premium in Model)
   {%>
    <tr>
        <td style=" font-weight: bold;width: 130px;">

            <span ><%= premium.SharingTitle %></span>

        </td>
        <td style=" font-weight: bold;width: 130px;">
            <span ><%= premium.AddedDate.ConvertToPersianDate(true) %></span>
        </td>
        <td style="width: 130px;">
            <span> <%=  premium.IsSubmit %></span>


        </td>
         <td style="width: 130px;">
            <span> <%=  premium.ResturantName %></span>


        </td>
         <td style="width: 130px;">
            <span> <%=  premium.Content %></span>


        </td>
          <td style="width: 130px;">
           <div class="group">
                <a class="delete" href="<%= Url.Action("submit", "PremiumSharingAdmin", new {historyId = premium.SharingPremiumHistoryID}) %>" onclick="return confirm('آیا می‌خواهید این خبر را تایید کنید؟');">تایید</a>

            </div>


        </td>
        <td>
            <a onclick="$('#lightBox').css('display','inline')"></a>
            <div style="display: none" id="lightBox">
              <%--<%Html.RenderAction("LightBox","PremiumSharingAdmin",new {historyId = premium.SharingPremiumHistoryID}); %>--%>
                  <img  src="Storage/Images/<%=premium.SharingPremiumHistoryID %>.jpg" title="image" width="100" height="100"/>
                      <div>
                          <textarea readonly="readonly"> 
                              <%= premium.Content %>
                          </textarea>
                      </div>
                      <div>
                          <input type="text" readonly="readonly" value="<%= premium.SharingTitle %>"/>
                      </div>
            </div>
        </td>
    </tr>
<%} %>

Answer 1

通过为多个 <div> 元素提供相同的 id 属性，您正在生成无效的 html。 $('#lightBox').css('display','inline') 将 return 所有具有 id="lightbox" 的元素，但仅设置第一个元素的样式。

相反，使用 class 名称并使用相对选择器。我还建议您使用 Unobtrusive Javascript 和 css，而不是用行为污染您的标记。

Html

<td>
  <a href="#" class="toggle hidden">Show</a>
  <div class="lightbox">Some content to display</div>
</td>

CSS

.lightbox {
  display: none;
}

脚本（在页面底部）

  <script>
    $('.toggle').click(function () {
      if ($(this).hasClass('hidden')) {
        $(this).next('div').show();
        $(this).text('Hide');
      } else {
        $(this).text('Show');
        $(this).next('div').hide();
      }
      $(this).toggleClass('hidden');
    });
  </script>
</body>

旁注：使用 RenderAction 呈现隐藏的内容 div 建议内容很大 and/or 您调用 service/database 来获取内容。如果是这种情况，您应该使用 ajax 按需加载内容（除非您希望用户查看所有行的详细信息）

在 asp.net mvc 网格中显示隐藏行

Display hidden row in asp.net mvc grid

asp.net-mvc

grid