Question

我想在索引视图中使用工具提示，以便我可以在鼠标悬停时显示表格中项目的详细信息。诀窍是我想在tooptip弹出窗口中使用局部视图。

索引视图

<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

当我将鼠标悬停在＆＃34; test1＆＃34;工具提示按照我的意愿响应（它会扩展并显示＆＃34; test10＆＃34;等详细信息），但是，其余条目在鼠标悬停和鼠标移开时不会响应或崩溃。

Answer 1

您应该更改<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(); 
    });
});

在工具提示中加载部分视图

1 个答案: