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

给定以下用户控件标记：

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

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

• 高度可以有以下值：300400600px，因此需要 用于列表框高度，以补偿任何高度差

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

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

出于测试目的，我做了：

创建新的用户控件，例如SearchItem.ascx

创建默认的aspx页面，例如：

a） 添加用户控件 //

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>

现在，如果将container div的高度更改为500600（ChangeMyHeight），您将有：

当前行为：

• Listbox未正确调整大小。（填写高度差）

预期行为：

• Listbox正在正确调整大小并填充高度差。（如Winforms中的停靠）

我的首选是css/jquery解决方案，但代码隐藏也可以（我正在考虑使用height属性来设置子控件）

注:

为了简洁起见，示例标记使用样式

出于演示目的，示例标记硬编码了一些值（因此 演示适用于高度300 px，但不适用于其他值）， 可以根据需要随意更改样式/html

环境：VS2010/.NET4.0/jQuery最新版本

浏览器：FF、IE7/8/9

---------违约

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

函数changehight（）{
document.getElementById（'ChangeMyHeight'）.style.height=Math.ceil（Math.random（）*1000）+'px'；
}

------控制

    <%@ 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());
        }
    }

受保护的无效页面加载（对象发送方，事件参数e）
{
var cnt=1999；
对于（int i=0；i

使用css

选择[属性]{height:400px；}

---

在子列表框id的attribute=unique属性中，答案需要一些Jquery代码根据当前父列表框的高度重新计算内部列表框的高度。将此代码添加到测试页面的标题部分：

<script type='text/javascript'>
//Method to resize when first loaded or resized, added to admin page.
$(function () {
    ResizeHeightControlBasedOnParent('<%= ucSearchUser.ItemContentsId %>');
});

function ResizeHeightControlBasedOnParent(targetId) {
    var obj = $('#' + targetId);
    if (obj.length > 0 && obj.height() > 0) {
        var objParent = obj.parent();
        obj.height(function (index, height) {
            var objParent = $(this).parent();
            if (objParent.height() <= 0)
                return 0;
            return objParent.height() + objParent.offset().top - $(obj[0]).offset().top;
        });
    }
}
//Helper to test it works for diff div heights.Added to helper onclick button
function changeHeight() {
    var newH = 300 + Math.ceil(Math.random() * 300);
    document.getElementById('changeMyHeight').style.height = newH + 'px';
    ResizeHeightControlBasedOnParent('<%= ucSearchUser.ItemContentsId %>');
}

</script>

---

在您的示例中，什么不起作用？您是否也可以发布占位符的标记？因为周围的标记对于您想要实现的目标很重要。您还可以根据生成的代码输出创建一个提琴，并扩展您对该提琴的解释。@LeGEC:因为当我将UC高度从300更改为400等时，列表框的大小不能正确调整，所以列表框要么更小（例如有5个项目），要么更大（例如1000个项目），但不完全在那里，请参阅我编辑的问题，不知何故，问题中缺少了标签、文本框和列表框。（它必须作为两个代码段发布才能可见）。换句话说，调整大小必须考虑用户控件中的标签和文本框高度。如果您有一个EE帐户，您可以在以下位置查看文件：谢谢，但我需要一个动态解决方案，而不是硬编码（px值）

<script type='text/javascript'>
//Method to resize when first loaded or resized, added to admin page.
$(function () {
    ResizeHeightControlBasedOnParent('<%= ucSearchUser.ItemContentsId %>');
});

function ResizeHeightControlBasedOnParent(targetId) {
    var obj = $('#' + targetId);
    if (obj.length > 0 && obj.height() > 0) {
        var objParent = obj.parent();
        obj.height(function (index, height) {
            var objParent = $(this).parent();
            if (objParent.height() <= 0)
                return 0;
            return objParent.height() + objParent.offset().top - $(obj[0]).offset().top;
        });
    }
}
//Helper to test it works for diff div heights.Added to helper onclick button
function changeHeight() {
    var newH = 300 + Math.ceil(Math.random() * 300);
    document.getElementById('changeMyHeight').style.height = newH + 'px';
    ResizeHeightControlBasedOnParent('<%= ucSearchUser.ItemContentsId %>');
}

</script>

public string ItemContentsId
{
    get { return this.itemContents.ClientID; }//Listbox id
}