在Tooltip中加載部分視圖

我想在我的索引視圖中使用工具提示，以便我可以在鼠標懸停時顯示錶格中項目的詳細信息。訣竅是，我想在tooptip彈出窗口中使用局部視圖。在Tooltip中加載部分視圖

索引視圖

<script> 
$(function() { 
    $('#theText').hover(function() { 
     $('#theDetails').show(); 
    }, function() { 
     $('#theDetails').hide(); 
    }); 
}); 
</script> 

@{bool CanView = ViewBag.IsAdmin;} 

@if (CanView == true) 
{ 
<h2>Active Index - Software License (Full Viewer)</h2> 

using (Html.BeginForm("Index", "SoftwareLicense", FormMethod.Get)) 
{ 
     @Html.AntiForgeryToken() 
      <p> 
       <button onclick="location.href='@Url.Action("Create", "SoftwareLicense")';return false;">Create</button> 
       Search Keyword: @Html.TextBox("SearchString", ViewBag.CurrentFilter as string) 
       <button type="submit">Search</button> 
       <button onclick="location.href='@Url.Action("Deleted", "SoftwareLicense")';return false;">View Inactive Software</button> 
      </p> 
} 
<html> 
<body> 
    <table class="table"> 
     <tr> 
      <th> 
       @Html.ActionLink("Software Name", "Index", new { sortOrder = ViewBag.SoftNameSort, currentFilter = ViewBag.CurrentFilter }) 
      </th> 
      <th> 
       @Html.ActionLink("License Type", "Index", new { sortOrder = ViewBag.LicenseType, currentFilter = ViewBag.CurrentFilter }) 
      </th> 
      <th> 
       @Html.ActionLink("End Date", "Index", new { sortOrder = ViewBag.EndDateSort, currentFilter = ViewBag.CurrentFilter }) 
      </th> 
      <th></th> 
     </tr> 

     @foreach (var item in Model) 
     { 


      <tr> 
       <td id="theText"> 
        @Html.DisplayFor(modelItem => item.SoftwareName) 
       </td> 
       <td id="theDetails">@Html.Partial("_PopupDetails", (WBLA.Models.SoftwareLicense)item)</td> 
       <td> 
        @Html.DisplayFor(modelItem => item.LicenseType) 
       </td> 
       <td> 
        @Html.DisplayFor(modelItem => item.EndDate) 
       </td> 
       <td> 
        @Html.ActionLink("Edit", "Edit", new { id = item.SoftwareID }) | 
        @Html.ActionLink("Details", "Details", new { id = item.SoftwareID }) | 
        @Html.ActionLink("Delete", "Delete", new { id = item.SoftwareID }) 
       </td> 
      </tr> 
     } 
    </table> 
    <br /> 
    Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount 

    @Html.PagedListPager(Model, page => Url.Action("Index", 
new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter })) 
</body> 
</html>

管窺

@model WBLA.Models.SoftwareLicense 

<table> 
<tr> 
    <th> 
     @Html.LabelFor(model => model.SoftwareName) 
    </th> 
    <td> 
     @Html.DisplayFor(model => model.SoftwareName) 
    </td> 
</tr> 
<tr> 
    <th> 
     @Html.LabelFor(model => model.SoftwareKey) 
    </th> 
    <td> 
     @Html.DisplayFor(model => model.SoftwareKey) 
    </td> 
</tr> 
<tr> 
    <th> 
     @Html.LabelFor(model => model.Price) 
    </th> 
    <td> 
     @Html.DisplayFor(model => model.Price) 
    </td> 
</tr> 
<tr> 
    <th> 
     @Html.LabelFor(model => model.DepartmentName) 
    </th> 
    <td> 
     @Html.DisplayFor(model => model.DepartmentName) 
    </td> 
</tr> 
<tr> 
    <th> 
     @Html.LabelFor(model => model.LicenseFilePath) 
    </th> 
    <td> 
     @Html.DisplayFor(model => model.LicenseFilePath) 
    </td> 
</tr> 
<tr> 
    <th> 
     @Html.LabelFor(model => model.LicenseType) 
    </th> 
    <td> 
     @Html.DisplayFor(model => model.LicenseType) 
    </td> 
</tr> 
<tr> 
    <th> 
     @Html.LabelFor(model => model.StartDate) 
    </th> 
    <td> 
     @Html.DisplayFor(model => model.StartDate) 
    </td> 
</tr> 
<tr> 
    <th> 
     @Html.LabelFor(model => model.EndDate) 
    </th> 
    <td> 
     @Html.DisplayFor(model => model.EndDate) 
    </td> 
</tr> 
<tr> 
    <th> 
     @Html.LabelFor(model => model.NotifyTime) 
    </th> 
    <td> 
     @Html.DisplayFor(model => model.NotifyTime) 
    </td> 
</tr> 
<tr> 
    <th> 
     @Html.LabelFor(model => model.Email) 
    </th> 
    <td> 
     @Html.DisplayFor(model => model.Email) 
    </td> 
</tr> 
</table>

結果在瀏覽器中

http://i.stack.imgur.com/yNQ0T.png

當我豪ver'over test1'時，工具提示會按我的意願做出響應（它會展開並顯示詳細信息，如「test10」已顯示），但是，其他條目在mouseover和mouseoff時不會響應或摺疊。

來源

2016-07-15 YobWerd

在重複項目上使用ID選擇器不是一個好主意..當您使用jquery id選擇器時，您只會獲得該ID的第一個實例。 '$（'＃theText'）'返回單個元素 – JamieD77

您應該更改您的<td>元素以使用類屬性來標識它們。

<td class="theText"> 
     @Html.DisplayFor(modelItem => item.SoftwareName) 
</td> 
<td class="theDetails">@Html.Partial("_PopupDetails", (WBLA.Models.SoftwareLicense)item)</td>

然後改變您的腳本使用類名稱。

$(function() { 
    $('.theText').hover(function() { 
     $(this).parent().find('.theDetails').show(); 
    }, function() { 
     $(this).parent().find('.theDetails').hide(); 
    }); 
});

來源

2016-07-15 16:10:08 JamieD77

謝謝你的幫助！隨着您的建議添加到我的代碼它正在工作，但是，頁面加載時，所有的工具提示是開放的，顯示所有細節。有沒有辦法解決這個問題？ – YobWerd

@YWWerd你可以設置所有的'.theDetails'到'display：none'的css風格到document.ready'$（'。theDetails'）。hide（）;'或者在你的css文件中或者在你的視圖中'' – JamieD77

非常感謝您的幫助，所有工作都按預期工作！ – YobWerd

在Tooltip中加載部分視圖

回答

相關問題