O upload de arquivo no MVC quando usado no modal de bootstrap retorna nulo
Estou tentando fazer upload de imagens para o meu aplicativo, mas ele sempre retorna nulo. Não consigo encontrar o problema aqui. Você pode me ajudar? Aqui está o meu código.
Modelo
[Table("Slider")]
public partial class Slider : BaseModel
{
[Required]
[StringLength(200)]
public string FileName { get; set; }
[StringLength(200)]
public string Title { get; set; }
[StringLength(1000)]
public string Description { get; set; }
public int? Order { get; set; }
}
[NotMapped]
public class SliderImage : Slider
{
public HttpPostedFileBase ImageFile { get; set; }
}
Visão
@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
<div class="modal-body">
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.Id)
<div class="form-group">
@Html.LabelFor(model => model.FileName, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(model => model.FileName, new { @class = "form-control", @readonly = "readonly" })
@Html.ValidationMessageFor(model => model.FileName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.ImageFile, new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.ImageFile, new { @class = "form-control", type = "file" })
//This is Same as below
//<input class="form-control" id="ImageFile" name="ImageFile" type="file" value="">
</div>
</div>
Controlador
public ActionResult Edit(int id)
{
Slider slider = _db.Sliders.Find(id);
if (slider == null)
{
return HttpNotFound();
}
Mapper.CreateMap<Slider, SliderImage>();
SliderImage sliderImage = Mapper.Map<Slider, SliderImage>(slider);
return PartialView("_Edit", sliderImage);
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult EditSlider([Bind(Include = "Id,FileName,Title,Description,Order,IsActive,Name,ImageFile")] SliderImage sliderImage)
{
if (ModelState.IsValid)
{
Mapper.CreateMap<SliderImage, Slider>();
Slider slider = Mapper.Map<SliderImage, Slider>(sliderImage);
_db.Entry(slider).State = EntityState.Modified;
_db.SaveChanges();
return Json(new { success = true });
}
return PartialView("_EditSlider");
}
O que estou fazendo de errado?
Encontrado o problema
Estou ligando a vista parcial dentro do pop-up modal de inicialização. Quando faço upload do pop-up, o upload retorna nulo. Em vez disso, se eu abrir a Vista parcial diretamente no navegador, o arquivo estará presente no modelo. Portanto, não há problema com o upload do arquivo. O problema é com pop-up modal ou algo assim.
Ao usar o modelo Bootstrap
Ao usar o View Directy parcial
Verifique a diferença encontrada ao usar o violinista entre o envio modal do Bootstrap e o uso da vista parcial diretamente na imagem a seguir, respectivamente
Ao postar a partir do pop-up modal, o tipo de conteúdo é alterado paraapplication/x-www-form-urlencoded
onde, ao usar diretamente a vista parcial, émultipart/form-data
Encontrou o problema raiz.
$('form', dialog).submit(function () {
var $form = $(this);
var enctype = $form.attr('id');
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
if (result.success) {
$('#myModal').modal('hide');
//Refresh
location.reload();
} else {
$('#myModalContent').html(result);
bindForm();
}
}
});
return false;
});
Estou usando a postagem do AJAX para enviar os dados do meu formulário. Ao usar$(this).serialize()
o sucesso do ajax está sendo chamado, mas o arquivo não está retornando, pois o tipo de conteúdo é diferente. Como posso mudar isso??