Programacion y otras cosas

Cascadeo de DropDownList con MVC

2013-10-11T09:31:00.000-07:00

Saludos amigos, nuevamente hoy les traigo un tema muy sencillo en realidad, aunque espero en verdad en que a mas de uno le sea de utilidad, y es como cascadear los DropDownList en Razor usando MVC.

Realmente esto es muy fácil de hacer y lo voy a demostrar a continuación.

Lo que vamos a hacer es crear un DropDownList con la información de Empresas y cascadearemos este con otro DropDownList con información de las Sucursales pertenecientes a la empresa que hayamos seleccionado.

Los requisitos que para esto es tener la base de datos que hemos estado utilizando para los ejemplos, si no lo han seguido conmigo pueden descargar el script inicial aquí ya que tienen la base de datos, actualícenla con las tablas de empresa y Sucursales con el script que pueden descargar de aquí.

Ya que lo hemos ejecutado y por lo tanto actualizado nuestra base de datos, haremos lo siguiente, entraremos al archivo de modelo que ya hemos creado con anterioridad, y si no tienen el archivo de modelo pueden crear el modelo a partir de la base de datos, si no saben como hacer esto en la entrada anterior a esta explico paso a paso como hacerlo.

Bueno ya que tenemos nuestra base de datos con alguna información que para probar deben de generar, vamos a escribir el código del Controller.

Vamos a agregar la siguiente función:

   1:  public ActionResult TrabajandoConComboBox()

   2:              return PartialView();

   3:          }

Note que yo estoy usando una vista parcial, pero funciona también con una vista normal. ya que tenemos esta función vamos a dar clic derecho sobre la función y vamos a generar la vista en la cual agregaremos la funcionalidad de los DropDownList, ya que generamos la vista vamos a regresar a esta misma función para agregar la carga inicial de nuestro primer DropDownList, aquí haremos la extracción de las empresas y la pondremos en la ViewBag de nuestra vista, la función debe de quedar de la siguiente manera:

   1:  public ActionResult TrabajandoConComboBox()

   2:  {

   3:     Models.TutorialMVCEntities Context = new Models.TutorialMVCEntities();

   4:     var _Empresas = Context.Empresas.Select(x => new  SelectListItem{  Text = x.Nombre, Value = x.Nombre}).ToList();

   5:     ViewBag.Empresas = _Empresas;

   6:     return PartialView();

   7:  }

como podemos percatarnos estamos haciendo la extracción de la información de las empresas y con ello creamos una lista del objeto SelectListItem el cual se agregaran como las opciones de nuestro primer DropDownList el cual contendrá las empresas.

Ahora vamos a agregar esta primera funcionalidad a nuestra vista, antes de iniciar con la vista note en el código anterior que se agrega al ViewBag una variable llamada Empresas la cual es la que contiene las opciones de nuestro DropDownList, bueno, pasamos a nuestra vista y agregaremos la siguiente línea de código:

   1:  <p>

   2:     <a>Empresas: </a>

   3:      @Html.DropDownList("Empresas","")

   4:  </p>

y si quieren pueden ejecutarlo, esto les dará como resultado un DropDownList con la información de la empresas que hayan dado de alta en su base de datos.

Ya que hemos visto que funciona, vamos a lo mas interesante, vamos a obtener las sucursales que le pertenecen a la empresa que seleccionamos. vamos a regresar a nuestro controlador y agregaremos la siguiente función:

   1:  public JsonResult ObtieneSucursales(string Empresa)

   2:  {

   3:    Models.TutorialMVCEntities Context = new Models.TutorialMVCEntities();

   4:    var _Sucursales = Context.Sucursales

   5:                     .Where(x=> x.Empresas.Nombre==Empresa)

   6:                     .Select(x => new { Id = x.Id, Nombre = x.Nombre });

   7:    return Json(_Sucursales, JsonRequestBehavior.AllowGet);

   8:  }

esta función note que devuelve los valores en JSON debido a que la actualización la realizaremos mediante javascript en un Select de HTML. aquí vemos como filtramos las sucursales de acuerdo a la empresa que se recibió como parámetro.

ahora vamos a regresar a la vista y agregamos el siguiente código debajo de el DropDownList:

   1:  <p>

   2:    <a>Sucursales: </a>

   3:    <select id="Sucursales" />

   4:  </p>

y en la parte superior agregue el siguiente script:

   1:  <script>

   2:      $(document).ready(function () {

3:

   4:          $("#Empresas").change(function () {

   5:              $.ajax({

   6:                  type: 'POST',

   7:                  url: '/Home/ObtieneSucursales?Empresa=' + $("#Empresas").val(),

   8:                  dataType: 'json',

   9:                  success: function (data) {

  10:                      var options = '<option value=""/>';

  11:                      for (var i = 0; i < data.length; i++) {

  12:                          options += '<option value="' + data[i].Id + '">' + data[i].Nombre + '</option>';

  13:                      }

  14:                      $("#Sucursales").html(options);

  15:                  },

  16:                  error: function (xhr, ajaxOptions, error) {

  17:                      alert(xhr.status);

  18:                      alert('Error: ' + xhr.responseText);

  19:                  }

  20:              });

  21:          });

  22:      });

  23:  </script>

