Vereinbaren MVC-Kontrollkästchen in den Spalten im inneren ForEach-Schleife mit Razor

Habe ich eine Sammlung (Generische Liste) Objekte bevölkert, die außerhalb des Modell des MVC-Ansicht und müssen das Kontrollkästchen anzeigen für jedes Element in der Liste.

Dies funktioniert gut für, das:

@foreach (Admin_Permission perm in ViewBag.PermissionList)
        {                
            @Html.CheckBox(perm.PermissionKey, new {Value=perm.PermissionID})  @perm.PermissionDesc
            <br>            
        }

Zeigt, dass das Kontrollkästchen eine pro Zeile... und es sind etwa 50 von Ihnen, so dass es verschwendet VIEL Platz, da jede Beschreibung ist nur etwa 10 Zeichen oder so.

In der Vergangenheit würde ich ein CheckBoxList-mit Spalten bis 5 für diese... aber die Funktion scheint zu fehlen mit MVC... also muss ich herausfinden, einen Weg, um die gleiche Sache hier irgendwie. Ich habe gespielt mit mit einer for-Schleife und zählen der Spalten und hinzufügen etc., wie wir zählen durch die Objekte, aber es scheint nicht zu nehmen. Bekomme immer Fehler, wo razor nicht wie die markeup für das schließen einer TD und die Gründung eines neuen innerhalb einer if-Anweisung.

So... die Millionen-dollar-Frage ist, wie zum Teufel tun wir das richtig in MVC? Es scheint mir, ich muss etwas fehlen. Seine so ein blödes problem haben, dass I müssen mit Blick auf etwas einfaches. Wer?

  • Noch eine weitere Anmerkung. Ich habe versucht, mit der open-source-CheckBoxListFor<>, aber das funktioniert nur, wenn Ihre Objekte sind im Blick auf das Modell... diese gibt es nicht, und kann nicht einfach integriert werden in das Modell die Ansicht basiert auf.
  • Sie können immer mit css. Zum Beispiel, schließen Sie jede checkbox/label in einem div mit float:left; width:20%;. Hinweis: CheckBox ist ein Helfer für die Darstellung einer checkbox verbunden mit einem boolean Eigenschaft, die Sie deutlich, nicht zu tun, so können Sie manuell fügen Sie den html-Code und reduzieren Sie Ihre html wesentlich. Und wie zum Teufel tun wir das richtig in MVC? Begründen Sie Ihre Ansichten auf Ansicht-Modelle (nicht Daten-Modelle)
  • Dank Stephen. Ich hätte nie gedacht, erweitern das Modell durch die Schaffung eines anderen Modells außerhalb der DAL. Krank spielen mit dieser Idee. Ich denke, dass fix me up richtige. Danke!
InformationsquelleAutor David Borneman | 2015-02-02
  1. 8

    Der einfache Weg ist, um wickeln Sie Ihre Checkboxen in einem element (in der Regel ein div), float das element auf der linken Seite und geben eine maximale Breite ein. Auf diese Weise wird die Strömung in Spalten.

    CSS:

    .check-container {
  float: left;
  width: 33%;
}

    HTML:

    <div class="check-container">
  <input type="checkbox" id="check1">
  <label for="check1">Checkbox 1</label>
</div>
<div class="check-container">
  <input type="checkbox" id="check2">
  <label for="check2">Checkbox 2</label>
</div>
<div class="check-container">
  <input type="checkbox" id="check3">
  <label for="check3">Checkbox 3</label>
</div>
<div class="check-container">
  <input type="checkbox" id="check4">
  <label for="check4">Checkbox 4</label>
</div>
<div class="check-container">
  <input type="checkbox" id="check5">
  <label for="check5">Checkbox 5</label>
</div>
<div class="check-container">
  <input type="checkbox" id="check6">
  <label for="check6">Checkbox 6</label>
</div>
<div class="check-container">
  <input type="checkbox" id="check7">
  <label for="check7">Checkbox 7</label>
</div>
<div class="check-container">
  <input type="checkbox" id="check8">
  <label for="check8">Checkbox 8</label>
</div>
<div class="check-container">
  <input type="checkbox" id="check9">
  <label for="check9">Checkbox 9</label>
</div>
<div class="check-container">
  <input type="checkbox" id="check10">
  <label for="check10">Checkbox 10</label>
