Knockout.js&复选框列表:发布到mvc控制器

时间:2012-05-22 08:35:18

标签: asp.net-mvc asp.net-mvc-3 asp.net-mvc-2 knockout.js knockout-mapping-plugin

我有一个MVC视图模型,如下所示:

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

CountriesCollection对象(第9行)如下所示:

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

现在,我正在创建一个新的,空白的CountriesCollection实例,然后将其添加到DirectorySearchModel视图模型的空白实例中,然后将其全部序列化为Knockout.js的javascript视图模型:

{
"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"}]
}

我的复选框呈现为:<input checked="checked" data-bind="checked: Countries.arrCountries" id="Countries_arrCountries30" name="Countries.arrCountries" type="checkbox" value="1">。检查一对夫妇意味着你最终得到了这个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"}]
}

正常提交我的视图(即通过提交按钮而不是Knockout.js)到期望DirectorySearchModel的MVC操作,我可以要求model.Countries.arrCountries获取一个列表已检查的项目,但是当我使用...

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

...或

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

要求同一DirectorySearchModel的另一项操作,model.Countries.arrCountries始终为null!我想知道是否由于Knockout.js将arrCountries条目发布为string[]时MVC期待int[] s,但是将我的MVC代码更改为期望string[] s并不是似乎改变了很多..! CountriesCollection中的DirectorySearchModel对象似乎存在,但它始终是arrCountries内的null

有什么想法吗?任何帮助非常感谢!

修改

接收Knockout.js viewModel:

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

getResultCount方法:

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

固定!

感谢Konstantin指出从$ .post到$ .ajax的简单切换将我的Knockout.js视图模型发送回我的mvc动作就是所有需要的!这是我正在使用的$ .ajax代码:

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

1 个答案:

答案 0 :(得分:2)

你不能使用$ .post你需要去底层$ .ajax并添加正确的contenttype以使mvc接受发布的json并进行模型绑定(contenttype应该是“application / json; charset = utf-8 “)谷歌为它,你会有很多例子