Corregir el error “in a frame because it set ‘X-Frame-Options’ to ‘SAMEORIGIN’” en #MVC .Net

MVC .Net por defecto no permite que sea visto en un iframe, pero a veces surge la necesidad de que sea visto en un iframe (o en mi caso el hospedaje invocaba un iframe el cual cargaba el sitio, no sé porque diablos así lo hace).

Para permitir que MVC .Net permita ser cargado en un iframe debemos ir al archivo Global.asax.cs y en el método Application_Start() debemos agregar la siguiente línea:

AntiForgeryConfig.SuppressXFrameOptionsHeader = true;

A su vez debemos agregar el namespace: System.Web.Helpers

Con esto se soluciona el problema. Espero les ahorre dolores de cabeza.

Abstracción en la Programación – Curso de Programación Orientada a Objetos en 10 minutos #6

La abstracción es un tema poco visto cuando estamos en la universidad y estudiamos programación orientada a objetos. Se nos mencionan las clases abstractas, pero esto solo es parte de lo que es la abstracción. He decidido incluir este tema brevemente en este curso, ya que para mí esto es lo que hace la diferencia de un programador bueno de un programador malo, y no cuantos lenguajes de programación domine.

A lo largo de mi experiencia, he llegado a la conclusión que la abstracción nunca termina por mejorarse, y al momento que miras código tuyo de uno o dos años atrás y ves que es un desorden, esto quiere decir que has mejorado.

En breves palabras la abstracción es resumir o disminuir un elemento a lo que lo define sin incluir otros elementos, en este caso los objetos de la Programación Orientada a Objetos (POO). Para explicar esto siempre recurro al triangulo y al círculo, los dos son figuras geométricas, un triángulo tiene 3 lados y siempre tendrá 3 lados aquí y al otro lado del universo, y un circulo siempre será una línea conectada, esto es abstracción, se definen las figuras en una o dos líneas de descripción sin llegar a meternos en más detalle.

¿Pero esto para que nos sirve o qué? Sirve para hacer la diferencia de un mal programador a un buen o magnifico desarrollador de sistemas.

Ya dejando atrás el círculo y el triángulo veamos un ejemplo de día a día cuando se desarrolla un sistema.

Un sistema de ventas:

  • El cliente pide un sistema que tenga usuarios.
  • Los usuarios pueden ser clientes o vendedores o administradores.
  • Los usuarios tendrán un password para acceder al sistema.
  • Los clientes compran, los vendedores venden.

Lo que un programador con bajo nivel de abstracción hará es:

Creará una clase Administrador, una clase Cliente y una clase Vendedor y las tres tendrán el campo password el campo usuario y los métodos para autentificarse.

Por ejemplo:

Clase Administrador

class Administrador{
string usuario="";
string password="";

//todos los atributos de administrador por ejemplo
string nombre;
string apellido;

//etc

public bool Ingresar(string usuario, string password){
//codigo ingreso
}

public bool Salir(){
//codigo salir
}

//aqui metodos de administrador etc...
}

Clase Cliente

class Cliente{
string usuario="";
string password="";

//todos los atributos de cliente por ejemplo
string nombre;
string apellido;
string empresa;
//etc

public bool Ingresar(string usuario, string password){
//codigo ingreso
}

public bool Salir(){
//codigo salir
}

//metodos de cliente
}

Clase Vendedor

class Vendedor{
string usuario="";
string password="";

//todos los atributos de vendedor por ejemplo
string nombre;
string apellido;
string email;
decimal comision;
//etc

public bool Ingresar(string usuario, string password){
//codigo ingreso
}

public bool Salir(){
//codigo salir
}

//metodos de vendedor
}

Y esto es normal, funcionara y el sistema para el usuario estará perfecto, el problema viene cuando vienen los cambios en el sistema, por ejemplo nos piden modificar el método de acceso al sistema, digamos antes se hacía la conexión directa, ahora se hará por un webservice y utilizar un certificado. Entonces la cosa se convierte en un cambio en 3 sitios distintos, más trabajo por falta de abstracción, y si es más trabajo es más tiempo por lo cual es más caro y por lo cual es más crítico a darse errores.

