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

questionAnswers(6)

yourAnswerToTheQuestion