在.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; }
}

在视图中，我需要能够通过按钮单击添加两个输入字段（窗口图像和窗口损坏描述），然后通过提交按钮发送包含此属性数组的表单。我试图用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));
            }
     },

    });

视图

 <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>

在VueJs实例上，您可以定义和处理数据并进行表单提交。

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类型的数据而不是字符串。