sábado, 2 de mayo de 2015

Input Select Dinámico - JQuery y Ajax

En el siguiente apartado implementaremos 3 input select dinámicos - HTML, la data se alimentara desde servicios WCF.

Para llevar acabo este laboratorio haremos uso de Ajax, JQuery y tipo de dato JSON, independientemente que tenemos que considerar el Consumir servicios WCF - puedes consultar el link.

Iniciamos creando el primer archivo JavaScript (.js) de nombre AjaxMethods.js con los siguiente métodos. Primer método LoadFillDepartamento():

function LoadFillDepartamento(){
    $.ajax({//Inicializamos el Ajax que es parte del JQuery
            url: "Home/GetAllDepartamento",//Url que se encarga de linkear el método que trae la data
            type: "POST",",//Tipo POST - para obtener la lista de datos
            dataType: "json",//Dato tipo json - el método que nos trae la data es un JsonResult
            data: "{}",",//Pasar lo parámetros o filtros si es que existiera
            success: function (data) {//Ejecutamos la función para poder cargar la data al select

                if (data == null) {//Validación de datos nulos
                    alert('Disculpe, No hay departamentos que mostrar.');
                    return
                } else {
                    for (var i = 0; i < data.length; i++) {{//Recorremos y almacenamos la data en el select (SltDepartamento)
                        $("#SltDepartamento").append("<option value=" + data[i].CodDepartamento + ">" + data[i].DesDepartamento + "</option>");
                    }
                }
            },
            error: function (jqXHR, status, error) {//mensaje de error
                alert('Disculpe, existió un problema método LoadFillDepartamento');
            }
        });

}

Segundo método LoadFillProvincia() con el parámetro que captura el valor del código del select del departamento:


function LoadFillProvincia(jspCodDepartamento) {
    $.ajax({
        url: "Home/GetAllProvincia",
        type: "POST",
        dataType: "json",
        data: { pCodDepartamento: jspCodDepartamento },//parámetro que captura el valor del codigo de departamento
        success: function (data) {
            if (data != null) {
                $("#SltProvincia").find('option').remove();
                for (var i = 0; i < data.length; i++) {
                    $("#SltProvincia").append("<option value=" + data[i].CodProvincia + ">" + data[i].DesProvincia + "</option>");

                    LoadDistrito();
                }
            } else {
                alert('Disculpe, El departamento seleccionado\nno cuenta con provincias.');
                return
            }
        },
        error: function (jqXHR, status, error) {
            alert('Disculpe, existió un problema método LoadFillProvincia');
            return;
        }
    })

}

Tercer método LoadFillDistrito() con el parámetro que captura el valor del código del select de la provincia:


function LoadFillDistrito(jspCodProvincia) {
    $.ajax({
        url: "Home/GetAllDistrito",
        type: "POST",
        dataType: "json",
        data: { pCodProvincia: jspCodProvincia },},//parámetro que captura el valor del codigo de provincia

        success: function (data) {
            if (data != null) {
                $("#SltDistrito").find('option').remove();//Removemos los datos actuales para volver a cargar los datos según la selección que se realiza en el select de la provincia
                for (var i = 0; i < data.length; i++) {
                    $("#SltDistrito").append("<option value=" + data[i].CodDistrito + ">" + data[i].DesDistrito + "</option>");
                }
            } else {
                alert('Disculpe, La provincia seleccionado\nno cuenta con distritos.');
                return
            }
        },
        error: function (jqXHR, status, error) {
            alert('Disculpe, existió un problema método LoadFillDistrito');
            return;
        }
    })

}

Cuarto método LoadProvincia() la que se encargara de de seleccionar valores iniciales por defecto y cargar los demás select:


function LoadProvincia() {
    //Seleccionar por defecto el departamento Lima 15
    $("<option value='15'>DEPARTAMENTO LIMA</option>").appendTo("#SltDepartamento");

    //Cargar las provincias dependientes del departamento 15
    vCodDepartamento = $('#SltDepartamento').val();
    if (vCodDepartamento = '15') {
        LoadFillProvincia(vCodDepartamento);
    }

    //Select's dependiente del departamento
    //Cargar las provincias según el departamento seleccionado
    $('#SltDepartamento').change(function () {
        var vCodDepartamento = $(this).val();
        LoadFillProvincia(vCodDepartamento);
    });

}

