将 DIV 动态添加到 table 并以 jQuery 和局部视图显示

Question

我有一个问题，我一直在努力解决，但没有成功。首先，我有一个页面，向用户提供一些选择以执行数据库中数据的搜索。这是通过 AJAX 调用和页面上空 DIV 的部分视图实现的。在此部分视图中，我试图在项目列表的 ID 列中添加 DIVs 并将其设置为 display:none。单击 ID 后，我想通过 AJAX 发送请求以提取该 ID 的详细信息，然后使用另一个局部视图加载动态创建的 DIV。这是页面示例：

 //div with table of fields to enter selections for search

 <div>
    <input type="button" value="search" onclick="Search()" />
 <div>
 <div id="searchResults"></div>
 <script type="text/javascript">
    function GetData() {
       $.ajax({
           type: 'GET',
           url: '@Url.Action("GetTours", "Tours")',
           data: $(".searchModel").serializeArray(),
           success: function(data) {
               $("#searchResults").html(data);
               $("#searchResults").show();
           }
        });
    }
 </script>

这很好用，我没有问题。在搜索结果的部分视图中，我这样做：

 <div>
    <table>
       <tr>
         <th>ID</th>
         <th>Date</th>
          // more headers
       <tr>
       @if (Model != null)
       {
          foreach (var tour in Model.Tours)
          {
             <tr>
                <td>
                  <a onclick="showTour(@tour.id)">@tour.id</a>

                </td>
                <td>
                   @tour.date
                </td>
              <tr>
              <tr>
                <td colspan="6">
                  <div id="string.Format("div{0}, tour.id)"style="display:none"></div>
                </td>
              </tr>
          }
     </table>
  </div>

点击事件的JQ为：

   var lastId = 0;
   function showTour(id) {
      if (lastId === id) {
         $("#div" + lastId).hide();
      } else {
         lastId = id;
         $.ajax({
             type: 'GET',
             url: '@Url.Action("Selected", "Tours")',
             data: ('tourId' : lastId },
             success: function (data) {
                 $("#div" + lastId).html(data);
                 $("#div" + lastId).show();
             }
        });
   }

当我调试时，我可以看到所有请求都到达了控制器，没问题，部分视图正在返回到页面。 AJAX 调用成功后，我可以在 'data' 元素中看到整个局部视图，但 DIV 永远不会打开。我希望它在线下方打开，但事实并非如此。我在这里做错了什么？

Answer 1

这似乎是不可能实现的。但是，我能够将整个模型（包括所有列表）发送到页面，并在每个 table 行下构造一个 expanding/collapsing 行以显示详细信息。

将 DIV 动态添加到 table 并以 jQuery 和局部视图显示

Adding DIVs dynamically to table and showing with jQuery and partial view

ajax

jquery

asp.net-mvc-4