Как создать динамически изменяему форму создания сущности?

Question

[isxaker]

Например у меня есть два класса в модели

public class Book<br>
{<br>
public string Title {get;set;}<br>
public IEnumerable<Author> Authors {get;set;}<br>
}<br>
<br>
public class Author<br>
{<br>
public string FirstName {get;set;}<br>
public string LastName {get;set;}<br>
}<br>

Я хочу создать форму для создания новых книг, на которой можно сразу же добавлять по-одному несколько авторов. Как решаются такие задачи? Подскажите просто в какую сторону копать.

Answer 1

[gleb_kudr]

Если я правильно понял вопрос, то вы спрашиваете, как вам это организовать на фронтенде.
Вам нужно загуглить в сторону «js multiselect dropdown».

Comments

[isxaker]

Здесь нашел то, что искал

Answer 2

[Николай Турнавиотов]

ну решается это в mvc достаточно просто.
гуглить в сторону editor(view)template for custom object

в /views/shared/ создете папочку editortemplates

в ней кладете представление для редактирования вашей модели автор
@model YourApp.Models.Author
Html.EditorFor(model => model.FirstName)
Html.EditorFor(model => model.LastName)

в представлениях Create/edit там где хотите нарисовать контролы для полей автора из кастомного преставления выше пишете
Html.EditorFor(model => model.Author)

дальше, что Вам придётся сделать
для добавления первого автора сразу в форму Вам надо в представление create отдавать уже созданный обьект класса book
// http.get
public ActioResult Create()
{
Book newbook = New Book();
IEnumerable newbook.authors = new IEnumerabe();
newbook.authors.Add(new Author());
return View(newbook);
}

вам это снимет кучу гемора

дальше, вам таки понадобится жаба скрипт, добавляющий и удаляющий строки из dom елемента страницы передл отправкой его на сервер.
я рисовал свой костыль с помощью товарищей (но у меня цель — изучение mvc/html/js), можно поискать нужную библиотечку в nuget'ах.
ну или могу своим поделиться.

хотя у меня в планах уже есть написание видео курса о том как писать сложные приложения на mvc, а то рамки основ по mvc3/4 унылы донельзя и проходятся под пиво за полчаса.

Comments

[isxaker]

А затем, после того как я на js напишу логику по добавлению и удалению сток из dom, у меня будет кнопка, которая будет отправлять Post запрос на создание объекта книга с теми авторами которых я добавил. Там стандартно можно все забиндить, или нужно будет на js писать обработчик клика, вытягивание информации о созданном объекте и вызов метода контрола?

[Николай Турнавиотов]

у меня в dom строка добавляется js по клику на кнопочке с помощью шаблона, удаляется тоже по идентификатору tr в таблице (первая tr в create имеет id=0)

[isxaker]

Меня интересует, как отправить и получить всю информацию, которую ввел пользователь(title, IEnumerable<Author>).

@using (Html.BeginForm("Create", "Book", FormMethod.Post))
        {
            Html.TextBoxFor(m => m.Title);
            Html.EditorFor(model => model.Author)
            <input type="submit" value="Create") />
        }

Можно ли сделать, чтобы данные при нажатии на submit автоматически биндились. Или нужно на js вытащить все данные, которые ввел пользователь, и потом передать их в метод контроллера?

[Николай Турнавиотов]

bind'ят за вас те самые @ html.TextboxFor.
а получать в контроллере подставляя в пост метод нужную модель данных — и это прекрасно видно, если создавать контроллер crud на основе существующей и описанной модели.
совет: пройдите вступительный курс по mvc3/4, Вы, похоже, плаваете в основах — разберитесь с начала с простыми моделями, модель, за которую Вы сейчас взялись, достаточно сложная и требует немного другого подхода, я решился перевести свой проект на модель такого плана только недавно, после длительных развлечений с тестовыми проектами под другие цели и задачи

[isxaker]

Я знаю, что html.TextboxFor автоматически биндится, а Html.EditorFor(model => model.Author) автоматически не биндится после добавления например двух авторов. Мне приходится на js из html элементов вытаскивать данные, введенные пользователем, и передавать их в метод контроллера с помощью
$.ajax({ type: "POST", url: url, data: data });
Вы так же делаете или у вас все автоматически биндится?

[Николай Турнавиотов]

Вы городите фигню.

Создайте в get методе обьект класса книги с двумя авторами, запустите проект и посмотрите исходный код странички create в броузере
хинт: обратить внимание на метки [0], [1] в id середине свойств input'ов для авторов.

после этого начинайте думать, где ошиблись.

хинт два.

в «post» метод «create» изменить принимаемые аргументы на
[HttpPost]
public async Task Create(Book book, FormCollection formdata) //book оставить как есть, дописать после точки FormCollection…
после нажатия кнопки сабмит формы, когда откроется окно студии брекпоинтом посмотреть и сравнить свойства модели книги и formdata.

хинт 3: — не бойтесь экспериментировать