在鼠标悬停的工具提示中显示单个项目的详细信息
本文关键字:单个 项目 详细信息 显示 工具提示 鼠标 悬停 | 更新日期: 2023-09-27 18:00:03
我正试图在索引视图中的每个项的工具提示中显示详细信息。我希望鼠标悬停在项目名称上时显示工具提示。目前我有一些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年3月8日编辑*
标记的工具提示的标题将显示,但是,我的部分不会加载到工具提示中。
更新的软件Details.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测试结果(部分):部分测试
加载页面时,不需要为所有项目呈现工具提示部分视图。你可以根据需要得到它。您可以通过进行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)
}