13. vs2010 ClientID bug处理

在VS2010中的产生ClientID有几种方式,每个控件或页面有个ClientIDMode属性,可以用来决定产生ClientID的方式,它有AutoIDStaticInheritPredictable,具体区别请在网上查找。默认为AutoID.

但在VS2010中产生的ClientID是有bug.即产生的ClientID和客户端产生的HTML的ID是不一样的,因此在用js或jQuery的函数中要调用指定ID的元素时系统提示不存在此元素。

处理思路:

    由于每个元素产生的ClientID是唯一的,我们可以给要用到的元素设定一个或多个属性,这此属性也是唯一的,这样可以在js中用这些属性来找到此元素并操作它。

示例:

     1.在页面中有三个输入框,单价、数量、总金额,当离开单价框或数量框时,会自动在总金额中显示单价*数量的值。因此我们可以建立数据表:id(自增),price(单价),count(数量),Amount(金额).

     2.由于要在新增是就应该建立元素的属性,因此用listview 的ItemCreated事件,在这里面注册每个元素属性,并注册它们的事件。

     3.html源码:

   

<%@ Page Language="C#"  AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ClientIDBug.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/jquery-1.10.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function onamount(priceid, countid, amountid) {
            var price = $("input[myid=" + priceid + "]").val();
            var count = $("input[myid=" + countid + "]").val();
            var iprice = parseFloat(price);
            var icount = parseInt(count, 10);
            if (!isNaN(iprice) & !isNaN(count)) {
                $("input[myid=" + amountid + "]").val(iprice * icount);
            }

       };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
            DeleteMethod="Delete" InsertMethod="Insert" 
            OldValuesParameterFormatString="original_{0}" SelectMethod="GetData" 
            TypeName="ClientIDBug.DAL.DataSetPriceTableAdapters.T_PriceTableAdapter" 
            UpdateMethod="Update">
            <DeleteParameters>
                <asp:Parameter Name="Original_id" Type="Int32" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="price" Type="Decimal" />
                <asp:Parameter Name="count" Type="Int32" />
                <asp:Parameter Name="amount" Type="Decimal" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="price" Type="Decimal" />
                <asp:Parameter Name="count" Type="Int32" />
                <asp:Parameter Name="amount" Type="Decimal" />
                <asp:Parameter Name="Original_id" Type="Int32" />
            </UpdateParameters>
        </asp:ObjectDataSource>
        <asp:ListView ID="ListView1" runat="server" DataKeyNames="id" 
            DataSourceID="ObjectDataSource1" InsertItemPosition="LastItem" 
            onitemcreated="ListView1_ItemCreated" onitemdatabound="ListView1_ItemDataBound">
           
           
            <EmptyDataTemplate>
                <table runat="server" style="">
                    <tr>
                        <td>
                            未返回数据。</td>
                    </tr>
                </table>
            </EmptyDataTemplate>
            <InsertItemTemplate>
                <tr style="">
                    <td>
                        <asp:Button ID="InsertButton" runat="server" CommandName="Insert" Text="插入" />
                        <asp:Button ID="CancelButton" runat="server" CommandName="Cancel" Text="清除" />
                    </td>
                    <td>
                        &nbsp;</td>
                    <td>
                        <asp:TextBox ID="priceTextBox" runat="server" Text='<%# Bind("price") %>' />
                    </td>
                    <td>
                        <asp:TextBox ID="countTextBox" runat="server" Text='<%# Bind("count") %>' />
                    </td>
                    <td>
                        <asp:TextBox ID="amountTextBox" runat="server" Text='<%# Bind("amount") %>' />
                    </td>
                </tr>
            </InsertItemTemplate>
            <ItemTemplate>
                <tr style="">
                    <td>
                        <asp:Button ID="DeleteButton" runat="server" CommandName="Delete" Text="删除" />
                    </td>
                    <td>
                        <asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>' />
                    </td>
                    <td>
                        <asp:Label ID="priceLabel" runat="server" Text='<%# Eval("price") %>' />
                    </td>
                    <td>
                        <asp:Label ID="countLabel" runat="server" Text='<%# Eval("count") %>' />
                    </td>
                    <td>
                        <asp:Label ID="amountLabel" runat="server" Text='<%# Eval("amount") %>' />
                    </td>
                </tr>
            </ItemTemplate>
            <LayoutTemplate>
                <table runat="server">
                    <tr runat="server">
                        <td runat="server">
                            <table ID="itemPlaceholderContainer" runat="server" border="0" style="">
                                <tr runat="server" style="">
                                    <th runat="server">
                                    </th>
                                    <th runat="server">
                                        id</th>
                                    <th runat="server">
                                        price</th>
                                    <th runat="server">
                                        count</th>
                                    <th runat="server">
                                        amount</th>
                                </tr>
                                <tr ID="itemPlaceholder" runat="server">
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr runat="server">
                        <td runat="server" style="">
                        </td>
                    </tr>
                </table>
            </LayoutTemplate>
           
        </asp:ListView>
    
    </div>
    </form>
</body>
</html>

  4. ListView的ItemCreate源码

   

  protected void ListView1_ItemCreated(object sender, ListViewItemEventArgs e)
        {
            if (e.Item.ItemType == ListViewItemType.InsertItem)
            {
                TextBox priceTextBox = (TextBox)e.Item.FindControl("priceTextBox");
                TextBox countTextBox = (TextBox)e.Item.FindControl("countTextBox");
                TextBox amountTextBox = (TextBox)e.Item.FindControl("amountTextBox");

                priceTextBox.Attributes["myid"] = priceTextBox.ClientID;
                countTextBox.Attributes["myid"] = countTextBox.ClientID;
                amountTextBox.Attributes["myid"] = amountTextBox.ClientID;

                string amountfun=string.Format("onamount('{0}','{1}','{2}')",priceTextBox.ClientID,countTextBox.ClientID,amountTextBox.ClientID);

                priceTextBox.Attributes["onblur"] = amountfun;
                countTextBox.Attributes["onblur"] = amountfun;
            }
        }

  

原文地址:https://www.cnblogs.com/yagzh2000/p/3171069.html