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

Question

I would like to use tooltip within my index view so that I can display details for the items in my table on mouseover. 我想在索引视图中使用工具提示，以便在鼠标悬停时可以在表中显示项目的详细信息。 The trick is that I would like to use a partial view within the tooptip popup window. 诀窍是我想在tooptip弹出窗口中使用局部视图。

Index View 索引检视

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

Partial View 部分视图

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

Results in Browser 浏览器中的结果

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

When I hover over "test1" the tooltip responds as I would like (it expands and shows details like "test10" is displayed), however, the rest of the entries do not respond or collapse on mouseover and mouseoff. 当我将鼠标悬停在“ test1”上时，工具提示会按照我希望的方式进行响应（它会展开并显示类似“ test10”的详细信息），但是，其余条目在mouseover和mouseoff时不会响应或折叠。

Answer 1

You should change your <td> elements to use the class attributes to identify them. 您应该更改您的<td>元素以使用类属性来标识它们。

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

then change your script to work with the class names. 然后更改您的脚本以使用类名。

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-07-15 16:10:08

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-07-15 16:10:08

解决方案1
0 已采纳 2016-07-15 16:10:08