javascript和asp.net Web用户控件

I have a web user control that generates the following html on the client.

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

I want to reference a specific RadioButton control using JavaScript.

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

I am not sure how to do this as the RadioButton ID is generated by asp.net.

由于asp.net生成的RadioButton ID,我不知道如何做到这一点。

For example I give the RadioButton ID = 1_RadioButton

例如,我给出RadioButton ID = 1_RadioButton

asp.net generates an ID = ctl00_ContentPlaceHolder1_Material_1_RadioButton

asp.net生成一个ID = ctl00_ContentPlaceHolder1_Material_1_RadioButton

how can this javascript code find Radio Button controls?

这个javascript代码怎么能找到Radio Button控件?

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

The following is what asp.net generates for the client.

以下是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>

4 个解决方案

#1

If that code is in the .aspx file use <%= MyRadioButton.ClientID %> in its place and the ASP.NET rendering engine will properly render the ID for you.

如果该代码位于.aspx文件中,则在其位置使用<%= MyRadioButton.ClientID%>,并且ASP.NET呈现引擎将为您正确呈现ID。

Update: For example:

更新:例如:

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

#2

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

And then go from there. Note - I'm not positive about the quotation marks.

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

#3

I had written a blog post on how to do this:

我写了一篇关于如何做到这一点的博客文章:

So say you have a label control on your page:

所以说你的页面上有一个标签控件:

The generated output of the html and the ID of that control might look like this:

生成的html输出和该控件的ID可能如下所示:

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

Unfortunately the generated ID of ct100_ContentPlaceHolder1_Label1 isn't always going to be the same from build to build. So trying to select it like this:

不幸的是,从构建到构建,生成的ct100_ContentPlaceHolder1_Label1的ID并不总是相同。所以试着像这样选择它:

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

will eventually break and it won't hide the label control.

最终会破坏,它不会隐藏标签控件。

The trick is to use ASP.NET inside the jQuery selector. Label1.ClientID will return the generated ID everytime. We combine ASP.NET and jQuery into one line like this:

诀窍是在jQuery选择器中使用ASP.NET。 Label1.ClientID将每次返回生成的ID。我们将ASP.NET和jQuery组合成一行,如下所示:

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

$(“#<%= Label1.ClientID%>”)。hide();

This will get the generated ID of the Label control everytime.

这将每次获得Label控件的生成ID。

#4

Very simple just set the clientidmode of the web control to static (clientidmode="static") and you can be sure that asp.net will keep your ID as seen in the designer UI.

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

#1