Creando operaciones CRUD en Web API


Luego de haber dado un esbozo de lo que era Web API y ver unos pequeños ejemplos en esta serie de tutoriales comenzaremos a crear las operaciones CRUD (Create, Read, Update, Delete) para usar la base de datos que ya está hecha en MongoDB, sin embargo para este tutorial se dejará el alcance hasta un contexto de lista local. Posteriormente se hará la conexión a la base de datos y los demás temas propuestos en la primera entrada.

Para no extender este tutorial se partirá desde el ejercicio anterior de donde pueden descargar la solución.

Adaptando el proyecto con repositorio

  1. En la carpeta Models crear un nuevo item (Models>Add>New Item…)
  2. En la ventana emergente seleccionar en el panel izquierdo la categoría de código (Code), en ella seleccionar una Interface y ponerle el nombre “IPersonaRepository.cs”.
  3. Poner la interface pública y agregar el siguiente código.
  4. Ahora hacer una clase que implementará la interface (Models>Add>Class…)
  5. A esta clase ponerle el nombre “PersonaRepository.cs”.
  6. En la clase implementar el siguiente código.
        public class PersonaRepository : IPersonaRepository
        {
            private List personas = new List();
            private int _nextId = 1;
    
            public PersonaRepository()
            {
                Add(new Persona() { Id = 0, Nombres = "Camilo Alexander", Apellidos = "Rodríguez Cuarán", FechaPago = new DateTime(2013, 05, 05), Salario = 2500000, ValorComisiones = 0, ValorPension = 100000, ValorSalud = 50000, PagoNeto = 2350000 });
                Add(new Persona() { Id = 1, Nombres = "Jazmín", Apellidos = "Hernandez", FechaPago = new DateTime(2013, 05, 05), Salario = 2500000, ValorComisiones = 0, ValorPension = 100000, ValorSalud = 50000, PagoNeto = 2350000 });
                Add(new Persona() { Id = 2, Nombres = "Rosalba", Apellidos = "Cuarán Fonseca", FechaPago = new DateTime(2013, 05, 05), Salario = 2500000, ValorComisiones = 0, ValorPension = 100000, ValorSalud = 50000, PagoNeto = 2350000 });
                Add(new Persona() { Id = 3, Nombres = "Rosy Tatiana", Apellidos = "Pachón Cuarán", FechaPago = new DateTime(2013, 05, 05), Salario = 2500000, ValorComisiones = 0, ValorPension = 100000, ValorSalud = 50000, PagoNeto = 2350000 });
                Add(new Persona() { Id = 4, Nombres = "Yohis", Apellidos = "Ramirez", FechaPago = new DateTime(2013, 05, 05), Salario = 2500000, ValorComisiones = 0, ValorPension = 100000, ValorSalud = 50000, PagoNeto = 2350000 });
                Add(new Persona() { Id = 5, Nombres = "Hugo Enrique", Apellidos = "Marín", FechaPago = new DateTime(2013, 05, 05), Salario = 2500000, ValorComisiones = 0, ValorPension = 100000, ValorSalud = 50000, PagoNeto = 2350000 });
            }
    
            public IEnumerable GetAll()
            {
                return personas;
            }
    
            public Persona Get(int id=0)
            {
                return personas.Find(p => p.Id == id);
            }
    
            public Persona Add(Persona item)
            {
                if (item == null)
                {
                    throw new ArgumentNullException("item");
                }
                item.Id = _nextId++;
                personas.Add(item);
                return item;
            }
    
            public void Remove (int id)
            {
                personas.RemoveAll(p => p.Id == id);
            }
    
            public bool Update (Persona item)
            {
                if (item == null)
                {
                    throw new ArgumentNullException("item");
                }
    
                int index = personas.FindIndex(p => p.Id == item.Id);
                if(index==-1)
                {
                    return false;
                }
    
                personas.RemoveAt(index);
                personas.Add(item);
    
                return true;
            }
        }
    
  7. Ahora queda por invocar en los métodos del controlador la clase que se acabó de crear de la siguiente manera. Están descritos el Get, Get(id), Post, Put y Delete.