Cuando una persona tiene un nivel más alto de abstracción podrá pensar en métodos alternativos para evitar estos problemas, estos métodos nacen por la experiencia que se tienen en sistemas hechos anteriormente y es cuando hacemos cosas más organizadas con un nivel más alto de abstracción como el siguiente ejemplo, que nos ayudaremos de la herencia:

Clase Usuario

class Usuario{
string usuario="";
string password="";
public bool Ingresar(string usuario, string password){
//codigo ingreso
}

public bool Salir(){
//codigo salir
}
}

Clase Administrador

class Administrador : Usuario{

//todos los atributos de administrador por ejemplo
string nombre;
string apellido;
}

Clase Cliente

class Cliente : Usuario{
//todos los atributos de cliente por ejemplo
string nombre;
string apellido;
string empresa;
//etc

//metodos de cliente
}

Clase Vendedor

class Vendedor : Usuario{

//todos los atributos de vendedor por ejemplo
string nombre;
string apellido;
string email;
decimal comision;
//etc

//metodos de vendedor
}

Nota: Los dos puntos (:) en c# sirven para heredar, lo mismo que en java es extends.

Como vemos los métodos de ingresos quedan en la clase Usuario de la cual todas las otras clases: Cliente, Administrador, Vendedor heredan, y esto ya muestra más madurez que las clases anteriores, ya que si surge un cambio en el ingreso solo tendríamos que modificar el metodo en la clase Usuario. Pero aun así podemos mejorarlo más analizando las similitudes de nuestras clases y viendo cómo podemos crear otra entidad por ejemplo una clase Persona que tenga el atributo nombre y apellido los cuales comparten las otras clases y a su vez que herede de Usuario.

El propósito de esta entrada es que ustedes como programadores no tomen a la ligera la manera que hacen y organizan su código, ya que esto puede ser la diferencia en ser un programador malo a uno bueno, a parte que si su código es formal y elegante puede ser fácil entendible por otro programador.

Con esto doy por terminado este curso de Programación Orientada a Objetos en 10 minutos, cualquier duda o comentario hágamelo saber en el apartado de comentarios o en el formulario de contacto.

Todo esto que hago es para todo los programadores que comienzan o de una u otra forma llegaron a un problema que yo ya solucione, y los comentarios son una motivación para mí. Gracias lector por visitar mi sitio web.

Ir Capítulo Anterior (5.- Polimorfismo)

5.- Polimorfismo – Curso de Programación Orientada a Objetos en 10 Minutos #5

El polimorfismo (palabra rara), es la manera de invocar una acción a que tenga distintos comportamientos dependiendo del contexto con el que se utiliza. Más simple. El polimorfismo es la posibilidad que un método (función) pueda tener distinto comportamiento a partir de los parámetros que se envían (sobrecarga), o a partir de la manera que se invoca (sobreescritura).

El término es un poco complicado, y es un problema para todos los que desean aprender Programación Orientada a Objetos, pero en realidad, es más fácil de lo que se escucha, y para ello veamos primero que es la sobrecarga.

Sobreescritura

Cuando utilizamos la herencia, al heredar de una clase podemos utilizar sus métodos (siempre y cuando no estén protegidos, mas adelante veremos eso), y puede haber ocasiones en las cuales el método del padre no sea de nuestra utilidad y debamos crear uno nuevo con el mismo nombre, para ello utilizamos la Sobreecritura.

Veamos el siguiente ejemplo con las clases del capítulo anterior:

Clase Transporte

 public class Transporte
    {
        public int velocidadMaxima = 0;
        public int pasajeros = 0;

        public virtual void Camina()
        {
            //definición del metodo camina
            Console.WriteLine("metodo llamado desde transporte");
        }

    }

Clase Auto

    public class Auto : Terrestre
    {
        public int puertas = 0;

        public Auto(int pasajeros,int velocidadMaxima,int numeroLlantas, int puertas)
        {
            //atributos de la clase Transporte
            this.pasajeros = pasajeros;
            this.velocidadMaxima = velocidadMaxima;

            //atributos de la clase Terrestre
            this.numeroLlantas = numeroLlantas;

            //atributos de esta clase
            this.puertas = puertas;
        }

        public override void Camina()
        {
            Console.WriteLine("Metodo llamado desde clase Auto");
        }

    }

Para utilizar la sobreescritura debemos definir el método del padre con la palabra virtual o abstract , y esto permitirá que podamos remplazarlo por medio del hijo. Para remplazarlo en el hijo utilizamos la palabra reservada override, y con eso se remplaza el método, y cuando utilicemos la función utilizaremos la del Hijo.

