ASP.NET controls code behind is not executing

Question

I'm displaying JQuery Modal Window in ASP.NET . I'm using the modal windows as registration form. I'm using .NET controls such as checkbox and buttons . However, the issue I'm running into is that even though I have codebehind for both controls, it never reaches the code behind. For example, I have a Check All checkbox called checkAll . In the code behind I have the following code to check all:

protected void checkAll_CheckedChanged(object sender, EventArgs e)
    {
        if (checkAll.Checked == true)
        {
            foreach (ListItem li in cbList.Items)
            {
                li.Selected = true;
            }
        }
        else
        {
            foreach (ListItem li in cbList.Items)
            {
                li.Selected = false;
            }
        }
    }

However, when I debug and put stop in the first if statement it never comes there.

Also, in the addNewUser_Click event of the button I would like to load the checkboxList which I now do in Page_Load . However, when I put the same code in the code behind of a button it never loads.

Here's the aspx code:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master"  AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TAP._Default" %>
<%@ Register Assembly="Trirand.Web" Namespace="Trirand.Web.UI.WebControls"   TagPrefix="cc1" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
 <header>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
 <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
       $("[id*=addNewUser]").live("click", function () {
    $("#adduser").dialog({
        title: "Add User",
        resizable: false,
        buttons: {
            Save: function () {
                $(this).dialog('save');
            },
            Cancel: function () {
                $(this).dialog('close');
            }
        }
    });
    return false;
});
</script>
</header>
<br />
 <asp:Label ID="lblNoRole" runat="server" Text="No role has been assigned yet." Visible="False" CssClass="alert-link"></asp:Label>
<div id="clientManager" runat="server">
 <div class="text">Clients: <asp:DropDownList ID="ddclients" runat="server" BackColor="#F6F1DB" ForeColor="#7d6754" CssClass="ddl" Height="30px"></asp:DropDownList> <asp:Button ID="addNewUser" runat="server" Text="Add user" CssClass="btn-danger" Height="25px" Width="98px" OnClick="addNewUser_Click" />
     <div id="adduser" style="display: none">
     First Name:
         <asp:TextBox ID="firstName" runat="server"></asp:TextBox><br />
     Last Name:
         <asp:TextBox ID="lastName" runat="server"></asp:TextBox><br />
     Email address:
         <asp:TextBox ID="email" runat="server" TextMode="Email">  </asp:TextBox><br />
Phone Number:
         <asp:TextBox ID="phone" runat="server" TextMode="Phone"></asp:TextBox>
Password:
         <asp:TextBox ID="pwd" runat="server" TextMode="Password"></asp:TextBox><br />
Confirm password:
         <asp:TextBox ID="pwd2" runat="server" TextMode="Password"></asp:TextBox><br />
Client(s): Select all <asp:CheckBox ID="checkAll" runat="server" OnCheckedChanged="checkAll_CheckedChanged" /><br /><br />
         <asp:Panel ID="Panel1" runat="server" ScrollBars="Auto" Height="150px"> <asp:CheckBoxList ID="cbList" runat="server" Font-Size="10px" ></asp:CheckBoxList></asp:Panel>

 </div>
 </div>
</div><hr id="h2" runat="server" />
<div id="clientUser" runat="server">
    <div class="text">Client User DIV</div>
</div><hr id="h1" runat="server" />
<div id="administrator" runat="server">
    <div class="text">Administrator DIV</div>
</div>

Please note that the JavaScript function only shows the modal window right now. It doesn't do anything else.

Any suggestions on why I can't get to the code behind of the asp.net controls?

Thanks

Answer 1

The checkbox doesn't automatically cause a postback when the value is changed, therefore your server side code won't be reached. You can make it initiate a postback when the value is changed by setting the AutoPostBack property to true.

However I do not recommend you do this. Think about it, why should you involve the server just to check some checkboxes on the client? Instead, you should use some JavaScript to handle it on the client. jQuery is quite capable of that.

$('#checkAll').change(function(){
    //use jQuery to change the checkbox values here
});

Make sure you sent the ClientIdMode="static" on `checkAll' so that the ID on the client will match the ID on the server.