javascript - 如何在 asp.net 用户控件中调整子列表框的高度

Question

给定以下用户控件标记:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="SearchItem.ascx.cs" Inherits="MyWeb.controls.SearchItem" %>

<div id="container" runat="server" style="height: 100%; width: 100%;">
    <div>
        <asp:Label ID="lblSearch" runat="server" Text="Search:"></asp:Label>
        <br />
        <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
        <input id="btnSearch" type="button" value="Search" onclick="SearchClick(this)" />
</div>
<div>
    <asp:Label ID="lblItems" runat="server" Text="Available Items:"></asp:Label>
</div>
<div id="itemContents" runat="server" style="min-height: 50%; width: 100%;border: 1px solid black;">
    <asp:ListBox ID="lbxResults" runat="server" SelectionMode="Single" Width="100%" AutoPostBack="True"></asp:ListBox>
</div>

我希望用户控件的高度等于占位符高度，列表框可​​以增长并填充任何高度差异，因为所有其他控件的大小都是已知的。 一些有用的信息:

• 高度可以有以下值:300、400、600 px，因此需要 用于列表框高度以补偿任何高度差异。

• 列表框可以包含 0 到 2000 个元素。

• 占位符可以是 div 或 asp.net 选项卡容器。

出于测试目的，我做了:

1. 创建一个新的用户控件，例如。搜索项.ascx

2. 创建一个默认的 aspx 页面例如:

a) 添加用户控件 //<%@ Register TagPrefix="uc"TagName="SearchItem"Src="~/Controls/SearchItem.ascx"%>

b) 添加到正文

    <form id="form1" runat="server">
<div id="ChangeMyHeight" style="height: 300px; width: 30%; float: left;">
    <uc:SearchItem ID="AvailableItems" runat="server">
    </uc:SearchItem>
</div>
</form>

现在，如果将容器 div 的高度更改为 500、600.(ChangeMyHeight)，您将拥有:

当前行为:

• 列表框未正确调整大小。 (填补高度差)

预期行为:

• 列表框正在正确调整大小并填充高度差。 (如Winforms中的对接)

我的偏好是 css/jquery 解决方案，但后面的代码也可以(我正在考虑使用高度属性来设置子控件)

注意事项:

1. 为了简洁起见，示例标记使用样式。
2. 样本标记硬编码了一些用于演示目的的值(因此 该演示适用于 300 像素的高度，但不适用于其他值)， 根据需要随意更改样式/html。
3. 环境:VS2010/.NET 4.0/jQuery 最新版本。
4. 浏览器:FF、IE7/8/9

Answer 1

--------默认

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="PlayGround.Default" %>

<script type="text/javascript">


    function changeHeight() {

        document.getElementById('ChangeMyHeight').style.height = Math.ceil(Math.random() * 1000) + 'px';
    }
</script>

<form id="form1" runat="server">


    <input id="Button1" type="button" value="Change Height" onclick="changeHeight()" />

<div id="ChangeMyHeight" style="height: 300px; width: 30%; float: left;border:1px solid red;">

    <uc1:SearchItem runat="server" ID="SearchItem" />

</div>
</form>

------控制

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SearchItem.ascx.cs" Inherits="PlayGround.SearchItem" %>
<asp:ListBox ID="ListBox1" ClientIDMode="Static" runat="server" style="height:100%"></asp:ListBox>

------控制背后

 protected void Page_Load(object sender, EventArgs e)
    {
        var cnt = 1999;

        for (int i = 0; i < cnt; i++)
        {
            this.ListBox1.Items.Add(Path.GetRandomFileName());
        }
    }