Создание отцов и дочерних объектов в одном POST - MVC Core

Question

Скажем, у меня есть Sale класс:

public class Sale
{
    public int Id { get; set; }
    ...    
    public ICollection<Sale> Sales { get; set; }
}

И Item класс:

public class Item
{
    public int Id { get; set; }
    public int SaleId { get; set; }
    ...
    public Sale Sale { get; set; }
}

А мой view model выглядит так:

public class MyViewModel
{
    public Sale Sale { get; set; }
    public Item Item { get; set; }
    public List<Item> Items { get; set; }
}

Я бы хотел динамически создать Items на Sales\Create.cshtml.Я пытался сделать это с JavaScript,, но на POST элементы не передаются на Controller.

Любой документ, ссылка или советы?

Answer 1

Мое решение

ItemPartialCreat.cshtml

        <div class="add-items">
            <div class="form-inline add-item" data-counter="0">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <div class="form-group">
                    <label asp-for="Items[0].Quantity" class="control-label"></label>
                    <input asp-for="Items[0].Quantity" class="form-control" />
                    <span asp-validation-for="Items[0].Quantity" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Items[0].Price" class="control-label"></label>
                    <input asp-for="Items[0].Price" class="form-control" />
                    <span asp-validation-for="Items[0].Price" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <button class="btn btn-remove-item" data-toggle="tooltip" title="Remove Item">
                        <span class="glyphicon glyphicon-minus"></span>
                    </button>
                </div>
            </div>
        </div>
        <input type="button" class="btn btn-add-item" value="Add Item" />            
</div>

JS код

var wrapper = $('.add-items');

$(".btn-add-item").click(function (e) {
    e.preventDefault();

    var clone = $('.add-item:first-child').clone(true);

    counter = clone.data('counter') + 1;

    clone.attr('data-counter', counter);

    clone.find('[name]').attr('name', function (_, name) {
        return name.replace(/\[\d+\]/, '[' + counter + ']');
    });

    clone.appendTo(wrapper);

    $('.add-item .btn-remove-item').show();
});

$('.btn-remove-item').click(function (e) {
    e.preventDefault();
    $(this).parents('.add-item').remove();

    removeButton();
});

function removeButton() {
    if ($('.add-item').length == 1) {
        $('.add-item .btn-remove-item').hide();
    }
}

Answer 2

Вам просто нужно правильно создать имена полей формы при добавлении новых элементов с помощью JavaScript.В частности, они должны быть в формате: Sale.Items[N].SomeItemProperty, где N - инкрементальный индекс.

Я не уверен, как вы добавляете новые элементы динамически, но именно здесь библиотекикак Vue, Knockout, Angular и т. д. действительно помогают.Вы управляете своими элементами в массиве JavaScript и привязываете его к шаблонной структуре цикла, используя индекс для динамического построения атрибута name.Затем все, что вы делаете, это просто добавляете и удаляете элементы из этого массива, и HTML на странице корректируется соответствующим образом, переиндексируя все имена.