在 MVC3 WebGrid 中的鼠标悬停事件上显示工具提示

Question

我的视图中有一个 MVC3 WebGrid。我想在鼠标悬停在任何行上时显示一个工具提示，显示来自服务器的信息。我已经看过这个链接： Show a tooltip with more info when mousover a MVC3 Razor WebGrid row

我的意思是，我将如何在鼠标悬停事件中获取行的 ID，因为来自服务器的信息将基于行 ID 或计数。此外，在此链接中： http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html 您需要某个 Selector 来显示工具提示。那么如何为 WebGrid 的每一行分配一个类以便显示工具提示？

Answer 1

这就是我的做法。由于默认 WebGrid 的性质有限，您只有几个选项...我需要它来与 IE6 一起使用，但找不到适用于所有浏览器的合适 jQuery 插件，所以我选择了选项 1。警告: 有点脏

1 - 滚动你自己的 HtmlHelper 2 - 使用第三方替代 WebGrid 3 - 使用 jQuery 插件

HtmlHelpers.cs

/// <summary>
/// This class contains various methods for supplementing the usage of html within the Razor view pages
/// </summary>
public static class HtmlHelpers
{
    /// <summary>
    /// This method truncates a string to a given length for display within a WebGrid or elsewhere as a tooltip
    /// </summary>
    /// <param name="helper">Generic parameter needed to recognize HtmlHelper syntax</param>
    /// <param name="input">This is the string to truncate</param>
    /// <param name="length">The length of the string to truncate to</param>
    /// <returns>Html representing a tooltip, if needed</returns>
    public static IHtmlString ToolTip(this HtmlHelper helper, String input, int length)
    {
        if (input.Length <= length)
            return new MvcHtmlString(input);

        else
            return new MvcHtmlString(String.Format("<span title=\"{2}\">{0}{1}</span>", input.Substring(0, length), "...", input));

    }
}

YourView.cshtml

grid.Column(columnName: "Detail", header: "Description", format: @<text>@Html.Truncate((string)item.Detail,50)</text>),