JQueryMobile & WebMatrix– Formularios para Ingreso de Datos
Hola, en este post vamos a continuar trabajando sobre el ejemplo de JQueryMobile, para revisar más sobre JQueryMobile, puedes ver:
http://geeks.ms/blogs/gperez/archive/2010/10/18/jquery-mobile-1-0-alpha-release.aspx
Y el tutorial en donde veníamos haciendo el ejemplo:
http://geeks.ms/blogs/gperez/archive/2010/10/22/tutorial-creando-una-app-con-jquery-mobile-webmatrix-y-razor.aspx
Ahora vamos a realizar la inserción de datos mediante formularios bajo JM. El Resultado final que buscamos en la aplicación es el siguiente:
JQueryMobile nos ofrece en esta versión beta un conjunto de “controles” o mejor dicho, “estilos automáticos de controles” , podemos ver una descripción de estos en la siguiente página:
http://jquerymobile.com/demos/1.0a1/#docs/forms/index.html
En nuestro caso los elementos que utilizaremos son:
Tal como dice la documentación hay controles, como el Slider que en realidad es un elemento Select, lo mismo que en la selección de la facultad.
Esta página de ingreso la vamos a llamar de la página de carreras agregando un botón en el footer, otra de las características de JQueryMobile, como vemos en la siguiente figura:
Esto se logra modificando el Footer:
<div data-role="footer" class="ui-bar" data-theme="b" >
<h4>www.chalalo.cl </h4>
<a href="AddCarrera.cshtml" data-role="button" data-icon="plus">Agregar</a>
</div>
Ahora veamos el código de la página del Ingreso de Carreras:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>www.chalalo.cl</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<link rel="apple-touch-icon" href="img/condor.jpg" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-theme="b">
<h1>Ingresar</h1>
</div>
<div data-role="content" >
<form id="formulario" method="POST" action="validar.cshtml">
<div data-role="fieldcontain">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre" value="" />
<select name="selfacultad" id="selfacultad">
<option value="0">Seleccione Facultad</option>
@{ var mibase =Database.Open("DemoBase");
var facultades = mibase.Query("SELECT Id,Nombre FROM
Facultades");
}
@foreach (var facultad in facultades){
<option value="@facultad.Id">@facultad.Nombre</option>
}
</select>
<label for="semestres"Semestres:</label>
<input type="range" name="semestres"
id="semestres" value="0" min="1" max="8" />
<label for="descripcion">Descripcion:</label>
<textarea cols="40" rows="8"
name="descripcion" id="descripcion"></textarea>
<select name="activacion" id="activacion" data-role="slider">
<option value="0">Inactivo</option>
<option value="1">Activo</option>
</select>
<input type="submit" value="Guardar Carrera" >
</div>
</form>
</div>
<div data-role="footer" class="ui-bar" data-theme="b" >
<h4>www.chalalo.cl </h4>
</div>
</div>
</div>
</body>
</html>
Esta página tiene un formulario que su acción es la página validar.cshtml, en donde vamos a validar los datos y si todo esta bien (con una paupérrima validación), vamos a grabar los datos en la base, mostrando los posibles mensajes:
El código asociado a la página
@{ var mibase =Database.Open("DemoBase");
bool ok=false;
if (IsPost) {
var nombre = Request["nombre"];
var semestres = Request["semestres"];
var descripcion =Request["descripcion"];
var facultad = Request["selfacultad"];
var activacion = Request["activacion"];
if (nombre.IsEmpty()||semestres=="0"||descripcion.IsEmpty()
||facultad=="0"){
ok=false;
} else{
var SqlInsertar = "INSERT INTO carreras (Nombre,
Semestres,Descripcion, IdFacultad,Estado) VALUES (@0, @1,@2,@3,@4)";
mibase.Execute(SqlInsertar, nombre, semestres, descripcion,
facultad,activacion);
ok=true;
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>www.chalalo.cl</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<link rel="apple-touch-icon" href="img/condor.jpg" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="b" >
<div data-role="header" data-theme="b">
<h1>Listado Carreras</h1>
</div>
<div data-role="content" >
@if (ok) {
<h2>Registro Almacenado</h2>
<a href="inicio.cshtml" data-role="button">Aceptar</a>
}else{
<h2>Error</h2>
<h3>Debe ingresar todos los Datos</h3>
<a href="AddCarrera.cshtml" data-role="button">
Volver a Ingresar Carrera
</a>
}
</div>
<div data-role="footer" class="ui-bar" data-theme="b" >
<h4>www.chalalo.cl </h4>
</div>
</div>
</body>
</html>
En este caso, recibimos los parámetros de la página anterior y según el resultado de la validación vamos a mostrar el mensaje de inserción o fallo.
Veamos el video entonces del resultado (pronto subo uno desde un fono).
Descarga la aplicación desde acá:
