在ASP.NET中创建可折叠区域

ws51t4hk  于 2022-12-01  发布在  .NET
关注(0)|答案(3)|浏览(179)

目前我已经构建了一个collapseControl,它的行为类似于一个标签(associatedControlID)来控制控件的折叠状态。
我想生成以下控件:
collapsableArea http://img692.imageshack.us/img692/3307/stackoverflowcollapseab.jpg
我想到了这样的事情:
将我已经生成collapsableControl和其他一些控件(例如Panel)放在一起,以得到一个collapsableArea。
第一次尝试:
我尝试扩展面板并执行以下操作:

this.Parent.Controls.Add(collapsableControl);

但这给了我:“生命周期步骤不正确”、“无法修改”、“nullReference”、...异常
所以我又试了一次(我相信这是更好的选择,因为没有得到tagKey):
我扩展了一个占位符并执行了以下操作:

this.Controls.Add(collapsableControl);
this.Controls.Add(collapsablePanel);

这引起了其它问题,例如:我只想设置面板的文本,面板的样式,...
连线!
对于这种情况,您有什么解决方案吗?

编辑:

我想出了另一个办法:
another solution http://img109.imageshack.us/img109/3307/stackoverflowcollapseab.jpg
“CollapsableArea”属于“Control”类型,包含2个额外的私有属性:
1.“可折迭控件”
1.“面板”
我认为将CollapsableArea.Controls的getter重定向到CollapsableArea.Panel.Controls.就足够了。在CollapsableArea.CreateChildControls()中,我示例化并将CollapsableControl和Panel添加到基控件中,并在CollapsableArea.RenderChildren()中呈现这两个控件
我现在的问题:CollapsableControl将获取一个clientID(不设置ID)-面板将不呈现如果面板包含〈% %〉标记,CollapsableControl将失败(或传递出去)
有什么建议吗?

**edit:**我修复了缺少ID的行为-只需将CollapsableControl.AssociatedControlID设置为Panel.ClientID...但是-将〈% %〉放入面板时,它不会被渲染??!!

vsikbqxv

vsikbqxv1#

如果你想要一个简单的面板,而不是重新发明轮子,你可以使用可折叠面板控件:
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CollapsiblePanel/CollapsiblePanel.aspx
可能是获得您所追求的功能的最简单方法?

nkoocmlb

nkoocmlb2#

哦,怎么会-我解决了这个问题:

public sealed class CollapsableArea : Control
{
    private const string ViewStateKeyCollapsableContentClientID = "collapsableContentClientID";

    private string CollapsableContentClientID
    {
        get
        {
            var obj = this.ViewState[ViewStateKeyCollapsableContentClientID];
            if (obj == null)
            {
                var collapsableContentClientID = Guid.NewGuid().ToString();
                this.ViewState[ViewStateKeyCollapsableContentClientID] = collapsableContentClientID;
                return collapsableContentClientID;
            }
            return (string)obj;
        }
    }

    /// <summary>
    /// Gets or sets the header text.
    /// </summary>
    /// <value>The header text.</value>
    public string HeaderText
    {
        get
        {
            this.EnsureChildControls();
            return this._collapseControl.Text;
        }
        set
        {
            this.EnsureChildControls();
            this._collapseControl.Text = value;
        }
    }

    public override ControlCollection Controls
    {
        get
        {
            // redirect controls
            return this._collapsableContent.Controls;
        }
    }

    #region child controls

    private readonly Panel _collapsableContent = new Panel();
    private readonly CollapsableControl _collapseControl = new CollapsableControl();

    #endregion

    public override Control FindControl(string id)
    {
        // need to redirect
        if (string.Equals(id, this._collapsableContent.ID))
        {
            return this._collapsableContent;
        }
        return this._collapsableContent.FindControl(id);
    }

    protected override void CreateChildControls()
    {
        base.Controls.Clear();

        var collapsableContentClientID = this.CollapsableContentClientID;
        this._collapsableContent.ID = collapsableContentClientID;
        this._collapseControl.AssociatedControlID = collapsableContentClientID;
        base.Controls.Add(this._collapseControl);
        base.Controls.Add(this._collapsableContent);
    }

    protected override void RenderChildren(HtmlTextWriter writer)
    {
        this._collapseControl.RenderControl(writer);
        // hack for code blocks
        if (!this.Controls.IsReadOnly)
        {
            this._collapsableContent.RenderControl(writer);
        }
        else
        {
            this._collapsableContent.RenderBeginTag(writer);
            base.RenderChildren(writer);
            this._collapsableContent.RenderEndTag(writer);
        }
    }
}
qncylg1j

qncylg1j3#

你的控件应该有一个Template控件属性来定义可折叠的内容。正如你所说的,还有一个AssociatedControlID属性来获取Label控件的id。

public class CollapsableArea : WebControl, INamingContainer
{
    public string AssociatedControlID { get; set; }
    public ITemplate ContentTemplate { get; set; }
}

您必须向页面的启动脚本注册一个jquery。

$("#The AssociatedControlID client control id").click(function(e) {
    $("#The CollapsableArea client control id").toggle();
}

相关问题