Powiedz, że mam klasę Sale:

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

I klasa Item:

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

I mój view model wygląda tak:

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

Chciałbym stworzyć dynamicznie Items na Sales\Create.cshtml. Próbowałem to zrobić za pomocą JavaScript, ale na POST nie są przekazywane przedmioty do Controller.

Każdy dokument, ref lub porady?

0
Gonzalo Lorieto 22 luty 2019, 18:34

2 odpowiedzi

Najlepsza odpowiedź

Wystarczy prawidłowo zbudować nazwy pola Form, gdy dodawasz nowe przedmioty za pośrednictwem JavaScript. W szczególności muszą być w formacie: Sale.Items[N].SomeItemProperty, gdzie N jest indeksem przyrostowym.

Nie jestem pewien, jak dynamicznie dodajesz nowe przedmioty, ale to właśnie tam biblioteki jak Vue, nokaut, kąt, etc. Naprawdę pomagają. Zarządzasz elementami w tablicy JavaScript i wiążąc się z substancją do struktury pętli, używając indeksowania, aby dynamicznie skonstruować atrybut name. Następnie, wszystko co robisz, jest po prostu dodawanie i usuwanie elementów z tej tablicy, a HTML na stronie dostosowują się odpowiednio, reindeksowanie wszystkich nazw.

1
Chris Pratt 22 luty 2019, 16:36

Moje rozwiązanie

ElementPartialCreat.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 Code.

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();
    }
}
0
Gonzalo Lorieto 23 luty 2019, 20:15