2011-02-22 23 views
5

Soy nuevo en mvc, así que no estoy seguro si esto es posible.crear un helper html para mvc

Tengo algunos html que, básicamente, utiliza algunas imágenes para crear una bonita caja de esquinas redondeadas.

Es posible en mvc3 crear una función auxiliar que me permita llamar al ayudante e insertar cualquier contenido que desee en el área principal de las etiquetas div.

este es mi html

<div class="rounded"> 
    <div class="top"> 
     <div class="right"> 
     </div> 
    </div> 
    <div class="middle"> 
     <div class="right"> 
      <div class="content"> 
      Some how allow me to insert data into here 
       <div class="Clear"> 
      </div> 
     </div> 
    </div> 
    <div class="bottom"> 
     <div class="right"> 
     </div> 
    </div> 
</div> 


</div> 

no quiero que copiar esto en todas partes Quiero utilizar este estilo, así que estoy esperando que pueda crear algún tipo de ayuda y llamar cada vez que necesito para utilizar este caja y permitirme insertar html en

<div class="content"> 
      Some how allow me to insert data into here 
       <div class="Clear"> 
      </div> 

¿Alguien tiene alguna sugerencia?

Gracias

Respuesta

6

que parece ser un excelente escenario para una ayuda HTML personalizada:

public class RoundedCorner : IDisposable 
{ 
    private readonly ViewContext _viewContext; 
    private bool _disposed = false; 

    public RoundedCorner(ViewContext viewContext) 
    { 
     _viewContext = viewContext; 
    } 

    public void Dispose() 
    { 
     Dispose(true); 
     GC.SuppressFinalize(this); 
    } 

    protected virtual void Dispose(bool disposing) 
    { 
     if (!_disposed) 
     { 
      _disposed = true; 
      _viewContext.Writer.Write(
       @"<div class=""Clear""> 
        </div> 
        </div> 
        </div> 
        <div class=""bottom""> 
        <div class=""right""> 
        </div> 
        </div> 
        </div> 
        </div>" 
      ); 
     } 
    } 
} 

public static class HtmlExtensions 
{ 
    public static RoundedCorner RoundedCorner(this HtmlHelper htmlHelper) 
    { 
     htmlHelper.ViewContext.Writer.Write(
      @"<div class=""rounded""> 
      <div class=""top""> 
      <div class=""right""> 
      </div> 
      </div> 
      <div class=""middle""> 
      <div class=""right""> 
      <div class=""content"">" 
     ); 
     return new RoundedCorner(htmlHelper.ViewContext); 
    } 
} 

y, en su opinión, simplemente:

@using (Html.RoundedCorner()) 
{ 
    <div>Some how allow me to insert data into here</div> 
} 

lo que generaría (lo sé, lo que es una formato feo pero HTML perfectamente válido, soy demasiado flojo para arreglarlo en este momento):

<div class="rounded"> 
       <div class="top"> 
       <div class="right"> 
       </div> 
       </div> 
       <div class="middle"> 
       <div class="right"> 
       <div class="content"> <div>Some how allow me to insert data into here</div> 

<div class="Clear"> 
        </div> 
        </div> 
        </div> 
        <div class="bottom"> 
        <div class="right"> 
        </div> 
        </div> 
        </div> 
        </div> 
+0

Gracias Darin, Me gusta más mvc juego :) –

+0

Perdón otra pregunta, ¿dónde hago esta clase? y cómo lo hago referencia, ¿solo necesito agregar mi espacio de nombres en las vistas web.config? –

+0

doh! ignore eso, lo agregué a una carpeta de ayudantes y agregué una referencia al espacio de nombres en el web.config –

2

Me gusta la solución anterior proporcionada por Darin. Los únicos cambios que haría sería tener dos métodos privados en la clase RoundedCorner que escriben las etiquetas de apertura y cierre en el contexto de la vista, en lugar de tener una parte de ella en la clase y la otra parte en la ayuda. Entonces, el ayudante simplemente devuelve una nueva instancia de RoundedCorner.

Cuestiones relacionadas