lunes, 22 de diciembre de 2014

Contenido de DevExpress Round Panel en Razor

Si ya han usado el Round Panel de Developer Express para MVC, habrán notado lo tedioso que es poner el contenido de este, ya que según el ejemplo que brindan en la documentación oficial, debe establecerse mediante una cadena de caracteres:

@Html.DevExpress().RoundPanel(settings => {
       settings.Name = "roundPanel";
       settings.ShowHeader = true;
       settings.HeaderText = "ASP.NET MVC";

       settings.SetContent(@"<h4>Lorem Ipsum</h4>
<p><span class="inicio">Lorem ipsum</span> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>");
    }).GetHtml()

Esto deja de lado las facilidades que brinda Razor como motor de vista, que permite integrar el código HTML con C# de forma fácil y legible. Además, se vuelve más complicado a medida necesitamos añadir más componentes, o controles más complejos dentro de él. Sin embargo, existe una solución práctica para esta situación: el uso de helpers.

La sintaxis @helper permite crear métodos de ayuda re-usables dentro de las vistas, los cuales permiten encapsular código fuente y HTML utilizando la sintaxis de Razor.

Mediante la sintaxis @helper, podemos colocar el contenido del panel dentro de una función helper separada;
@helper ContenidoPanel() {
    <h4>Lorem Ipsum</h4>
    <p><span class="inicio">Lorem ipsum</span> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
}
Y luego renderizarlo dentro del panel, siempre en la misma vista, así:
@Html.DevExpress().RoundPanel(settings => {
       settings.Name = "roundPanel";
       settings.ShowHeader = true;
       settings.HeaderText = "ASP.NET MVC";
       settings.SetContent(ContenidoPanel().ToHtmlString());
    }).GetHtml()
O así:
@Html.DevExpress().RoundPanel(settings => {
       settings.Name = "roundPanel";
       settings.ShowHeader = true;
       settings.HeaderText = "ASP.NET MVC";
       settings.SetContent(() => ContenidoPanel().WriteTo(ViewContext.Writer));
    }).GetHtml()

Esto facilita la legibilidad del código, y además permite definir un contenido mucho más complejo, utilizando todas las facilidades que Razor puede brindar.

Related Articles

0 comentarios:

Publicar un comentario

Con la tecnología de Blogger.