Quito método LoadDistrito() la que se encargara de de seleccionar valor iniciales por defecto y cargar los :
function LoadDistrito() {
    vCodProvincia = $('#SltProvincia').val();//captura el valor inicial - en primera instancia
    if (vCodProvincia != null && vCodProvincia != "") {
        LoadFillDistrito(vCodProvincia); //carga los datos según el valor seleccionado

    } else {
        alert('Disculpe, existió un problema al cargar los distritos');
        return;
    }

    $('#SltProvincia').change(function () {//captura el valor seleccionado en segunda instancia
        var vCodProvincia = $(this).val();
        LoadFillDistrito(vCodProvincia); //carga los datos según el valor seleccionado
    });

}

Parar finalizar la creación de métodos en el arvhico AjaxMethods.js se crea el método de inicialización que invocara a los método principales que luego llamaran a los demás métodos.


function IniciazaMetodos() {
    LoadFillDepartamento();
    LoadProvincia();

}

De esta manera quedaría el primer archivo AjaxMethods.js creado:

function IniciazaMetodos() {
    LoadFillDepartamento();
    LoadProvincia();
}

function LoadFillDepartamento(){
    $.ajax({
            url: "Home/GetAllDepartamento",
            type: "POST",
            dataType: "json",
            data: "{}",
            success: function (data) {

                if (data == null) {
                    alert('Disculpe, No hay departamentos que mostrar.');
                    return
                } else {
                    for (var i = 0; i < data.length; i++) {
                        $("#SltDepartamento").append("<option value=" + data[i].CodDepartamento + ">" + data[i].DesDepartamento + "</option>");
                    }
                }
            },
            error: function (jqXHR, status, error) {
                alert('Disculpe, existió un problema método LoadFillDepartamento');
            }
        });
}

function LoadProvincia() {
    //Seleccionar por defecto el departamento Lima 15
    $("<option value='15'>DEPARTAMENTO LIMA</option>").appendTo("#SltDepartamento");

    //Cargar las provincias dependientes del departamento 15
    vCodDepartamento = $('#SltDepartamento').val();
//    alert(vCodDepartamento);
    if (vCodDepartamento = '15') {
        LoadFillProvincia(vCodDepartamento);
    }

    //Select's dependiente del departamento
    //Cargar las provincias según el departamento seleccionado
    $('#SltDepartamento').change(function () {
        var vCodDepartamento = $(this).val();
//        alert(vCodDepartamento);
        LoadFillProvincia(vCodDepartamento);
    });
}

function LoadFillProvincia(jspCodDepartamento) {
    $.ajax({
        url: "Home/GetAllProvincia",
        type: "POST",
        dataType: "json",
        data: { pCodDepartamento: jspCodDepartamento },

        success: function (data) {
            if (data != null) {
                $("#SltProvincia").find('option').remove();
                for (var i = 0; i < data.length; i++) {
                    $("#SltProvincia").append("<option value=" + data[i].CodProvincia + ">" + data[i].DesProvincia + "</option>");

                    LoadDistrito();
                }
            } else {
                alert('Disculpe, El departamento seleccionado\nno cuenta con provincias.');
                return
            }
        },
        error: function (jqXHR, status, error) {
            alert('Disculpe, existió un problema método LoadFillProvincia');
            return;
        }
    })
}

function LoadDistrito() {
    vCodProvincia = $('#SltProvincia').val();
//    alert(vCodProvinci    a);
    if (vCodProvincia != null && vCodProvincia != "") {
        LoadFillDistrito(vCodProvincia);
    } else {
        alert('Disculpe, existió un problema al cargar los distritos');
        return;
    }

    $('#SltProvincia').change(function () {
        var vCodProvincia = $(this).val();
        LoadFillDistrito(vCodProvincia);
    });
}

function LoadFillDistrito(jspCodProvincia) {
    $.ajax({
        url: "Home/GetAllDistrito",
        type: "POST",
        dataType: "json",
        data: { pCodProvincia: jspCodProvincia },

        success: function (data) {
            if (data != null) {
                $("#SltDistrito").find('option').remove();
                for (var i = 0; i < data.length; i++) {
                    $("#SltDistrito").append("<option value=" + data[i].CodDistrito + ">" + data[i].DesDistrito + "</option>");
                }
            } else {
                alert('Disculpe, La provincia seleccionado\nno cuenta con distritos.');
                return
            }
        },
        error: function (jqXHR, status, error) {
            alert('Disculpe, existió un problema método LoadFillDistrito');
            return;
        }
    })
}

