¿Cómo puedo crear un control con plantilla con Asp.Net MVC?

Question

Estoy tratando de crear un control con plantilla con Asp.Net MVC. Por control con plantilla, me refiero a un control que acepta el marcado como entrada de esta manera:

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

Nota: Sí, esto es muy similar a cómo Telerik crea sus controles MVC , me gusta la sintaxis.

Aquí está mi código 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();
    }
}

Esto muestra el ul, pero no tengo idea de cómo mostrar código personalizado dentro de mi método Render.

He intentado usar el HtmlHelper sin éxito. También intenté anular el método ToString para poder usar la sintaxis <%=Html.PanelWithHeader()..., pero seguía teniendo errores de sintaxis.

¿Cómo puedo hacer esto?

Answer 1

Resulta que las Las extensiones de Telerik MVC son de código abierto y están disponibles en CodePlex , así que tomé un vistazo rápido al código fuente.

Crean un HtmlTextWriter a partir del ViewContext de la instancia de HtmlHelper. Cuando le escriben, escribe en la página.

El código se convierte en:

// 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>");
    }
}

* Lo sé, el código es un desastre

Answer 2

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

Answer 3

Es posible que desee hacer algo como Html.BeginPanel() / Html.EndPanel(), similar a cómo se crean los formularios con Html.BeginForm() / Html.EndForm(). De esta forma, puede ajustar el contenido contenido en lugar de tener que pasarlo como parámetro.