I am trying to display the details within a tooltip for each item in my index view. I would like the tooltip to appear when the mouse hovers over an items name. Currently I have some javascript and an view to go along with it. Any help or recommendations would be greatly appreciated!
我试图在索引视图中的每个项目的工具提示中显示详细信息。我想在鼠标悬停在项目名称上时显示工具提示。目前我有一些javascript和一个视图来配合它。任何帮助或建议将不胜感激!
Details Javascript:
$(document).load(function () {
for (var count = 0; count < 10; count++) {
$(document).tooltip({
items: "#j" + count,
content: function () {
return $("#i" + count).text();
}
});
};
});
Index View:
<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>
** EDIT **
**编辑**
I forgot to mention what I would like to show inside the tooltip. I would like to load a partial, which displays the relevant information for each item in my index view.
我忘了提到我想在工具提示中显示的内容。我想加载一个partial,它显示索引视图中每个项目的相关信息。
Partial Details 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.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>
* EDIT 8/03/2016 *
*编辑8/03/2016 *
The title for the tooltip-tagged displays, however, my partial will not load within the tooltip.
但是,工具提示标记显示的标题不会在工具提示中加载。
Updated 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);
});
}
});
});
Updated Index View:
更新的索引视图:
<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>
Updated SoftwareDetails Action:
更新的SoftwareDetails操作:
public ActionResult SoftwareDetails(int id)
{
SoftwareLicense temp = db.SoftwareLicenses.Find(id);
return PartialView("SoftwareDetails", temp);
}
Result from URL Test (For Partial): Partial Test
URL测试(部分)的结果:部分测试
1 个解决方案
#1
0
You do not need to render the tool tip partial view for all items when the page loads. You may get it on as needed basis. You can do this by making an ajax call and passing a unique id for the record user is hovering on currently.
页面加载时,您无需为所有项目呈现工具提示局部视图。您可以根据需要获得它。您可以通过进行ajax调用并为记录用户传递唯一ID来实现此操作。
Start by keeping a data attribute in your tr for the unique id.
首先在tr中保留数据属性以获取唯一ID。
@foreach (var item in Model)
{
<tr class="myToolTips" data-id="@item.SoftwareID" title="@item.SoftwareName">
<td>@item.SoftwareName</td>
</tr>
}
and you can enable tooltip for the table rows with the css class myToolTips.
并且您可以使用css类myToolTips为表行启用工具提示。
$(function () {
$(document).tooltip({
items: "tr.myToolTips",
content: function (callback) {
$.get('/Home/SoftwareDetails/' + $(this).data("id"))
.done(function (r) {
callback(r);
});
}
});
});
Assuming you have an action method called SoftwareDetails which accepts the id and return the partial view
假设您有一个名为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
0
You do not need to render the tool tip partial view for all items when the page loads. You may get it on as needed basis. You can do this by making an ajax call and passing a unique id for the record user is hovering on currently.
页面加载时,您无需为所有项目呈现工具提示局部视图。您可以根据需要获得它。您可以通过进行ajax调用并为记录用户传递唯一ID来实现此操作。
Start by keeping a data attribute in your tr for the unique id.
首先在tr中保留数据属性以获取唯一ID。
@foreach (var item in Model)
{
<tr class="myToolTips" data-id="@item.SoftwareID" title="@item.SoftwareName">
<td>@item.SoftwareName</td>
</tr>
}
and you can enable tooltip for the table rows with the css class myToolTips.
并且您可以使用css类myToolTips为表行启用工具提示。
$(function () {
$(document).tooltip({
items: "tr.myToolTips",
content: function (callback) {
$.get('/Home/SoftwareDetails/' + $(this).data("id"))
.done(function (r) {
callback(r);
});
}
});
});
Assuming you have an action method called SoftwareDetails which accepts the id and return the partial view
假设您有一个名为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)
}