为什么单选按钮不传递asp控件的clientID答案

【问题标题】：why radio button not passing clientID of asp control为什么单选按钮不传递asp控件的clientID
【发布时间】：2015-12-23 13:02:35
【问题描述】：

IDE：VS 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" 的单选按钮，你能告诉我如何解决上述问题吗？

【问题讨论】：

这没有意义... runat=server 意味着您需要ClientID... 所以您说的似乎是相反的。
你甚至需要通过ClientID 的txtCost 吗？它的 ID 看起来是静态的。此外还不清楚您的 js 是否根本没有运行，或者它只是没有收到ClientID。

标签： javascript c# jquery asp.net webforms

【解决方案1】：

您可以将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 %>");
   ...
}

【讨论】：

rb1.Attributes["onclick"] = "javascript:UpdateClick(this,'" + txtCost.ClientID + "')";，很好的解决方案，成功了，谢谢

【解决方案2】：

runat server 表示 runat 服务器，javascript 是客户端。如果您使用的是 asp 控件，则需要 runat 服务器。当您使用带有无线电 runat 服务器类型的 HTML 输入时不起作用。

替代方案：

<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>

【讨论】：

【解决方案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;
    }

【讨论】：

txtCost.ClientID 需要作为参数传递，因为它们位于用户控件上。并且父页面可以包含该用户控件的多个实例。

【解决方案4】：

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

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

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

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

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

【讨论】：