将Json绑定到动作参数ASP.NET MVC 5

时间:2015-03-19 16:52:00

标签: jquery json post asp.net-mvc-5 model-binding

我正在开发一个使用ASP.NET MVC 5的简单应用程序。我在尝试将json转换为实体时遇到了问题。

这是我的代码:

实体

public class PlayListViewModel
{

    public PlayListViewModel() {
        Tracks = new List<Track>();
    }

    public PlayListViewModel(Dominio.Playlist playList)
    {

        this.Id= playList.Id;
        this.Nombre = playList.Name;

    }
    public int Id { get; set; }
    public string Nombre { get; set; }
    public int Calificacion { get; set; }
    public List<Track> Tracks { get; set; }

    public class Track
    {
        public int Id { get; set; }
    }
}

HTML

@model  MyTunes.Models.PlayListViewModel

<div class="form-horizontal">
    <h4>Playlist</h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.Nombre, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Nombre, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.Nombre, "", new { @class = "text-danger" })

        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-2">Track</label>
        <div class="col-md-4">
            <input type="hidden" id="hdn-track-id" />
            <input type="text" id="input-track" class="form-control" />
        </div>
        <div class="col-md-6">
            <input type="button" value="Agregar Track" class="btn btn-default" id="add-track" />
        </div>
    </div>

    <table class="table" id="tb_track">
        <tr>
            <th>Lista de Tracks</th>
            <th></th>
        </tr>
    </table>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" id="create-playlist" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>

的JavaScript

    $("#create-playlist").on('click', function () {

    var playlist = {
        Id : '1',
        Calificacion : '2',
        Nombre : $("#Nombre").val(),
        Tracks: []
    };

    $("td[data-pick='1']").each(function () {
        var idTrack = $(this).attr("data-id");
        playlist.Tracks.push({ Id: idTrack });
    });

    //function PlayListModel() {
    //    var self = this;
    //    self.Nombre = $("#Nombre").val();
    //    self.tracks = [];
    //}

    $.ajax(
        {
            url: "/Playlist/Create",
            type: "POST",
            data: JSON.stringify(playlist),
            success: function (data) {
                $(".result").html(data);
            },
            dataType: "json",
            contentType: "application/json" //"application/json; charset=utf-8"
        });
});

控制器

[HttpPost]
    [ValidateAntiForgeryToken]
    public JsonResult Create(PlayListViewModel playlist)
    {
        if (ModelState.IsValid)
        {
           //Of course I have to add some code here
        }

        // If we got this far, something failed, redisplay form
        return Json(true);
    }

当我运行它时,只有字段“Nombre”被映射为“播放列表”对象的一部分,该对象作为“创建”动作的参数被接收。

我对字段“Id”和“Calificacion”进行了硬编码,但它没有正确绑定(只显示0,因为它们是整数)。此外,还有一个应绑定的曲目列表,但它们也不绑定。

我尝试将JSON作为对象传递,并使用JSON.stringify方法但是没有运气。

任何帮助都将非常感激(如果您更喜欢运行代码,可以从这里下载https://github.com/lbendezu/myTunesLux - 访问myTunesLux / MyTunes / DbScripts以获取数据库)

1 个答案:

答案 0 :(得分:0)

我的错误,输入#create-playlist是一个提交,在JavaScript中我试图调用click事件。尽管如此,提交事件被调用,这就是为什么它绑定不正确。现在我将输入类型更改为&#34;按钮&#34;它工作正常。