1

Tengo tres días tratando de concretar este código, ¿alguién me puede decir qué estoy haciendo mal?:

Controller:

[HttpPost]
public ActionResult Index(Empleado empleado)
{
    if (ModelState.IsValid)
    {
        _db.Empleados.Add(empleado);
        _db.SaveChanges();

        return Json(empleado);
    }

    return Json(null);
}

Model:

public class Empleado
{
    [Key]
    public int Id { get; set; }

    [Required]
    public string Nombre { get; set; }
}

View:

@model WebApplication1.Models.Empleado

@{
    ViewBag.Title = "Home Page";
}

<form id="formulario">
    <div class="form-horizontal">
        @Html.TextBoxFor(model => model.Nombre, new { @class = "form-control", @placeholder = "Nombre" })
        <input type="submit" value="Confirmar" class="btn btn-success" id="btnConfirmar" />
    </div>
</form>

<div id="resultado"></div>
@section Scripts{
@Scripts.Render("~/bundles/jqueryval")
        <script>
            $(document).ready(function () {
                $('#btnConfirmar').click(function () {
                    var data = $('#formulario').serialize();
                    var url = "@Url.Action("Index", "Home")";

                    $.post(url, data).done(function () {
                        $('#resultado').html("Guardado");
                    })
                    .fail(function () {
                        $('#resultado').html("Error");
                    });
                });
            });

        </script>
}

Cabe resaltar que también lo intenté con el metodo $.ajax({}) pero tampoco me funcionó.

2
  • Me parece son varias cosas inherentes a lo que te ocurre, te sugiero "Introducción a ASP.NET MVC" en Microsoft Virtual Academy; a mi me sirvio de mucho; entre muchas cosas es que reemplazaste el Html.BeginForm por el <form> en MVC no hay que hacer ciertos cambios. Éxitos
    – user34391
    Commented el 13 jun. 2017 a las 23:07
  • Hola siempre uso el Html.BeginForm pero en los tutoriales que he visto con ajax no lo han usado y tampoco me funcionó
    – Johander
    Commented el 13 jun. 2017 a las 23:18

2 respuestas 2

2

Te recomiendo esta vía:

1- Instala el paquete nuget (microsoft.jQuery.Unobtrusive.Ajax)

Install-Package microsoft.jQuery.Unobtrusive.Ajax

En tu vista index: Views/Empleado/Index.cshtml

@model myapp.Models.Empleado

@{
    ViewBag.Title = "Index";
}

<ul id="resultado">
@foreach (var empleado in ViewBag.Empleados)
{
    <li>@empleado.Nombre</li>
}
</ul>
<h2>Nuevo empleado</h2>

@using (Ajax.BeginForm("Create", "Empleado", new AjaxOptions() { HttpMethod = "Post", UpdateTargetId = "resultado", InsertionMode = InsertionMode.Replace }))
{
@Html.AntiForgeryToken()


<div class="form-horizontal">
    @Html.ValidationSummary(true)

    <div class="form-group">
        @Html.LabelFor(model => model.Nombre, new { @class = "control-label col-md-2" })
        <div class="col-md-5">
            @Html.EditorFor(model => model.Nombre)
            @Html.ValidationMessageFor(model => model.Nombre)
        </div>
    </div>
    <div class="form-group">
        <input type="submit" value="Crear" class="btn btn-success" />
    </div>
</div>
}

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
}

En tu controller: EmpleadoController.cs:

public ActionResult Index()
    {
        ViewBag.Empleados = db.Empleadoes.ToList();
        return View();
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include="Nombre")] Empleado empleado)
    {
        if (ModelState.IsValid)
        {
            db.Empleadoes.Add(empleado);
            db.SaveChanges();
            ViewBag.Empleados = db.Empleadoes.ToList();
            return PartialView("_EmpleadosPartial");
        }

        return View(empleado);
    }

Y en la vista parcial: Views/Empleado/_EmpleadosPartial.cshtml:

@model myapp.Models.Empleado

@foreach (var empleado in ViewBag.Empleados)
{
    <li>@empleado.Nombre</li>
}

¿Cómo funciona esto? De la siguiente manera:

Con:

@using (Ajax.BeginForm("Create", "Empleado", new AjaxOptions() { HttpMethod = "Post", UpdateTargetId = "resultado", InsertionMode = InsertionMode.Replace }))

Estas especificando un formulario que usa Ajax, el cual está llamado la acción Create del controlador Empleado con método POST cuyo resultado será renderizado en la etiqueta cuyo Id sea resultado, por eso estoy llamando una vista parcial en mi controlador. Eso es todo espero te sea de ayuda.

5
  • Justamente es lo que estaba haciendo uno muy parecido, la verdad que muchas gracias por haberte tomado el tiempo de ayudarme, bendiciones!
    – Johander
    Commented el 14 jun. 2017 a las 18:20
  • Hola practicamente copié tu codigo pero con otro modelo llamado persona a la cual le agregé la propiedad Edad, el codigo me inserta pero hace un reload de la página estoy empezando a creer que el error no está en el codigo
    – Johander
    Commented el 14 jun. 2017 a las 20:47
  • Eso puede ser porque jquery.unobtrusive no esta trabajando.Pero de ser así lo que pasa es que te carga la parcial sola. Prueba hacer la referencia del script en el head de tu layout o verifica que tienes bien declarado el @section scripts. Otra cosa puede ser que no creaste la parcial como se debe. En Views/Home crea tu vista y asegurate de que no hereda de layout osea en el formulario para crear la vista solo esté marcada la pleca "create as a partial view" Commented el 15 jun. 2017 a las 12:28
  • Si amigo, ya me funciona no sé como pero sin ningún cambio me funcionó ya estaba que me jalaba el cabello, gracias!!
    – Johander
    Commented el 15 jun. 2017 a las 14:19
  • Pero ahí no se podría evaluar el tipo de retorno que viene desde el meotodo del controlador, me refiero cuando se usaba retorno tipo Json en el metodo del controller, en la vista no se podrá obtener ese valor para mostrar algun mensaje de alerta diciendo éxito de la operación??algo como OnSuccess ???
    – Danilo
    Commented el 13 ago. 2018 a las 18:14
0

Aquí la actualización

modelo

       public class Persona
       {
       [Key]
       public int Id { get; set; }

       [Required]
       public string Nombre { get; set; }

       [Required]
       public int Edad { get; set; }
       }

controlador home

           private Context _db = new Context();

    public ActionResult Index()
    {
        ViewBag.Personas = _db.Personas.ToList();
        return View();
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "Nombre, Edad")] Persona persona)
    {
        if (ModelState.IsValid)
        {
            _db.Personas.Add(persona);
            _db.SaveChanges();
            ViewBag.Personas = _db.Personas.ToList();
            return PartialView("_PersonasPartial");
        }

        return View(persona);
    }

Vista Index

      @model Ajax.Models.Persona


       @{
       ViewBag.Title = "Index";
        }

        <ul id="resultado">
        @foreach (var persona in ViewBag.Personas)
        {
        <li>@persona.Nombre</li>
         <li>@persona.Edad</li>
        }
      </ul>



          <h2>Nueva persona</h2>


          @using (Ajax.BeginForm("Create", "Home", new AjaxOptions() { HttpMethod = "Post", UpdateTargetId = "resultado", InsertionMode = InsertionMode.Replace }))
          {
          @Html.AntiForgeryToken()


          <div class="form-horizontal">
         @Html.ValidationSummary(true)

        <div class="form-group">
        @Html.LabelFor(model => model.Nombre, new { @class = "control-label col-md-2" })
        <div class="col-md-5">
            @Html.EditorFor(model => model.Nombre)
            @Html.ValidationMessageFor(model => model.Nombre)
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.Edad, new { @class = "control-label col-md-2" })
        <div class="col-md-5">
            @Html.EditorFor(model => model.Edad)
            @Html.ValidationMessageFor(model => model.Edad)
        </div>
    </div>
    <div class="form-group">
        <input type="submit" value="Crear" class="btn btn-success" />
    </div>
    </div>
     }

     @section Scripts {
      @Scripts.Render("~/bundles/jqueryval")
      <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
      }

vista parcial

          @model Ajax.Models.Persona

         @foreach (var persona in ViewBag.Personas)
           {
        <li>@persona.Nombre</li>
         <li>@persona.Edad</li>
        }

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.