sábado, 6 de marzo de 2021

Desarrollo Móvil con Vue - Parte 3(NativeScript)

 En los artículos anteriores desarrollamos una aplicación móvil usando vue con el framework Quasar  ver articulo. y con el framework Ionic ver articulo

Este es el ultimo articulo de Desarrollo móvil con vue js y en esta ocasión usaremos el framework nativescript que a diferencia de los 2 anteriores con nativescript podremos crear aplicaciones nativas usando vue js.




Para empezar a desarrollar aplicaciones con nativescript-vue debes tener listo tu sistema operativo para el desarrollo nativo(tener instalado y configurado android studio para app android o xcode para ios ver documentación ) y t también debes tener  instalado vue-cli

 npm install -g @vue/cli @vue/cli-init
Teniendo instalado el cli de vue podremos crear nuestra app

 vue init nativescript-vue/vue-cli-template myapp-nativescript
nos aparecerán una serie de configuraciones que debemos seleccionar(en mi caso elegí lo mas básico)



Accedemos a la carpeta donde se genero nuestro proyecto y procedemos a instalar los módulos necesarios


Ya podemos abrir  nuestro proyecto en vscode, y tendremos la siguiente estructura del proyecto


Si ejecutamos nuestro proyecto

 tns run android
observaremos el famoso hello word 


Trabajaremos dentro de la carpeta src/components/App.vue colocamos el siguiente código


<template>
  <Page>
    <ActionBar title="App Users">
      <ActionItem ios.position="right">Cristian Torres</ActionItem>
    </ActionBar>
    <ListView for="item in dataApi" class="list-group">
      <v-template>
        <GridLayout class="list-group-item" rows="*" columns="auto, *">
          <Image
            src.decode="font://"
            class="fas ico"
            horizontalAlignment="left"
            style="color: green"
          />
          <StackLayout
            class="list-view-item"
            orientation="vertical"
            paddingLeft="50"
            paddingRight="50"
            paddingBotton="0"
            paddingTop="0"
            style="margin: 0"
          >
            <Label class="h3" :text="item.name" />
            <Label class="h4" :text="item.email" />
          </StackLayout>
        </GridLayout>
      </v-template>
    </ListView>
  </Page>
</template>

<script>
export default {
  data() {
    return {
      dataApi: [],
    };
  },
  async mounted() {
    //llamamos metodo para cargar la data
    this.getData();
  },
  methods: {
    //metodo para obtener la data de la api
    async getData() {
      try {
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/users"
        );
        this.dataApi = await response.json();
        console.log(this.dataApi);
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style scoped>
ActionBar {
  background-color: #2b8cee;
  color: #ffffff;
}

.ico {
  color: red;
  font-size: 5;
}


.message {
  vertical-align: center;
  text-align: center;
  font-size: 20;
  color: #333333;
}
</style>

Si observamos el código veremos que el codigo javascript es muy similar al que usamos en los artículos anteriores de hecho es el mismo que usamos cuando hicimos la app con Quasar y ligeramente diferente al que usamos con Ionic, ya que ionic usa  vue 3(es un poco diferen a vue 2).
Pero si observamos el código del template(que son los componentes) si notamos que es diferente a qusar e ionic y es porque como se los dije al principio con nativescript se crean aplicaciones nativas y los componentes se parecen mas a como cuando estamos desarrollando aplicaciones nativas(ActionBar, ListView, Label etc).

Para usar iconos en nativescript debemos instalar las fuentes .ttf  icon fonts  las cuales ya van instaladas en el proyecto






Si corremos nuestra aplicación

 tns run android
obtendremos el siguiente resultado

 

El resultado de la aplicación es similar a las que desarrollamos con quasar e ionic (consumimos una api y mostramos los datos en un listview) pero a diferencia de los ejemplos anteriores el resultado de esta aplicación es nativa no hibrida.

Y con este articulo llegamos al final de la serie de artículos de desarrollo móvil con vue, en donde les mostré algunas opciones(creo que las mas populares) para poder usar las habilidades de desarrollo web con vue en aplicaciones móviles.

En próximos artículos estaremos desarrollando mas ejemplos usando nuestro querido framework de vue para desarrollo móvil

puedes descargar el código desde este repositorio




si quieren donarme para una cerveza lo pueden hacer aqui.

Hasta la próxima.

Saludos desde El Salvador

domingo, 10 de enero de 2021

Desarrollo Móvil con Vue - Parte 2(Ionic)

En el articulo anterior desarrollamos una aplicación móvil usando vue con el framework Quasar  ver articulo.

Continuando con el desarrollo móvil con vue esta vez aremos la misma aplicación  pero usando ionicframework que al igual que Quasar con este framework podremos crear aplicaciones móviles hibridas(para android y también ios), también ionic nos permite crear aplicaciones web y aplicaciones de escritorio.




Lo primero que aremos será instalar ionic 
npm install -g @ ionic / cli
Luego de instalar el cli de ionic podremos crear nuestra aplicación con el siguiente comando
ionic start myapp-ionic  --type vue
Elegimos una plantilla en blanco

 

Esto nos creara un proyecto con la siguiente estructura.


En la carpeta que trabajaremos sera en src para ejecutar nuestra aplicación usaremos el siguiente comando(podemos usar la terminal integrada de vs code)

ionic serve


Esto desplegara la aplicación en nuestro navegador, al igual que con Quasar podremos trabajar el desarrollo de la aplicación y ejecutarla desde el navegador y una vez terminada podremos compilar para android o ios.

Lo que aremos será modificar  el archivo Home.vue que esta dentro de la carpeta Views, que es la vista con que nuestra aplicación inicia.



<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar color="primary">
        <ion-title>App Users</ion-title>
        <ion-title class="ion-text-right" size="small">Cristian Torres</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true"> 
      <ion-list>
        <ion-list-header lines="inset">
          <ion-label>Users</ion-label>
        </ion-list-header>
      <div v-for="item in dataApi" :key="item.id" >
          <ion-item>
            <ion-avatar slot="start">
              <ion-icon :icon="personCircleOutline" size="large" style="color: #26a660;">
            </ion-icon></ion-avatar>
            <ion-label>
              <h2>{{ item.name }}</h2>
              <h3>{{ item.email }}</h3>
            </ion-label>
          </ion-item>
        </div>
      </ion-list>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonList,
  IonListHeader,
  IonLabel,
  IonAvatar,
  IonItem,
  IonIcon,
} from "@ionic/vue";
import { defineComponent, ref, onMounted } from "vue";
import { personCircleOutline } from "ionicons/icons";
export default defineComponent({
  name: "Home",
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
    IonList,
    IonListHeader,
    IonLabel,
    IonAvatar,
    IonItem,
    IonIcon,
  },
  setup() {
    const dataApi = ref([]);
    //metodo para obtener la data de la api
    const getData = async () => {
      try {
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/users"
        );
        dataApi.value = await response.json();
        console.log(dataApi.value);
      } catch (error) {
        console.log(error);
      }
    };
    //llamamos metodo para cargar la data
    onMounted(() => {
      getData();
    });
    return {
      dataApi,
      getData,
      personCircleOutline
    };
  },
});
</script>

