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. 新しいユーザー コントロールを作成します。SearchItem.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 ピクセルで動作しますが、他の値では動作しません)。必要に応じて style/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 に答える