在VS2010中的产生ClientID有几种方式,每个控件或页面有个ClientIDMode属性,可以用来决定产生ClientID的方式,它有AutoID,Static,Inherit,Predictable,具体区别请在网上查找。默认为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> </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; } }