使用内部 html c# 创建自定义控件

Posted 2023-05-07

【中文标题】使用内部 html c# 创建自定义控件

【英文标题】：Create custom controls with inner html c#

【发布时间】：2010-12-10 17:46:18

【问题描述】：

我如何创建一个接受内部 html 的自定义控件，例如通常的 .net 数据网格或 ajax 选项卡式控件...像这样：

<KITT:tabs id="s" runat="server" >
 <w:tab sectionid="benefits">
here goes my html or any content, i want to render as is
 </w:tab>
</KITT:tabs>

我知道如何在没有内部 html、一个 Tab 对象、一个 Tab 列表的情况下创建它，然后使用

[ParseChildren(true,"MyTabs")]

在控制... 但我不知道从那里去哪里，有什么提示吗？

【参考方案1】：

这是我使用的策略，我认为这是最简单的。这是一个面板（呈现为 div），是一个服务器控件（无 ascx）：

public class Tab : Panel 

    private Literal InnerHtmlLiteral  get; set; 

    [Bindable(true)]
    [Category("Appearance")]
    [DefaultValue("")]
    [Localizable(true)]
    [PersistenceMode(PersistenceMode.InnerDefaultProperty)] // this is the significant attribute.
    public string InnerHtml 
        get  return InnerHtmlLiteral.Text; 
        set  InnerHtmlLiteral.Text = value; 
    

    public Tab() 
        InnerHtmlLiteral = new Literal();
    

    protected override void OnInit(EventArgs e) 
        base.OnInit(e);
        Controls.Add(InnerHtmlLiteral);
        InnerHtmlLiteral.ID = ID + "_InnerHtml";
    

无需乱用模板，只需很少的特殊属性即可使其正常工作。我只是使用一个字符串作为属性，然后使用 Literal 控件呈现它。

【参考方案2】：

结合一般自定义控件的答案： custome child controls

和MSDN Templated Conrols

解决这个问题的正确方法非常简单，一旦在命名空间中创建和定义子元素（因为您需要交叉引用它），它应该有一个附加属性：Tab 类看起来像这样

namespace MyNS.Content 
public class Tab : System.Web.UI.UserControl


    private string _title;

    public Tab()
        : this(String.Empty)
    
    

    public Tab(string title)
    
        _title = title;
    

    public string Title
    
        get  return _title; 
        set  _title = value; 
    

    private ITemplate tabContent = null;
    [
    TemplateContainer(typeof(TemplateControl)),
    PersistenceMode(PersistenceMode.InnerProperty),
    TemplateInstance(TemplateInstance.Single),
    ]
    public ITemplate TabContent
    
        get
        
            return tabContent;
        
        set
        
            tabContent = value;
        
    

这将允许 tabcontent 子标签进入您的主标签

在您的控件 ascx 中创建必要的 [ParseChildren(true, "MyTabs")] 并将您的 MyTabs 列表或集合绑定到转发器，这将输出所有包含的选项卡，您的 ascx 看起来像这样

<asp:repeater id="rpContent" runat="server" onitemdatabound="rpContent_itemdatabound">
<itemtemplate>
    <asp:hyperlink id="hlHeader" runat="server" navigateurl="javascript://"></asp:hyperlink>

        <div>
            <asp:placeholder id="plTabContent" runat="server"></asp:placeholder>
        </div>

</itemtemplate>

后面的代码是这样的

[ParseChildren(true, "MyTabs")]
public partial class KITT_controls_tabgroup : System.Web.UI.UserControl

    private List<Tab> _myTabs;
    [PersistenceMode(PersistenceMode.InnerProperty)]
    public List<Tab> MyTabs
    
        get
        
            if (_myTabs == null)
            
                _myTabs = new List<Tab>();
            
            return _myTabs;
        

    

    protected void Page_Load(object sender, EventArgs e)
    
        rpContent.DataSource = MyTabs;
        rpContent.DataBind();

    
    protected void rpContent_itemdatabound(Object Sender, RepeaterItemEventArgs e)
    

        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        
            Tab i = e.Item.DataItem as Tab;
            i.TabContent.InstantiateIn(((PlaceHolder)e.Item.FindControl("plTabContent")));

            ((HyperLink)e.Item.FindControl("hlHeader")).Text = i.Title;
        
    

最后，注册你的控件（Tab 和 ascx）

<add tagPrefix="w" namespace="MyNS.Content" />
<add tagPrefix="KITT" tagName="TabbedContent" src="~/controls/tabbedcontent.ascx"/>

并使用它...

 <kitt:tabbedcontent id="upgradedesktop" runat="server">
    <w:Tab  title="Overview" isdefault="true" runat="server">
        <TabContent>
            your html tags and server side tags here
        </TabContent>
    </w:Tab>
    <w:tab title="Benefits" runat="server" >
        <tabcontent>
            your html tags and server side tags here
        </tabcontent>
    </w:tab>
    <w:tab title="Products" runat="server">
        <tabcontent>
            your html tags and server side tags here
        </tabcontent>
    </w:tab>
</kitt:tabbedcontent>

【参考方案3】：

您要查找的内容称为“模板化控件”。你可以找到more information on MSDN。

【讨论】：

再想一想，它不是，我不想像在模板化控件中那样绑定选项卡，我想显示里面的任何内容，但请注意，我可能有多个选项卡，看起来像现在有两个单独的控件，但我会进一步寻找这个