0
マウスオーバーでテーブル内のアイテムの詳細を表示できるように、インデックスビュー内でツールチップを使用したいと思います。トリックは、あまりにも多くのポップアップウィンドウ内で部分的なビューを使いたいということです。ブラウザでツールチップ内でパーシャルビューを読み込む
インデックスビュー
<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
Iホ"test1"以上のツールチップが私の望むように応答します（展開して "test10"のような詳細が表示されます）。しかし、残りのエントリはマウスオーバーやマウスオフで応答したり、崩壊したりしません。
繰り返し項目にIDセレクタを使用することはお勧めできません。jquery idセレクタを使用すると、そのIDの最初のインスタンスのみが取得されます。 '$（ '＃theText'）'は単一の要素を返します – JamieD77