Animaciones a un input con JQuery.UI

Un pequeño ejemplo que nos permite agregarle una animación a un input cuando se ingresa un valor incorrecto.

Usamos 2 librerias de JQuery:

    <script src="jquery-1.10.2.js"></script>
    <script src="jquery-ui-1.11.1.js"></script>

La función Javascript va a utilizar Ajax para ir al servidor para validar el valor:

<script>
function RecalculoAjax(val) {

if ($.isNumeric(val.value)) {
$.ajax({
type: "POST",
url: "WebForm1.aspx/Validacion",
data: "{val: '" + val.value + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",

success: function (datos) {
var htmlString = datos.d;
if (datos.d != 'OK') {
$(val).effect("shake"); //hace vibrar el input
}

$('#lblresultado').text(htmlString);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
var err = eval("(" + XMLHttpRequest.responseText + ")");
alert('Ha ocurrido un error interno: ' + err.Message);
}
});         // ajax
} //if
else { $('#lblresultado').text("Ingrese un número"); }

}
</script>

En ese mismo código se ve como utilizamos de manera muy sencilla la animación:

if (datos.d != 'OK') {
$(val).effect("shake"); //hace vibrar el input
}

Y le agregamos el evento al textbox:

<asp:TextBox ID="TextBox1" runat="server" onblur="javascript:RecalculoAjax(this)" Width="190px"></asp:TextBox>

El ejemplo se muestra en este gif:

LINK:
GoogleDrive

PASSWORD:
https://trytocatch.wordpress.com/

Saludos.

Usando Grid.MVC en VS2012

En una entrada dedicada a bootstrap hablé muy por arriba de este popular paquete. En esta oportunidad quiero dedicarle un post entero para comentar su funcionamiento y la manera que creo mas optima para usarlo. Pueden visitar el proyecto original.

Para descargarlo a nuestro proyecto lo buscamos en el MUG

foto1

foto3

Estilo y diseño

Por defecto vamos a utilizar el css que nos sugiere la misma librería


<link href="@Url.Content('~/Content/bootstrap.min.css')"
               rel="stylesheet" type="text/css" />

Bindeo simple

Y nos metemos de lleno en el bindeo. Es realmente muy sencillo y rápido. En mi proyecto, para no hacerlo mas complicado, vamos a generar una Lista de la clase Cliente (List<Cliente>), la llenamos en el Controller y se la enviamos al View.

 public class TestController : Controller
    {
        //Genero una lista para bindearla al Grid
        private readonly List&lt;Cliente&gt; clients = new List&lt;Cliente&gt;()
        {
            new Cliente { Id = 1, Nombre = &quot;Julio Avellaneda&quot;, Email = &quot;julito_gtu@hotmail.com&quot; },
            new Cliente { Id = 2, Nombre = &quot;Juan Torres&quot;, Email = &quot;jtorres@hotmail.com&quot; },
            new Cliente { Id = 3, Nombre = &quot;Oscar Camacho&quot;, Email = &quot;oscar@hotmail.com&quot; },
            new Cliente { Id = 4, Nombre = &quot;Gina Urrego&quot;, Email = &quot;ginna@hotmail.com&quot; },
            new Cliente { Id = 5, Nombre = &quot;Nathalia Ramirez&quot;, Email = &quot;natha@hotmail.com&quot; },
            new Cliente { Id = 6, Nombre = &quot;Raul Rodriguez&quot;, Email = &quot;rodriguez.raul@hotmail.com&quot; },
            new Cliente { Id = 7, Nombre = &quot;Johana Espitia&quot;, Email = &quot;johana_espitia@hotmail.com&quot; }
         };

        public ActionResult TestGridView()
        {
            //Envio la lista al cliente
            return View(clients);
        }

    }

