Question

我有一个问题，我试图解决这个问题是徒劳的。首先，我有一个页面，向用户提供一些选择，以执行数据库中的数据搜索。这是通过AJAX调用和页面上空DIV的局部视图实现的。在这个局部视图的内部，我试图在列中添加DIV作为项目列表的ID，并将其设置为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>

这很好用，我也没问题。在serach结果的部分视图中，我正在这样做：

 <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调用成功后的元素，但DIV永远不会打开。我希望它能在线下打开，但事实并非如此。我在这里做错了什么？

Answer 1

这似乎无法实现。但是，我能够将整个模型（包括所有列表）发送到页面，并在每个表行下构建展开/折叠行以显示详细信息。

将DIV动态添加到表中并使用jQuery和部分视图显示

1 个答案: