c# - route - tag helpers asp net core

Publicación de archivos y modelo en el controlador en ASP.NET Core MVC6

Question

Estoy migrando un proyecto de ASP.NET RC1 a ASP.NET Core 1.0.

Tengo una vista que permite a los usuarios subir uno o más archivos, que publico usando Jquery Ajax. También serializo y publico algunas configuraciones dentro de la misma publicación.

El siguiente todo funcionó en RC1 (y en el núcleo de preasp.net):

Js:

 $(''#submit'').click(function () {
var postData = $(''#fields :input'').serializeArray();
var fileSelect = document.getElementById(''file-select'');
var files = fileSelect.files;
var data = new FormData();
for (var i = 0; i < files.length; i++) {
data.append(''file'' + i, files[i]);
}
$.each(postData, function (key, input) {
data.append(input.name, input.value);
});
var url = ''/ajax/uploadfile'';
$.ajax({
url: url,
type: "POST",
contentType: false,
processData: false,
cache: false,
data: data,
success: function (result) {
alert(''success'');
},
error: function () {
alert(''error'');
}
});
});

Controlador:

 public IActionResult UploadFile(UploadFileModel model)
{
var result = new JsonResultData();
try
{
if (Request.Form.Files.Count > 0)
{
IFormFile file = Request.Form.Files[0];
//etc
}
}
}

Entonces, lo anterior ya no funciona, no se cargó ningún archivo ni se enlazó el modelo . Logré solucionar la mitad de los problemas, así que ahora puedo hacer que el modelo se vincule con el siguiente código. Sin embargo, el controlador todavía me dará una excepción en Request.Files . Agregué la propiedad ''headers'' y utilicé serializeObject (método personalizado). En el controlador agregué FromBody .

Js:

 $(''#submit'').click(function () {
var postData = $(''#fields :input'').serializeArray();
var fileSelect = document.getElementById(''file-select'');
var files = fileSelect.files;
var data = new FormData();
for (var i = 0; i < files.length; i++) {
data.append(''file'' + i, files[i]);
}
$.each(postData, function (key, input) {
data.append(input.name, input.value);
});
var url = ''/ajax/uploadfile'';
$.ajax({
url: url,
type: "POST",
headers: {
''Accept'': ''application/json'',
''Content-Type'': ''application/json''
},
processData: false,
cache: false,
data: serializeAndStingifyArray(data),
success: function (result) {
alert(''success'');
},
error: function () {
alert(''error'');
}
});
});
function serializeAndStingifyArray(array) {
var o = {};
var a = array;
$.each(a, function () {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '''');
} else {
o[this.name] = this.value || '''';
}
});
return JSON.stringify(o);
};

Controlador:

 [HttpPost]
public IActionResult UploadFile([FromBody]UploadFileModel model)
{
var result = new JsonResultData();
try
{
if (Request.Form.Files.Count > 0)
{
IFormFile file = Request.Form.Files[0];
//etc
}
}
}

html:

 <div id="file-list">
<input type="file" name="file" class="file-select" accept="application/pdf,application">
<input type="file" name="file" class="file-select" accept="application/pdf,application" />
</div>

Answer 1

Empecé con este artículo que tiene un código que es casi el mismo que el suyo. Cargue archivos en ASP.NET Core 1.0 (consulte el caso Ajax).

Eso funcionó bien para mí en 1.0.0, así que implementé los cambios y lo que vi es que no envió los archivos en la solicitud (problema del lado del cliente).

Así es como debería verse la carga útil cuando se trabaja correctamente usando F12 en chrome: (no estoy seguro de por qué el contenido del archivo está oculto por cromo).

Una pequeña depuración y está pasando datos incorrectos a data.append

La solución está en esta línea

 $(".file-select").each(function () { data.append($(this).val(), $(this).get(0).files[0]); i++; })

Código completo:

$(document).ready(function () {
$("#submit").click(function (evt) {
var data = new FormData();
i = 0;
$(".file-select").each(function () { data.append($(this).val(), $(this).get(0).files[0]); i++; })
var postData = $(''#fields :input'');
$.each(postData, function (key, input) {
data.append(input.name, input.value);
});
$.ajax({
type: "POST",
url: "/ajax/uploadfile", // <--- Double check this url.
contentType: false,
processData: false,
data: data,
success: function (message) {
alert(message);
},
error: function () {
alert("There was error uploading files!");
}
});
});
});

No es necesario usar [FromBody] o serializeArray ()

 [HttpPost]
public IActionResult UploadFilesAjax(MyViewModel xxx )
{

Este es mi html, por si acaso:

<form method="post" enctype="multipart/form-data">
<div id="file-list">
<input type="file" name="file" class="file-select" accept="application/pdf,application">
<input type="file" name="file" class="file-select" accept="application/pdf,application" />
</div>
<div id="fields">
<input type="text" name="Email" />
</div>
<input type="button"
id="submit"
value="Upload Selected Files" />
</form>