y listo aquí ejecuten su proyecto y al momento de que seleccione un registro en el DropDownList de empresas inmediatamente se realizara la carga de opciones en el DropDownList de Sucursales.

Pues bueno amigos espero que este pequeñisimo tutorial sea de utilidad para ustedes.

Como: Mostrar datos con ASP.NET MVC 4 y Entity Framework

2013-10-10T13:07:00.001-07:00

Saludos amigos, en esta ocasión les traigo un tema con el que seguramente muchos de ustedes se están rompiendo la cabeza o se la piensan romper, y esto es el cómo mostrar información en un sitio web con la utilización de Entity Framework y ASP.Net MVC. Bueno, para poder lograr esto primeramente voy a hablar un poco de los elementos que vamos a utilizar para la prueba. En el mercado existen muchos controles y plugins de diversos fabricantes para el objetivo de mostrar datos tabulares desde un origen de datos, y para nosotros son sumamente necesarios, por lo que en este pequeño tutorial voy a utilizar un plugin que me pareció muy útil y espero que para ustedes también, el plugin se llama jQuery Grid Plugin y lo pueden ver en acción con todas sus funcionalidades dentro de su página http://paramquery.com/grid, sin embargo, aquí solo vamos a usar la parte más básica de este que es la de mostrar información.
En este tutorial también vamos a usar ASP.Net MVC 4 por lo que se requieren conocimientos mínimos de esta plataforma, en caso de que no sea así, pueden seguir el tutorial, pero, posiblemente les generen algunas dudas las cuales no se resolverán en este tutorial, sin embargo, pueden comentarlas y con gusto las resolveremos poco a poco. También necesitamos tener conocimientos previos de SQL y LinQ. Ya sin mas preámbulo entremos en el tema que nos atañe, como hacer una página web que nos muestre la información de la base de datos en un grid con el patrón MVC y jQuery.
Lo primero que vamos a hacer es crear un proyecto de tipo ASP.NET MVC 4 Web Application (para este ejemplo estoy usando la versión 2010 de Visual Studio)

Cuando les solicite la configuración de su proyecto seleccionen el Basic y View engine RAZOR ya que es la configuración con la que realizaremos el tutorial.

Ya que tengamos creado nuestro proyecto debemos de agregar las librerias de jQuery y jQueryUI las cuales las pueden descargar de aqui o en todo caso usen la instalación de estas a traves de NuGet, sin embargo, si estan pensando en que su pagina se tiene que ver en IE7 ó IE8 entonces les recomiendo que las agreguen manualmente ya que pueden tener problemas con el uso de jQuery, ya que hemos agregado las librerias de jQuery a nuestro proyecto debemos de agregar nuestro plugin para su posterior uso. Lo primero que hay que hacer es descargarlo de su sitio (descárgalo de aquí), ya que lo hemos descargado lo que debemos de hacer es agregar los archivos pqgrid.dev.js y pqgrid.min.js a la carpeta de Scripts y de la misma manera en la carpeta Content agregar pqgrid.dev.css y pqgrid.min.css al igual que las imagenes para el grid, les debe de quedar así.

Bueno, ya que tenemos listo nuestro proyecto, lo primero que debemos de crear es el modelo de entidades el cual es con el que realizaremos la conexión a nuestro origen de información y por lo consiguiente la extracción de la información.
Para este caso lo que vamos a hacer es generar el modelo a partir de una base de datos de la cual queremos mostrar la información, para este tutorial utilizaremos SQL 2008, (aquí pueden descargar un script para la generación de la Base de Datos que utilizare en el ejemplo) para esto vamos a dar clic derecho sobre la carpeta de Models y vamos a agregar un nuevo item, ahi vamos a seleccionar la en el arbol izq Data y posteriormente ADO.NET Entity Data Model el cual llamaremos TutorialModel y lo agregamos al proyecto.

nos preguntara si lo genera vacío o desde la base de datos, nosotros seleccionaremos que lo genere desde la base de datos.

Ahora realice la configuración de su origen de datos.

ya que esta configurada haga clic en siguiente y seleccione en el árbol la entrada de Tables y haga clic en Finalizar.

ya hemos creado nuestro modelo de datos para nuestro sitio, y debe de estar viendo algo así:

ya que tenemos nuestro modelo de datos, entonces, a lo que te truje chencha!!!!, vamos a crear nuestra pagina.
vamos a crear un controlador y una vista correspondiente el controlador lo llamaremos HOME y a la vista Index, en caso de no saber como hacerlo o como funciona, dejen su mensajito y con gusto hago un Tutorial sobre el uso basico de MVC.
Ya que tenemos lista nuestra vista vamos a agregar las referencias a nuestras librerías de jQuery así como al plugin y les debe de quedar mas o menos así:

<script src="../../Scripts/JQuery/jquery-1.10.2.js" type="text/javascript"></script>

<script src="../../Scripts/JQuery/jquery-ui.js" type="text/javascript"></script>

<script src="../../Scripts/Plugins/Grid/pqgrid.dev.js" type="text/javascript"></script>

<script src="../../Scripts/Plugins/Grid/pqgrid.min.js" type="text/javascript"></script>

<link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

<link href="../../Content/Plugins/Grid/pqgrid.dev.css" rel="stylesheet" type="text/css" />

<link href="../../Content/Plugins/Grid/pqgrid.min.css" rel="stylesheet" type="text/css" />

este será todo el código que necesitamos por el momento.

Vamos a hacer el método de extracción de la información, para esto vamos a ir a nuestro Controlador Home y crearemos el siguiente método.

public JsonResult ObtieneClientes() 
        {
            Models.TutorialMVCEntities Context = new Models.TutorialMVCEntities();
            var _Clientes = Context.Clientes.Select(x => new {Llave = x.ClienteId, Nombre = x.Nombre, ApPaterno = x.apPaterno, ApMaterno = x.apMaterno });
            return Json(_Clientes, JsonRequestBehavior.AllowGet);
        }

esto lo que hace es la extracción desde nuestro modelo a través de una consulta con Linq de la información y la enviamos a la vista formateada como JSON, ahora vamos a crear la llamada y obtención de esta información dentro de la vista con el siguiente código.

<script>
    $(document).ready(function () {
        $.ajax({
            type: 'POST',
            url: '/Home/ObtieneClientes',
            dataType: 'json',
            success: function (data) {
                /*GRID*/
                obj = { width: 700, height: 400, title: "Información de Clientes", flexHeight: true };
                //Vamos a definir el modelo de columnas para nuestro Grid
                obj.colModel = [{ title: "Id", width: 100, dataType: "integer", dataIndx: "Llave" },
                                                  { title: "Nombre del Cliente", width: 200, dataType: "string", dataIndx: "Nombre" },
                                                  { title: "Ap. Paterno", width: 200, dataType: "string", dataIndx: "ApPaterno" },
                                                  { title: "Ap. Materno", width: 200, dataType: "string", dataIndx: "ApMaterno"}];
                obj.dataModel = {
                    data: data,
                    location: "local",
                    sorting: "local",
                    paging: "local",
                    curPage: 1,
                    rPP: 20,
                    sortIndx: "Llave",
                    sortDir: "up",
                    rPPOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000]
                };
                /*GRID*/
            },
            error: function (xhr, ajaxOptions, error) {
                alert(xhr.status);
                alert('Error: ' + xhr.responseText);
            },
            complete: function () { var $grid = $("#Datos").pqGrid(obj); }
        });
    });
</script>

y con esto terminamos ahora a ver el resultado.

y bueno con esto finalizo esta entrada esperando que les haya sido de utilidad.

2013-10-10T08:24:00.000-07:00

Prueba

Tamaño de Tablas dentro de una Base de Datos de SQL

2009-12-25T07:01:00.001-08:00

Saludos!!!!!!

Cuantas veces no nos hemos encontrado con el dilema de que necesitamos saber cuanto espacio esta ocupando nuestras tablas dentro de la base de datos de SQL, esto normalmente con el fin de realizar un informe para dar cuentas de la información que se esta cargando ó quizá para realizar un estimado de crecimiento de la base de datos, o yo que se, para algo ….. así que por estas y muchas cosas mas aquí les dejo una funcioncita no documentada de SQL que ejecutándolo en un Analizador de Consultas nos podrá dar la información que requerimos, espero que les ayude a que les sea mas leve.

sp_MSForEachtable 'sp_spaceused ''?'''

o También pueden ejecutar esta otra a ver cual les sirve mas…

SELECT SI.[rows] as 'Filas', SO.[Name] as Tabla, SI.[name] as 'Index', SFG.[groupname] as 'Filegroup'
FROM sysobjects as SO
JOIN sysindexes as SI ON SO.[Id] = SI.[id]
JOIN sysfilegroups as SFG ON SI.[GroupId] = SFG.GroupId
ORDER BY si.[rows] DESC, SO.[Name] , SI.[name], SFG.[GroupName]

No dudes en preguntar…..

2009-12-18T13:31:00.001-08:00

Siempre que nos encontramos en la escuela o en algún lugar tomando un curso o yo que se en cualquier lugar, siempre nos da pena preguntar debido al “que dirán si pregunto esa tontería….”, sin embargo creo que mucho del aprendizaje que se obtiene es preguntando por lo que me gustaría que si tienen alguna duda con respecto a SQL; VB.NET, C#, WPF, no duden en preguntar.