2012-02-13 94 views
1

我在我的View.I中有一个MVC3 WebGrid,当鼠标悬停在任何行上时显示工具提示,显示来自服务器的信息。我已经看到这个链接: Show a tooltip with more info when mousover a MVC3 Razor WebGrid row显示MVC3中的鼠标悬停事件的工具提示WebGrid

我的观点是,我将如何获得该行在鼠标悬停事件的ID,因为来自服务器的信息将基于行ID或可能计数。此外,在此链接中: http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html 您需要某个选择器来显示工具提示。我如何为WebGrid的每一行分配一个类,以便我可以显示工具提示?

回答

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>), 
+0

谢谢,我之前做过。虽然我刚刚构建了自己的简单HTML表格,通过Jquery捕获了mouseover事件,并在Ajax调用的帮助下获得了数据。然后我把数据放入一个jQuery工具提示插件 – 2012-05-29 07:47:51

相关问题