2

给定以下用户控件标记：

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

笔记：

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

3 回答 3

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());
        }
    }
于 2013-04-13T03:40:21.950 回答
0

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

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

于 2013-04-18T09:37:51.943 回答
0

答案需要一些 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
}
于 2013-05-31T07:01:52.817 回答