<style scoped>
</style>
</script> 

 Dentro de nuestro template hacemos uso de componentes de ionic  para pintar la lista de usuarios que obtenemos de la api de jsonplaceholder en nuestro método getData() si vieron el articulo anterior(quasar) verán que el código javascript es un poco diferente y eso es porque ionic usa vue 3.

Si corremos nuestra aplicación  
ionic serve


El resultado de la aplicación es similar a la que obtuvimos con quasar(claro el estilo es un poco diferente ya que cada framework usa sus propios componentes y css).

Por ultimo solo nos falta compilar nuestra aplicación para android o ios para hacer esto ionic(al igual que quasar) utiliza capacitor o cordova para generar tu aplicación móvil(capacitor es el framework oficial de ionic  para generar aplicaciones móviles y este ya viene integrado en el proyecto)

Para poder compilar tu app con capacitor debes tener instalado Android Studio para android y Xcode para ios voy a partir de que ya tienes instalado android studio en tu maquina para poder compilar para android.

Lo primero que aremos será ejecutar(se nos creara el build de nuestro proyecto y creara la carpeta dist)

ionic build
Y luego ejecutamos el siguiente comando(este comando creara la carpeta android y ios)

ionic cap add android
Por ultimo ejecutamos

ionic cap open android
Se nos abrirá nuestro proyecto en android studio, y ya podremos probar nuestra aplicacion en nuestro dispositivo o en umulador.


A diferencia de quasar(se hace con un comando del cli) si queremos generar nuestra apk lo podremos hacer desde android studio.

Y eso seria todo, como ven al igual que quasar crear una aplicación móvil con ionic es relativamente sencillo. En el siguiente articulo crearemos la misma aplicación usando Nativescript-vue.
 
Y como siempre pueden encontrar el código en github.

si quieren donarme para una cerveza lo pueden hacer aqui.

Hasta la próxima.

Saludos desde El Salvador

sábado, 2 de enero de 2021

Desarrollo Movil con Vue (3 Opciones) - Parte 1 (Quasar)

Primeramente desearte que tengas un 2021 exitoso y con muchas líneas de código.

Para empezar este 2021 con pie derecho, te traigo una serie de articulos que de seguro te ayudaran si quieres entrar al mundo de desarrollo móvil.

Si eres desarrollador web con VUE JS y quieres empezar a desarrollar para móvil, pues que crees puedes seguir usando vue para desarrollar aplicaciones para android e ios. 

Y en esta serie de tutoriales(serán 3) te mostrare 3 opciones para el desarrollo móvil con vue js

