为什么单选按钮没有传递 asp 控件的 clientID

Question

IDE：对比 2012

设计师代码
场景 1：使用 runat="server"（这是必需的），javascript 函数不起作用

<asp:TextBox ID="txtCost" runat="server"  ReadOnly="true" Text="250/-"></asp:TextBox>  


 <input type="radio"  name="myRadios" runat="server"  id="rb1" checked="true" onchange="javascript:UpdateClick(this,'<%=txtCost.ClientID %>');" value="1" /> Monthly
        <input type="radio"  name="myRadios" runat="server"  id="rb2" value="2" onchange="javascript:UpdateClick(this,'<%=txtCost.ClientID%>');" /> Weekly

场景 2：runat="server" 已删除（这是必需的），javascript 功能正常。

<asp:TextBox ID="txtCost" runat="server"  ReadOnly="true" Text="250/-"></asp:TextBox>  


 <input type="radio"  name="myRadios"   id="rb1" checked="true" onchange="javascript:UpdateClick(this,'<%=txtCost.ClientID %>');" value="1" /> Monthly
        <input type="radio"  name="myRadios"   id="rb2" value="2" onchange="javascript:UpdateClick(this,'<%=txtCost.ClientID%>');" /> Weekly

Javascript 函数：

function UpdateClick(myRadio, ClientID) {

        currentValue = myRadio.value;
        if (currentValue == '1') {
            var txtCostBox = document.getElementById(ClientID);
            txtCostBox.value = '250/-';
        }
        else {
            var txtCostBox = document.getElementById(ClientID);
            txtCostBox.value = '600/-';

        }
        return false;
    }

问题：

因此，当我在单选按钮中删除 runat="server" 时，代码可以正常工作，而当我保留 runat="server" 时，我得到的不是实际的客户端 ID，而是客户端 ID :

'<%=txtCost.ClientID%>'

我有一个要求，我需要用 runat="server" 保留单选按钮，你能告诉我如何解决上述问题吗？

Answer 1

runat server表示runat server，javascript是client side。如果您使用 asp 控件，则需要运行服务器。当您使用 HTML 类型的输入时，radio runat 服务器不起作用。

选择：

<asp:RadioButtonList ID="id" runat="server">
    <asp:ListItem Selected="True" Value="0">Item 1</asp:ListItem>
    <asp:ListItem Value="1">Item 2</asp:ListItem>
</asp:RadioButtonList>

Answer 2

您可以将 onclick 放在代码后面的 Page_Load 中。

rb1.Attributes["onclick"] = "javascript:UpdateClick(this,'" + txtCost.ClientID + "')";
rb2.Attributes["onclick"] = "javascript:UpdateClick(this,'" + txtCost.ClientID + "');"

此外，尝试将 "<%=txtCost.ClientID %>" 更改为："<%# txtCost.ClientID %>"。

还有其他一些方法可以做到这一点。您还可以更改代码：

function UpdateClick(myRadio) {

   var textObj = document.getElemmentById("<%# txtCost.ClientID %>");
   ...
}

Answer 3

将单选按钮中的 onchange 调用更改为如下所示

 <input type="radio"  name="myRadios" runat="server"  id="rb1" checked="true" onchange="javascript:UpdateClick(this);" value="1" /> Monthly
    <input type="radio"  name="myRadios" runat="server"  id="rb2" value="2" onchange="javascript:UpdateClick(this);" /> Weekly

和您的 javascript 功能

function UpdateClick(myRadio) {
        currentValue = myRadio.value;
        if (currentValue == '1') {
            $('#<%=txtCost.ClientID%>').val('250/-');
        }
        else {
            $('#<%=txtCost.ClientID%>').val('600/-');

        }
        return false;
    }

Answer 4

如果您在用户控件上或在使用母版页的页面中显示此文本框，这就是您无法通过 runat=server 获取 ID 的原因。

将文本框的客户端 ID 模式更改为静态。

<asp:TextBox ID="txtCost" runat="server" ClientIDMode="Static"  ReadOnly="true" Text="250/-"></asp:TextBox>

如果没有 Static，ID 类似于 textCost$1000blabla...

如果您想要动态 ID 与静态 ID，请从服务器端生成 javascript（使用 C# txtCost.GetClientID()），您将拥有完整的客户端 ID。

为什么单选按钮没有传递 asp 控件的 clientID

why radio button not passing clientID of asp control

javascript

c#

asp.net

jquery

webforms