Nota: cuando utilizamos abstract nos referimos a un método abstracto, el cual no puede ser utilizado, en cambio virtual si puede ser utilizado, igual lo veremos en el capítulo de abstracción a más detalle.

Sobrecarga

Existen ocasiones en las cuales un método pueda tener varias funciones dependiendo el contexto que se envía, para ello existe la Sobrecarga, la cual nos permite crear métodos con el mismo nombre, solo basta con que reciban distintos parámetros, y con ello en la ejecución se llama el adecuado.

Para ello veamos el siguiente ejemplo con las clases del capitulo anterior:

Clase Auto

public class Auto : Terrestre
    {
        public int puertas = 0;

        public Auto(int pasajeros,int velocidadMaxima,int numeroLlantas, int puertas)
        {
            //atributos de la clase Transporte
            this.pasajeros = pasajeros;
            this.velocidadMaxima = velocidadMaxima;

            //atributos de la clase Terrestre
            this.numeroLlantas = numeroLlantas;

            //atributos de esta clase
            this.puertas = puertas;
        }

        public override void Camina()
        {
            Console.WriteLine("Metodo llamado desde clase Auto");
        }

        //metodo sobrecargado
        public void Camina(int metros)
        {
            Console.WriteLine("Metodo que recibe un entero "+metros);
        }
    }

Y por ultimo utilizando el siguiente código, podemos crear nuestro objeto Auto y este puede invocar los dos métodos Camina, y dependiendo al parámetro se ejecuta el adecuado.

 class Program
    {
        static void Main(string[] args)
        {

            //Clase Auto utilizando sobreescritura y sobrecarga
            Auto miCarro = new Auto(4, 200, 4, 4);

            //sobreescritura
            miCarro.Camina();

            //sobrecarga
            miCarro.Camina(1);

        }
    }

Ir Capítulo Siguiente (6.- Abstracción en la programación)

Ir Capítulo Anterior (4.- Herencia)

4.- Herencia – Curso de Programación Orientada a Objetos en 10 Minutos #4

En la Programación Orientada a Objetos, existe un concepto con el cual podemos tener un gran potencial a la hora de realizar grandes sistemas, su nombre es La Herencia.

La herencia en POO, nos sirve para organizar nuestra lógica en la creación de clases, ahorrar métodos, y tener una manera abstracta de programar.

Una descripción sencilla de Herencia es: La creación de una clase a partir de una ya existente (clase padre), teniendo la clase nueva la funcionalidad de su padre (dependiendo de su encapsulamiento, lo veremos en los próximos capítulos), y a la cual se le pueden crear nuevos métodos y atributos. Esto nos permite ahorrar código y no repetirlo; si una clase que ya creamos hace lo que deseamos pero aparte tenemos la necesidad de nueva funcionalidad, utilizamos la herencia.

Veamos el siguiente ejemplo, en el cual utilizo los medios de transporte, y como organizaríamos algo rápido para crear una clase auto:

diagrama clases auto

Cada cuadro representa una Clase, en la parte superior tenemos la clase padre Transporte, de la cual heredan la clase Marino, Terrestre y Aéreo, a su vez tenemos una clase de nombre Auto la cual hereda de la clase Terrestre. Y para ver un poco de las ventajas, cuando programamos esto, veamos las 5 clases a continuación.

Clase Transporte

   class Transporte
    {
        public int velocidadMaxima = 0;
        public int pasajeros = 0;

        public void camina()
        {
            //definición del metodo camina
        }

    }

Clase Terrestre

  class Terrestre : Transporte
   {
      public int numeroLlantas = 0;
   }

Clase Aéreo

 class Aereo : Transporte
    {
        public int numeroAlas = 0;
    }

Clase Marino

   class Marino : Transporte
    {
        public int numeroHelices = 0;
    }

Clase Auto

  class Auto : Terrestre
    {
        public int puertas = 0;

        public Auto(int pasajeros,int velocidadMaxima,int numeroLlantas, int puertas)
        {
            //atributos de la clase Transporte
            this.pasajeros = pasajeros;
            this.velocidadMaxima = velocidadMaxima;

            //atributos de la clase Terrestre
            this.numeroLlantas = numeroLlantas;

            //atributos de esta clase
            this.puertas = puertas;
        }
    }

Podemos observar que las clases que son hijas en el momento de definirías tenemos dos puntos(:) seguido de la clase que heredan, de esta manera realizamos la Herencia.

Ahora veamos cómo se utiliza como instancia el auto y sus métodos heredados:

   class Program
    {
      static void Main(string[] args)
        {
            //Clase Auto utilizando herencia
            Auto miCarro = new Auto(4, 200, 4, 4);
            miCarro.camina();

        }
   }

Estoy utilizando el método camina(), el cual está definido en la clase Transporte, de esta manera podemos reutilizar código sin volverlo a copiar o rehacer, pero esto no es todo, en los siguientes capitulo veremos más cosas útiles que se pueden realizar con la POO (Programación Orientada a Objetos).

Ir Capítulo Siguiente (5.- Polimorfismo (Sobrecarga y Sobreescritura))

Ir Capítulo Anterior (3.- Constructor)

3.- Constructor – Curso de Programación Orientada a Objetos en 10 Minutos #3

Un constructor nos sirve para crear un objeto, es un método especial el cual no regresa un valor y tiene el mismo nombre de la clase; cada que creamos un objeto utilizamos la palabra new seguido del nombre de la clase, en ese momento estamos invocando el constructor; se preguntaran como invocamos el constructor en el capitulo anterior si no lo definimos, pues, existe un constructor por defecto el cual no recibe ningún parámetro y así si no definimos constructor ya existe uno es por eso que podemos invocar un constructor sin parámetros aunque no lo hayamos definido.

Los constructores pueden ser mas de uno en la misma clase, siempre y cuando reciban distintos parámetros.

Pero la duda que sale ahora es: ¿Para que me sirve un constructor?, sencillamente para obligar que en la creación de un objeto se reciban ciertos parámetros necesarios y así evitar que nuestro objeto funcione mal, por ejemplo veamos el código del capítulo anterior donde creamos una galleta:

 

class Galleta {
    public int cantidadHarina;
    public int cantidadDeAgua;
    public int tiempoDeHorneado;
    public string nombreGalleta;

    private int tiempoHorneada;

    public void Hornear() {
        for (int i = 0; i < tiempoDeHorneado; i++) {
            tiempoHorneada++;
        }
        System.Console.WriteLine("Horneada la galleta");
    }
}

Si vemos este código, que pasaría si yo no defino el atributo tiempoDeHorneado y después invoco el método Hornear(), simplemente no tendría una funcionalidad definida ya que mi atributo no valdría nada por lo cual no se hornearía. Para ello cambiemos el código para que obliguemos al programador a enviar ese atributo, de la siguiente manera:

 class Galleta
    {
        public int cantidadHarina;
        public int cantidadDeAgua;
        public int tiempoDeHorneado;
        public string nombreGalleta;

        private int tiempoHorneada;

        //constructor
        public Galleta(int tiempoDeHorneado)
        {
            this.tiempoDeHorneado = tiempoDeHorneado;
        }

        public void Hornear()
        {
            for (int i = 0; i &lt; tiempoDeHorneado;i++ )
            {
                tiempoHorneada++;
            }
            System.Console.WriteLine("Horneada la galleta");
        }
    }

En este código vemos que agregue un nuevo método de nombre Galleta y el cual recibe un entero, también utilizo la palabra reservada this, esta palabra nos sirve para indicar que estamos haciendo referencia a la variable de la clase, y si vemos recibimos una variable de mismo nombre, si no utilizamos la palabra this, hacemos referencia a la que recibimos como argumento, y lo que hago es simplemente darle el valor que recibo a mi atributo de la clase Galleta, y así poder utilizarlo dentro de mis métodos.

Nota: Cuando se define un constructor, el constructor por defecto ya no existe y obligamos a utilizar solo los constructores que existen en nuestra clase (ya no podemos utilizar Galleta() sin parámetros ya que definí un constructor con parámetro).

Y a continuación les muestro la forma en cómo utilizaríamos el constructor, y es la siguiente:

 class Program
    {
        static void Main(string[] args)
        {
            Galleta miGalleta = new Galleta(100);
            miGalleta.nombreGalleta = "chocochips";
            miGalleta.cantidadDeAgua = 10;
            miGalleta.cantidadHarina = 10;
            miGalleta.Hornear();

            //linea para poder ver el texto de el metodo hornear
            Console.ReadLine();
        }
    }