y en primera instancia el View es lo mas simple posible, para luego hacerlo lo mas flexible que podamos.

   <div style="width:700px;">
        @Html.Grid(Model).Columns(columns =>
                    {
                        //columns.Add().RenderValueAs();

                        //columna 1
                        columns.Add(c => c.Id, true).Titled("Cliente ID");

                        //columna 2
                        columns.Add(c => c.Nombre).Titled("Name")
                            .Sanitized(false)
                            .Encoded(false);

                        //columna 3
                        columns.Add(c => c.Email).Titled("Email");
                    }).WithPaging(3).Sortable(true)
    </div>

foto4

 

Propiedades importantes

  • La propiedad WithPaging es la que me permite indicarle cuantas filas puede tener.
  • La propiedad Titled que me permite darle un nombre a la columna.
  • La propiedad para generar Columnas ocultas que me permite hacerla invisible con el “True”:
     columns.Add(c => c.Id, true).Titled("Cliente ID");
    
  • La propiedad sorteable para realizar ordenamientos ascendentes o descendentes.
    columns.Add(c => c.Nombre).Titled("Name").Sortable(true);
    
    //o si quiero especificar el orden
    columns.Add(c => c.Nombre).Titled("Name").Sortable(true).SortInitialDirection(GridSortDirection.Descending);
    

La propiedad RenderValueAs

En esta propiedad vamos a detallarla un poco mas porque nos permite realizar acciones muy amplias.