Luego creamos el segundo archivo JavaScript (.js) de nombre Principal.js que se encargara de llamar al método de IniciazaMetodos que está en el primer archivo. 

$(document).ready(function () {
    IniciazaMetodos();
});

De esta manera podemos realizar inputs de tipo select dinámicos.

Nos vemos en el siguiente apartado :)

viernes, 1 de mayo de 2015

Consumir servicio WCF - Fase IV

Siguiendo con los apartados de servicios WCF - ahora implementaremos una aplicación Asp.Net MVC para saber el cómo consumir un serivicio WCF.

Requisitos:
  • Visual Studio .Net 2010.
  • Framework 4.
  • Ajax, JQuery, JSON
  1. Iniciamos creando nuestro proyecto de tipo ASP.NET MVC 4 Web Application - desde la carpeta FrontEnd.



  2. Seleccionamos el template basic de MVC.

  3. Estructura de nuestro proyecto MCV - creado.

  4. Ahora creamos el controllers - con nombre Home.


    Determinamos el nombre
  5. Luego creamos el view - clic derecho en index de la clase del controller.


    En mi caso mantendré el mismo nombre que el controller

    Estructura de nuestro view creado
  6. Ahora iniciamos haciendo referencia al servicio que anteriormente se creo y publico - determinamos con nombre ServiceUbigeo.

  7. Ubicamos haciendo clic Discover - asignamos el nombre de ServiceUbigeo


    Servicio referenciado desde nuestro proyecto MCV
    1. Consideraciones: Al crear uno o varios servicios en nuestro archivo Web.config de manera automática se adicionara los endpoint que determinar la ruta para el compartimiento de información entre las parte involucradas en un servicio.
    
        
          
            
          
        
        
          
            
              
            
          
        
      
    
    
  8. Ahora adicionamos es nuestro modelo (ClassModelo.cs) los siguiente atributos.
    Favor de considerar los comentarios que están en el código fuente - color verte - partiendo desde este punto.

    public class UbiDepartamento //Cambiamos a UbiDepartamento (parecido a la entidad de la base de datos)
        {
            //Sólo adiciono los atributos que se manipulara
            public string CodDepartamento { get; set; }
            public string DesDepartamento { get; set; }
        }
    
  9. Ahora implementamos en nuestro controller el método que nos permitirá consumir el servicio a la cual hacemos referencia - el HttpPost y el JsonResult se entrará al detalle en otro apartado.
    [HttpPost]
            public JsonResult GetAllDepartamento()
            {
                try
                {
                    using (var client = new Service1Client())
                    {
                        List result = new List();//Invocamo a la entidad de nuestro modelo
                        var preResult = client.GetDepartamentoDataList();//Invocamos al método que es parte del servicio ubigeo
    
                        if (preResult != null && preResult.ToList().Count > 0)//validar la existencia de datos
                            foreach (var item in preResult) //recoremos los valores
                            {
                                result.Add(new UbiDepartamento //y vamos adicionando en nuestro modelo segun los atributos
                                {
                                    CodDepartamento = item.COD_DEPARTAMENTO.ToString(),
                                    DesDepartamento = item.DES_DEPARTAMENTO.ToString()
                                });
                            }
    
                        return Json(result, JsonRequestBehavior.AllowGet); //retornamos los valores recuperados
                    }
                }
                catch (Exception)
                {
                    throw;
                }
            }
    
  10. Para este caso solo implementaremos la carga de datos en un HTML input de tipo select que haremos uso de Ajax y JQuery con tipo de dato JSON.
    $(document).ready(function () {
    
        $.ajax({
            url: "Home/GetAllDepartamento",
            type: "POST",
            dataType: "json",
            data: "{}",
            success: function (data) {
    
                if (data == null) {
                    alert('Disculpe, No hay departamentos que mostrar.');
                    return
                } else {
                    for (var i = 0; i < data.length; i++) {
                        $("#SltDepartamento").append("");
                    }
                }
            },
            error: function (jqXHR, status, error) {
                alert('Disculpe, existió un problema');
            }
        });
    
    });
    
  11. Y para finalizar implementamos HTLM en el _Layout.cshtml  para poder mostrar los datos que nos devuelve el servicio.

    Resultado del servicio que estamos consumiendo
Proyecto C#