Cuando creamos un proyecto tipo consola en Visual Studio, la clase Program se crea por defecto y esta contiene el método Main, el cual es el que se ejecuta cuando corremos el proyecto.

Recuerda que puedes definir muchos más constructores siempre y cuando tengan distintos parámetros ya sea en cantidad de estos o distinto tipo de dato. Por ejemplo podríamos crear un constructor para obligar a que el programador envié el nombre, la cantidad de harina y la cantidad de agua, y ya decida cual utilizar, y para ello nos quedaría nuestra clase Galleta de la siguiente forma:

 class Galleta
    {
        public int cantidadHarina;
        public int cantidadDeAgua;
        public int tiempoDeHorneado;
        public string nombreGalleta;

        private int tiempoHorneada;

        //constructor
        public Galleta(int tiempoDeHorneado)
        {
            this.tiempoDeHorneado = tiempoDeHorneado;
        }
        //constructor 2
        public Galleta(int tiempoDeHorneado,string nombreGalleta,int cantidadHarina, int cantidadDeAgua)
        {
            this.tiempoDeHorneado = tiempoDeHorneado;
            this.nombreGalleta = nombreGalleta;
            this.cantidadHarina = cantidadHarina;
            this.cantidadDeAgua = cantidadDeAgua;
        }

        public void Hornear()
        {
            for (int i = 0; i &lt; tiempoDeHorneado;i++ )
            {
                tiempoHorneada++;
            }
            System.Console.WriteLine("Horneada la galleta");
        }
    }

Ir Capítulo Siguiente (4.- Herencia)

Ir Capítulo Anterior (2.- Clases y Objetos)

2.- Clases y Objetos – Curso de Programación Orientada a Objetos en 10 MINUTOS #2

En la Programación Orientada a Objetos existen dos conceptos que son los principales, los cuales siempre que se hable de este paradigma no se pueden evitar, y hablo de las clases y los objetos.

Una clase se es la entidad en la cual definimos el comportamiento y la definición de un objeto.

Un objeto es una instancia de una clase, es la entidad tangible que contiene los valores y realiza las acciones.

Una clase contiene atributos y métodos con los cuales identificamos a nuestro objeto. El objeto al crearse adquiere todas estas características y funcionalidades y puede hacer uso de ellas.

En palabras más simples, una clase es el molde con el cual creamos un objeto en específico. Por ejemplo:

class MiObjeto(){
    //código aqui
}

Deseamos crear un objeto tipo galleta, sabemos que las galletas tienen una forma, un sabor, un tiempo de horneado, una cantidad de harina, agua y muchas otras cosas. Para crear este objeto necesitaremos de una clase la cual sea el molde de estas galletas que vamos a crear, y para ello recurrimos a crearla con la siguiente sintaxis en c#  (cree un proyecto tipo Aplicación de Consola en Visual Studio):

 class Galleta
    {
        public int cantidadHarina;
        public int cantidadDeAgua;
        public int tiempoDeHorneado;
        public string nombreGalleta;

    }

La palabra class nos indica que es una clase, y dentro de esta tenemos atributos(los cuales no son todos los de una galleta  pero nos sirve para entender de que se trata), los atributos son 3 enteros que indican la cantidad de harina, cantidad de agua, y el tiempo de horneado, y también tenemos un atributo tipo cadena que nos indica el nombre de nuestra galleta (chocochips, animalito, emperador).

Nota: la palabra public y private mas adelante las explicare, por ahora no tienen mucha importancia.

Pero una galleta también tiene acciones, por lo menos en su preparación y para ello necesitamos de métodos, ahora la clase le agrego el método hornear() y quedaría de la siguiente forma:

 class Galleta
    {
        public int cantidadHarina;
        public int cantidadDeAgua;
        public int tiempoDeHorneado;
        public string nombreGalleta;

        private int tiempoHorneada;

        public void Hornear()
        {
            for (int i = 0; i &lt; tiempoDeHorneado;i++ )
            {
                tiempoHorneada++;
            }
            System.Console.WriteLine("Horneada la galleta");
        }
    }

