Tworzenie listy <T> z widokiem i POST z formularza do kontrolera MVC

Question

Tle
Pracuję nad projektem strony internetowej klienta i Użyłem MVC, aby utworzyć witrynę. Mam EF pracy z SQLDB do przechowywania danych.

Moja WebApp wyposażony jest w obszarze back-office do zarządzania/dodawania/aktualizowania Item s itp

danej strony w pytaniu pozwala użytkownikowi na dodanie nowego Item do bazy danych przez wprowadzanie danych i klikając ' Zapisz "w formularzu.

Ma pewne właściwości, które wszystkie dodają DB ładnie w nowym wierszu.

Item zawiera również zadeklarowane przeciwko niemu List<Appointment> (będę je serializować i zapisywać w odpowiedniej kolumnie).

Obiekty wyglądać następująco (I zostały usunięte niektóre właściwości dla zwięzłość):

public class Item 
{ 
    public int Id { get; set; } 
    public string Name { get; set; } 
    public List<Appointment> Appointments { get; set; } 
    // Plus some other properties 
} 

public class Appointment 
{ 
    public string Day { get; set; } 
    public string From { get; set; } 
    public string To { get; set; } 
} 

Mam określone ViewModel w użyciu i ćwiczę cały ten zwykły dobrej praktyki rzeczy. Wygląda to tak:

public class AddItemViewModel 
{ 
    [Required(ErrorMessage = "Please enter an item name")] 
    [Display(Name="Item Name")] 
    public string Name { get; set; } 

    [Display(Name="Appointments")] 
    public List<Appointment> Appointments { get; set; } 

    ... 
    // Other properties in here 
    ... 
} 

Używam silnika widoku Razor.

Mam wszystko działa poprawnie przy użyciu pomocnika @Html.EditorFor(x => x.Property); dla wszystkich (ale jeden - powiem ci za chwilę) elementy we właściwościach obiektu root (Item).

Mogę wysłać ViewModel do kontrolera i zapisać nowy Item i cały ten jazz - więc wszystko jest tam dobre.

Problem
mam List<Appointment> zadeklarowane w moim ViewModel.

Jak mogę zezwolić użytkownikowi na dodanie nowych Appointment s do tego List<Appointment> z na stronie?

chcę przypisać je do obiektu Item zostać utworzony podczas ViewModel jest zamieszczona - Zrobię to w moim kontroler/usług itp

W jaki sposób można to osiągnąć?

Pożądany widok
Potrzebuję użytkownika, aby móc dodać Appointment s od wewnątrz strony - do jednak wiele im się podoba, naprawdę.

Chciałbym, aby lista "utworzonych" Appointment na liście (ul lub coś podobnego itp.) W obszarze na stronie.

Pod tym liście chciałbym kilka pól tekstowych, które są istotne dla Day, From i To właściwości dla Appointment - z przyciskiem „Dodaj”, która dołącza go do listy (i podaje pól tekstowych, idealnie).

Jako bonus, chciałbym również użyć jakiegoś "-laque" "×" obok każdego elementu, aby usunąć go z List<Appointment> i widoku.

Oto próbka (sporządzony w MSPaint - narzędzia old-school FTW!), Co mogę sobie wyobrazić widok, aby wyglądać tak:

Czego próbowałem
byłem kopanie daleko i szeroko, ale jak dotąd nic mi nie przyszło na ratunek.

• Mam spojrzał na wiele rozwiązań do czynienia z dodawania obiektów w JavaScript do strony - co działa. Jedynym problemem jest to, że nie mogę ich odebrać w obiekcie, który zostanie wysłany do kontrolera.

• Zostałem również wskazany w bezpośrednim użyciu Ajax do stworzenia obiektu Appointment i wstawienia go na stronę, ale to też nie zostało odebrane.

Twoje doświadczenie, wiedza i mądrość są bardzo cenne.

Answer 1

1. Aby móc dodawać nowe kontrolki wejściowe Nominacje na UI dynamicznie na kliknięcie przycisku Dodaj, można

[kod poniżej z góry głowę, a bardziej jak pseudo- kod]

a) użyj jQuery/js do sklonowania ukrytego elementu div, który został wstępnie renderowany w widoku zawierającym wszystkie odpowiednie elementy sterujące terminem.

np. byłoby to pre-renderowane div, który posłuży jako szablon

<div style="display:none;" id="appointment-template"> 
    <input type=text> 
</div> 

a następnie funkcję klonowania jQuery na kliknięcie Dodaj byłoby coś

var addNewAppointmentRowFromTemplate = function(){ 
     $("#appointments-list-container").append($("#appointment-template").clone()); 
    } 

LUB

b) get częściowy widok z serwera i dołączenie go do formularza (ponownie za pomocą jQuery $ .get/js xhr)

$.get("controller/templatDivActionMethodUrl", function(data) { 
     $("#appointments-list-container").append(data); 
    }); 

var appointmentsJson = []; //foreach loop is a pseudo code, can be replaced with $.each() foreach (var appointment in $("#appointments-list-container").children()){ appointmentsJson.push(new {'day' : $(appointment).children("#day").val(),'from' : $(appointment).children("#from").val(),'to' : $(appointment).children("#to").val()}) ;} //and then post this json to actionMethod $.post("serverController/Actionmethod",{appointments: appointmentsJson});

lub

b) Za pomocą funkcji ModelBinder który pochodzi z ASP.NET MVC.Istnieje wiele dokumentacji/samouczków na ten temat, punkt początkowy: https://docs.asp.net/en/latest/mvc/models/model-binding.html