Bài viết này sẽ hướng dẫn bạn cách thêm nhiều sự kiện onClick vào các điều khiển RadioButtonList trong ASP.NET một cách nhanh và dễ dàng nhất.

• Demo
• Phóng to
• Tải lại
• Cửa sổ mới

I've been fighting to add javascript code to the onclick event of ASP.NET RadioButtonList controls for the last hour, and given the frustration it caused me, I am writing the solution up for future reference. The real world code I am writing is far more complex than this example, but hopefully this illustrates enough to act as a primer, and to jog my own memory in future.

It's actually quite simple. For the example, I'm going to make a RadioButtonList make a Textbox dynamically appear and disappear.

The ASP.NET RadioButton List Control

Here's how the RadioButtonList might look...

<asp:RadioButtonList ID="rblFoo" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal">
  <asp:ListItem Text="Show" Value="show" />
  <asp:ListItem Text="Hide" Value="hide" />
</asp:RadioButtonList>
<asp:TextBox ID="tbFoo" runat="server"></asp:TextBox>

The Javascript Function

Here's a javascript function that we are going to attach to the onclick event of each radio button (you would typically put this in a javascript file, and reference it via a SCRIPT tag in your ASPX page)

function fooClick(option_value,tb_id){
  var textbox_object = document.getElementById(tb_id);
  if (option_value == 'show'){
    textbox_object.style.display = 'block';
  } else {
    textbox_object.style.display = 'none';
  }
}

Attaching the Javascript to the OnClick event of the ASP.NET RadioButtonList Options

In the OnLoad() event of your page, do the following;

foreach(ListItem li in rblFoo.Items){
  li.Attributes.Add("onclick","fooClick('" + li.Value + "','" + tbFoo.ClientID + "');");
}

The important point to realise is that ASP.NET Server controls typically get assigned their ID and Name dynamically at runtime. The last part of this solution solves that by attaching the javascript to the objects on the server side, where it knows the ClientID it has already generated for the control we want to interact with.

• Mã nguồn
• In

• Lời bình (0)
• Viết

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Lời bình của khách sẽ được xem xét
Cung cấp email thật để nhận các trả lời, nếu không bình luận của bạn sẽ bị xóa

Tên bạn *
Email của bạn^g *
Website của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

• Lượt gửi (0)
• Mới