Agregue un nuevo atributo (tiempoHorneada) para saber cuánto tiempo lleva horneada y cómo podemos ver hay un método el cual es un ciclo for el cual depende de el atributo tiempoDeHorneado.

Ya tenemos nuestra clase ahora veamos cómo se utiliza para crear un objeto y es de la siguiente manera:


  //creamos el objeto
  Galleta miGalleta = new Galleta();

  //agregamos sus valores a los atributos
  miGalleta.nombreGalleta = "chocochips";
  miGalleta.tiempoDeHorneado = 100;
  miGalleta.cantidadDeAgua = 10;
  miGalleta.cantidadHarina = 10;

  //horneamos la galleta invocando el metodo hornear()
  miGalleta.Hornear();

Como pudimos observar la creación de un objeto simplemente se realiza con el nombre de nuestra clase seguido del nombre que deseamos agregar a nuestra instancia (objeto) y seguido de el símbolo = (igual) y la palabra new mas el nombre de nuestro objeto nuevamente seguido de paréntesis. En el siguiente tema (constructores) veremos que significa la palabra new y por qué se pone el nombre de nuestro objeto seguido de paréntesis para la creación de un objeto.

Ir Capítulo Siguiente (3.- Constructor)

Ir Capítulo Anterior (1.- Introducción a La Programación Orientada a Objetos (POO))

1.- Introducción a la Programación Orientada a Objetos (POO) – Curso de Programación Orientada a Objetos en 10 Minutos #1

La Programación Orientada a Objetos (POO así la abreviaremos) nace por la necesidad de representar el mundo en el que habitamos (junto a sus problemas) por medio de objetos como nosotros los percibimos, con sus propiedades y funcionalidades, de esta forma es más fácil para los programadores organizar su código y tener una manera elegante con la cual realizar los sistemas. Uno de los lemas de este paradigma de programación es: “divide y vencerás”, lo cual nos da a entender que no tenemos que llenar líneas y líneas de códigos con funciones y perder el hilo de lo que estamos haciendo (como solía ser en la programación estructurada), si no que organizamos los objetos del sistema de forma abstracta junto a las acciones que pueden hacer y las iteraciones que tienen con los demás objetos.

Para darnos una idea rápida de que trata este paradigma, imaginemos que deseamos representar un medio de transporte (avión, barco, automóvil), el sentido común del humano rápidamente nos dice que nos sirve para trasladarnos, que se mueve a cierta velocidad, que frena, que tiene pasajeros, ruedas, alas o hélices, y de manera fácil podemos listar todas sus acciones y propiedades, siendo las acciones el moverse y el frenar, siendo las propiedades: el número de pasajeros, el numero de ruedas, numero de hélices etc.

Con la POO representamos rápidamente estos objetos del mundo real por medio de clases que nos sirven de moldes para crear los objetos que tendrán funcionalidad en nuestros sistemas.

Para ello pasemos de la teoría a la práctica y comencemos a entender rápidamente este paradigma y sus ventajas en el siguiente capitulo.

Ir Capítulo Siguiente (2.- Clases y Objetos)

Curso de Programación Orientada a Objetos en 10 Minutos

Este curso, me basare en una descripción del paradigma Orientado a Objetos, general y brevemente, y te prometo que en menos de 10 minutos habrás comprendido lo mas importante de esta forma de programación.

Para el curso utilizo el lenguaje de programación C# .Net, el cual es fácil de comprender (por si nunca lo han utilizado) y solo servirá para explicar el paradigma, no para que aprendan C#.

El curso consta de los siguientes capítulos:

1.- Introducción a la Programación Orientada a Objetos (POO)

2.- Clases y Objetos

3.- Constructor

4.- Herencia

5.- Polimorfismo (Sobrecarga y Sobreescritura)

6.- Abstracción en la Programación

10.- Creación de Elementos HTML con Jquery – Curso Básico de #Jquery #10

En este capitulo (y el ultimo de este curso), veremos cómo crear elementos HTML de forma dinámica y con la ayuda de jquery (podría también ser de interés ver como se realiza esto sin jquery, con javascript puro en otro artículo que hice hace tiempo).

Para crear elementos HTML dinámicamente utilizaremos la función de nombre append() de jquery, esta función agrega contenido HTML o un Nodo Html al final de su contenido, y para el caso contrario (eliminar elementos) utilizaremos la función remove() la cual elimina un elemento del contenido de la pagina.

