2012-05-21 6 views
9

I una ventana modal con rejilla telerik dentro. Pero necesito renderizar imágenes en mi cuadrícula para que entiendo que no puedo usar @ dos veces. Aquí está la publicación del blog sobre este tema LinkLos bloques de marcado en línea no se pueden anidar. Solo se permite un nivel de marcado en línea. MVC RAZOR

¿Puede alguien ayudarme por favor.

Mi Código

@{ Html.Telerik().Window() 
    .Name("images") 
    .Title("Select an Image") 
    .Content(@<text> 

@(Html.Telerik().ComboBox() 
      .Name("AjaxComboBox66") 
      .AutoFill(true) 
      .SelectedIndex(0) 
      .BindTo(new SelectList(Model.PhotoFolders, "ID", "Name")) 
      .Filterable(filtering => filtering.FilterMode(AutoCompleteFilterMode.StartsWith)) 
      .HighlightFirstMatch(true) 
      .ClientEvents(events => events 
       .OnChange("onChange") 
      ) 
    ) 

     @(Html.Telerik().Grid<AjaxImages>() 
    .Name("Grid") 
    .DataKeys(keys => keys.Add(c => c.ID)) 
    .Columns(columns => 
    { 
     columns.Template(
      @<text> 
       <img src='@item.Url' /> 
//Here is my error. I need helper function 
      </text> 

).Title("Picture"); 

    }) 

           .DataBinding(dataBinding => dataBinding.Ajax().Select("GetImages", "UserProducts")) 

         .Scrollable(scrolling => scrolling.Enabled(true)) 
         .Sortable(sorting => sorting.Enabled(true)) 
          .Pageable(paging => paging.Enabled(true).PageSize(20).Total(100).Style(GridPagerStyles.NextPreviousAndNumeric)) 
         .Filterable(filtering => filtering.Enabled(true)) 
         .Groupable(grouping => grouping.Enabled(false)) 
         .EnableCustomBinding(true) 

         .Footer(true)) 
       </text>) 
    .Width(400) 
    .Draggable(true) 
    .Modal(true) 
    .Visible(false) 


    .Render(); 
} 

Mi función GetImages Regrésame JSON con "ID" y "URL".

Respuesta

16

En estas situaciones, se puede utilizar la función auxiliar MVC Razor. Cree la función auxiliar con la definición de control de cuadrícula, en este caso RenderGrid().

@helper RenderGrid() 
{ 
    @(Html.Telerik().Grid<AjaxImages>() 
    .Name("Grid") 
    .DataKeys(keys => keys.Add(c => c.ID)) 
    .Columns(columns => 
    { 
     columns.Template(
     @<text> 
      <img src='@item.Url' /> 
     </text> 
     ).Title("Picture"); 
    }) 
    .DataBinding(dataBinding => dataBinding.Ajax().Select("GetImages", "UserProducts")) 
} 

Llamar a la función auxiliar dentro de la definición de contenido de la ventana. Las funciones auxiliares se pueden llamar varias veces si es necesario.

@{Html.Telerik().Window() 
     .Name("images") 
     .Title("Select an Image") 
     .Content(
     @<text> 
      @RenderGrid() 
     </text>) 
     .Width(400) 
     .Draggable(true) 
     .Modal(true) 
     .Visible(false) 
     .Render(); 
} 
+0

está casi hecho, por favor marque ambas imágenes. No recibo ningún error, pero la imagen está vacía. Intenté renderizar como texto, mi ajax está funcionando. ¿Sabes por qué no obtengo mis imágenes? http://prntscr.com/9ix3a http://prntscr.com/9ix3x –

+2

Está utilizando el enlace ajax y, por lo tanto, necesita utilizar la plantilla del lado del cliente, en lugar de la plantilla del modo de enlace del servidor. Pruebe esto: 'columns.Bound (c => c.ID) .ClientTemplate (" <#= ID #> "). Título (" Imagen ");' – Igorrious

+0

¡Esa es la respuesta correcta! U regla! –

Cuestiones relacionadas