How to get each value from table in ASP.NET MVC?

Question

I get each value but it doesn't display on DSChiTiet. How can I fix it? It only gets value TenKH, NgayLap, TongTien.

DSChiTiet doesn't get value from table and displays null. enter image description here

Thank you very much for your help <3.

My model PhieuBanHangModel

public class PhieuBanHangViewModel
{
    public int MaPBH { get; set; }
    public string TenKH { get; set; }
    public DateTime NgayLap { get; set; }
    public decimal TongTien { get; set; }

    public IEnumerable<CT_PhieuBanHangViewModel> DSChiTiet { get; set; }
}

My model CT_PhieuBanHangModel

public class CT_PhieuBanHangViewModel
{
    public int MaPBH { get; set; }
    public int MaSP { get; set; }
    public int SoLuong { get; set; }
    public decimal DonGia { get; set; }
    public decimal ThanhTien { get; set; }
}

Controller Create Json

    [HttpPost]
    public JsonResult Create(PhieuBanHangViewModel phieuBanHang)
    {

        return Json(data: "", JsonRequestBehavior.AllowGet);
    }

Function in View

function ThanhToan() {
        var phieuBanHang = {};
        var dsct_PhieuBanHang = new Array();
        phieuBanHang.TenKH = $("#txtTenKH").val();
        phieuBanHang.NgayLap = $("#txtNgayGiaoDich").val();
        phieuBanHang.TongTien = $("#txtTongTien").val();

        $("table tr:not(:first)").each(function () {
            var ct_PhieuBanHang = {};
            ct_PhieuBanHang.MaSP = parseFloat($(this).find("td:eq(0))").text());
            ct_PhieuBanHang.SoLuong = parseFloat($(this).find("td:eq(4))").text());
            ct_PhieuBanHang.DonGia = parseFloat($(this).find("td:eq(6))").text());
            ct_PhieuBanHang.ThanhTien = parseFloat($(this).find("td:eq(7))").text());
            dsct_PhieuBanHang.push(ct_PhieuBanHang);

        });
        phieuBanHang.DSChiTiet = dsct_PhieuBanHang;
        $.ajax({
            async: true,
            type: 'POST',
            dataType: 'JSON',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(phieuBanHang),
            url: '/Manager/CT_PhieuBanHang/Create',
            success: function (data) {
            },

            error: function () {
                alert('Lỗi');
            }
        });
    }

Answer 1

You may need to inherit ApiController and add the [FromBody] attribute to the binding model:

public class MyController : ApiController
{
    /* something else... */

    // /Manager/CT_PhieuBanHang/Create
    [HttpPost]
    public JsonResult Create([FromBody] PhieuBanHangViewModel phieuBanHang)
    {
        return Json(data: "", JsonRequestBehavior.AllowGet);
    }

    /* something else... */
}

For your jQuery code, make sure thet: $("table tr:not(:first)") do returns an array contains at least 1 item. (You can verify that by doing a console.log(phieuBanHang) to print out your data).