将 Json 绑定到操作参数 ASP.NET MVC 5答案

【问题标题】：Bind Json to action parameter ASP.NET MVC 5将 Json 绑定到操作参数 ASP.NET MVC 5
【发布时间】：2015-03-19 16:52:00
【问题描述】：

我正在开发一个使用 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 以获取数据库）

【问题讨论】：

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

【解决方案1】：

我的错误，输入#create-playlist 是一个提交，在 JavaScript 中我试图调用点击事件。尽管如此，提交事件被调用，这就是它绑定不正确的原因。现在我将输入类型更改为“按钮”，它工作正常。

【讨论】：