Supongamos que yo quiero poner un link en mi grilla que me permita realizar alguna acción( ir a MiController y ejecutar mi método “ActionResultfunction”, entonces puedo usar esta propiedad para renderearlo de la siguiente manera, en la columna del nombre:


columns.Add()
   .Encoded(false)
   .Sanitized(false)
   .RenderValueAs(o => Html.ActionLink(((string)"Eliminar"),
   "EliminarGrid",  //Action Result
   "Persona",  // Controller
   new { id = (int)o.Id }, //Parametros
   null //attributes...nulo
   ).ToHtmlString());

La grilla nos quedará formada de la siguiente manera con un link que irá hacia MiController y el actionResult ActionResultfunction

foto6

Ahora supongamos que quiero enviarle parámetros:

Y nuestro PersonaController nos queda de una manera muy simple:

    public class PersonaController : Controller
    {
 public ActionResult EliminarGrid(int id)
        {
            List<Cliente> clients = (List<Cliente>)Session["Lista"];

            foreach (Cliente element in clients)
            {
                if (id == element.Id)
                {
                    clients.Remove(element);
                    break;
                }
            }

            Session["Lista"] = clients;
            return RedirectToAction("TestGridView", "Test");
        }      

    }

Agregar un nuevo Row
Si uno agrega una grilla, una de las cosas mas básicas es poder agregar nuevas filas a la misma.

     <table id="footer">
                  <tr class="group-footer">
                    <td colspan="2">
                        @if (Model.Count()==0)
                        {
                          <span class="label label-alert">@Html.ActionLink(((string)"Nueva"),
                                                                "Nueva",  //Action Result
                                                                "Persona",  // Controller
                                                                null, //Parametros
                                                                null //attributes...nulo
                                                                )                         </span>
                        }else{
                          <span class="label label-info">@Html.ActionLink(((string)"Agregar"),
                                                                    "Nueva",  //Action Result
                                                                    "Persona",  // Controller, se agrega sin usar la palabra "Controller"
                                                                    null, //Parametros
                                                                    null //attributes...nulo
                                                                    )
                          </span>
                        }
                    </td>
                </tr>
        </table>

De esta manera agregamos el link para poder ingresar nuevos valores a la grilla.
Esto se va a administrar desde PersonaController y se visualizará en la view Persona/Nueva.

@{
    ViewBag.Title = "Nueva Persona";
}
<h2>Nueva</h2>
@using (Html.BeginForm("Alta","Persona"))
{
<table style="width: 100%;">
    <tr>
        <td>Nombre</td>
        <td>@Html.TextBox("txtNombre")</td>
    </tr>
</table>
<br />
    <input id="btnGuardar" type="submit" value="Guardar" />
    /*vuelve al menu anterior*/
<input type="button" value="Volver"
            onclick="@("window.location.href='" + @Url.Action("TestGridView", "Test") + "'");" />
}

Los 2 métodos del Controller permiten agregar y eliminar un valor de la grilla y siempre retornan a la misma view: TestGridView:

        [HttpPost]
        public ActionResult Alta(string txtID, string txtNombre)
        {
            List<Cliente> clients = (List<Cliente>)Session["Lista"];
            clients.Add(new Cliente { Id = clients.Count + 1, Nombre = txtNombre, Email = "" });

            Session["Lista"] = clients;
            return RedirectToAction("TestGridView", "Test");
        }

        public ActionResult EliminarGrid(int id)
        {
            List<Cliente> clients = (List<Cliente>)Session["Lista"];

            foreach (Cliente element in clients)
            {
                if (id == element.Id)
                {
                    clients.Remove(element);
                    break;
                }
            }

            Session["Lista"] = clients;
            return RedirectToAction("TestGridView", "Test");
        }

Dejo el ejemplo como siempre. Espero que les sirva el ejemplo como una introducción.
Saludos

LINK:
GoogleDrive

PASSWORD:
https://trytocatch.wordpress.com/

Encriptar Querystring en ASP.NET

Hoy quiero publicar un pequeño proyecto que permita agregar de manera transparente en sus sitios una forma de encriptar el contenido del QueryString en aplicaciones Web con ASP.NET. Vamos a utilizar el Visual Studio 2012 y vamos a desarrollar el código en C#. En esta primera publicación quiero mostrarlo en sin utilizar el paradigma de MVC, pero también quiero aplicar la misma idea para poder encriptar con MVC.

Normalmente nuestras aplicaciones tendrían este QueryString:
foto 1

Sigue leyendo

Popup y retorno de valores con MVC 4 + bootstrap

En esta ocasión vamos a mostrar un pequeño ejemplo de cómo abrir un popup con MVC 4 y cómo hacer para generar un valor (o varios) de retorno a la página principal.

Voy a generar una grilla con GRIDMVC y todo el diseño y manejo del popup lo hago con bootstrap 3.0 +. Para descargarlo en el sitio tenemos que hacer esto.

Sigue leyendo

Función Row_number con un valor de inicio

En SQL Server existe una función denominada ROW_NUMBER() que es muy sencilla de utilizar y nos devuelve de manera secuencial el número de la fila que toda la Query, comenzando por 1.

El ejemplo mas sencillo es (yo siempre utilizo mis tablas con la columna ID):

SELECT	 ROW_NUMBER() OVER(ORDER BY ID DESC) ID
from [TU_TABLA]

Acá podemos ver el resultado que nos devolvería esta queryimg1

Entonces si queremos hacer una secuencialidad de registros entre 2 queries, solamente tenemos que hacer lo siguiente:

declare @val int

select @val=MAX(t.id) 
from ( 
SELECT ROW_NUMBER() OVER(ORDER BY ID DESC) ID 
 from [TU_TABLA_1]) t

select @val+ROW_NUMBER() OVER(ORDER BY ID DESC) ID2 
from [TU_TABLA_2]

La segunda query comienza a contar sumando la variable que le ingreso. Muy simple y rápido.
Saludos.

Año nuevo, Jquery Nueva (?)

Las grandes cosas están construidas por pequeños elementos que hacen nuestra vida feliz y placentera. En este pequeño post voy a ir enumerando pequeños detalles de JQUERY que nos van a permitir solucionar problemas en nuestra interface ASP.NET con transparencia y sencillez.

Ejemplo 1: Cambio de valores de un input/textbox/label

En la cabecera tomamos siempre el archivo JS del site de JQUERY y lo insertamos en el


    
 Continue reading "Año nuevo, Jquery Nueva (?)"