Usando el repositorio de datos

  1. Comentar el código que ya está hecho (en el controlador), si se cree conveniente eliminar esas líneas de código ya que no se necesitan.
  2. Crear el contexto de datos.
    static readonly IPersonaRepository repository = new PersonaRepository();
    
  3. Implementando el método GetAll().
            public IEnumerable Get()
            {
                //return personas;
                return repository.GetAll();
            }
    
  4. Implementando el método Get()
            public IHttpActionResult Get(int id)
            {
                //var persona = personas.FirstOrDefault((p) => p.Id == id);
                var persona = repository.Get(id);
                if (persona == null)
                {
                    return NotFound();
                }
                return Ok(persona);
            }
    
  5. Implementando el Post()
            public HttpResponseMessage Post([FromBody]Persona item)
            {
                item = repository.Add(item);
                var response = Request.CreateResponse(HttpStatusCode.Created, item);
    
                string uri = Url.Link("DefaultApi", new { id = item.Id });
                response.Headers.Location = new Uri(uri);
                return response;
            }
    
  6. Implementando el Put()
            public void Put(int id, [FromBody]Persona persona)
            {
                persona.Id = id;
                if(!repository.Update(persona))
                {
                    NotFound();
                }
            }
    
  7. Implementando el Delete()
            public void Delete(int id)
            {
                Persona item = repository.Get(id);
                if (item==null)
                {
                    NotFound();
                }
    
                repository.Remove(id);
            }
    

Creando la interfaz para el CRUD

