隐藏基于属性的整个数据列表项

Question

我有一个数据列表，其中填充了数据库中的值。当用户单击一个复选框时，我想遍历所有数据列表项并隐藏所有具有属性 isActive = false 的项目（在文本标签中显示为“已禁用”）。项目模板由 table 组成，其中包含多个其他项目、按钮等，下面未包含这些内容。因此，我想隐藏在特定项目的项目模板下找到的所有元素。

我的想法是通过访问其 ID 隐藏整个 table，然后将 table 的可见属性设置为 false。当我运行代码时，这目前没有做任何事情。任何帮助都会赞赏！

 <asp:CheckBox runat="server" Text="Filter by active postings" OnCheckedChanged="filterByActive"/>
  <asp:DataList ID="postingsDataList" runat="server" OnItemCommand="itemCommand" >   

      <ItemTemplate>  
          <div class="postingRow">
              
      <table class="postingTable" id="posting">    
          
        <tr>  
               <td>     
               <asp:Label ID="lblActive"  runat="server" Text=<%#Eval("isActive").ToString().Equals("True") ? "Active   &#9989" : "Disabled   &#10060"%>/>  
          </td>  
        </tr>        
      </table>  

        </div>
        </ItemTemplate>  
  
    </asp:DataList>

隐藏代码：

 protected void filterByActive (object sender, EventArgs e)
        {
            int count = postingsDataList.Items.Count;
            CheckBox check = (CheckBox)sender;
            if (check.Checked == true)
            {              
                for (int i = 0; i < count; i++)
                {
                    Label lblActive = postingsDataList.Items[i].FindControl("lblActive") as Label;
                    string isActive = lblActive.Text.ToString();
                    if (isActive.Equals("Disabled   &#10060"))
                    {
                        Table tbl = postingsDataList.Items[i].FindControl("posting") as Table;
                        tbl.Visible = false;
                    }   
                }
            }
            else
            {
                for (int i = 0; i < count; i++)
                {
                    Label lblActive = postingsDataList.Items[i].FindControl("lblActive") as Label;
                    string isActive = lblActive.Text.ToString();
                    if (isActive.Equals("Active   &#9989"))
                    {
                        Table tbl = postingsDataList.Items[i].FindControl("posting") as Table;
                        tbl.Visible = true;
                    }
                }
            }
        }
    }

Answer 1

好的，我建议你这样做：

坚持你的 table - 因此你不必再次访问 sql 服务器。（但是，你可以 - 不是世界末日）。

我没有您的数据，但我有一个简单的酒店列表 - 酒店有一个“活跃”列。因此，让我们根据选中的复选框来过滤数据，而不必再次访问数据库服务器。更好的是，如果我们取消选中该框，我们可以显示我们拥有的所有记录。

我们假设这当然不是很多数据。

好的，我们的标记是这样的：

（真的无所谓）

  <asp:DataList ID="DataList1" runat="server" DataKeyField="ID" RepeatColumns="4" RepeatDirection="Horizontal" >
    <ItemTemplate>
      <div style="border-style:solid;color:black;width:300px;">
        <div style="padding:5px;text-align:right">
            <p>Hotel Name: <asp:TextBox ID="HotelName" runat="server" Text ='<%# Eval("HotelName") %>' /></p>
            <p>First Name: <asp:TextBox ID="FirstName" runat="server" Text ='<%# Eval("FirstName") %>' /></p>
            <p>Last Name: <asp:TextBox ID="LastName" runat="server" Text ='<%# Eval("LastName") %>'    /></p>
            <p>City: <asp:TextBox ID="City" runat="server" Text ='<%# Eval("City") %>'  /></p>
            <p>Province: <asp:TextBox ID="Province" runat="server" Text ='<%# Eval("Province") %>'  /></p>
            Active: <asp:CheckBox ID="Active" runat="server" Checked = '<%# Eval("Active") %>'/>
        </div>
    </div>
</ItemTemplate>
</asp:DataList>

现在，我们要加载的代码可能是这样的：

    DataTable rstData = new DataTable();
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            LoadData();
            ViewState["MyData"] = rstData;
        }
        else
            rstData = (DataTable)ViewState["MyData"];
    }

    void LoadData()
    {
        using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
        {
            string strSQL = "SELECT top 10 * from tblHotels ORDER BY HotelName";
            using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
            {
                conn.Open();
                rstData.Load(cmdSQL.ExecuteReader());
                DataList1.DataSource = rstData;
                DataList1.DataBind();
            }
        }
    }

现在我们有了这个：

现在，我们的过滤器 show/hide 变成了这个：

   protected void ckFilter_CheckedChanged(object sender, EventArgs e)
    {
        // filter based on check box

        if (ckFilter.Checked)
            rstData.DefaultView.RowFilter = "Active = 1";
        else
            rstData.DefaultView.RowFilter = "";

        DataList1.DataSource = rstData;
        DataList1.DataBind();
    }

更好的是，如果我取消选中该复选框，所有数据都会重新显示。而且我们不必重新访问数据库来执行此操作！！！

现在，我们也可以只 hide/show 每行，如果出于某种原因您不想像我上面那样保留数据 table，然后取消隐藏。

检查此框过滤器：

如前所述，如果我取消选中该框，那么我将取回所有数据 - 所有这些都无需再次访问数据库。

编辑：=========================================

请注意，如果您不使用上面的横跨，而是使用向下的行？

那么您也可以将行格式化为 hide/show，并且您不必保留数据 table。

您可以通过以下方式应用格式：

    protected void ckFilter_CheckedChanged(object sender, EventArgs e)
    {
        foreach (DataListItem gRow in DataList1.Items)
        {
            // get checkbox
            CheckBox ckActive = (CheckBox)gRow.FindControl("Active");
            // get div
            HtmlGenericControl Myiv = (HtmlGenericControl)gRow.FindControl("myrow");       
            string MyFormat = "normal";
            if (ckFilter2.Checked)
            {
                // only show active ones
                if (ckActive.Checked)
                    MyFormat = "normal";
                else
                    MyFormat = "none";
            }
            Myiv.Style["display"] = MyFormat;
        }
    }

所以上面的确实工作正常。但限制是你不能像我的原始屏幕截图那样拥有一组水平的跨数据项（它实际上仍然有效，但实际上用空白 space 隐藏了每个面板）。

因此，如果您如前所述使用垂直布局（看起来就是这样）。

注意上面的内容，我在“div”中添加了一个简单的 ID，并像这样运行服务器：

<ItemTemplate>
 <div id="myrow" runat="server" 
   style="border-style:solid;color:black;width:300px;">

然后跳过我的第一个例子。您可以循环数据列表行，隐藏或取消隐藏。更令人惊奇的是，如果您取消隐藏 - 那么所有行都会重新出现并保持正确。

我已经提取了一个工作示例 - 但我试图弄清楚为什么我必须保留数据 - 原因是跨设置的“水平尾”。

但是，如上所示，没有真正需要持久化数据源 table - 您可以处理数据列表行，并且 hide/show 每个条件，并且您可以在没有数据重新绑定。

隐藏基于属性的整个数据列表项

Hide entire datalist item based on a property

html

c#

database

asp.net

webforms

隐藏基于 属性 的整个数据列表项

Hide entire datalist item based on a property

html

c#

database

asp.net

webforms

隐藏基于属性的整个数据列表项