MVC: Arrays de View a Controller

Un tema que me he encontrado al desarrollar una aplicación MVC y que las búsquedas en Google han sido infructuosas, es cómo pasar desde la vista al Controller un objeto que posea una Array como una de sus propiedades.
Tomemos un sencillo ejemplo. Un alumno desea registrase para poder rendir exámenes. Para ello, ingresa su número de documento, su nombre y selecciona las materias a las que se desea inscribir.
Presentaremos en la vista dos textbox para el ingreso de los datos del Alumno y un listbox para la selección de las materias a las que se puede inscribir.

Una vez completado el formulario, se enviará esta información al Controller.
Expuesto de esta manera no se diferencia mucho de otros formularios con un modelo que se envía al Controller, pero la gran diferencia radica en que las materias seleccionadas son un Array de strings. Si quisiéramos pasar este modelo al Controller de manera tradicional, es decir, mediante POST, el array de materias seleccionadas llegará null.
Para poder pasar los datos completos, debemos utilizar ajax, quien permite poder pasar objetos más complejos de lo habitual. Para ello nos valdremos de jQuery.


El modelo podría lucir de la siguiente manera:

public class Inscripcion
{
    public string Alumno { get; set; }
    public string Dni { get; set; }
    public string[] MateriasSeleccionadas { get; set; }
}

A continuación podremos ver un fragmento del código de la vista. En ella se puede ver que se crea un Array en donde se almacenaran las materias seleccionadas y luego se procederá a enviar la información por el método ajax de jquery. Luego, y si está todo Ok, se redirige a otra locación. En este caso una página con el listado de las inscripciones ingresadas hasta el momento.

function InscribirAlumno() {
var materias = new Array();

$('#MateriasSeleccionadas :selected').each(function () {
    materias.push($(this).text());
});

$.ajax({
    url: '@Url.Action( "Inscribir", "Home" )',
    type: 'POST',
    traditional: true,
    data: {
        AlumnoNombre: $('input[id=AlumnoNombre]').val(),
        AlumnoDni: $('input[id=AlumnoDni]').val(),
        MateriasSeleccionadas: materias
    },
    dataType: 'json',
    success: function (response) {
        if (response.Ok) {
            window.location.href = response.Url;
        }
    }
});
}

El Controller podría verse así:

[HttpPost]
public ActionResult Inscribir( Inscripcion inscripcion )
{
    this.repositorio.Grabar( inscripcion );

    string redirectUrl = this.Url.Action( "Inscripciones" );
    return Json( new { Ok = true, Url = redirectUrl } );
}

He creado un proyecto de MVC 4 (aunque con MVC 3, esto también funciona) que pueden descargar y probar. El mismo está preparado para que al compilar se descarguen todos los paquetes de NuGet necesarios para que la aplicación compile correctamente y el archivo no pese tanto.

Por Juan Barrionuevo