javascript 和 asp.net 网络用户控件

Question

我有一个 Web 用户控件，可以在客户端上生成以下 html。

我想使用 JavaScript 引用特定的 RadioButton 控件。

我不确定如何执行此操作，因为 RadioButton ID 是由 asp.net 生成的。

例如我给 RadioButton ID = 1_RadioButton

asp.net 生成一个 ID = ctl00_ContentPlaceHolder1_Material_1_RadioButton

这个 javascript 代码如何找到单选按钮控件？

    <script type="text/javascript">
        $(document).ready(function() {
            if (document.getElementById("1_RadioButton").checked) {
                $("#1_other").hide();
            }
        });    
    </script>

下面是asp.net为客户端生成的。

    <input id="ctl00_ContentPlaceHolder1_Material_1_RadioButton" type="radio" name="ctl00$ContentPlaceHolder1$Material$Academic" value="1_RadioButton" onclick="javascript:$('#1_other').show('fast');" />

    <label for="ctl00_ContentPlaceHolder1_Material_1_RadioButton">Yes</label>

    <input id="ctl00_ContentPlaceHolder1_Material_2_RadioButton" type="radio" name="ctl00$ContentPlaceHolder1$Material$Academic" value="2_RadioButton" checked="checked" onclick="javascript:$('#1_other').hide('fast');" />

    <label for="ctl00_ContentPlaceHolder1_Material_2_RadioButton">No</label>

    <input id="ctl00_ContentPlaceHolder1_Material_3_RadioButton" type="radio" name="ctl00$ContentPlaceHolder1$Material$Academic" value="3_RadioButton" onclick="javascript:$('#1_other').hide('fast');" />

    <label for="ctl00_ContentPlaceHolder1_Material_3_RadioButton">Uncertain</label>

    <div id='1_other'>
         <input name="ctl00$ContentPlaceHolder1$Material$4_TextBox" type="text" value="bbb chabng" id="ctl00_ContentPlaceHolder1_Material_4_TextBox" />
   </div>

Answer 1

如果该代码在 .aspx 文件中，请使用 代替它，ASP.NET 呈现引擎会为您正确呈现 ID。

更新：例如：

<script type="text/javascript">
    $(document).ready(function() {
        if ($get("<%= MyRadioButton.ClientID %>").checked) {
            $("#1_other").hide();
        }
    });    
</script>

Answer 2

var radioButton = document.getElementById("<%= 1_RadioButton.ClientID %>");

然后从那里出发。注意 - 我对引号不肯定。

Answer 3

我写过blog post on how to do this：

假设你有一个标签控件 你的页面：

生成的 html 输出和 该控件的 ID 可能看起来像 这个：

<span id="ctl00_ContentPlaceHolder1_Label1"></span>

不幸的是生成的ID ct100_ContentPlaceHolder1_Label1 不是 从构建开始总是一样的 建造。所以尝试选择它 这个：

$("#ct100_ContentPlaceHolder1_Label1").hide();

最终会破裂，但不会 隐藏标签控件。

诀窍是在内部使用 ASP.NET jQuery 选择器。 Label1.ClientID 将 每次返回生成的 ID。我们 将 ASP.NET 和 jQuery 合二为一 像这样的行：

$("#<%= Label1.ClientID %>").hide();

这将获得生成的 ID 每次标签控制。

Answer 4

非常简单，只需将 Web 控件的 clientidmode 设置为静态 (clientidmode="static")，您就可以确定 asp.net 将保留您在设计器 UI 中看到的 ID。