4

Por medio de un formulario Modal y usando una función ajax guardo una entidad Material y un archivo del tipo jpeg.

Este es mi vista modal:

@model MaterialViewModel

@{
    ViewBag.Title = "Nuevo material";
    Layout = null;
}

<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Content/js/fileUpload.js"></script>
<link href="~/Content/css/fileUpload.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui.js"></script>
<link href="~/Content/popup/popupstyle.css" rel="stylesheet" />

<div class="modal-header modal-header-success">

    <h3 class="modal-title" style="text-align: center;">
        xxxxx
        <button type="button" class="close panelTitleTxt glyphicon glyphicon-remove landing-icon" data-dismiss="modal" aria-hidden="true"></button>
    </h3>
</div>

@using (Html.BeginForm("CreateForCategory", "CategoriasMateriales", null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    <div class="modal-body">
        @Styles.Render("~/Content/toastr")

        <br />

        <div class="form-horizontal">
            @Html.HiddenFor(x => x.CategoriaId)
            @Html.ValidationSummary(true, "", new {@class = "text-danger"})
            <div class="form-group">
                @Html.LabelFor(model => model.CategoriaId, htmlAttributes: new {@class = "control-label col-sm-3 popup-labelfont"})
                <div class="col-sm-8">
                    @Html.DropDownListFor(x => x.CategoriaId, Model.CategoriasMaterialViewModel, new {@class = "form-control", @disabled = "disabled"})
                    @Html.ValidationMessageFor(model => model.CategoriaId, "", new {@class = "label label-danger"})
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Descripcion, htmlAttributes: new {@class = "control-label col-sm-3 popup-labelfont"})
                <div class="col-sm-8">
                    @Html.EditorFor(model => model.Descripcion, new {htmlAttributes = new {@class = "form-control", maxlength = "200"}})
                    @Html.ValidationMessageFor(model => model.Descripcion, "", new {@class = "label label-danger"})
                </div>
            </div>

            <div class="form-group">
                @Html.Label("Imagen", htmlAttributes: new {@class = "control-label col-sm-3 popup-labelfont"})
                <div class="col-md-offset-0 col-sm-offset-0 col-sm-8">
                    <!-- image-preview-filename input [CUT FROM HERE]-->
                    <div class="input-group image-preview">
                        <input type="text" class="form-control image-preview-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET -->
                        <span class="input-group-btn">
                            <!-- image-preview-clear button -->
                            <button type="button" class="btn btn-danger image-preview-clear" style="display: none;">
                                <span class="glyphicon glyphicon-remove"></span> Clear
                            </button>
                            <!-- image-preview-input -->
                            <div class="btn btn-info image-preview-input">
                                <span class="glyphicon glyphicon-folder-open"></span>
                                <span class="image-preview-input-title">Browse</span>
                                <input type="file" accept="image/png, image/jpeg, image/gif" name="upload" /> <!-- rename it -->
                            </div>
                        </span>
                    </div><!-- /input-group image-preview [TO HERE]-->
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-10">
                    <input class="btn btn-success" id="btnSave" type="submit" value="Guardar"/>
                    <input aria-hidden="true" class="btn btn-md btn-warning" data-dismiss="modal" id="btncancel" type="button" value="Cancelar"/>
                </div>
            </div>

            <div>
                @Scripts.Render("~/bundles/toastr")
                @Html.Partial("_Toastr")
            </div>
        </div>
    </div>
}

<script>    
    $('form').submit(function () {

        $('#myModal').on('hidden.bs.modal', function () {
            window.LoadMateriales();
        });
    });

    $('.modal').modal({
        keyboard: true,
        show: false
    });
    // Jquery draggable
    $('.modal-dialog').draggable({
        handle: ".modal-header"
    });
</script>

Este es mi script ajax:

  $('form').submit(function () {
  var $form = $(this);
  $.ajax({
    url: this.action,
    type: this.method,
    contentType: this.enctype,
    dataType: 'json',
    data: $(this).serialize(),
    success: function (result) {
        if (result.success) {
            $('#myModal').modal('hide');
            //Refresh
            //location.reload();
            $('#replacetarget').load(result.url);
        } else {
            $('#myModalContent').html(result);
            //bindForm();
        }
    }
  });
});

La cual se comunica con este metodo de mi controller:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult CreateForCategory(MaterialViewModel material, HttpPostedFileBase upload)
{    
    var materialDomain = Mapper.Map<MaterialViewModel, Material>(material);

    if (upload != null && upload.ContentLength > 0)
    {
        var imagen = new Imagen
        {
            Nombre = System.IO.Path.GetFileName(upload.FileName),
            TipoContenido = upload.ContentType
        };

        using (var reader = new System.IO.BinaryReader(upload.InputStream))
        {
            imagen.Contenido = reader.ReadBytes(upload.ContentLength);
        }

        materialDomain.Imagen = imagen;
    }

    _materialRepository.Create(materialDomain);


    string url = Url.Action("MaterialesPorCategoriaIndex", "CategoriaMateriales");

    return Json(new { success = true, url = url }, JsonRequestBehavior.AllowGet);
}    

El tema es que si no trato de cargar la imagen junto con la entidad el json retornado por el método llega a la función y puedo cerrar el modal o mostrar algún mensaje, pero si trato de cargar la imagen junto con la entidad el json ya no regresa a la función y este me genera un nuevo html solo con la cadena cargada al objeto json.

¿Alguna idea de como solucionar este problema?

3 respuestas 3

1

La manera correcta de enviar mediante el método jQuery.ajax un form multipart/form-data es utilizando la clase FormData:

  $('form').submit(function () {
    var formData = new FormData(this);
    $.ajax({
      url: this.action,
      type: 'POST',
      data: formData,
      contentType: false,
      cache: false,
      processData: false,
      success: function (result) {
        if (result.success) {
            $('#myModal').modal('hide');
            //Refresh
            //location.reload();
            $('#replacetarget').load(result.url);
        } else {
            $('#myModalContent').html(result);
            //bindForm();
        }
      }
    });
    return false;
});

Asegúrate de poner el contentType a false para evitar que jQuery le dé valor por ti. También debe poner el valor de processData a false para evitar que jQuery trate de procesar los datos del FormData.

1
  • Hola Asier: Muchas gracias me funciona de maravilla!!! Commented el 18 may. 2016 a las 3:11
1

Cambie la forma en que obtienes los datos de la forma.

Puedes agregar la propiedad error para ver los detalles si es que estas teniendo una excepción:

 $('form').submit(function () {

  var data = new FormData(this); // <-- 'this' es tu forma

  $.ajax({
    url: this.action,
    type: this.method,
    contentType: this.enctype,
    dataType: 'json',
    data: data,
    success: function (result) {
        if (result.success) {
            $('#myModal').modal('hide');
            //Refresh
            //location.reload();
            $('#replacetarget').load(result.url);
        } else {
            $('#myModalContent').html(result);
            //bindForm();
        }
    },
    error: function(jqXHR, textStatus, errorThrown){
        //Checar error aqui
        console.log(jqXHR + " - " + textStatus+ " - " +errorThrown);
    }
  });
});
1

No puedes usar $.ajax con multipart, debes usar librerías como ser

jquery.fileDownload

jQuery-File-Upload

con estas librerias puedes subir archivos y datos en un mismo post

Tienes ejemplo

jQuery-File-Upload.MVC5

que implementan estas librerías en asp.net mvc

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.