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;

            }

        }

 

  

 

你可能感兴趣的:(client)