ОТПРАВКА модели KnockoutJS на контроллер MVC, список <T>в списке <T>пуст

Question

У меня небольшой опыт работы с KnockoutJS, поэтому, пожалуйста, потерпите меня.

У меня есть базовый пример, который я хочу получить, чтобы я мог расширить его до своего проекта.

Для этого примераВы нажимаете кнопку, и вызывается метод AddSku для возврата данных QuoteLine с List.

Однако, как показывает диаграмма, BomDetails пуст:

Модели:

public class QuoteViewModel
{
    public int Id { get; set; }
    public string QuoteName { get; set; }
    public IList<QuoteLine> QuoteLines { get; set; }
}

public class QuoteLine
{
    public string Description { get; set; }
    public string Sku { get; set; }

    public IList<BomDetail> BomDetails = new List<BomDetail>();
}

public class BomDetail
{
    public string Name { get; set; }
}   

Методы контроллера:

[HttpGet]
public ActionResult CreateQuote()
{
    QuoteViewModel quote = new QuoteViewModel();
    quote.Id = 10;
    quote.QuoteName = "Test Create Quote";
    quote.QuoteLines = new List<QuoteLine>();

    return View(quote);
}

[HttpPost]
public ActionResult CreateQuote(QuoteViewModel viewModel)
{
    if (ModelState.IsValid)
    {

    }

    return RedirectToAction("CreateQuote");
}

[HttpGet]
public JsonResult AddSku()
{
    QuoteLine line = new QuoteLine();
    line.BomDetails = new List<BomDetail>();

    line.Sku = "TestSku";
    line.Description = "TestDescription";

    line.BomDetails.Add(new BomDetail
    {
       Name = "BOM Detail 1"         
    });

    line.BomDetails.Add(new BomDetail
    {
        Name = "BOM Detail 2",
    });

    return Json(line, JsonRequestBehavior.AllowGet);
}

Вид:

@model EngineeringAssistantMVC.ViewModels.QuoteViewModel

<script src="~/Scripts/knockout.mapping-latest.js"></script>

<div class="container-fluid">

<h2>Create Quote</h2>

@using (Html.BeginForm("CreateQuote", "Test", FormMethod.Post, new { @id = "createQuoteForm", @class = "form-horizontal", role = Model, enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(m => m.Id)
    @Html.HiddenFor(m => m.QuoteName)

    <h3>Quote Lines</h3>

    <table class="table master-detail-table" id="receiving-table">
        <thead>
            <tr>
                <th>SKU</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: QuoteLines">        
            <tr>
                <td>
                    <input class='form-control' data-bind='value: $data.Sku, attr: { name: "QuoteLines[" + $index() + "].Sku" } ' type='text' readonly='readonly' />
                </td>
                <td>
                    <input class='form-control' data-bind='value: $data.Description, attr: { name: "QuoteLines[" + $index() + "].Description" } ' type='text' readonly='readonly' />
                </td>             
            </tr>
            <tr class="detail-row">
                <td colspan="7">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Name</th>
                            </tr>
                        </thead>
                        <tbody data-bind="foreach: BomDetails">
                            <tr>
                                <td>
                                    <input class='form-control' data-bind='value: $data.Name, attr: { name: "BomDetails[" + $index() + "].Name" } ' type='text' readonly='readonly' />
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </tbody>

    </table>

    <h3>Add Sku from Db</h3>
        <div class="row">
            <div class="col-sm-2">
                <input type="button" value="Add Sku" id="btnAddSku" class="btn btn-satcom-primary btn-wider" />
            </div>
        </div>

        <h3>Submit</h3>
        <div class="row">
            <div class="col-sm-1">
                <input type="submit" value="Submit" class="btn btn-satcom-primary btn-wider" id="btnSubmit" />
            </div>
        </div>
}
</div>

<script type="text/javascript">
$(function () {

    quoteViewModel = new QuoteViewModel();
    ko.applyBindings(quoteViewModel);

    $('#btnAddSku').off().on('click', function () {
        AddFromDb();
    });
});

function QuoteViewModel() {
    var self = this;

    self.Id = ko.observable('@Model.Id');
    self.QuoteName = ko.observable('@Model.QuoteName');

    self.QuoteLines = ko.observableArray([]);

    self.AddQuoteLine = function (sku, description, bomDetails) {
        self.QuoteLines.push(new QuoteLineViewModel(sku, description, bomDetails));
    }
}

function QuoteLineViewModel(sku, description, bomDetails) {
    var self = this;
    self.Sku = sku;
    self.Description = description;

    self.BomDetails = ko.observableArray([]);

    $.each(bomDetails, function (index, item) {
        self.BomDetails.push(new BomDetailViewModel(item.Name));
    });     
}

function BomDetailViewModel(name) {
    var self = this;
    self.Name = name;
}

function AddFromDb() {
    $.ajax({
        type: "GET",
        url: '@Url.Action("AddSku", "Test")',
        success: function (line) {
            window.quoteViewModel.AddQuoteLine(line.Sku, line.Description, line.BomDetails);               
        }
    });
}

Я пробовал такмного вещей, чтобы заполнить его, но не могу понять, в чем проблема, но я надеюсь, что это просто глупость, которую я делаю или не делаю.

Я также пытался использовать ko.mapping, но яне могу заставить это работать.

Answer 1

Мне удалось заставить это работать, так что, надеюсь, это поможет кому-то еще в будущем.

Я удалил @Using (Html.BeginForm)

Я изменил кнопку отправки на обычную кнопку и добавил привязку данных к функции

        <input type="button" value="Submit" class="btn btn-satcom-primary btn-wider" id="btnSubmit" data-bind="click:SaveToDatabase" />

Функция SaveToDatabase:

self.SaveToDatabase = function () {
        var dataToSend = ko.mapping.toJSON(self);
        $.ajax({
            type: "POST",
            url: '@Url.Action("CreateQuote", "Test")',
            contentType: 'application/json',
            data: dataToSend,
            success: function (data) {
            },
            error: function (err) {
                console.log(err.responseText);
            }
        });
    }

Это правильно отправляет все данные в контроллер.