如何停止頁面刷新每次複選框是單擊

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