</div>

    Damit Ihre Razor-syntax ist so etwas wie dieses:

    @foreach (Admin_Permission perm in ViewBag.PermissionList)
{       
    <div class="check-container">         
        @Html.CheckBox(perm.PermissionKey, new {Value=perm.PermissionID})  
        <label>@perm.PermissionDesc</label>
    </div>
}
    • Es bekam. Ich bin kein CSS-guru :/ - geklebt auf relativ alte Technologie für die Jahre, und hatte keine Ahnung, wie das wirklich funktioniert mit dem schwebenden und Breite. Macht auch Sinn tho... schlecht probieren, sowie Stephens Erweiterung des model-Idee. Zwischen die 2 von denen ich denke, ill festgelegt werden. Vielen Dank!
    • Hat diese Antwort Ihre Frage so nebenbei?
    InformationsquelleAutor DavidG
  2. 1

    Mit bootstrap dies ist sehr einfach zu erreichen, legen Sie einfach Ihre checkbox innerhalb col-md-3 col-sm-3 col-xs-3 um 4 Spalten zum Beispiel:

    @foreach (Admin_Permission perm in ViewBag.PermissionList)
        {     
<div class="col-md-3 col-sm-3 col-xs-3">           
            @Html.CheckBox(perm.PermissionKey, new {Value=perm.PermissionID})  @perm.PermissionDesc
           </div>        
        }
    • was ist, wenn ich will, dass die Spalten in vertikaler Art und Weise.
    • Dadurch wird n-Anzahl der vertikalen Spalten. Max 12 Spalten. Also im Grunde erhalten Sie eine "Tabelle" mit den Spalten und Zeilen
    • Eigentlich will ich die ersten 5 in Col1 und rest 5 in Col2
    • so versuchen col-md-6 col-sm-6 col-xs-6
    • prüfen Sie einfach, wie die bootstrap-raster arbeitet.
    • Ich habe es getan. In dieser Abbildung1 wird in Col1 und Item2 ist in Col2. Als ich sagte, ich will Item1, Item2.. Item5 in Col1
    • Lassen Sie uns weiter, diese Diskussion im chat.

    InformationsquelleAutor JustLearning
  3. 0

    Projekt Ihre Daten in der richtigen Struktur erste.

    Beste zu tun, dass der controller über ein Modell, aber getan werden kann, in den Blick.

    @{ 
  //linq projection for creatin a 5 items per row table
  //permissions are projected into a new object where the row number and cell nummer are calculated
  //then groupby is used to group elements per row
  var table=ViewBag.PermissionList
        .Select( (v,i)=>new { row=i/5, col=i^5,value=v} )
        .GroupBy( g=> g.row);
 }

@foreach(var row in table)
{
    <tr>
    foreach(var col in row){
        <td>
        @Html.CheckBox(col.value.PermissionKey, new {Value=col.value.PermissionID})  @col.value.PermissionDesc
        </td>
    }

    //todo: fill empty cells when the last row does not contian 5 elements.        
    </tr>
}

    Hinweis: nicht test der razor-code, enthält wahrscheinlich syntax Probleme

    • Eine Nutzung nicht voll Kommentar, Frage, wie das Projekt Berechtigungen in einem 5-Spalten-Struktur, bis zu den Entwickler div oder Tabellen. dazu kommt, dass "Tabellen sind für Daten", und es scheint, dass hier perimission Daten dem Benutzer angezeigt wird.
    • Es ist eine durchaus nützliche Kommentar. Verwendung von Tabellen für das layout gilt als schlechte Praxis. Viele Gründe, warum, hier sind einige stackoverflow.com/questions/83073/...
    • Tabelle wird für Daten verwendet, die in diesem Anwendungsfall und nicht für das layout.
    • Nein, er sagt ausdrücklich er ist mit es für das layout, als er Platz verschwenden.
    • Dies ist eine Tabelle auf einer Seite mit den Berechtigungen, das ist richtig für eine Tabelle verwenden. Tabellen für das layout ist der Fall, wo der header, footer und Inhalt der Seite verwaltet werden, über eine Tabelle. Dies ist ein perfekt gültiges "Kreuz"-Tabelle mit permission-Daten. Verweis: stackoverflow.com/questions/82391/...
    • So verknüpfen Sie eine Antwort, die sagt, verwenden Sie Tabellen für tabellarische Daten bei der OP ist nicht mit tabellarischen Daten?
    • Ich Stimme zu (+1). die css-Lösung ist in der Tat elegant.

    InformationsquelleAutor Martijn
Schreibe einen Kommentar