Как передать связанное значение (элемент управления asp.net) в JQuery - PullRequest
Новая
       21

Как передать связанное значение (элемент управления asp.net) в JQuery

0 голосов
/ 20 января 2012

Позвольте мне объяснить, что я пытаюсь сделать.

У меня есть представление сетки 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.

Пожалуйста, укажите меня вправильное направление.

Ответы [ 2 ]

1 голос
/ 20 января 2012

Если вы хотите создать свою собственную подсказку, вот базовая реализация:

Вы можете создать на вашем <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: 

#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"
        });
    });
});
1 голос
/ 20 января 2012

Вы должны иметь возможность использовать свойство ToolTip элемента управления Label и связать его для отображения ваших данных: 

<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>

Это отображается как свойство "Заголовок" тега <span>, который выводится элементом управления Label.

...