2012-08-31 8 views
6

Ich habe die verschiedenen Posts auf Ansichtsmodellen und Checkboxen gelesen, aber mein Gehirn fängt an, sich zu schließen, und ich brauche einen kleinen Stoß in die richtige Richtung.Wie binde ich Kontrollkästchen an die List <int>-Eigenschaft eines Ansichtsmodells?

Hier ist mein vereinfachtes Ansichtsmodell. Ich habe Kontrollkästchen, die die Listen mit ihren Werten füllen müssen. Ich denke nicht, dass das automatisch passieren kann. Ich bin mir nicht sicher, wie man die Lücke zwischen einem Array von String-Werten und einer Liste korrekt überbrückt. Vorschläge?

public int AlertId { get; set; } 

public List<int> UserChannelIds { get; set; } 

public List<int> SharedChannelIds { get; set; } 

public List<int> SelectedDays { get; set; } 

Antwort

5

Haben Sie Ihre Ansicht Modell wie dies die CheckBox Artikel darzustellen

public class ChannelViewModel 
{ 
    public string Name { set;get;} 
    public int Id { set;get;} 
    public bool IsSelected { set;get;} 
} 

Jetzt ist Ihre Hauptansichtsmodell wie diese in Ihrer GET Aktion

public class AlertViewModel 
{ 
    public int AlertId { get; set; } 
    public List<ChannelViewModel> UserChannelIds { get; set; }  
    //Other Properties also her 

    public AlertViewModel() 
    { 
    UserChannelIds=new List<ChannelViewModel>();  
    } 

} 

Jetzt wird, füllen Sie die Werte des ViewModels und sendete es an die Ansicht.

public ActionResult AddAlert() 
{ 
    var vm = new ChannelViewModel(); 

    //The below code is hardcoded for demo. you mat replace with DB data. 
    vm.UserChannelIds.Add(new ChannelViewModel{ Name = "Test1" , Id=1}); 
    vm.UserChannelIds.Add(new ChannelViewModel{ Name = "Test2", Id=2 }); 

    return View(vm); 
} 

Jetzt erstellen wir ein EditorTemplate. Zum Views/YourControllerName und Kreta einen Ordner namens „EditorTemplate“ und Erstellen Sie eine neue Ansicht es mit dem gleichen Namen wie der Name (ChannelViewModel.cshtml)

Fügen Sie diesen Code ro Ihre neue Editor-Vorlage.

@model ChannelViewModel 
<p> 
    <b>@Model.Name</b> : 
    @Html.CheckBoxFor(x => x.IsSelected) <br /> 
    @Html.HiddenFor(x=>x.Id) 
</p> 

Jetzt in Ihrer Hauptansicht, Rufen Sie Ihre Editor-Vorlage der EditorFor Html Helper-Methode. Jetzt

@model AlertViewModel 
<h2>AddTag</h2> 
@using (Html.BeginForm()) 
{ 
    <div> 
     @Html.LabelFor(m => m.AlertId) 
     @Html.TextBoxFor(m => m.AlertId) 
    </div>  
    <div> 
     @Html.EditorFor(m=>m.UserChannelIds)   
    </div>  
    <input type="submit" value="Submit" /> 
} 

wenn Sie das Formular veröffentlichen, müssen Sie Ihr Modell die UserChannelIds Sammlung, wo die ausgewählten Ankreuzfelder einen True Wert für die IsSelected Immobilien werden zu müssen.

[HttpPost] 
public ActionResult AddAlert(AlertViewModel model) 
{ 
    if(ModelState.IsValid) 
    { 
     //Check for model.UserChannelIds collection and Each items 
     // IsSelected property value. 
     //Save and Redirect(PRG pattern) 
    } 
    return View(model); 
} 
+0

Vielen Dank für die Buchung. Ich bin jedoch immer noch ein bisschen verwirrt. Es erscheint übertrieben, drei Klassen und drei Editor-Vorlagen hinzuzufügen, um einige Kontrollkästchen einem Ansichtsmodell zuzuordnen. Ist das der einfachste Weg? –

+0

Wo sind 3 Klassen und 3 Editor-Vorlagen? Ich sehe 2 Klassen und 1 Editor Vorlage – Shyju

+0

Ich habe drei Liste Eigenschaften, so nahm ich an, dass ich drei Klassen und drei Bearbeitungsvorlagen benötigen würde, um Ihre Lösung zu verwenden. Ist das nicht korrekt? –

2

Teil meines Ansicht Modell:

public List<int> UserChannelIds { get; set; } 

public List<int> SharedChannelIds { get; set; } 

public List<int> Weekdays { get; set; } 

public MyViewModel() 
{ 
    UserChannelIds = new List<int>(); 
    SharedChannelIds = new List<int>(); 
    Weekdays = new List<int>(); 
} 

Ich benutzte Teilansichten meine wieder verwendbaren Kontrollkästchen angezeigt werden (ich an dieser Stelle nicht über Editor Vorlagen wusste):

@using AlertsProcessor 
@using WngAlertingPortal.Code 
@model List<int> 
@{ 
    var sChannels = new List<uv_SharedChannels>(); 
    Utility.LoadSharedChannels(sChannels); 
} 

<p><strong>Shared Channels:</strong></p> 
<ul class="channel-list"> 
@{ 
    foreach (var c in sChannels) 
    { 
     string chk = (Model.Contains(c.SharedChannelId)) ? "checked=\"checked\"" : ""; 

     <li><input type="checkbox" name="SharedChannelIds" value="@c.SharedChannelId" @chk /> @c.Description (@c.Channel)</li> 
    } 
} 

Alle drei Checkbox-Teilansichten sind einander ähnlich. Die Werte der Kontrollkästchen sind Ganzzahlen. Wenn Sie also mein Ansichtsmodell Listennamen mit den Kontrollkästchennamen anordnen, funktioniert die Bindung.

Weil ich in int-Werten arbeite, habe ich nicht das Gefühl, dass ich die zusätzliche Klasse brauche, um die Checkboxen darzustellen. Nur angekreuzte Kontrollkästchen werden gesendet, sodass ich nicht überprüfen muss, ob sie aktiviert sind. Ich möchte nur die gesendeten Werte. Wenn ich die Liste im Konstruktor initialisiere, sollte ich Null-Ausnahmen vermeiden.

Ist das besser, schlechter oder genauso gut wie die andere Lösung? Ist die andere Lösung (mit einer zusätzlichen Klasse) Best Practice?

Die folgenden Artikel waren mir nützlich:

http://forums.asp.net/t/1779915.aspx/1?Checkbox+in+MVC3

http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx

1

Binding Liste mit Ansichtsmodell

Diese Seite es

https://www.exceptionnotfound.net/simple-checkboxlist-in-asp-net-mvc/

sehr gut behandelt

enter image description here

public class AddMovieVM 
{ 
    [DisplayName("Title: ")] 
    public string Title { get; set; } 

public List<CheckBoxListItem> Genres { get; set; } 

public AddMovieVM() 
{ 
    Genres = new List<CheckBoxListItem>(); 
} 
} 
+1

Diese Antwort ist großartig! Ich würde auch die Editor-Vorlage hinzufügen, da dies der Schlüssel zu dieser Arbeit ist. –

Verwandte Themen