Consumiendo servicios o metodos con ajax

llamar una capacidad de un servicio o un método des de ajax un ejemplo muy básico en donde enviamos un objeto   que en este caso sería figura el cual tiene internamente  name, id y sides el cual  es serializado    de esta manera JSON.stringify(Figura)  y  si la función   a la que estamos accediendo  trae un resultado esta es concatenado a un elemento hml utilizando la función append de jquery .

//creamos la funciòn por que va a traer  una lista por el metodo de get
function fGet() {
                $.ajax({
                    type: "Get",//tipo de método por el que consultaremos
                    url: "http://localhost:5149/api/Figures", //link que consultamos
                    beforeSend: function (request) {
                        request.setRequestHeader("content-type", "application/json");
                    },
                    success: function (data) {
                        var list = [];//variable creada para guardar los resultados 
//recorrido  en donde agregamos a la  variable los datos                       
 $.each(
                           data, function (key, val) {
                                list.push("
" + val.name + "
");
                            }
                            );
//se agrega a un control de html con la funcion de append 
                        $("#UListFiguries").append(list.join(''));
                    }

                });
            }

//Consulta por el método Post
            function fpost() {

//se crea el objeto a enviar a un que se pudo enviar como parámetro
// JSON.stringify(Figura) serializa en tipo json  el objeto
                var Figura = new Object();
                Figura["name"] = "prueba  desde post";
                Figura["id"] = 8;
                Figura["sides"] = "8";

                $.ajax({
                    type: "Post",
                    url: "http://localhost:5149/api/Figures",
                    data: JSON.stringify(Figura),
                    beforeSend: function (request) {
                        request.setRequestHeader("content-type", "application/json");
                    },
                    success: function (data) {
                        var list = [];
                        $.each(
                            data, function (key, val) {
                                list.push("
" + val.name + "
");
                            }
                            );

                        $("#UListFiguriesPost").append(list.join(''));
                    }

                });


            }
       

  

ejemplo de como llamar un Procedimiento almacenado desde C#

Hola esto es ejemplo de llamar datos desde un procedimiento almacenado el cual inserta y regresa de un id del registro que se acabó de insertar y en comentario esta como se debería  llenar una lista en caso de querer traer muchos más datos en este caso  se hace con el objeto curso. 

//Tener encuenta estos using que son fundamentales
using System.Data.SqlClient;

using System.Configuration;

//Bien aquí se crea un método donde se envía la información de un curso
//Y nos devuelve el id del curso creado
 public int addcourse(string nombre, string descripcion)
        {
          //  List Courses = new List();

            int idCurso=0;
//llamamos la conexion de BD que tenemos en el archivo de configuraciòn webconfig o appconfig
            var conexion = ConfigurationManager.ConnectionStrings["Model1"].ConnectionString;
            SqlDataReader reader;
            SqlConnection conn = new SqlConnection(conexion);

            try
            {
                //var sp = "Sp_AddCourse";
                SqlCommand cmd = new SqlCommand();
                cmd.CommandText = "Sp_AddCourse";
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Connection = conn;
                cmd.Parameters.Add("@nom", SqlDbType.Text).Value = nombre;
                cmd.Parameters.Add("@des", SqlDbType.Text).Value = descripcion;

                conn.Open();
                //pasamos el resultado al reader 

                reader = cmd.ExecuteReader();
                //  cmd.Fill(Courses);

                if (reader.HasRows)
                {
                    while (reader.Read())
                    {
                        idCurso = Convert.ToInt32(reader["SCOPE_IDENTITY"]);

                        //Curso ocurso = new Curso();
                        //ocurso.Id = Convert.ToInt32(reader["Id"]);
                        //ocurso.Nombre = reader["nombre"].ToString();
                        //ocurso.Descripcion = reader["Descripcion"].ToString();

                        //Courses.Add(ocurso);                

                    }                 

                }
            }
            catch (Exception e)
            {
             var msj=   e.Message;
            }
            finally
            {
                conn.Close();
            }
            return idCurso;
        }

Bien ahora les mostrare el procedimiento que utilice “Para el ejemplo”

Tabla con scroll, header y columnas fijas

*Recuerden  este es un ejemplo básico.

*No creen la rueda  q ya está creada  mejor  utilicen esa rueda para crear  cosas más grandes.

*Este es un tutorial explicando cómo  dejar los títulos de un grid o table  fijos al igual q algunas columnas

* vea el demo  y compruebe q es lo q está buscando

Clic aquí para ver Demo

1. llamar librerías js y  hojas de  estilos  q vamos a utilizar  entre el header  de la pagina.

Bueno  como  pueden ver llamo lo q' utilizare desde un inicio, en  mi caso la librería de jquery la llamo  desde una ruta de google y no necesite descargarla obvio solo funciona si tengo Internet constante

2. Para este  caso   un requisito fundamental es que llenes una tabla de  html  con  datos   para q el ejemplo tenga el resultado esperado

3 . Poner un id  ala tabla  en mi caso es id="GridView1"

4. Colocar   en  las  filas  de los  titulos  la  clase como quieras q se vea   <tr class="GridviewScrollHeader">

5. Coloque el css  en los  demás  tr  como quiera q' se vean sus  datos <tr class="GridviewScrollItem">

recuerde  estas son clases que ud puede modificar  como quiera para q su table se vea  como ud quiera

6. Cree  al final de la página una  función jquery   de la siguiente manera

Bueno en la  primera línea de la function ponemos  con un numeral el id de la tabla esto con el fin de que las librerías  reconozcan  a que objeto le van hacer las  operaciones,    que en mi caso sería '#GridView1'   bueno  hay algunas propiedades :

width =  ancho ,

 height =alto,

freezersize= Cantidad de columnas que deseas fijas , es decir q no se mueva con el scroll horizontalmente  esto las cuenta de izquierda a derecha ,

headerrowcount = Colocamos la cantidad de filas que deseamos q sean titulo en caso de que el titulo  contenga dos filas o tres  o las que sea no  abra problemas  lo solucionamos  solo  con colocar un número , a un que normalmente es 1 q es la primera  fila.

railsize= se refiere al ancho de la barra q contiene el scroll sea  horizontal o vertical,

barsize= se refiere al ancho de la barra del scroll como tal ,

 varrowtopimg  , varrowbottomimg ,  harrowleftimg,  harrowrightimg=  Estas cuatro propiedades como lo ven en la imagen de arriba  son para poner las imágenes de la flechas  del scroll   aquí puedes llamar otras  imágenes  según como lo quieras

En la imagen anterior  les muestro  las columnas  oscuras   son las  fijas  como  el header  en el demo las muestro del mismo color todas  las columnas,   a un obviamente  uds  se las  arreglan para cambiar el  estilo  a su parecer.

 Bueno esto es otra funcionalidad y es  cuando el usuario pase  el mouse por alguna de las filas  esta cambie de color y q quede seleccionada cuando se da clic encima de ella bueno para esto  colocaremos lo siguiente

Cree  esta página js para lo del evento   no se  convierta en mucho código js en la interfaz bueno entre esta  pagina  la primera  línea de código  te  pide   es la  siguiente  var gridviewID = "GridView1";  lo único q tienen que hacer reemplazar   "GridView1" por el id de tu tabla o grid , o  crear una función donde  le enviemos el id de la table en caso que utilicemos  esto muchas veces.

Solo para evitar confusiones coloque la parte azul para q sepan cual tienen q cambiar por el id de su table .

Bueno  y en la tabla  será algo muy sencillo para q funcione   llamamos los eventos  de  esta manera  en los   tr

Bueno como seguramente   esta tabla la llenan  con un siglo   estos  números q están  allí  hacemos q incrementen hasta q de la última fila   ejemplo  RowMouseOver(2) y así  en todos los eventos

Clic aquí para ver Demo

Clic aquí para descargar demo

NOTA: Esto fue algo que encontré en google y lo quise compartir ya q es algo q a cada rato me piden y esta es una forma rápida de solucionarlo  espero que les guste y sobre todo  le sirva. En lo personal me ha servido demasiado.

         

Responsive design

PARA TENER EN CUENTA:
*Recuerda es un ejemplo básico
*Mira el demo para que veas q si es lo que estas buscando  VER DEMO 

prueba lo  cambiando el tamaño del navegador con el maximizar en pc o entrando desde un  celular

*Para entender esta explicación se necesita un conocimiento básico  de CSS  y HTML.

* Hacer buenas practicas  de  desarrollo . 

como no colocar  estilos quemados en  las paginas , si  se llega  a utilizar  este tipo de estilos  afectara significativamente  a la  hora de  hacer  el Responsive design.

*Cuales son los estilos quemados:  son  todos  los que se colocan en la pagina del html  como :

style="width:750px; border: 2px solid red ;" 

<center>

 </center>

Estos q acabe de mencionar es como no  se hacen los estilos  correctamente .

* Un consejo no importa si lo que  te dicen es que  solo es una  pagina solo para web en pc ,  hagan buenas practicas de desarrollo  la  mayoría de los clientes  cambian su opinión y des pues  quieren sus paginas en dispositivos móviles por aquello de abarcar mucho mas mercado  .

bueno para también acomodar mejor los divs  e imagenes o en si lo que nos imaginemos   , es muy importante el  manejo de la propiedad   display  :inline-block o  display:block  

* display  :inline-block   : recordemos q si  tenemos dos elementos html  con esta propiedad , y si el contenedor es  suficiente  grande  q darán en linea si no  bajara automáticamente 

*Otra  recomendación es es usar los  anchos  con porcentaje pero con un mínimo de limite , ejemplo si  tenemos  un div contenedor y le decimos  sea de ancho el 100%  pero  no puede ser menor  a 400px 

 esto es muy bueno ya que se adaptara sin problemas en varias  resoluciones   solo tendrá un limite que utilizaremos  por referencia   . 

 max-width :100%;

   min-width:400px;

MEDIA QUERIES

Son una excelente forma de entregar una pagina para diferentes dispositivos, y mejorar la experiencia para cada tipo de usuarios.

lo que se quiere lograr  con las media queris es  crear estilos basados en las propiedades de un dispositivo , como el ancho de la pantalla ,etc .

Representación del media query @media only screen and (aqui va el ancho maximo o minimo  ).

En el siguiente ejemplo diremos q si la resolucion  del dispotivo es mayor a 1034 px entonces   la pagina tenga un  estilo determinado.

@media only screen and (min-width: 1035px){

 /*   aqui  va el estilo q deseamos  */  

   #contenedor

{

    width:790PX;

    border:3px solid black;

   padding:0;

   margin:0px;

    text-align:justify;

        }

}

 despues de tener el primer estilo  crearemos otro donde diremos  todo lo que sea mayor a 799 px pero menor a 1035px  entonces   bueno recuerden q estos 1035 pixeles es el  estilo anterior ,  tenga el siguente estilo. Recuerden q pueden poner el  estilo que quieran según la condición  no obligatoria mente tiene que ser el mismo .

@media only screen and (min-width: 800px)

{

  /*   aqui  va todo el estilo q deseamos  de la pagina */  

    #contenedor

{

    width:790PX;

    border:3px solid black;

   padding:0;

   margin:0px;

    text-align:justify;

    

    } 

}

por ultimo el  estilo para el smarphone q en mi caso es de 400px de ancho  en este caso lo que hago es limitar el contenedor general  hasta  un minimo de 400 px  solo por si hay uno mas pequeño 

@media only screen and (max-width: 799px)

{

    

    #contenedor

{

   max-width :100%;

   min-width:400px;

    

   padding:0;

   margin:0px;

    text-align:justify;

    

    }

Una recomendación cada  media query pongala en una hoja de estilo aparte  para que la no llegue  a miles  de lineas y se convierta en un dolor  de cabeza  cambiar el css  en un futuro q toque modificar .

DESCARGAR DEMO

VER DEMO

Validación de formularios html con jquery

Para empezar  hay que tener en cuenta  el conocimiento  básico de CSS y jquery  a un que el  ejemplo que se dará   a continuación   es demasiado básico .
hay que tener en cuenta    que utilizaremos la  siguiente  librerías.
jquery-1.8.2.min.js
jquery.validationEngine.js
y para los mensajes  en español  utilizaremos un java script    "jquery.validationEngine-es.js"

Clic aqui para ver demo

1. Lo primero que hacemos  como  muchos lo imaginaran es  llamar la ruta de las librerías a la pagina entre el head .

 2.Hay q' llamar  de igual manera el css q' utilizaremos

validationEngine.jquery.css: Este estilo se utiliza para  los mensajes  si en  cual quier momento tenemos la necesidad de modificar  colores   o fuentes  o en su defecto  modificar desde hay se puede  hacer.

template.css: En este css  podemos modificar  el estilo  de la  pagina en general   como  el estilo de  los botones ,  cajas de texto, fuentes, etc.

3.colocamos  al

 de nuestro formulario un id y un name  para  q' podamos referirnos a el tanto en los scripts como en los  css  de  la manera  q se nos ocurra  en particular llamare  al mio de esta manera  formID nos  aseguramos   q  este form tenga una redirección , un action  a alguna pagina  o postback en el caso q estemos utilizando asp .

En  este caso   lo direccione  a la misma  pagina  solo  por q es un ejemplo  pero  lo puedes  hacer   a una  pagina  php o  lo que  se necesite .

.

 4. despues  de  esto  creamos  un script  donde   le  decimos  a la  librería q' ya tenemos  q  el lo que tiene q validar  esto lo hacemos  en la misma  pagina.

 De  esta manera el jquery validara   lo que este entre el  formulario cuando se de clic en el boton enviar

5. en este  punto  validaremos  como lo necesitemos  con esto ya seria  algo facil

     *que el campo sea obligatorio . para esto simplemente colocamos  una clase  así                  : class="validate[required] text-input"

*si deseo validar un campo de texto como  correo y que sea  obligatorio  entonces :class="validate[required,custom[email]] text-input"

* en el caso de que  necesitemos  un campo obligatorio y q sea numérico  lo hice de esta manera:class="validate[required , custom[integer]] text-input"
* si lo que necesitamos  validar  es un select o un dd  en este caso es mejor dejar el primer value vacio  pero si colocarlo  y de  resto seria  normal
y para hacerlo obligatorio simplente colocamos  el class  como  se ve  a continuación

*Si lo que se necesita es  validar un  radio   entonces  sera de esta manera

lo  único que hay q tener en cuenta es que el name lo llamaremos igual y la clase que le colocamos es  class="validate[required] radio" y ya  de esta manera  validamos  de una  forma muy sencilla que  nos ahorrara algo de tiempo :

* En caso  de que  sea  un checkbox   es muy parecido   en el caso   de que digan   de un grupo de checkbox seleccione maximo 2  entonces  se lograria  de esta manera  class="validate[maxCheckbox[1]] checkbox"
es claro que si se  cambia   el numero en el validate  se puede  ampliar el rango segun lo que necesite ejemplo class="validate[maxCheckbox[5]] checkbox"

* en el  caso  de que  no sea  el máximo   si no el mínimo es decir q  sea obligatorio seleccionar por lo menos  1 entonces  es muy   parecido

*si  solo queremos  que el checkbox  sea  obligatorio   creamos  uno normal y le colocamos una  clase  de requerido 

*un file se valida exactamente  q si fuera un text  en el caso de que  fuera  un valor requerido

asi se ve   el formulario  si no  se llena nada  con algo de estilo

 clic aqui si quieres descargar el ejemplo 

Clic aqui para ver demo