如何将Bound值(asp.net控件）传递给jquery

how to pass Bound value (asp.net control ) to a jquery

本文关键字：控件 jquery net asp Bound      更新时间：2023-09-26

让我解释一下我要做什么。

我有一个asp.net网格视图，其中一个绑定列是一个显示计数的标签字段，比如说100，但在后面的代码中，我已经了解了我是如何获得该值的。所以在悬停在标签上时，我想显示一些东西，比如劳动力=30，材料=50，成本=20

这是我的aspx代码

<asp:TemplateField HeaderText="Total Cost" ItemStyle-HorizontalAlign=Center ItemStyle-VerticalAlign=Middle>
    <ItemTemplate>
        <asp:Label ID="Label2" Text='<%# Eval("TotalCost")%>' runat=server></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

  • 问题1：我能像WPF/silverlight一样覆盖工具提示模板来显示这个信息吗

  • 问题2如果我需要使用jquery在悬停时显示一个小窗口作为工具提示，那么我如何将人工=30、材料=50、成本=20等详细信息传递给jquery

  • 问题3我能在javascript 中做到这一点吗

<asp:Label ID="Label2" Text=MYJavascriptFunction('<%# Eval("TotalCost")%>') runat=server onmouseover ></asp:Label>

即，第一个绑定值将转到我的javascript函数，它将处理一些内容并返回一个将在asp:Label text中使用的文本。

请给我指正确的方向。

您应该能够使用Label控件的ToolTip属性，并将其绑定以显示您的数据：

<asp:label ID="Label2" Text='<%# Eval("TotalCost")%>' ToolTip='<%# String.Format("Labor={0}, Material={1}, Cost={2}", eval("labor"), eval("material"), eval("cost")) %>' runat="server"></asp:Label>

这将呈现为Label控件输出的<span>标记的"Title"属性。

如果您想创建自己的自定义工具提示，这里有一个基本实现：

您可以在<asp:Label>上创建一个名为data-costfactors的属性，该属性可以保存悬停时显示的信息（使用jQuery），并将CssClass="total"属性添加到标签以及

<asp:TemplateField HeaderText="Total Cost" ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle">
    <ItemTemplate>
        <asp:Label ID="Label2" runat="server" 
            CssClass="total" 
            Text='<%# Eval("TotalCost")%>' 
            data-costfactors='<%# Eval("CostFactors") %>' />
    </ItemTemplate>
</asp:TemplateField>

数据源中的CostFactors类似于"人工=30，材料=50，成本=20"

设置你的工具提示html元素如下：

<div id="tooltip"></div>

用一些简单的CSS:设置工具提示div的样式

#tooltip {display:none;position:absolute;border:solid 1px;background:#fff;}

然后使用jQuery，您可以使用data-costfactors属性值设置工具提示，如下所示：

$(function () {
    var $tooltip = $('#tooltip');
    $('.total').hover(function (e) {
        var $this = $(this);
        $tooltip.html($this.data('costfactors')).show();
    }, function () {
        $tooltip.hide();
    }).mousemove(function (e) {
        $tooltip.css({
            top: (e.pageY + 15) + "px",
            left: (e.pageX + 15) + "px"
        });
    });
});
相关文章：