如何在每次单击复选框时阻止页面刷新

Question

Okay, as simple as possible, I have a checkboxlist that has autopostback set to true and a OnSelectedIndexChanged. However, every time someone clicks a item in the checkbox, the page refreshes. How do I stop this? I've tried using UpdatedPanel(It kind of work).

<asp:CheckBoxList ID="Regions" runat="server" OnSelectedIndexChanged="Regions_SelectedIndexChanged" AutoPostBack="true" DataSourceID="SqlDataSource2" DataTextField="Regions" DataValueField="ID">
                    </asp:CheckBoxList>

The OnselectedIndexChange displays a div of other checkboxes beside the one checkboxlist.

protected void Regions_SelectedIndexChanged(object sender, EventArgs e)
{
    string select = @"Select Facilities from [BulletinBoard].[DMHSAS\290974].[Facilities] ";

    int[] ctr = new int[9];
    int ctr1 = 0;
    int counter = 0;
    dFacilities.Style.Add("display", "block");
    foreach (ListItem item in Regions.Items)
    {
        //Response.Write(item.Selected);
        if (Regions.SelectedIndex == 0)
        {
            item.Selected = true;

            CheckBoxList1.Visible = true;
            counter++;
        }
        else if (item.Selected)
        {
            if (select.EndsWith("[Facilities] "))
            {
                select += "where ";
            }
            if (select.EndsWith(") "))
            {
                select += " or ";
            }
            select += " (Reg_ID = " + Regions.SelectedIndex + ") ";

            ctr[ctr1 + 1] = Regions.SelectedIndex;
            item.Selected = false;
            counter++;
            CheckBoxList1.Visible = true;
        }

        ctr1++;
    }
    if (counter == 0)
    {
        CheckBoxList1.Visible = false;
        dFacilities.Style.Add("display", "none");
    }

    ctr1 = 0;
    bool all = false;
    foreach (int counter1 in ctr)
    {
        Regions.Items[counter1].Selected = true;
        if (Regions.Items[0].Selected == true)
            foreach (ListItem item in Regions.Items)
            {
                if (item.Selected)
                {
                    all = true;
                }
                else
                {
                    all = false;
                    break;
                }
            }
        if (all == false)
        {
            Regions.Items[0].Selected = false;
        }
    }

Answer 1

You seem to really like the classic .NET postback workflow, but rather than continue down the webforms path of trying to hide postbacks, even though you want them because it makes the logic easier, why not just try sidestepping it just this one time? If, as you say, you want to prevent the page refresh (aka the postback) then there are a few things you can do to prevent it entirely.

At the top of your page:

<style type="text/css">
  .hideme
  {
    display: none;
  }
</style>

<script type="text/javascript>
  var checkBoxes = document.getElementById("<%= Regions.ClientID %>")
    .getElementsByTagName("input");

  var cbListIDss = [
    "<%= CheckBoxList1.ClientID %>",
    "etc"
  ];

function toggle(i, chkElement)
{
  if (chkElement.type == "checkbox") {
    if (chkElement.checked) {
      var cbElement = document.getElementById(cbListIDss [i]);
      cbElement.className = cbElement.className.replace("hideme", "");
      break;
    }
  }
}

  for (var i = 0; i < checkBoxes.length; i++) {
    checkBoxes[i].onClick += toggle(i, checkBoxes[i]);
  }
</script>

Edit: Then, in your control, remove these attributes: OnSelectedIndexChanged="Regions_SelectedIndexChanged" AutoPostBack="true"

I didn't add the code for modifying the select variable in your postback method, but that can be done in js as well via a hidden input field.

Alternatively, the reason your update panel is not working is because you have

if (Regions.SelectedIndex == 1)
{
    select += " where Reg_ID = 1";
    dFacilities.Style.Add("display", "block");

// note the number at the end of this variable 
    CheckBoxList1.Style.Add("display", "block");
}
if (Regions.SelectedIndex == 2)
{
    select += "where Reg_ID = 2";
    dFacilities.Style.Add("display", "block");

// note the number at the end of this variable 
//   All of these are adding display to CheckBoxList1, 
//   even though it seems like these should be adding 
//   the display property to CheckBoxList2, 3, etc.
    CheckBoxList1.Style.Add("display", "block");
}