Modificar la salida para el READ

  1. Quitar la lista e implementar una tabla para mejorar la presentación y de los datos.
    <div class="table-responsive">
        <table class="table table-hover" id="tabla">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Nombres</th>
                    <th>Apellidos</th>
                    <th>Nombre completo</th>
                    <th>Salario neto</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>            
            </tbody>
        </table>
    </div>
    
  2. En el método $(document).ready(… quitar la petición de AJAX y hacer llamado a la función getAllItems();
  3. Esta función consulta e inserta los datos en la tabla con su respectivo estilo.
                    function getAllItems() {
                var i = 0;
                $.getJSON(uri)
                    .done(function (data) {
                        $.each(data, function (key, item) {
                            rows[i] = "row_" + item.Id;
                            $('<tr id="' + rows[i] + '">' +
                                    '<td>' + item.Id + '</td>' +
                                    '<td>' + item.Nombres + '</td>' +
                                    '<td>' + item.Apellidos + '</td>' +
                                    '<td>' + formatItem(item) + '</td>' +
                                    '<td>' + item.PagoNeto + '</td>' +
                                    '<td> <span id="edit_' + item.Id + '" onclick="javascript:editItem(' + item.Id + ')" style="padding-right:15px; cursor:pointer;" class="glyphicon glyphicon-pencil"></span> <span id="delete_' + item.Id + '" onclick="javascript:deleteItem(' + item.Id + ')" style="cursor:pointer;" class="glyphicon glyphicon-remove"></span></td>' +
                                '</tr>').appendTo($('#tabla>tbody'));
    
                            i++;
                        });
                    });
            }
    
  4. Por último implementar el método para eliminar todos los items de la tabla, hasta aquí según el explorador de Internet usado puede o no puede funcionar, dado que todavía faltan unas variables.
            function deleteAllItems() {
    
                rows.forEach(function(item){
                    $('#'+item).remove();
                });
            }
    

Post

  1. Agregar dos botones que mostrarán un pop-up para agregar una nueva persona y para buscar la persona a través de JQuery UI. Claro está que se puede hacer de otra manera, yo solo estoy proponiendo esta forma de aprovechar el espacio.
    <div class="btn-group">
        <button onclick="javascript: addButton_onClick()" type="button" class="btn btn-default">Agregar</button>
        <button onclick="javascript: findButton_onClick()" type="button" class="btn btn-default">Buscar</button>
    </div>
    
  2. Ir a http://jqueryui.com/ y descargar la última versión, en las configuraciones puede ser la que trae por defecto.
  3. Cuando se haya descargado el archivo zip descomprimirlo o abrirlo, en este caso uso WinRAR y se verán distintos arhivos, de aquí solo se necesitará la carpeta llamada “css” y el archivo “jquery-ui-1.10.4.custom.js” que está en la carpeta “js”.
  4. En Visual Studio arrastar el js a la carpeta “Scripts” y la carpeta css a “Content”.
  5. Agregar la referencia a JQuery en Index.cshtml
    <script type="text/javascript" src="/Scripts/jquery-ui-1.10.4.custom.js"></script>
  6. Implementar el método addButton_onClick que es usado en el evento onclick.
            function addButton_onClick() {
                $('#addDialog').dialog("open");
            }
    
  7. En el método  “$(document).ready(…” implementar el dialogo y sus configuraciones, aquí lo importante es la implementación de los botones internos de la ventana modal.
    $('#addDialog').dialog({
                    autoOpen: false,
                    modal: true,
                    height: 370,
                    width: 350,
                    buttons: {
                        "Guardar": function () {
                            $(this).dialog("close");
                            guardarAddButton();
                        },
                        "Cancelar": function () {
                            $(this).dialog("close");
                        }
                    },
                    close: function () {
                        $(this).dialog("close");
                    }
                });
    
  8. Ahora implementar el método guardarAddButton que lo que hace es capturar todos los datos ingresados, los almacena en una variable tipo Object, convertirlo a JSON y enviar la petición.
            function guardarAddButton() {
                persona = new Object();
    
                persona.Nombres = $('#addNombres').val();
                persona.Apellidos = $('#addApellidos').val();
                persona.PagoNeto = $('#addSalario').val();
                persona.Salario = $('#addSalario').val();
                persona.FechaPago = $('#addFecha').val();
                persona.ValorComisiones = $('#addComisiones').val();
                persona.ValorSalud = $('#addSalud').val();
                persona.ValorPension = $('#addPension').val();
                persona.PagoNeto = $('#addPagoNeto').val();
    
                var personaJSON = JSON.stringify(persona);
    
                $.ajax({
                    url: uri,
                    type: 'POST',
                    data: personaJSON,
                    contentType: "application/json;charset=utf-8",
                    success: function (response) {
                        deleteAllItems();
                        getAllItems();
                    },
                    error: function () {
                        alert('Ha ocurrido un error, por favor re intente.');
                    }
                });
            }
    
  9. Sin embargo todavía nos falta un par de cosas para que funcione, una de ellas es declarar las siguientes variables, como lo son rows, un array que almacenará la cantidad de filas que habrá en la tabla de salida, persona que será donde se almacene toda la información de la persona.
    <script>
            var uri = 'api/persona';
            var rows = new Array();
            var persona;
            .......
    
  10. Falta la interfaz para ingresar los datos y tiene un poquito de estilo.
    <div id="addDialog" title="Agregar persona nueva">
        <div class="form-group">
            <label for="addNombres">Nombres</label>
            <input type="text" class="form-control" id="addNombres" placeholder="Ingrese el nombre de la persona">
        </div>
        <div class="form-group">
            <label for="addApellidos">Apellidos</label>
            <input type="text" class="form-control" id="addApellidos" placeholder="Ingrese los apellidos de la persona">
        </div>
        <div class="form-group">
            <label for="addFecha">Fecha de pago</label>
            <input type="date" class="form-control" id="addFecha" placeholder="Click aquí">
        </div>
        <div class="form-group">
            <label for="addSalario">Salario</label>
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input style="width:89%;" id="addSalario" type="number" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label for="addComisiones">Valor comisiones</label>
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input style="width:89%;" id="addComisiones" type="number" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label for="addSalud">Valor salud</label>
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input style="width:89%;" id="addSalud" type="number" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label for="addPension">Valor pensión</label>
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input style="width:89%;" id="addPension" type="number" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label for="addPagoNeto">Pago neto</label>
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input style="width:89%;" id="addPagoNeto" type="number" class="form-control">
            </div>
        </div>
    </div>
    
  11. Update

    1. Lo primero que haremos para editar los item a través de ASP .NET MVC 5 es crear la interfaz gráfica o maquetación con un poco de ayuda de Bootstrap.
      <div id="editDialog" title="Editar persona">
          <div class="form-group">
              <label for="editNombres">Nombres</label>
              <input type="text" class="form-control" id="editNombres" placeholder="Ingrese el nombre de la persona">
          </div>
          <div class="form-group">
              <label for="editApellidos">Apellidos</label>
              <input type="text" class="form-control" id="editApellidos" placeholder="Ingrese los apellidos de la persona">
          </div>
          <div class="form-group">
              <label for="editSalario">Salario neto</label>
              <div class="input-group">
                  <span class="input-group-addon">$</span>
                  <input style="width:89%;" id="editSalario" type="number" class="form-control">
              </div>
          </div>
      </div>
      
    2. En el método ready creado al principio del script agregamos el código para crear la ventana modal
                  $('#editDialog').dialog({
                      autoOpen: false,
                      height: 370,
                      width: 350,
                      modal: true,
                      buttons: {
                          "Guardar": function () {
                              $(this).dialog("close");
                              guardarEditButton();
                          },
                          "Cancelar": function () {
                              $(this).dialog("close");
                          }
                      },
                      close: function () {
                          $(this).dialog("close");
                      }
                  });
      
    3. E implementamos el método guardarEditButton que se encarga de hacer la transacción
              function guardarEditButton() {
                  persona.Nombres = $('#editNombres').val();
                  persona.Apellidos = $('#editApellidos').val();
                  persona.PagoNeto = $('#editSalario').val();
                  var personaJSON = JSON.stringify(persona);
                  $.ajax({
                      url: uri + '/' + persona.Id,
                      type: 'PUT',
                      data: personaJSON,
                      contentType: "application/json;charset=utf-8",
                      success: function (response) {
                          deleteAllItems();
                          getAllItems();
                      },
                      error: function (response) {
                          alert('Ha ocurrido un error, por favor re intente.');
                      }
                  });
              }
      
    4. Pero para que funcione nuestro botón de editar si se estuvo pendiente del código al momento de cargarse todos los items cada uno invocaba a una función con su propio identificador, para que este consultara sus datos y pudiera traer todo el objeto como tal. Aclaro que pueden haber mejores prácticas pero este ejemplo lo hago con fines educativos.
              function editItem(id) {
                  $.getJSON(uri + '/' + id)
                      .done(function (data) {
                          persona = data;
                          $('#editNombres').val(data.Nombres);
                          $('#editApellidos').val(data.Apellidos);
                          $('#editSalario').val(data.PagoNeto);
                          $('#editDialog').dialog("open");
      
                      })
                      .fail(function (jqXHR, textStatus, err) {
                          $('#persona').text('Error, no se encuentra la persona');
                      });
      
              }
      

    Delete

    1. Como en el último paso de Update se explicaba que al momento de cargar todos los items este generaba los botones de editar y eliminar, por lo tanto se creaban los eventos del onclick con su respectivo identificador, para esta última operación es mucho más sencilla ya que se hizo casi todo lo demás.
      Aquí solo implementamos la función de deleteItem.

              function deleteItem(id) {
      
                      $.ajax({
                          url: uri + '/' + id,
                          type: 'DELETE',
                          contentType: 'application/json;charset=utf-8',
                          success: function (response){
                              deleteAllItems();
                              getAllItems();
                          },
                          error: function (response) {
                              alert('Ha ocurrido un error, por favor re intente.');
                          }
                      });
              }
      

    Para finalizar comparto todo el código de la vista y la solución haciendo click aquí http://sdrv.ms/LtxjZu comprimida si quedó algo suelto o sin entenderse muy bien.

    @section scripts{
        <script src="/Scripts/jquery-ui-1.10.4.custom.js"></script>
        <script>
            var uri = 'api/persona';
            var rows = new Array();
            var persona;
    
            $(document).ready(function () {
                // Se envia la peticion Ajax
                getAllItems();
    
                $('#findDialog').dialog({
                    autoOpen: false,
                    modal: true,
                    close: function () {
                        $(this).dialog("close");
                    }
                });
                
                $('#addDialog').dialog({
                    autoOpen: false,
                    modal: true,
                    height: 370,
                    width: 350,
                    buttons: {
                        "Guardar": function () {
                            $(this).dialog("close");
                            guardarAddButton();
                        },
                        "Cancelar": function () {
                            $(this).dialog("close");
                        }
                    },
                    close: function () {
                        $(this).dialog("close");
                    }
                });
    
                $('#editDialog').dialog({
                    autoOpen: false,
                    height: 370,
                    width: 350,
                    modal: true,
                    buttons: {
                        "Guardar": function () {
                            $(this).dialog("close");
                            guardarEditButton();
                        },
                        "Cancelar": function () {
                            $(this).dialog("close");
                        }
                    },
                    close: function () {
                        $(this).dialog("close");
                    }
                });
            });
    
            function guardarAddButton() {
                persona = new Object();
    
                persona.Nombres = $('#addNombres').val();
                persona.Apellidos = $('#addApellidos').val();
                persona.PagoNeto = $('#addSalario').val();
                persona.Salario = $('#addSalario').val();
                persona.FechaPago = $('#addFecha').val();
                persona.ValorComisiones = $('#addComisiones').val();
                persona.ValorSalud = $('#addSalud').val();
                persona.ValorPension = $('#addPension').val();
                persona.PagoNeto = $('#addPagoNeto').val();
    
                var personaJSON = JSON.stringify(persona);
    
                $.ajax({
                    url: uri,
                    type: 'POST',
                    data: personaJSON,
                    contentType: "application/json;charset=utf-8",
                    success: function (response) {
                        deleteAllItems();
                        getAllItems();
                    },
                    error: function () {
                        alert('Ha ocurrido un error, por favor re intente.');
                    }
                });
            }
    
            function guardarEditButton() {
                persona.Nombres = $('#editNombres').val();
                persona.Apellidos = $('#editApellidos').val();
                persona.PagoNeto = $('#editSalario').val();
                var personaJSON = JSON.stringify(persona);
                $.ajax({
                    url: uri + '/' + persona.Id,
                    type: 'PUT',
                    data: personaJSON,
                    contentType: "application/json;charset=utf-8",
                    success: function (response) {
                        deleteAllItems();
                        getAllItems();
                    },
                    error: function (response) {
                        alert('Ha ocurrido un error, por favor re intente.');
                    }
                });
            }
    
            function getItem(id) {
                $.getJSON(uri + '/' + id)
                    .done(function (data) {
                        persona = data;
                    })
                    .fail(function (jqXHR, textStatus, err) {
                        $('#persona').text('Error, no se encuentra la persona');
                    });
            }
    
            function getAllItems() {
                var i = 0;
                $.getJSON(uri)
                    .done(function (data) {
                        $.each(data, function (key, item) {
                            rows[i] = "row_" + item.Id;
                            $('<tr id="' + rows[i] + '">' +
                                    '<td>' + item.Id + '</td>' +
                                    '<td>' + item.Nombres + '</td>' +
                                    '<td>' + item.Apellidos + '</td>' +
                                    '<td>' + formatItem(item) + '</td>' +
                                    '<td>' + item.PagoNeto + '</td>' +
                                    '<td> <span id="edit_' + item.Id + '" onclick="javascript:editItem(' + item.Id + ')" style="padding-right:15px; cursor:pointer;" class="glyphicon glyphicon-pencil"></span> <span id="delete_' + item.Id + '" onclick="javascript:deleteItem(' + item.Id + ')" style="cursor:pointer;" class="glyphicon glyphicon-remove"></span></td>' +
                                '</tr>').appendTo($('#tabla>tbody'));
    
                            i++;
                        });
                    });
            }
    
            function deleteAllItems() {
                
                rows.forEach(function(item){
                    $('#'+item).remove();
                });
            }
    
            function editItem(id) {
                $.getJSON(uri + '/' + id)
                    .done(function (data) {
                        persona = data;
                        $('#editNombres').val(data.Nombres);
                        $('#editApellidos').val(data.Apellidos);
                        $('#editSalario').val(data.PagoNeto);
                        $('#editDialog').dialog("open");
    
                    })
                    .fail(function (jqXHR, textStatus, err) {
                        $('#persona').text('Error, no se encuentra la persona');
                    });
    
            }
    
            function deleteItem(id) {            
                
                    $.ajax({
                        url: uri + '/' + id,
                        type: 'DELETE',
                        contentType: 'application/json;charset=utf-8',
                        success: function (response){
                            deleteAllItems();
                            getAllItems();
                        },
                        error: function (response) {
                            alert('Ha ocurrido un error, por favor re intente.');
                        }
                    });            
            }
    
            function formatItem(item) {
                return item.Nombres + ' ' + item.Apellidos;
            }
    
            function find() {
                var id = $('#persoId').val();
                $.getJSON(uri + '/' + id)
                    .done(function (data) {
                        $('#persona').text(formatItem(data));
                    })
                    .fail(function (jqXHR, textStatus, err) {
                        $('#persona').text('Error, no se encuentra la persona');
                    });
            }
    
            function addButton_onClick() {
                $('#addDialog').dialog("open");
            }
    
            function findButton_onClick() {
                $('#findDialog').dialog("open");
            }
        </script>
    }
    
    <h2>Personas</h2>
    
    <div class="btn-group">
        <button onclick="javascript: addButton_onClick()" type="button" class="btn btn-default">Agregar</button>
        <button onclick="javascript: findButton_onClick()" type="button" class="btn btn-default">Buscar</button>
    </div>
    
    <div class="table-responsive">
        <table class="table table-hover" id="tabla">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Nombres</th>
                    <th>Apellidos</th>
                    <th>Nombre completo</th>
                    <th>Salario neto</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>            
            </tbody>
        </table>
    </div>
    
    <div id="editDialog" title="Editar persona">
        <div class="form-group">
            <label for="editNombres">Nombres</label>
            <input type="text" class="form-control" id="editNombres" placeholder="Ingrese el nombre de la persona">
        </div>
        <div class="form-group">
            <label for="editApellidos">Apellidos</label>
            <input type="text" class="form-control" id="editApellidos" placeholder="Ingrese los apellidos de la persona">
        </div>
        <div class="form-group">
            <label for="editSalario">Salario neto</label>
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input style="width:89%;" id="editSalario" type="number" class="form-control">
            </div>
        </div>
    </div>
    
    <div class="panel panel-default" id="findDialog">
        <div class="panel-heading">Buscar persona por Id <span class="glyphicon glyphicon-chevron-right"></span> </div>
        <div class="panel-body">
            <blockquote id="persona">&nbsp;</blockquote>
            
            <div class="form-group">
                <input type="text" class="form-control" id="persoId" placeholder="Ingrese el Id">
            </div>
            <button class="btn btn-info" onclick="find()">Buscar persona</button>
        </div>
    </div>
    
    <div id="addDialog" title="Agregar persona nueva">
        <div class="form-group">
            <label for="addNombres">Nombres</label>
            <input type="text" class="form-control" id="addNombres" placeholder="Ingrese el nombre de la persona">
        </div>
        <div class="form-group">
            <label for="addApellidos">Apellidos</label>
            <input type="text" class="form-control" id="addApellidos" placeholder="Ingrese los apellidos de la persona">
        </div>
        <div class="form-group">
            <label for="addFecha">Fecha de pago</label>
            <input type="date" class="form-control" id="addFecha" placeholder="Click aquí">
        </div>
        <div class="form-group">
            <label for="addSalario">Salario</label>
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input style="width:89%;" id="addSalario" type="number" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label for="addComisiones">Valor comisiones</label>
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input style="width:89%;" id="addComisiones" type="number" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label for="addSalud">Valor salud</label>
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input style="width:89%;" id="addSalud" type="number" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label for="addPension">Valor pensión</label>
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input style="width:89%;" id="addPension" type="number" class="form-control">
            </div>
        </div>
        <div class="form-group">
            <label for="addPagoNeto">Pago neto</label>
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input style="width:89%;" id="addPagoNeto" type="number" class="form-control">
            </div>
        </div>
    </div>