Question

我有一个用户控件，上面有一个RadioButtonList。

<asp:RadioButtonList ID="rblMyOptions" runat="server" RepeatLayout="Flow"
RepeatDirection="Horizontal"  >
    <asp:ListItem Text="Yes" Value="Y" onClick="getCheckedRadio(true);" />
    <asp:ListItem Text="No" Value="N" onClick="getCheckedRadio(false);" />
</asp:RadioButtonList>

正如你所看到的，我最初有一个onClick事件集来激活一个JavaScript函数，这个代码在页面上工作正常，但是由于转移到用户控件，它已经停止调用它。

代码有以下消息：＆＃34;验证（ASP.Net）：属性＆＃39; onClick＆＃39;不是元素＆＃39; ListItem＆＃39;。

的有效属性

无论如何我有一个onClick样式事件会调用我的函数吗？我已经看到一些不断迭代项目然后确定选择了哪些项目的例子，但我有很多这些单选按钮，所以如果可能的话，我宁愿不使用它们。

Answer 1

考虑在您的主表单上放置此JQuery或一些变体。

//On document ready
$(function() {
    $("input[type='radio']").on('click', function(e) {
       getCheckedRadio($(this).attr("name"), $(this).val(), this.checked);
    });
});

//External function to handle all radio selections
function getCheckedRadio(group, item, value) {
    $(".group-label").text(group);
    $(".item-label").text(item);
    $(".item-value").text(value);
}

然后在你的部分：

<asp:RadioButtonList ID="rblMyOptions" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal">
    <asp:ListItem Text="Yes" Value="Y" />
    <asp:ListItem Text="No" Value="N" />
</asp:RadioButtonList>

这应该处理所有单选按钮（或者至少是你用JQuery定位的那些按钮）。

我在这里有一个工作示例（没有.NET代码），演示了原理。

http://jsfiddle.net/xDaevax/UwEN5/

编辑：这基本上就是幕后发生的事情。

我不确定你是如何做到这一点的，所以我将在这里详细介绍一下，如果你已经掌握了其中的一些事情我会道歉。< / p>

当您使用.NET控件（asp：DropDownList，asp：RadioButtonList，asp：ListItem）时，这些都是在将页面发送到浏览器时将生成的服务器端表示。您在.aspx页面中看到的代码不一定是如何将标记发送到浏览器。

例如，以下代码：

<asp:Label ID="_CtlMyLabel" runat="server" Text="Label" />

将在浏览器HTML中呈现为：

<span id="_CtlMyLabel">Label</span>

如果你把它包装在一个小组中：

<asp:Panel ID="_CtlWrapperPanel" runat="server" ClientIDMode="Inherit">
    <asp:Label ID="_CtlMyLabel" runat="server" Text="Label" ClientIDMode="Inherit" />
</asp:Panel>

你会得到：

<div id="_CtlWrapperPanel">
    <span id="_CtlMyLabel">Label</span>
</div>

当谈到RadioButtonList时，以下asp：RadioButtonList：

<asp:RadioButtonList ID="rblMyOptions" runat="server" RepeatLayout="Flow" RepeatDirection="Horizontal">
    <asp:ListItem Text="Yes" Value="Y" />
    <asp:ListItem Text="No" Value="N" />
</asp:RadioButtonList>

将生成：

<span id="rblMyOptions">
    <input id="rblMyOptions_0" type="radio" name="rblMyOptions" value="Y" />
    <label for="rblMyOptions_0">Yes</label>
    <input id="rblMyOptions_1" type="radio" name="rblMyOptions" value="N" />
    <label for="rblMyOptions_1">No</label>
</span>

当你在ListItem上说OnClick时，.NET认为你所指的是你创建的服务器端函数rblMyOptions_Click（它会做回帖），但是既然你想在客户端上发生这种情况，那么策略我建议解决它是使用JQuery绑定到每个单选按钮的click事件，因为＆＃34;单选按钮列表＆＃34;实际上并不存在于HTML中。

您可以查看此问题/答案以获取更多信息： ASP.NET radiobuttonlist onclientclick

通过使用JQuery来定位任何input[type='radio']，我们将javascript绑定到任何单选按钮输入（或者我们也可以限制更多）。

Answer 2

它似乎是一个知道错误

引用此document（转到＆＃34;为什么属性不能应用于列表控件的列表项＆＃34;）

核心应该在此代码中修复错误

    public void RenderItem(System.Web.UI.WebControls.ListItemType itemType, 
                           int repeatIndex, RepeatInfo repeatInfo, 
                           HtmlTextWriter writer)
    {
        controlToRepeat.ID = repeatIndex.ToString(NumberFormatInfo.InvariantInfo);
        controlToRepeat.Text = this.Items[repeatIndex].Text;
        controlToRepeat.TextAlign = this.TextAlign;
        controlToRepeat.Checked = this.Items[repeatIndex].Selected;
        controlToRepeat.Enabled = this.Enabled; 

        controlToRepeat.Attributes.Clear();
        foreach (string key in Items[repeatIndex].Attributes.Keys)
            controlToRepeat.Attributes.Add(key, Items[repeatIndex].Attributes[key]);

        controlToRepeat.RenderControl(writer);

}

RadioButtonList ListItem OnClick事件？

2 个答案: