如何停止页面刷新每次复选框是单击

Question

好吧，尽可能简单，我有一个checkboxlist设置为true和OnSelectedIndexChanged的autopostback。但是，每次有人点击复选框中的项目时，页面都会刷新。我该如何阻止？我试过使用UpdatedPanel（这是一种工作）。

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

OnselectedIndexChange显示一个复选框旁边的其他复选框的div。

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

你似乎很喜欢经典的.NET回发的工作流程，而不是继续向下的欲盖弥彰回传，即使你想他们，因为它使逻辑更简单的web表单路径，为什么不只是尽量回避它只是这一次？正如你所说，如果你想防止页面刷新（又名回发），那么你可以做一些事情来完全防止页面刷新。

在你的页面的顶部：

<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> 

编辑：那么，在你的控制，删除这些属性：OnSelectedIndexChanged="Regions_SelectedIndexChanged" AutoPostBack="true"

我没有在你的回发修改select变量添加代码方法，但也可以通过隐藏的输入字段在js中完成。

或者，你的更新面板不工作的原因是因为你有

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"); 
}