확인란을 클릭 할 때마다 페이지 새로 고치기를 중지하는 방법

Question

가능한 한 간단하게 autopostback이 true로 설정되고 OnSelectedIndexChanged가 설정된 확인란 상자가 있습니다. 그러나 누군가가 체크 박스의 항목을 클릭 할 때마다 페이지가 새로 고침됩니다. 어떻게 그만합니까? 나는 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 포스트 백 워크 플로우와 같은 것이 아니라보다 보이는 이유는 단지 피하는 시도하지 이건 그냥 한 번이야? 만약 당신이 말했듯이, 페이지 새로 고침을 막고 싶다면 (포스트 백이라고도 함), 당신이 그것을 완전히 막기 위해 할 수있는 몇 가지 일이 있습니다. 페이지의 상단에

:

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

편집 : 나는 당신의 포스트 백에 select 변수를 수정하기위한 코드를 추가하지 않은 OnSelectedIndexChanged="Regions_SelectedIndexChanged" AutoPostBack="true"

: 그런 다음, 컨트롤에 이러한 속성을 제거 메서드를 호출 할 수 있지만 숨겨진 입력 필드를 통해 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"); 
}