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像素，因此需要对于列表框高度来补偿任何高度差异。
列表框可以包含0到2000个元素。
占位符可以是div或asp.net标签容器。

出于测试目的，我做了：

创建一个新的用户控件，例如。 SearchItem.ascx
创建默认的aspx页面，例如：

a）添加用户控件 //＆lt;％@ Register TagPrefix =“uc”TagName =“SearchItem”Src =“〜/ Controls / SearchItem.ascx”％＆gt;

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解决方案，但后面的代码也可以（我正在考虑使用height属性来设置子控件）

注意：

为简洁起见，示例标记使用样式。
示例标记为演示目的硬编码了一些值（因此该演示适用于高度300 px但不适用于其他值），随时根据需要更改样式/ html。
环境：VS2010 / .NET 4.0 / jQuery最新。
浏览器：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());
        }
    }

Answer 2

使用css select[attribute] { height:400px;}

在此属性中=您的子列表框ID的唯一属性

Answer 3

答案需要一些Jquery代码根据当前父级的高度重新计算内部列表框高度。将此代码添加到测试页的head部分：

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

其中ItemContentsId在后面的用户控制代码中定义如下：

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

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

3 个答案: