Comment créer un contrôle basé sur un modèle avec Asp.Net MVC?

Question

J'essaie de créer un contrôle basé sur un modèle avec Asp.Net MVC. Par contrôle basé sur un modèle, j'entends un contrôle qui accepte le balisage en entrée comme suit:

<% Html.PanelWithHeader()
    .HeaderTitle("My Header")
    .Content(() =>
    { %>
        <!-- ul used for no particular reason -->
        <ul>
          <li>A sample</li>
          <li>A second item</li>
        </ul>
    <% }).Render(); %>

Remarque: Oui, cela ressemble beaucoup à la comment Telerik crée ses contrôles MVC , j'aime la syntaxe.

Voici mon code PanelWithHeader:

// Extend the HtmlHelper
public static PanelWithHeaderControl PanelWithHeader(this HtmlHelper helper)
{
    return new PanelWithHeaderControl();
}

public class PanelWithHeaderControl
{
    private string headerTitle;

    private Action getContentTemplateHandler;

    public PanelWithHeaderControl HeaderTitle(string headerTitle)
    {
        this.headerTitle = headerTitle;

        return this;
    }

    public PanelWithHeaderControl Content(Action getContentTemplateHandler)
    {
        this.getContentTemplateHandler = getContentTemplateHandler;

        return this;
    }

    public void Render()
    {
        // display headerTitle as <div class="header">headerTitle</div>

        getContentTemplateHandler();
    }
}

Ceci affiche le ul, mais je ne sais pas comment afficher du code personnalisé dans ma méthode de rendu.

J'ai essayé d'utiliser HtmlHelper sans succès. J'ai également essayé de surcharger la méthode ToString pour pouvoir utiliser la syntaxe <%=Html.PanelWithHeader()..., mais je continuais à avoir des erreurs de syntaxe.

Comment puis-je faire cela?

Answer 1

Il s’avère que les extensions Telerik MVC sont à code source ouvert et disponibles sur CodePlex . regard rapide sur le code source.

Ils créent un HtmlTextWriter à partir du ViewContext de l'instance HtmlHelper. Quand ils écrivent, cela écrit sur la page.

Le code devient:

// Extend the HtmlHelper
public static PanelWithHeaderControl PanelWithHeader(this HtmlHelper helper)
{
    HtmlTextWriter writer = helper.ViewContext.HttpContext.Request.Browser.CreateHtmlTextWriter(helper.ViewContext.HttpContext.Response.Output);

    return new PanelWithHeaderControl(writer);
}

public class PanelWithHeaderControl
{
    private HtmlTextWriter writer;

    private string headerTitle;

    private Action getContentTemplateHandler;

    public PanelWithHeaderControl(HtmlTextWriter writer)
    {
        this.writer = writer;
    }

    public PanelWithHeaderControl HeaderTitle(string headerTitle)
    {
        this.headerTitle = headerTitle;

        return this;
    }

    public PanelWithHeaderControl Content(Action getContentTemplateHandler)
    {
        this.getContentTemplateHandler = getContentTemplateHandler;

        return this;
    }

    public void Render()
    {
        writer.Write("<div class=\"panel-with-header\"><div class=\"header\">" + headerTitle + "</div><div class=\"content-template\">");

        getContentTemplateHandler();

        writer.Write("</div></div>");
    }
}

* Je sais, le code est un gâchis

Answer 2

public void Render()
{
    Response.Write(getContentTemplateHandler());
}

Answer 3

Vous voudrez peut-être faire quelque chose comme Html.BeginPanel() / Html.EndPanel(), similaire à la création de formulaires avec Html.BeginForm() / Html.EndForm(). De cette façon, vous pouvez envelopper le contenu contenu plutôt que de le transmettre en tant que paramètre.