asp.net-mvc - knockout - ko observablearray

Knockout.js y lista de casillas de verificación: publicar en el controlador de mvc

Question

Tengo un modelo de vista MVC que se ve así:

public class DirectorySearchModel
{
    [Display(Name = "First name contains")]
    public string FirstName { get; set; }

    [Display(Name = "Last name contains")]
    public string LastName { get; set; }

    public CountriesCollection Countries { get; set; }
    public IEnumerable<Country> SelectedCountries { get; set; }
    public IEnumerable<Country> AllCountries { get; set; }
}

El objeto CountriesCollection (línea 9) tiene el siguiente aspecto:

public class CountriesCollection
{
    [Display(Name = "Countries")]
    public int[] arrCountries { get; set; }
}

Ahora, estoy creando una nueva instancia en blanco de CountriesCollection y luego la agrego a una instancia en blanco del modelo de vista DirectorySearchModel y luego la serializo todo en un modelo de vista de JavaScript para Knockout.js:

{
"FirstName":null,

"LastName":null,

"Countries":{"arrCountries":[]},

"SelectedCountries":[{"RelationshipManager":{},"CountryId":1,"CountryName":"UK"},{"RelationshipManager":{},"CountryId":2,"CountryName":"France"},{"RelationshipManager":{},"CountryId":3,"CountryName":"Spain"}],

"AllCountries":[{"RelationshipManager":{},"CountryId":1,"CountryName":"UK"},{"RelationshipManager":{},"CountryId":2,"CountryName":"France"},{"RelationshipManager":{},"CountryId":3,"CountryName":"Spain"}]
}

Mis casillas de verificación se muestran como: <input checked="checked" data-bind="checked: Countries.arrCountries" id="Countries_arrCountries30" name="Countries.arrCountries" type="checkbox" value="1"> . Comprobar un par significa que terminas con este modelo de vista de Knockout.js:

{
"FirstName":null,

"LastName":null,

"Countries":{"arrCountries":["1", "3"]},

"SelectedCountries":[{"RelationshipManager":{},"CountryId":1,"CountryName":"UK"},{"RelationshipManager":{},"CountryId":2,"CountryName":"France"},{"RelationshipManager":{},"CountryId":3,"CountryName":"Spain"}],

"AllCountries":[{"RelationshipManager":{},"CountryId":1,"CountryName":"UK"},{"RelationshipManager":{},"CountryId":2,"CountryName":"France"},{"RelationshipManager":{},"CountryId":3,"CountryName":"Spain"}]
}

Al enviar mi vista normalmente (es decir, a través de un botón de enviar y no con Knockout.js) a una acción de MVC que espera un DirectorySearchModel , puedo solicitar model.Countries.arrCountries para obtener una lista de los elementos model.Countries.arrCountries , pero cuando utilizar...

$.post("/MyController/MyAction", ko.toJS(viewModel), function(returnData) {
    $("#resultCount").html(returnData);
});

o...

$.post("/MyController/MyAction", viewModel, function(returnData) {
    $("#resultCount").html(returnData);
});

a otra acción que espera el mismo DirectorySearchModel , model.Countries.arrCountries siempre es null ! Me pregunto si es debido a Knockout.js publicando las entradas arrCountries como string[] s cuando MVC espera int[] s, pero cambiar mi código MVC para esperar string[] s no parece cambiar mucho ...! El objeto CountriesCollection dentro del DirectorySearchModel parece existir, pero es el arrCountries dentro de eso siempre null .

¿Algunas ideas? Cualquier ayuda muy apreciada!

Editar

La acción que recibe el modelo de vista Knockout.js:

public MvcHtmlString ResultCount(DirectorySearchModel model)
{
    return new MvcHtmlString(getResultCount(model).ToString());
}

El método getResultCount :

public int getResultCount(DirectorySearchModel model)
{
    IUserRepository userRepository = new UserRepository();
    int count = userRepository.Search(model, null).Count();
    return count;
}

¡FIJO!

¡Gracias a Konstantin por señalar que un simple cambio de $ .post a $ .ajax para enviar mi modelo de vista Knockout.js a mi acción de mvc era todo lo que necesitaba! Aquí está el código $ .ajax que estoy usando:

$.ajax({  
    type: "POST",
    url: "/MyController/MyAction",
    data: ko.toJSON(viewModel),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        $("#resultCount").html(data);
    }
});

Answer 1

No puede usar $ .post necesita ir por el $ .ajax subyacente y agregar el tipo de contenido correcto para que mvc acepte el json publicado y haga el enlace del modelo (contenttype debe ser "application / json; charset = utf-8") google para ello y verás muchos ejemplos