2012-08-31 7 views
6

He estado leyendo varias publicaciones en modelos de visualización y casillas de verificación, pero mi cerebro está empezando a bloquearse y necesito un pequeño empujón en la dirección correcta.¿Cómo puedo vincular casillas de verificación a la propiedad List <int> de un modelo de vista?

Aquí está mi modelo de vista simplificada. Tengo casillas de verificación que necesitan llenar las listas con sus valores. No creo que esto pueda suceder automágicamente. No estoy seguro de cómo cerrar la brecha entre una matriz de valores de cadena y una lista correctamente. Sugerencias?

public int AlertId { get; set; } 

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

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

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

Respuesta

5

Tiene su punto de vista de modelo como éste para representar el elemento CheckBox

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

Ahora su principal modelo de vista serán así

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

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

} 

En su GET Acción, se le llene el valores del ViewModel y lo envió a la vista.

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); 
} 

Ahora vamos a crear una plantilla de editor. Ir a Views/YourControllerName y Creta una carpeta llamada "EditorTemplate" y crear una nueva vista allí con el mismo nombre que de la Propiedad Nombre (ChannelViewModel.cshtml)

añadir este código ro su nuevo editor de plantillas.

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

En su vista principal, debe consultar con el editor de plantillas usando el método EditorFor HTML ayudante.

@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" /> 
} 

Ahora cuando publique el formulario, su modelo tendrá la Colección UserChannelIds en las casillas de verificación seleccionada va a tener un valor True para la IsSelected propiedad.

[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

Gracias por publicar. Todavía estoy un poco confundido, sin embargo. Parece excesivo agregar tres clases y tres plantillas de editor para asignar algunas casillas de verificación a un modelo de vista. ¿Es esta la manera más fácil? –

+0

¿Dónde hay 3 clases y 3 plantillas de editor? Veo 2 clases y 1 plantilla de editor – Shyju

+0

Tengo tres propiedades de lista , así que asumí que necesitaría tres clases y tres plantillas de edición para usar su solución. ¿No es eso correcto? –

2

La parte de mi Ver Modelo:

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

que utiliza vistas parciales para mostrar mis casillas reutilizables (que no sabía acerca de las plantillas de edición en este punto):

@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> 
    } 
} 

Las tres vistas parciales de casillas de verificación son similares entre sí. Los valores de las casillas de verificación son enteros, por lo que al alinear mi modelo de vista Nombres de lista con los nombres de casilla de verificación, el enlace funciona.

Como estoy trabajando en valores int, no siento que necesite la clase extra para representar las casillas de verificación. Solo se envían las casillas marcadas, por lo que no es necesario verificar que estén marcadas; Solo quiero los valores enviados. Al inicializar la lista en el constructor, debería evitar las excepciones nulas.

¿Es esto mejor, peor o tan bueno como la otra solución? ¿La otra solución (que implica una clase adicional) es la mejor práctica?

Los siguientes artículos fueron útiles para mí:

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

Lista de vinculaciones con vistas al modelo

Este sitio se maneja muy bien

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

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

¡Esta respuesta es genial! También incluiría la plantilla del editor, ya que es la clave para este trabajo. –

Cuestiones relacionadas