在鼠标悬停时显示工具提示内单个项目的详细信息

Question

我正在尝试在我的索引视图中的每个项目的工具提示中显示详细信息。我希望当鼠标悬停在项目名称上时出现工具提示。目前我有一些 javascript 和一个视图来配合它。任何帮助或建议将不胜感激！

详情 Javascript：

$(document).load(function () {
for (var count = 0; count < 10; count++) {
    $(document).tooltip({
        items: "#j" + count,
        content: function () {
            return $("#i" + count).text();
        }
    });
  };
});

索引视图：

 <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>
                <noscript id="i@(count)">@Html.Partial("_SoftwareDetails", (WBLA.Models.SoftwareLicense)item)</noscript>
                <td id="j@(count)">
                    @Html.DisplayFor(modelItem => item.SoftwareName)
                </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>
            count++;
        }
    </table>

** 编辑 **

我忘了提及我想在工具提示中显示的内容。我想加载一个部分，它在我的索引视图中显示每个项目的相关信息。

部分细节视图：

@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.ConsumerEmail)
    </th>
    <td>
        @Html.DisplayFor(model => model.ConsumerEmail)
    </td>
</tr>
<tr>
    <th>
        @Html.LabelFor(model => model.EntryEmail)
    </th>
    <td>
        @Html.DisplayFor(model => model.EntryEmail)
    </td>
</tr>
</table>

* 编辑 2016 年 8 月 3 日 *

工具提示标签的标题显示，但是，我的部分将不会在工具提示中加载。

更新了 SoftwareDetails.js：

$(function () {
    var url = '@Url.RouteUrl(new{ action="SoftwareDetails", controller="SoftwareLicense"})';
    $(document).tooltip({
        items: "td.myToolTips",
        content: function (callback) {
            $.get(url + "?id=" + $(this).data("id"))
             .done(function (r) {
                 callback(r);
             });
        }
    });

});

更新的索引视图：

<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 class="myToolTips" data-id="@item.SoftwareID" title="Loading in a second..">
                    @item.SoftwareName
                </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>
            //count++;
        }
    </table>

更新的软件详情操作：

public ActionResult SoftwareDetails(int id)
    {
        SoftwareLicense temp = db.SoftwareLicenses.Find(id);

        return PartialView("SoftwareDetails", temp);
    }

URL 测试结果（部分）： Partial Test

Answer 1

您不需要在页面加载时呈现所有项目的工具提示部分视图。您可以根据需要获得它。您可以通过进行 ajax 调用并为当前悬停的记录传递一个唯一的 id 来做到这一点。

首先在你的 tr 中为唯一 id 保留一个数据属性。

@foreach (var item in Model)
{
    <tr class="myToolTips" data-id="@item.SoftwareID" title="@item.SoftwareName">
       <td>@item.SoftwareName</td>
    </tr>
}

您可以使用 css 类 myToolTips 为表格行启用工具提示。

$(function () {

    $(document).tooltip({
                         items: "tr.myToolTips",
                         content: function (callback) {
                                    $.get('/Home/SoftwareDetails/' + $(this).data("id"))
                                     .done(function (r) {
                                                 callback(r);
                                     });
                         }
    });

});

假设您有一个名为 SoftwareDetails 的操作方法，它接受 id 并返回部分视图

public ActionResult SoftwareDetails(int id)
{
  return Content("Toolip for "+id);
  // to do : Return the partial view for the markup you want (for the id)
}