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

时间:2014-09-02 20:34:09

标签: c# asp.net checkboxlist page-refresh autopostback

好的,尽可能简单,我有一个将autopostback设置为true的复选框列表和一个OnSelectedIndexChanged。但是,每次有人点击复选框中的项目时,页面都会刷新。我怎么阻止这个?我尝试过使用UpdatedPanel(它有点工作)。

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

OnselectedIndexChange在一个复选框列表旁边显示一些其他复选框。

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

1 个答案:

答案 0 :(得分:0)

你似乎非常喜欢经典的.NET回发工作流程,而不是继续沿着试图隐藏回发的webforms路径,即使你想要它们因为它使逻辑变得更容易,为什么不尝试回避它只是这个时间?如果,正如您所说,您想要阻止页面刷新(也就是回发),那么您可以采取一些措施来完全防止它。

在页面顶部:

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