2012-05-21 6 views
9

I una finestra modale con griglia telerik all'interno. Ma ho bisogno di renderizzare le immagini nella mia griglia in modo da capire che non posso usare @ due volte. Ecco il post sul blog su questo numero LinkI blocchi di markup in linea non possono essere nidificati. È consentito solo un livello di markup in linea. MVC RAZOR

Qualcuno può aiutarmi per favore.

My Code

@{ 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(); 
} 

La mia funzione GetImages mi tornano JSON con "ID" e "URL".

risposta

16

In queste situazioni è possibile utilizzare la funzione helper MVC Razor. Creare la funzione di supporto con la definizione del controllo griglia, in questo 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")) 
} 

Chiamare la funzione di supporto all'interno della definizione del contenuto della finestra. Le funzioni di supporto possono essere richiamate più volte, se necessario.

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

Quasi fatto, si prega di controllare entrambe le immagini. Non ottengo alcun errore ma l'immagine è vuota. Ho provato a eseguire il rendering come testo, il mio ajax funziona. Sai perché non ho le mie immagini? http://prntscr.com/9ix3a http://prntscr.com/9ix3x –

+2

Si sta utilizzando l'associazione Ajax e pertanto è necessario utilizzare il modello lato client, anziché il modello della modalità di associazione server. Prova questo: 'columns.Bound (c => c.ID) .ClientTemplate (" <#= ID #> "). Titolo (" Immagine ");' – Igorrious

+0

Questa è la risposta giusta! Regola U! –