Создание пользовательских элементов управления с внутренним HTML C #

Question

как я могу создать собственный элемент управления, который принимает внутренний html, как обычный элемент управления .net datagrid или 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, списка вкладок, затем используя

[ParseChildren(true,"MyTabs")]

в контроле ... но я не знаю, куда идти, намеки?

Answer 1

объединение ответов о пользовательских элементах управления в целом: обычай дочерних элементов

и Шаблоны управления MSDN

правильный способ сделать это очень просто: однажды создав и определив дочерний элемент в пространстве имен (поскольку вам нужно перекрестную ссылку на него), он должен иметь одно добавленное свойство: класс 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>

Answer 2

Это стратегия, которую я использую, которую я считаю самой простой. Это панель (которая отображается как 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.

Answer 3

То, что вы ищете, называется «шаблонным контролем». Вы можете найти дополнительную информацию по MSDN .