Realizaremos una aplicación sencilla con estos 3 framework que tienen soporte para vue y que además son de código abierto, y que con los conocimientos que tienes de vue podrás empezar a desarrollar aplicaciones movil.

La decisión de cual framework elegir ya es cosa tuya de acuerdo a los requerimientos de la aplicación que quieras desarrollar, solo déjame decirme que los 3 framework te permiten compilar tanto para android como ios(yo solo are la compilación para android, pero si tu tienes una mac puedes también compilar para ios).

La aplicación que realizaremos como te lo dije anteriormente será algo sencilla, pero sin duda te servirá para que tengas una idea de como empezar con estos frameworks.





Lo que aremos será consumir la api de jsonplaceholder. para obtener una lista de  usuarios que mostraremos en un listview 

Y bueno empezaremos con Quasar que básicamente es un framework basado en vue que te sirve para desarrollar aplicaciones móviles(aplicaciones hibridas con cordova y capacitor) y que también  te permite desarrollar PWA, SPA, SSR y  Aplicaciones de Escritorio, prácticamente te permite crear todo tipo de aplicaciones con la misma base de código(te invito que le des un ojo a la documentación).
Este framework ya cuenta con una serie de componentes que te ayudan a crear aplicaciones rápidamente si ya usaste(vuetify o bootstrap-vue) te parecerá muy familiar.

Y bueno basta de explicaciones(te recomiendo que leas la documentación para entender mejor como funciona este framework) empecemos de una buena vez a lo que viniste.

Lo primero que debes hacer es instalar Quasar CLI  abrimos nuestra terminar y escribimos lo siguiente
npm install -g @quasar/cli
Una vez instalado empezaremos creando una aplicación con quasar siempre en nuestra terminal escribirnos el siguiente comando

quasar create myapp-quasar
Te saldrán una  una serie de preguntas para la configuración de tu proyecto que debes completar en mi caso deje casi todo por defecto, solo cambie el preprocesador de css por scss y no inclui a eslint 





Una vez creado nuestro proyecto abrimos la carpeta con nuestro editor favorito en mi caso vscode
si vemos la estructuras de las carpetas son muy parecidas a crear un proyecto con vue cli 


En la carpeta que trabajaremos sera en src, para ejecutar nuestra aplicación usaremos el siguiente comando(podemos usar la terminal integrada de vscode)
quasar dev


Esto desplegara la aplicación  que por defecto que  trae la plantilla de  quasar en nuestro navegador, lo bueno de esto es que podemos desarrollar toda nuestra aplicación y ejecutarla desde el navegador(de preferencia en versión movil) y una vez terminada podemos compilar para android o ios.

Lo que aremos es modificar dentro de la carpeta pages el archivo Index.vue que es la vista de inicio de nuestra aplicación.

<template>
  <q-page class="q-pa-md">
    <!--componente listview quasar-->
    <q-list bordered="" padding="">
      <q-item-label header="">Users</q-item-label>
      <div :key="item.id" v-for="item in dataApi">
        <q-item>
          <q-item-section avatar="" top="">
            <q-icon class="text-secondary" name="account_circle" style="font-size: 30px;">
          </q-icon></q-item-section>

          <q-item-section>
            <q-item-label>{{ item.name }}</q-item-label>
            <q-item-label caption="">{{ item.email }}</q-item-label>
          </q-item-section>
        </q-item>
        <q-separator inset="item" spaced="">
      </q-separator></div>
    </q-list>
  </q-page>
</template>

