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>

**编辑**

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

部分详情查看：

@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>

*编辑8/03/2016 *

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

更新了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>

更新了SoftwareDetails行动：

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

        return PartialView("SoftwareDetails", temp);
    }

来自网址测试的结果（适用于部分）： 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)
}

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

1 个答案: