Using the ConwayControls RadioButton - Scenario 1

Scenario

Upon a simple asp:Button click event (postback), capture the CheckChanged event of the RadioButton
Radio Button Files - Scenario 1

ASP.NET - RadioButtonSpike1.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadioButtonSpike1.aspx.cs" Inherits="RadioButtonSpike1" %>

<%@ Register Assembly="ConwayControls" Namespace="ConwayControls.Web" TagPrefix="ccwc" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Radio Button Spike - Scenario 1</title>
        <style type="text/css" media="all">
            div {padding-top: 10px;}
            h3 {display: inline;}
        </style>
    </head>
    <body>
        <form id="RadioButtonSpikeForm" runat="server">
            <div>
                <asp:GridView ID="SurveyGrid" runat="server" AutoGenerateColumns="False">
                    <Columns>
                        <asp:TemplateField HeaderText="Language">
                            <ItemTemplate>
                                <asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Favorite">
                            <ItemTemplate>
                                <ccwc:RadioButton ID="FavoriteButton" runat="server" GroupName="FavoriteGroup" 
                                    OnCheckChanged="FavoriteButton_CheckChanged" Value='<%# Eval("Name") %>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
                
                <div>
                    <asp:Button ID="ForPostBackButton" runat="server" OnClick="ForPostBackButton_Click" Text="for post back" />
                </div>
                
                <div>
                    <asp:Label ID="ResultsLabel" runat="server"></asp:Label>
                </div>
            </div>
        </form>
    </body>
</html>

C# (code behind) - RadioButtonSpike1.aspx.cs

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections.Generic;
using CCW = ConwayControls.Web;

public partial class RadioButtonSpike1 : Page {
    protected override void OnLoad(EventArgs e) {
        base.OnLoad(e);

        if (this.IsPostBack) return;

        this.BindGrid();
    }

    protected void BindGrid() {
        List<SurveyItem> items = new List<SurveyItem>();

        items.Add(new SurveyItem(1, "C#"));
        items.Add(new SurveyItem(2, "VB"));
        items.Add(new SurveyItem(3, "Perl"));
        items.Add(new SurveyItem(4, "Java"));
        items.Add(new SurveyItem(5, "Ruby"));

        this.SurveyGrid.DataSource = items;
        this.SurveyGrid.DataBind();
    }

    protected void ForPostBackButton_Click(object sender, EventArgs e) {
        //do nothing...just needed the postback
    }

    protected void FavoriteButton_CheckChanged(object sender, EventArgs e) {
        CCW.RadioButton radioButton = sender as CCW.RadioButton;

        if (radioButton != null && radioButton.Checked) {
            this.ResultsLabel.Text = string.Format("your favorite language is: <h3>{0}</h3>", radioButton.Value);
        }
    }
}

public class SurveyItem {
    public SurveyItem(int id, string name) {
        this.id = id;
        this.name = name;
    }

    public int Id {
        get { return this.id; }
        set { this.id = value; }
    }    private int id;

    public string Name {
        get { return this.name; }
        set { this.name = value; }
    }    private string name;

}

 

Now keep in mind that in this scenario and implementation, the CheckChanged event will fire if the RadioButton changes from being checked or unchecked on any postback.  That means that if your grid has paging or a different unrelated button that posts, you are not going to want to ignore this event when it happens. 

You will still use this implementation for grids that page or unrelated postbacks; you will just need to keep track of changes by using some sort of state mechanism.  The other ways to use the RadioButton are:

  • enable AutoPostBack
  • iterate over all the rows in the grid (sledge hammer approach)

I will demonstrate these other scenarios, including a grid with paging, in posts to follow.

Please let me know if you have any questions with this particular scenario.

Thanks,

Jason Conway

1 Comment

  • Much needed control, great work, thanks.

    However im experiencing difficulties using this within an update panel - a javascript execption throws im guessing because the javascript function SelectConwayRadioButton isnt in the same scope of the page, not 100% sure.
    If this is the issue perhaps registering scriptblocks may resolve - have you had any similar issues?

    Thanks

Comments have been disabled for this content.