<script>
export default {
  name: "PageIndex",

  data() {
    return {
      dataApi: [],
    };
  },
  async mounted() {
    //llamamos metodo para cargar la data
    this.getData();
  },
  methods: {
    //metodo para obtener la data de la api
    async getData() {
      try {
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/users"
        );
        this.dataApi = await response.json();
        console.log(this.dataApi);
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>
Dentro de nuestro template hacemos uso de un componente de quasar List and List Items que nos sirve para listar los datos que obtenemos de la api, que es lo que hacemos con nuestro metodo getData() mediante fetch hacemos un get para obtener un listado de usuarios que jsonplaceholder nos  ofrece.
Si corremos nuestra aplicación con el comando que ya lo hicimos anteriormente.

quasar dev
obtendremos el siguiente resultado.



Ahora solo nos falta copilar nuestra aplicación para android o ios para hacer esto quasar utiliza cordova o capacitor para generar tu aplicación móvil(pero no te preocupes es muy fácil hacerlo), en mi caso usare capacitor.

Para poder compilar tu app con capacitor debes tener instalado Android Studio para android y Xcode para ios Preparation for Capacitor App voy a partir de que ya tienes instalado android studio en tu maquina para poder compilar para android.

Lo primero que aremos es agregar capacitor en nuestro proyecto 

quasar mode add capacitor


Para poder probar nuestra aplicación en un emulador o en nuestro celular ejecutamos el siguiente comando(importante elegir la ip de su maquina).

quasar dev -m capacitor -T android
Este comando creara nuestro proyecto android y abrirá android studio en donde podremos ejecutar la aplicación  desde un emulador de android o desde nuestro celular.


Por ultimo solo nos queda generar el apk de nuestra app para que nuestros usuarios la puedan instalar en sus dispositivos.

quasar build -m capacitor -T android -debug
esto generara nuestro apk que se encontrata dentro de la carpeta myapp-quasar\dist\capacitor\android\apk\debug.

Como ven crear una aplicación movil con Quasar es muy sencillo, en el proximo articulo estaremos haciendo la misma aplicación pero con Ionic asi que esten pendientes.
 
Y como siempre pueden encontrar el código en github.

si quieren donarme para una cerveza lo pueden hacer aqui.

Hasta la próxima.

Saludos desde El Salvador

domingo, 9 de agosto de 2020

Mostrar Ubicación en Google Map Vue js

En este articulo veremos como integrar los mapas de  google map en nuestros proyectos vue usando la librería npm vue2-google-maps.

Lo primero que aremos es crear un nuevo proyecto vue usando su cli en mi caso lo  llamare vuemap

vue create vuemap

Una vez creado nuestro proyecto lo abrimos en visual code y usando la terminal instalamos la librería mediante npm 

una vez se instale iremos a nuestro archivo main.js y agregaremos el siguiente código


import * as VueGoogleMaps from "vue2-google-maps";

Vue.use(VueGoogleMaps, {
  load: {
    key: "AIzaSyDp3Ud3SixagW8bJOwtosy5bBMB5JRNS_k",
  },
});

Lo primero es importar la librería y luego cargarla usando una api key de google(en este caso utilizo una de prueba para desarrolladores).

Ahora para cargar el mapa lo que aremos es crear un nuevo componente llamado GoogleMap

dentro de este componente tendremos el siguiente código 


<template>
  <gmap-map
    :center="center"
    :zoom="16"
    style="width: 100%; height: 500px"
  >
    <gmap-marker
      :key="index"
      v-for="(m, index) in markers"
      :position="m.position"
      :title="m.title"
      :clickable="true"
      :draggable="true"
      @click="center=m.position"
    ></gmap-marker>
  </gmap-map>
</template>
<script>
  export default {
    data () {
      return {
        
        center: {lat: this.latitude, lng: this.longitude},
        markers: [{
          position: {lat: this.latitude, lng: this.longitude},
          title: this.title
        }]
      }
    },

    props: {
        latitude: Number,
        longitude: Number,
        title: String
    }
  }
</script>

Básicamente lo que hacemos acá es configurar nuestro mapa con propiedades que trae la librería que instalamos, y usando props recibiremos la localización  que queremos mostrar en nuestro mapa. 
Para poder mostrar nuestro mapa lo aremos en nuestro componente principal App.vue



<template>
  <div id="app">
    <div class="row">
       <h1 style="text-align: center;">Proyecto Vue Google Map</h1>
       <GoogleMap :latitude= 13.7013266 :longitude= -89.226622 :title="'Titulo Marcador'" />
    </div>

  </div>
</template>

<script>
import GoogleMap from "./components/GoogleMap";

export default {
  name: 'App',
  components: {
    GoogleMap
  }
}
</script>
Como ven lo único que hacemos es importar nuestro componente que creamos anteriormente y enviarle el valor de las propiedades.

Si corremos nuestro proyecto npm run serve obtendremos el siguiente resultado.


De esta manera pueden integrar de manera fácil un mapa en sus proyectos de vue.

Pueden descargar el proyecto desde mi repositorio en github vuemap 

si quieren donarme para una soda lo pueden hacer aqui.


miércoles, 17 de julio de 2019

AutoComplete MVC 5 (usando librería select2)

En este articulo veremos la manera de como crear un dropdowlist con autocomplete en mvc 5 usando la libreria select2 ya que buscando en la web me doy cuenta que existen pocos ejemplos usando esta librería en un proyecto mvc de asp.net.

Para este ejemplo usare una base de datos que solo cuenta con una tabla Departamento(son los departamentos de mi bello país El Salvador)


Creamos un proyecto en VS y lo primero que aremos es agregar la librería select2 a nuestro proyecto(la descargamos con nuget)


Creamos el modelo de nuestra base de datos


Creamos un controlador(DepartamentoController) y agregamos el siguiente código




        public ActionResult Index()
        {
            return View();
        }

        public JsonResult GetDepartamento(string departamento)
        {
            PaisEntities bd = new PaisEntities();
            //cargo datos sin filtro
            var dataList = bd.Departamento.ToList();
            //si parametro tiene dato
            if(departamento != null)
            {
                //busco dato filtrado
                 dataList = bd.Departamento.Where(x => x.Departamento1.Contains(departamento)).ToList();
            }

            //datos a usar
            var modificarData = dataList.Select(x => new
            {
                id= x.Id,
                text=x.Departamento1
            });
            //retorno datos como json
            return Json(modificarData, JsonRequestBehavior.AllowGet);
        }

        //Metodo donde obtengo dato
        [HttpPost]
        public ActionResult Save(string id)
        {
            //aca tu codigo
            return Json(0, JsonRequestBehavior.AllowGet);
        }

Como ven tenemos un método GetDepartamento que recibirá un parámetro y que nos retornara un json. Les explico un poco que es lo que hace este método primeramente cargamos la lista con todos los departamentos(los datos que se mostraran por defecto cuando el usuario no escriba nada) luego si el parámetro contiene datos hacemos el filtro para buscar los datos que coincidan con lo que el usuario escriba para eso usamos linq lo hacemos con el método Contains(es similar a hacer un like de sql), para este ejemplo mostraremos los departamento y obtendremos el id del departamento seleccionado, por ultimo tenemos el método Save que sera donde obtendremos el valor del id seleccionado.
Ahora creemos nuestra vista Index y agregamos el siguiente código

@model PruebaAutocomplete.Models.Departamento
@{
    ViewBag.Title = "Index";

}

@*tema de boostrap para select2*@




@using (Html.BeginForm("ConsultarCreditos", "Cliente", FormMethod.Post))
{
    <select class="mySelect2" style="width:200px"></select>
    <br />
    <br />
    <div class="form-group">
        @Html.TextBoxFor(m => m.Id, null, new { disabled = true })

    </div>

}



<script>
    //obtengo datos por ajax
    $(document).ready(function () {
        $(".mySelect2").select2({
            placeholder: "Seleccione Departamento",
            allowClear: true,
            theme: "bootstrap",
            ajax: {
                //invoco el metodo de mi controlador
                url: '@Url.Action("GetDepartamento","Departamento")',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        departamento: params.term //parametro del metodo de mi controlador
                    };
                },
                processResults: function (data) {
                    return {
                        results: data
                    };
                }
            }
        });
    });

    //capturar dato seleccionado
    $(".mySelect2").on("change", function () {
        var departamentoID = $(this).val(); //capturo id seleccionado
        var textboxData = departamentoID; 
        $.ajax({
            url: '@Url.Action("Save","Departamento")', //url metodo de mi controlador
            data: { id: textboxData },
            dataType: 'json',
            type: 'post',
            success: function () {
                $("#Id").val(textboxData);//asigno valor id a textbox
            }
        });

    });
</script>

Lo que hacemos es crear un dropdowlist donde mostraremos los departamentos y también tenemos un texbox que es donde mostraremos el id del departamento seleccionado. 
Lo importante acá es ver como implementamos jquery con ajax para cargar los departamentos y como obtenemos el valor del id.
En la primera parte obtenemos los datos invocando por ajax el método GetDepartamento de nuestro controlador en esta parte también usamos algunas propiedades de la librería select2 para asignarle el tema y placeholder. En la segunda parte capturamos el id del dato seleccionado y enviamos por ajax este valor a nuestro método Save de nuestro controlador, también acá asignamos el valor del id seleccionado a nuestro textbox.


Bueno eso seria todo. Pueden descargar el proyecto desde mi repositorio en github  Descargar Proyecto
  
Recuerden si necesitan una pagina web para su empresa, una aplicación web o de escritorio estamos a la orden pueden consultar  Mis Servicios

O si quieren donarme para una soda lo pueden hacer aqui.


martes, 9 de julio de 2019

Filtrar Datos MVC 5 C#

En esta ocasión veremos la manera de como filtrar datos(DropDowlist) en una aplicación mvc de asp.net y como recuperar un valor por medio de ajax dependiendo del valor seleccionado.



Imaginemos el siguiente escenario  tenemos 2 tablas Cliente y Crédito en donde un cliente puede tener varios créditos, lo que aremos es crear una vista en donde mostraremos los datos del cliente y al seleccionar un cliente mostraremos el detalle de todos los créditos que el cliente posee.




Empezaremos creando la base de datos, la cual tendrá la siguiente estructura.



Creamos un nuevo proyecto MVC y generamos nuestro modelo



Ahora crearemos una clase model que nos servirá para mostrar los datos(creamos una carpeta ViewModel dentro de Model y creamos la clase en mi caso le llamare ClienteModel)






 
    public class ClienteModel
    {
        public int Id { get; set; }
        public string Nombre { get; set; }
        public string Dui { get; set; }
        public decimal Saldo { get; set; }
        public string Credito { get; set; }
    }
    

Esta clase lo único que tiene son las propiedades que usaremos para mostrar los datos en nuestras vistas. En nuestro controlador para listar los clientes aremos lo siguiente en nuestro método Index.
 
        public ActionResult Index()
        {
            List clientes;
            using(CreditosEntities bd = new CreditosEntities())
            {
                //obtengo listado clientes
                clientes = (from cli in bd.Cliente
                            select new ClienteModel
                            {
                                Id = cli.Id_Cliente,
                                Nombre = cli.Nombre,
                                Dui = cli.Dui
                            }).ToList();
            }

            return View(clientes);
        }

Lo que hacemos es retornar un listado con los datos de los clientes haciendo uso de nuestra clase modelo. Ahora agreguemos nuestra vista Index la cual tendrá el siguiente código.
 
<div class="row">
    <div class="col-md-12">

        <table class="table">
            <thead class="thead-dark">
                <tr>
                    <th>ID</th>
                    <th>DUI</th>
                    <th>NOMBRE</th>
                    <th>Creditos</th>
                </tr>
            </thead>
            
            @foreach (var elemento in Model)
            {
                <tr>
                    <td>@elemento.Id</td>
                    <td>@elemento.Dui</td>
                    <td>@elemento.Nombre</td>
                    <td>
                        
                        <input type="button" class="btn btn-danger" value="Ver Creditos"
                               onclick="document.location.href='@Url.Content("~/Cliente/ConsultarCreditos/"+elemento.Id)'" />

                    </td>
                </tr>
            }



        </table>
    </div>
</div>


Ahora crearemos el método para obtener la información de los créditos del cliente seleccionado en nuestro controlador agregamos el siguiente código.
 
        //variable global
        CreditosEntities bd = new CreditosEntities();

        public ActionResult ConsultarCreditos(int id)
        {

            //obtengo id del cliente
            ClienteModel clien = new ClienteModel();
            {
                clien.Id = id;
            };

            // cargar drow creditos de cliente seleccionado mediante id
            ViewBag.Credito= new SelectList(bd.Credito.Where(c => c.Id_Cliente == id).ToList(), "N_Credito", "N_Credito");

            //obtener nombre
            ViewBag.Nombre = bd.Cliente.Where(c =>c.Id_Cliente ==id).First().Nombre;
            return View(clien);
        }

        //Metodo para obtener saldo por ajax jquery
        public JsonResult Saldo(string credito)
        {
            return Json(bd.Credito.First(c => c.N_Credito == credito).Saldo, JsonRequestBehavior.AllowGet);
        }

Tenemos 2 métodos en el primero ConsutarCreditos es donde por medio del id del cliente seleccionado obtendremos todos los créditos del cliente (esto lo hacemos en viewbag para mostrarlo en nuestra vista en un dropdowlist) también recuperamos el nombre del cliente seleccionado.
El método Saldo nos servirá para obtener el saldo cuando seleccionemos el numero de crédito en el dropdowlist(retorna un json para hacerlo fácil con ajax). Ahora creamos nuestra vista ConsultarCreditos.
 
@model FiltrarDatosMVC.Controllers.ViewModels.ClienteModel
@{
    ViewBag.Title = "ConsultarCreditos";
}

<h2>Consultar Creditos</h2>

@using (Html.BeginForm("ConsultarCreditos", "Cliente", FormMethod.Post))
{
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <label>Cliente:</label>@Html.TextBox("txtNombre", (string)ViewBag.Nombre, new { disabled = true })<br />
            </div>
            <div class="form-group">
                <label>Cuentas del Cliente:</label>  @Html.DropDownListFor(m => m.Credito, (SelectList)ViewBag.Credito, "seleccione")
                <br />
            </div>
            <div class="form-group">
                <label>Saldo:</label>@Html.TextBoxFor(m => m.Saldo, null, new { disabled = true })<br />
            </div>

            <input type="button" class="btn btn-primary" value="Salir" onclick="document.location.href='@Url.Content("~/Cliente/Index")'" />
        </div>
    </div>

}

@Scripts.Render("~/bundles/jquery")

<script>
      //muestro saldo depende de credito seleccionado
    $("#Credito").change(function () {
        $.ajax({
            url: '@Url.Action("Saldo","Cliente")',
            data: { credito: $(this).val() },
            success: function (a) {
                $("#Saldo").val(a);
            }
        });
    });

</script>

Lo que hacemos acá es primeramente mostrar los datos del cliente nombre y créditos que posee(mostramos los créditos en un dropdowlist) y cuando seleccionamos un crédito nos muestra el saldo de este para eso hacemos uso de ajax con jquery(usamos el método Saldo de nuestro controlador)
Bueno eso seria todo. Pueden descargar el proyecto desde mi repositorio en github  Descargar Proyecto
  
Recuerden si necesitan una pagina web para su empresa, una aplicación web o de escritorio estamos a la orden pueden consultar  Mis Servicios

Y si quieren donarme para una soda lo pueden hacer aqui.


miércoles, 19 de junio de 2019

CRUD MVC 5 .NET (2 PARTE)

Esta es la segunda parte (y última parte) de cómo hacer un CRUD en MVC 5 con C#, en la parte anterior creamos la bd, creamos nuestro proyecto en VS y vimos la manera de como leer los datos y mostrarlos en nuestra vista. 
Puedes ver el artículo anterior CRUD MVC 5 .NET (1 PARTE) en este articulo estaremos completando las operaciones que nos faltaron que serían la de Agregar, Editar y Eliminar.

Lo primero que aremos será agregar una clase en nuestro models dentro de la capeta que creamos ViewModels llamada PersonaViewModel




  
    public class PersonaViewModel
    {
        
        public int Id { get; set; }
        //indica que es requerido
        [Required]
        //nombre a mostrar 
        [Display (Name ="Nombre")]
        //valida el numero de caracteres igual a varchar(50) de nuestra bd
        [StringLength(50)]
        public string Nombre { get; set; }
        [Required]
        [Display(Name = "Apellido")]
        [StringLength(50)]
        public string Apellido { get; set; }
        [Required]
        public int? Edad { get; set; }
    }    

Esta clase si se fijan es igual a la que usamos para mostrar los datos (las mismas propiedades), la diferencia es que en esta clase usamos Data Annotations para hacer algunas validaciones (ya que esta clase usaremos para agregar y editar registros) Ahora dentro de nuestro controlador PersonaController agreguemos nuestro método para Agregar un registro.
  
       public ActionResult Nuevo()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Nuevo(PersonaViewModel persona)
        {
            try
            {
                //validar datos
                if(ModelState.IsValid)
                {
                    //guardamos datos en bd
                    using (PersonaEntities bd = new PersonaEntities())
                    {
                        var opersona = new Persona();
                        opersona.Nombre = persona.Nombre;
                        opersona.Apellido = persona.Apellido;
                        opersona.Edad = persona.Edad;

                        bd.Persona.Add(opersona);
                        bd.SaveChanges();
                    }
                    //luego de agregar registro redirecionamos hacia nuestro index
                    return Redirect("~/Persona/");
                }

                return View(persona);
            }

            catch(Exception e)
            {
                throw new Exception(e.Message);
            }
        }  

Agregamos 2 metodos ActionResult con el mismo nombre(Nuevo) la diferencia es que el primero solo retornara la vista(es HttpGet) y en el segundo método(HttpPost) es donde agregaremos nuestro registro usando la clase que creamos anteriormente como parámetro. 
Lo primero que hacemos es validar los datos que definimos en nuestra clase anterior con los Data Annotation, si los datos están correctos creamos un nuevo registro y lo agregamos a la bd. Ahora crearemos nuestra vista para agregar registros(damos click derecho en nuestro ActionResult Nuevo y le damos agregar vista).




  
@model CrudPersonaMVC.Models.ViewModels.PersonaViewModel
@{
    ViewBag.Title = "Nuevo";
}


<h2>Nuevo</h2>


@using (Html.BeginForm("Nuevo","Persona", FormMethod.Post))
{
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <!-- Creo label   -->
                @Html.LabelFor(p => p.Nombre):
                
                @Html.TextBoxFor(p => p.Nombre, "", new { @class = "form-control" })
                
                @Html.ValidationMessageFor(p => p.Nombre, null, new { @class = "text-danger" })
            </div>
            <div class="form-group">
                @Html.LabelFor(p => p.Apellido):
                @Html.TextBoxFor(p => p.Apellido, "", new { @class = "form-control" })
                @Html.ValidationMessageFor(p => p.Apellido, null, new { @class = "text-danger" })
            </div>
            <div class="form-group">
                @Html.LabelFor(p => p.Edad):
                @Html.TextBoxFor(p => p.Edad, "", new { @class = "form-control" })
                @Html.ValidationMessageFor(p => p.Edad, null, new { @class = "text-danger" })
            </div>
            <br/>
            <div style="text-align:center">
                <input  type="submit" class="btn btn-primary" value="Guardar" />
            </div>
        </div>
    </div>
}

Creamos nuestro formulario usando los helper de mvc .net ya tenemos nuestro formulario para agregar registro ahora solo nos queda en nuestro botón nuevo que creamos en nuestro Index(articulo anterior) direccionar a nuestra vista nuevo al presionar el botón
  
 <input type="button" class="btn btn-primary" value="Nuevo" onclick="document.location.href='@Url.Content("~/Persona/Nuevo")'" />

Ahora vamos a editar registros en nuestra controlador PersonaController agreguemos los siguientes métodos.
  
  public ActionResult Editar(int id)
        {
            PersonaViewModel model = new PersonaViewModel();
            using (PersonaEntities bd = new PersonaEntities())
            {
                var opersona = bd.Persona.Find(id);//obtenemos registro por medio de id
                model.Id = opersona.Id;
                model.Nombre = opersona.Nombre;
                model.Apellido = opersona.Apellido;
                model.Edad = opersona.Edad;
            }

            return View(model);

        }
        [HttpPost]
        public ActionResult Editar(PersonaViewModel persona)
        {
            try
            {
                //validar datos
                if (ModelState.IsValid)
                {
                    //guardamos datos en bd
                    using (PersonaEntities bd = new PersonaEntities())
                    {
                        var opersona = bd.Persona.Find(persona.Id);//obtenemos registro por medio de id
                        opersona.Nombre = persona.Nombre;
                        opersona.Apellido = persona.Apellido;
                        opersona.Edad = persona.Edad;
                        //editamos registro
                        bd.Entry(opersona).State = System.Data.Entity.EntityState.Modified;
                        bd.SaveChanges();
                    }

                    return Redirect("~/Persona/");
                }

                return View(persona);
            }

            catch (Exception e)
            {
                throw new Exception(e.Message);
            }
        }

De igual manera tenemos 2 ActionResult con el nombre Editar. El primer método lo que hace es a partir de el id obtener el registro para mostrarlo en la vista. En nuestro segundo método Editar(HttpPost) es donde actualizamos el registro en nuestra bd. 
Ahora crearemos nuestra vista para Editar registros(damos click derecho en nuestro ActionResult Editar y le damos agregar vista).
  
@model CrudPersonaMVC.Models.ViewModels.PersonaViewModel
@{
    ViewBag.Title = "Nuevo";
}


<h2>Nuevo</h2>


@using (Html.BeginForm("Editar","Persona", FormMethod.Post))
{
    <div class="row">
        <div class="col-md-12">
          @Html.HiddenFor(p => p.Id);
            <div class="form-group">
                <!-- Creo label   -->
                @Html.LabelFor(p => p.Nombre):
                
                @Html.TextBoxFor(p => p.Nombre, "", new { @class = "form-control" })
                
                @Html.ValidationMessageFor(p => p.Nombre, null, new { @class = "text-danger" })
            </div>
            <div class="form-group">
                @Html.LabelFor(p => p.Apellido):
                @Html.TextBoxFor(p => p.Apellido, "", new { @class = "form-control" })
                @Html.ValidationMessageFor(p => p.Apellido, null, new { @class = "text-danger" })
            </div>
            <div class="form-group">
                @Html.LabelFor(p => p.Edad):
                @Html.TextBoxFor(p => p.Edad, "", new { @class = "form-control" })
                @Html.ValidationMessageFor(p => p.Edad, null, new { @class = "text-danger" })
            </div>
            <br/>
            <div style="text-align:center">
                <input  type="submit" class="btn btn-primary" value="Guardar" />
            </div>
        </div>
    </div>
}

Como ven el código de nuestra vista es similar al de Nuevo, la diferencia es que es nuestro BeginForm cambiamos nuestro método por Editar y lo otro que cambia es que enviamos el id para editar el registro @Html.HiddenFor(p => p.Id). De igual manera en nuestro botón Editar de nuestro Index agregamos el siguiente código para hacer el direccionamiento a la vista Editar y pasar el id del elemento a editar.
  
<input type="button" onclick="document.location.href='@Url.Content("~/Persona/Editar/"+elemento.Id)'" value="Editar" class="btn btn-default" />

Ahora veamos el código para eliminar registro, en nuestro controlador PersonaController agreguemos el siguiente método
  
        [HttpPost]
        public ActionResult Eliminar(int id)
        {

            PersonaViewModel model = new PersonaViewModel();
            using (PersonaEntities bd = new PersonaEntities())
            {
                var opersona = bd.Persona.Find(id);//obtengo entidad con id

                bd.Persona.Remove(opersona);

                bd.SaveChanges();

            }
            return Content("ok");
        }

En este caso solo crearemos un método(httpPost) ya que no crearemos una vista, eliminaremos el registro al presionar el botón pasando como parámetro el id(lo aremos usando ajax con jquery). En nuestra vista Index al final de nuestro código agregaremos el siguiente script.
  
<script/>
    function jsEliminar(id) {
        if (confirm("Quieres Eliminar El Registro?")) {
            url = "@Url.Content("~/Persona/Eliminar")" + "/"+id; //metodo Eliminar Controller

            $.post(url, function (data) {
                
                if (data=="ok") {
                    document.location.href = "@Url.Content("~/Persona/")"
                    console.log("Exito");
                } else {
                    alert("No se pudo Eliminar El registro");
                }

            })
        }
    }
</script/>

Creamos una función que recibirá como parámetro el id del registro a eliminar y luego con ajax(con jquery) hacemos una petición post para pasar el id del registro a eliminar. Ahora nuestro botón Eliminar de nuestro Index para invocar esta función ariamos lo siguiente.
  
<input class="btn btn-danger" onclick="jsEliminar(@elemento.Id);" type="button" value="Eliminar" />

Eso seria todo, hemos visto la manera de hacer un crud sencillo usando mvc 5 con c#. Pueden descargar el proyecto desde mi repositorio en github, y recuerden si necesitan una pagina web para su empresa, una aplicación web o de escritorio estamos a la orden pueden consultar  Mis Servicios





Descargar Proyecto C#

Saludos desde El Salvador...


Si quieren donarme para una soda lo pueden hacer aqui.