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

本文关键字：刷新 复选框 单击 | 更新日期: 2023-09-27 18:20:20

好吧，尽可能简单，我有一个复选框列表，它将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;
        }
    }

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

您似乎真的很喜欢经典的.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");
}
相关文章：