Создание формы с динамическим массивом объектов в ядре .Net

Question

В настоящее время я создаю форму с .Net core 2, в которой содержится список объектов. Вот пример самой формы.

public class InsuranceForm
{
    public IList<WindowModel> Windows { get; set; }
}
public class WindowModel
{
    public string WindowImage { get; set; }
    public string WindowDamageDescription { get; set; }
}

В View мне нужно иметь возможность добавить два поля ввода (изображение окна и описание повреждения окна) нажатием кнопки, а затем отправить форму с массивом этих свойств с помощью кнопки отправки. Я пытался реализовать добавление новых полей ввода с VueJs, но не удалось отправить данные в массив.

                <div id="newWindowButtons">
                <button type="button" v-on:click="addNewWindow" class="btn btn-success">
                    Add new window
                </button>
            </div>
 <div v-for="(window, index) in windows">
                    <div class="form-group mt-3">
                        <input v-model="windows.WindowImage" type="file" class="form-control-file">
                    </div>
                    <div class="form-group">
                        <input class="form-control" v-model="window.WindowDamageDescription"
                               type="text" />
                    </div>
            </div>

Как правильно передать значения этих входных данных при отправке? Спасибо.

Обновление с полным кодом.

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

[HttpPost]
    public async Task<IActionResult> Insurance([FromForm]InsuranceForm insuranceForm)
    {
        var client = new HttpClient();

        if (ModelState.IsValid)
        {


            var response = await client.PostAsJsonAsync("url", insuranceForm);
            return RedirectToAction("Index");
        }
        else
        {
            var modelStateErrors = ModelState.Keys.SelectMany(key => ModelState[key].Errors);
        }
        return View(insuranceForm);
    }

Код VueJs:

var app = new Vue({
        el: "#app",
        data: {
            window: {
                WindowImage: "",
                WindowDamageDescription: ""
            },
            windows: [],
        },
        methods: {
            addNewWindow: function () {
                this.windows.push(Vue.util.extend({}, this.window));
            }
     },

    });

View

 <form method="post" id="insuranceForm">
<div id="newWindowButtons">
                <button type="button" v-on:click="addNewWindow" class="btn btn-success">
                    Add new window
                </button>
            </div>
            <div v-for="(window, index) in windows">
                    <div class="form-group mt-3">
                        <input v-model="windows.WindowImage" type="file" class="form-control-file">
                    </div>
                    <div class="form-group">
                        <input class="form-control" v-model="window.WindowDamageDescription"
                               type="text" />
                    </div>
            </div>
            <div class="d-flex justify-content-start">
            <button type="submit" class="btn btn-primary btn-lg" id="submitForm">Send</button>
        </div>
    </form>

Answer 1

Если вы используете подход Vue для работы с вашими формами, вы можете сделать следующее:

Ваша форма.

<form v-on:submit.prevent="postData()">

<div v-for="(window, index) in windows">
  <div class="form-group mt-3">
    <input v-on:change="onFileChange($event, index)" type="file" class="form-control-file">
  </div>
  <div class="form-group">
    <input class="form-control" v-model="window.windowDamageDescription" type="text" />
  </div>
</div>

<button v-on:click="addNewWindow">Add new window</button>

<button type="submit">Submit form</button>

</form>

В вашем экземпляре VueJ вы определяете и обрабатываете свои данные и отправку форм.

var app = new Vue({
el: '#app',
data: {
  windows: [{
      windowImage: undefined,
      windowDamageDescription: 'First image description'
    },
    {
      windowImage: undefined,
      windowDamageDescription: 'Second image description'
    }
  ]
},
methods: {
  addNewWindow: function () {
    this.windows.push({
      windowImage: undefined,
      windowDamageDescription: ''
    })
  },
  onFileChange(e, index) {
    var files = e.target.files || e.dataTransfer.files
    if (!files.length)
      return

    this.windows[index].windowImage = files[0].name
  },
  postData() {
    fetch('/submitForm', {
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        method: 'POST',
        body: JSON.stringify({windows: this.windows})
      })
      .then(function (res) {
        console.log(res)
      })
      .catch(function (res) {
        console.log(res)
      })
  }
}
})

И, наконец, в вашем контроллере вы создаете метод, принимающий эти данные.

    [HttpPost("submitForm")]
    public IActionResult SubmitForm([FromBody] InsuranceForm insuranceForm)
    {
        if (insuranceForm == null)
            return BadRequest();

        // Do something with the data

        return Ok();
    }

Имейте в виду, что если вы хотите загружать файлы, вы должны принимать IFormFile тип данных, а не строку.