【发布时间】：2021-09-17 05:36:39
【问题描述】：
我正在研究 asp.net 核心，我想将包含来自 ajax 请求的文件的列表对象发送到控制器
视图模型
public class FormDataVM
{
public Guid FormTemplateId { get; set; }
public int FieldTemplateId { get; set; }
public string Value { get; set; }
}
控制器
[HttpPost]
public async Task<JsonResult> SubmitForm(List<FormDataVM> formData , IFormFile file)
{
if (ModelState.IsValid)
{
var uploads = Path.Combine(_hostingEnvironment.WebRootPath, "images");
if (file != null && file.Length > 0)
{
var fileName = Guid.NewGuid().ToString().Replace("-", "") +
Path.GetExtension(file.FileName);
using (var s = new FileStream(Path.Combine(uploads, fileName),
FileMode.Create))
{
await file.CopyToAsync(s);
}
// to be continued
}
return Json(new { status = "success", message = "success" });
}
return Json(new { status = "failed", message = "failed" });
}
ajax 请求：data 是在控制台打印的对象
<form>
<div id="Cards">
@foreach (var item in Model.FieldTemplates)
{
<div class="form-box">
<div class="card">
<div class="card-body">
<h5 class="card-title">@item.Name</h5>
<div class="form-group">
@if (item.FieldTemplateEnum == FormBuilder.Enums.FieldTemplateEnum.Answer)
{
@Html.HiddenFor(x => item.Id)
@Html.HiddenFor(x => item.FieldTemplateEnum)
<h5 class="card-title">
<input placeholder="Untitled Question" type="text" class="form-control AnswerInput">
</h5>
}
@if (item.FieldTemplateEnum == FormBuilder.Enums.FieldTemplateEnum.CheckBox)
{
@Html.HiddenFor(x => item.Id)
@Html.HiddenFor(x => item.FieldTemplateEnum)
<div class="CheckBoxItemView">
@foreach (var value in item.FieldElementTemplates)
{
<div class="form-check">
<input class="form-check-input" name="CheckBoxInput" type="checkbox" value="@value.Value">
<label class="form-check-label" for="flexCheckDefault">
@value.Value
</label>
</div>
}
</div>
}
@if (item.FieldTemplateEnum == FormBuilder.Enums.FieldTemplateEnum.RadioButton)
{
@Html.HiddenFor(x => item.Id)
@Html.HiddenFor(x => item.FieldTemplateEnum)
<div class="RadioButtonItemView">
@foreach (var value in item.FieldElementTemplates)
{
<div class="form-check">
<input class="form-check-input" type="radio" value="@value.Value" name="RadioInput" id="exampleRadios3">
<label class="form-check-label" for="exampleRadios3">
@value.Value
</label>
</div>
}
</div>
}
@if (item.FieldTemplateEnum == FormBuilder.Enums.FieldTemplateEnum.FileUpload)
{
@Html.HiddenFor(x => item.Id)
@Html.HiddenFor(x => item.FieldTemplateEnum)
<div class="form-group">
<label for="exampleFormControlFile1">upload file</label>
<input type="file" class="form-control-file FileInput">
</div>
}
@if (item.FieldTemplateEnum == FormBuilder.Enums.FieldTemplateEnum.DateAndTime)
{
@Html.HiddenFor(x => item.Id)
@Html.HiddenFor(x => item.FieldTemplateEnum)
<div class="col-md-4">
<input type="text" class="form-control DateTimeInput">
</div>
}
</div>
</div>
</div>
</div>
}
<div class="row">
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" id="Submit" value="Submit" class="btn btn-primary" />
</div>
</div>
</div>
</div>
</form>
@section Scripts{
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$('.DateTimeInput').datetimepicker();
});
$('#Submit').click(function () {
PrepareForm();
});
function PrepareForm() {
var DataObject = new Object();
var listCards = [];
$('#Cards>div').each(function () {
var singleObj = {};
singleObj['FormTemplateId'] = $('#Id').val();
singleObj['FieldTemplateId'] = $(this).find('#item_Id').val();
var templateType = $(this).find('#item_FieldTemplateEnum').val();
if (templateType == "Answer") {
singleObj['Value'] = $(this).find('.AnswerInput').val();
}
else if (templateType == "CheckBox") {
var selectedChecks = '';
$('input:checkbox[name=CheckBoxInput]:checked').each(function () {
selectedChecks += $(this).val() + " , ";
singleObj['Value'] = selectedChecks.replace(/,(\s+)?$/, '');
});
}
else if (templateType == "RadioButton") {
singleObj['Value'] = $(this).find($("input[name=RadioInput]:checked")).val();
}
else if (templateType == "FileUpload") {
singleObj['Value'] = $(this).find('.FileInput')[0].files[0];
//console.log($(this).find('.FileInput')[0].files[0].name);
}
else if (templateType == "DateAndTime") {
singleObj['Value'] = $(this).find('.DateTimeInput').val();
}
listCards.push(singleObj);
});
DataObject = listCards;
console.log(DataObject);
var data = new FormData();
debugger;
for (var i = 0; i < DataObject.length; i++) {
debugger;
data.append([i]+"FormTemplateId", DataObject[i].FormTemplateId);
data.append([i]+"FieldTemplateId", DataObject[i].FieldTemplateId);
data.append([i]+"Value", DataObject[i].Value);
}
SubmitForm(data);
}
function SubmitForm(formData) {
$.ajax({
type: "POST",
url: "@Url.Action("SubmitForm", "Form")",
data: formData,
contentType: false,
processData: false,
success: function (message) {
alert(message);
},
error: function () {
alert("there was error uploading files!");
}
});
}
});
</script>
}
当我发送请求时，实际操作中的列表始终计数为 0 并且文件为 null ，那么如何解决此问题。
【问题讨论】：
-
您的控制台屏幕截图显示
data是一个数组。此外，您必须使用 FormData 对象来上传文件。
标签： javascript c# jquery ajax asp.net-core