使用 Javascript 访问 GridView 页脚中的标签控件答案

【问题标题】：Accessing a Label control within a GridView Footer with Javascript使用 Javascript 访问 GridView 页脚中的标签控件
【发布时间】：2016-07-08 14:06:25
【问题描述】：

如何将$mult 值分配给FooterTemplate 中存在的标签lblGrandTotal。

我使用下面的 java 脚本代码将 $mult 值分配给存在于网格视图之外的标签。

JavaScript

<script>
    $(document).ready(function () {
        $(".txtMult input").on('keyup mouseup', multInputs);

        function multInputs() {

            var $mult = 0;
            // calculate Grand total
            $("tr.txtMult").each(function () {
                // get the values from this row:
                var $UnitPrice = $('.UnitPrice', this).val();
                var $Quantity = $('.Quantity', this).val();
                var $Discountvalue = $('.Discount', this).val() / 100;
                var $total = (($UnitPrice) * ($Quantity));
                $mult += $total;

            });

            // for each row:
            $("tr.txtMult").each(function () {
                // get the values from this row:
                var $UnitPrice = $('.UnitPrice', this).val();
                var $Quantity = $('.Quantity', this).val();
                var $Discountvalue = $('.Discount', this).val() / 100;
                var $total = (($UnitPrice) * ($Quantity));
                $('.multTotal', this).text(Math.round($total * 100) / 100);
            });
            $("#<%=Total.ClientID %>").text(Math.round($mult * 100) / 100);
        }
    });
</script>

网格视图

<asp:GridView ID="gridpur" CssClass="table  text-nowrap" ShowFooter="true" runat="server" OnRowDataBound="gridpur_RowDataBound" AutoGenerateColumns="False" DataKeyNames="ItemID" DataSourceID="SqlDataSource1">
    <Columns>
        <asp:TemplateField HeaderText="Quantity">
            <ItemTemplate>
                <asp:TextBox ID="txtCalcQuantity" CssClass="Quantity form-control" runat="server"></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>

        <asp:TemplateField HeaderText="Unit Price">
            <ItemTemplate>
                <asp:TextBox ID="txtCalcUnitprice" Width="120" CssClass="UnitPrice form-control" runat="server"></asp:TextBox>
            </ItemTemplate>

        </asp:TemplateField>

        <asp:TemplateField HeaderText="Amount">
            <ItemTemplate>
                <asp:Label ID="lblTotal" runat="server" CssClass="multTotal" Text="0"></asp:Label>
            </ItemTemplate>
            <FooterTemplate>
                <asp:Label ID="lblGrandTotal" Text="" runat="server" />
            </FooterTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

背后的代码

protected void gridpur_RowDataBound(object sender, GridViewRowEventArgs e)
{
   if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.CssClass = "txtMult";
    }
}

【问题讨论】：

标签： javascript c# jquery asp.net gridview

【解决方案1】：

如果页面上只有一个 ID 为 lblGrandTotal 的控件，则可以将其 ID 模式设置为静态，这将确保这正是最终标记中出现的客户端 ID。这将允许您直接在 js 代码中使用此 ID：

<asp:Label ID="lblGrandTotal" Text="" runat="server" ClientIDMode="Static" />

现在您不再需要任何脚本，只需要文字 ID：

$("lblGrandTotal").text(Math.round($mult * 100) / 100);

同样，只有当您在此页面上有一个具有此 ID 的控件时，才有可能这样做。

另一种解决方案是分配您可以查询的内容。例如，CssClass 将是一种有点标准的方法。

<asp:Label ID="lblGrandTotal" Text="" runat="server" CssClass="grandTotalLabel" />

这个类不需要在你的样式表中定义。同样，只要确保它没有在其他任何地方使用。现在只需查询它：

$(".grandTotalLabel").text(Math.round($mult * 100) / 100);

【讨论】：