2016-05-10 10 views
0

ich folgende Razor-Code haben:Code basiert Repeater in Razor C#

@foreach (var row in Model) 
     { 
      <div><img src="~/Content/images/flickabase/@row.FlickaMasterImage" alt="@row.FlickaMasterImageCaption" class="img-thumbnail" width="100" heigh="100"/> 
      <a href="/flickas/flickaid/@row.Id/flickaname/@row.FlickaName.Trim()">@row.FlickaName</a> </div> 
     } 

Dieser druckt eine Reihe von Thumbnails und Bootsnamen aus. So was.

single column display

Das Problem ist, dass ich vier Spalten mit den Daten zu schreiben, will oben nach unten laufen, links nach rechts. Früher war das einfach mit .neet Repeater Control, aber ich kann nicht sehen, wie ich das mit Razor leicht machen kann. Gibt es einen einfachen Weg, dies zu tun? Die beste Idee, die ich mir ausgedacht habe, ist, die Zeilen zu zählen. Teile durch vier und erzeuge dann (seit ich Bootstrap benutze) eine Rasterspalte für jeden Stapel.

Norb.

+0

versuchen es mit CSS sonst einige ungeschickte Logik zu behandeln – stylishCoder

+0

schreiben Sie können den Trick mit CSS tun, bootsrap und Import zu Ihrer Lösung und sehen dies als eine Führung bekommen; http://getbootstrap.com/components/#thumbnailse. Auch das; (Es gibt Jsfiddle Demo und Quellcode) http://stackoverflow.com/questions/26694998/trying-to-place-multiple-bootstrap-thumbnails-side-by-side – Berkay

Antwort

0

dank für Ihre Kommentare.

So habe ich es am Ende gelöst. Ich habe Skip und Take auf dem Modell verwendet, um Chargen der Daten zu erhalten. Es wird niemals Massen von Daten geben, und wenn es wächst, werde ich es in Zukunft noch einmal tun. Ich habe die Bilder am Ende abgelegt. Die vier Stapel werden nacheinander in einer Bootstrap-Spalte ausgegeben, die das Layout übernimmt.

Ich bin mir sicher, dass es einen eleganteren Weg gibt, aber das wird für jetzt tun.

@{ 
    Layout = "Shared/_Layout.cshtml"; 
    ViewBag.Title = "Flicka Names"; 
    var i = Model.Count(); // count rows 
    var size = i/4; // get the batch size 

    var first = Model.Take(size); 
    var second = Model.Skip(size).Take(size); 
    var third = Model.Skip(size * 2).Take(size); 
    var fourth = Model.Skip(size * 3).Take(size); 
} 

<h1>Flicka Names</h1> 
<p>There are @i Flickas in our system.</p> 

<div class="col-sm-3"> 

    @foreach (var row in first) 
     { 
      <div> 
      <a href="/flickas/flickaid/@row.Id/flickaname/@row.FlickaName.Trim()">@row.FlickaName</a> </div> 

     } 
    </div> 

<div class="col-sm-3"> 
    @foreach (var row in second) 
     { 
     <div> 
      <a href="/flickas/flickaid/@row.Id/flickaname/@row.FlickaName.Trim()">@row.FlickaName</a></div> 

     } 
</div> 


<div class="col-sm-3"> 
    @foreach (var row in third) 
     { 
     <div> 
      <a href="/flickas/flickaid/@row.Id/flickaname/@row.FlickaName.Trim()">@row.FlickaName</a> 
     </div> 

    } 

</div> 

<div class="col-sm-3"> 
    @foreach (var row in fourth) 
      { 
     <div> 
      <a href="/flickas/flickaid/@row.Id/flickaname/@row.FlickaName.Trim()">@row.FlickaName</a> 
     </div> 

    } 

0

Wie Sie bereits herausgefunden, gibt es keine fertige Lösung für dieses Problem in razor .... Bootstrap ist die beste Lösung, um dies als @ B.Yaylaci bereits vorgeschlagen .... lesen Sie bitte folgende Frage:

mvc 3 equivalent to <asp:repeater> function?

Hoffe, dass es hilft, cheers. :)