Para comprender estas funciones veremos cómo hacer un formulario detalle (como cuando vas a la tienda y ves como te agregan los productos  que vas a pagar a una tabla), y la manera que jquery con la ayuda de sus selectores y su catálogo de funciones lo hace demasiado fácil de hacer.

El código es el siguiente:

Código HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
         <script src="../scripts/jquery.js"></script>

           <style>
			#tutorial .bloque{
				float:left;
				width:110px;
			}
			#tutorial input,#tutorial label{
				font-size:11px;
				width:60px;
			}
			#tablaProductos,#tablaProductos td,#tablaProductos th{
				border:1px solid #333;
				border-collapse:collapse;
			}
			#tableProductos th{
				width:100px;
			}
			</style>
    </head>

    <body>
         <div id="tutorial">
            <div >
                <div class="bloque">
                    <label>Código</label>
                    <input class="texto" type="text" id="txtCodigo" value="" />
                </div>
                <div class="bloque">
                    <label>Nombre</label>
                    <input class="texto" type="text" id="txtNombre" value="" />
                </div>
                  <div class="bloque">
                    <label>Precio</label>
                    <input class="texto" type="text" id="txtPrecio" value="" />
                </div>
                <div class="bloque">
                    <input value="Agregar" type="button" onclick="Agrega()" />
                </div>
                <div style="clear:both"></div>
            </div>

            <div>
                <table style="width:400px;" id="tablaProductos">
                    <tr>
                        <th>Código</th>
                        <th>Nombre</th>
                        <th>Precio</th>
                        <th>X</th>
                    </tr>
                </table>
            </div>
         </div>
    </body>
</html>

Código Jquery

function Agrega(){

	//obtenemos los valores de nuestra caja de texto
	nodoAInsertar="&lt;tr&gt;"; //nodo en el cual obtendremos el codigo html nuevo a insertar en la tabla

	$(".texto").each(function(){ //selector por clase texto y un each para recorrer elementos

		nodoAInsertar+="&lt;td&gt;"; //abrimos td

		nodoAInsertar+=$(this).prop("value"); //obtenemos el valor de la caja de texto

		nodoAInsertar+="&lt;/td&gt;" //cerramos td

		//limpiamos la caja de texto actual
		$(this).val("");
	});

	//agregamos el botpon para eliminar
	nodoAInsertar+="&lt;td&gt;&lt;input type='button' value='Eliminar' onclick='Elimina(this)'&gt;&lt;/td&gt;"
	nodoAInsertar+="&lt;/tr&gt;" //cerramos el tr

	//por ultimo insertamos el nodo tr a la tabla
	$("#tablaProductos").append(nodoAInsertar)

	//ponemos el foco en la caja de texto código
	$("#txtCodigo").focus()
}

function Elimina(NodoBoton){

	//recibimos el botón como parametro y lo transformamos a jquery
	var botonEliminar=$(NodoBoton);

	//obtenemos el padre tr del boton para asi eliminarlo, el primer padre es td, el segundo es tr
	var padreTRBoton=$(botonEliminar).parent().parent();

	padreTRBoton.remove();

	//todo esto puede funcionar con esta misma linea "$(NodBoton).parent().parent().remove();"
}

Código en ejecución

Tenemos tres cajas de texto y un botón, al presionar el botón invocamos la función Agrega() la cual realiza un each sobre los elementos de clase “texto” y les da un formato de celda (<td>) y concatenándolos a una variable de nombre nodoAInsertar, al finalizar el ciclo agregamos un botón, tal como lo haríamos con html, y en este botón agregamos la función Elimina() recibiendo como parámetro el mismo botón. Por último utilizando la función append() de jquery anexamos el nuevo código html a la tabla con el id tablaProductos, y así de sencillo se realiza la creación de elementos HTML de forma dinámica.

Para el caso de eliminar simplemente utilizamos la función remove() de jquery, relacionando al padre tr del botón recibido, y proseguimos a eliminar el tr junto a sus hijos.

Este fue el ultimo capitulo de este curso básico de jquery, después de ver estos 10 temas, ya eres capaz de utilizar jquery sin problemas y espero te sirva para que sea una herramienta que te ayude a realizar tus proyectos de manera rápida y estética.

Ir al  Capitulo Anterior (9.- La función Animate).