El resultado sera algo como esto:
Vista de datos
Agregar nuevo dato
Modificar Dato
Lo primero que debemos hacer es descargar JQuery UI (en este ejemplo utilizaremos la versión 1.8.4)
Este ejemplo esta armado sobre una tabla de provincias
llamada Provincias con los siguientes campos:
- ProvinciaId
- Nombre
En el HEAD del archivo _SiteLayout.cshtml debemos agregar las siguientes lineas para referenciar a JQuery
<link type="text/css" href="@Href("~/Styles/jquery-ui-1.8.4.custom.css")" rel="stylesheet" />
<link type="text/css" href="@Href("~/Styles/Site.css")" rel="stylesheet" />
<script type="text/javascript" src="@Href("~/Scripts/jquery-1.4.2.min.js")"></script>
<script type="text/javascript" src="@Href("~/Scripts/jquery-ui-1.8.4.custom.min.js")"></script>
Para armar el ABM utilizaremos:
- Una página “maestra” de provincias, que incluirá una vista parcial (partial view) con la grilla de las provincias y un botón para crear un nuevo elemento.
- La vista parcial: es la encargada de leer la tabla de provincias y mostrarla. Además mostrara los links de editar y eliminar.
- Métodos de tratamiento de datos. Son tres páginas CSHTML que solo contienen código para procesar diferentes solicitudes:
- Agregar nievo elemento.
- Modificar un elemento.
- Eliminar un elemento.
Archivos:
Método de alta de provincias AgregarProvincia.cshtml
@{
bool bOk = true;
string sError = "";
var url = Request.Url.ToString();
if (url.Contains("?Nombre"))
{
var db = Database.Open("database");
string nombre = url.Substring(url.IndexOf('?') + 8);
if (nombre != "") {
var provincia = db.QuerySingle("SELECT * FROM Provincias WHERE Nombre like @0", nombre);
if (provincia == null) {
db.Execute("INSERT INTO Provincias (Nombre) VALUES (@0)", nombre);
}
else {
bOk = false;
//sError = "La provincia ya existe.";
sError = "1";
}
}
else {
bOk = false;
sError = "2";
}
}
else {
bOk = false;
sError = "2";
}
}
@if (bOk)
{
@:<script languaje="JavaScript">location.href='/Administracion/Provincias/ProvinciasJQ.cshtml';</script>
} else if (sError == "1"){
@:<script languaje="JavaScript">alert("Error: La provincia ya existe." );location.href='/Administracion/Provincias/ProvinciasJQ.cshtml';</script>
} else if (sError == "2") {
@:<script languaje="JavaScript">alert("Error: Debe ingresar un nombre para la provincia." );location.href='/Administracion/Provincias/ProvinciasJQ.cshtml';</script>
}
Método de edición de provincia EditarProvincia.cshtml
@{
bool bOk = true;
string sError = "";
var url = Request.Url.ToString();
if (url.Contains("?Nombre"))
{
var db = Database.Open("database");
string nombre = Request.QueryString["Nombre"];
string id = Request.QueryString["Id"];
//nombre = nombre.Substring(0, url.IndexOf('&'));
if (nombre != "" && id != "") {
var provincia = db.QuerySingle("SELECT * FROM Provincias WHERE Nombre like @0", nombre);
if (provincia == null) {
db.Execute("UPDATE Provincias SET Nombre = (@0) WHERE ProvinciaId = (@1)", nombre, id);
}
else {
bOk = false;
//sError = "La provincia ya existe.";
sError = "1";
}
}
else {
bOk = false;
sError = "2";
}
}
else {
bOk = false;
sError = "2";
}
}
@if (bOk)
{
@:<script languaje="JavaScript">location.href='/Administracion/Provincias/ProvinciasJQ.cshtml';</script>
} else if (sError == "1"){
@:<script languaje="JavaScript">alert("Error: La provincia ya existe." );location.href='/Administracion/Provincias/ProvinciasJQ.cshtml';</script>
} else if (sError == "2") {
@:<script languaje="JavaScript">alert("Error: Debe ingresar un nombre para la provincia." );location.href='/Administracion/Provincias/ProvinciasJQ.cshtml';</script>
} Obtiene por parámetro de la url el nombre y el id de la provincia a modificar y realiza reglas de negocios antes de hacerlo. Si da algún error muestra en alert y vuelve a la página que lo llamo.
Método de eliminación de provincia EliminarProvincia.cshtml
@{
// Valida si se tiene que eliminar un registro
var url = Request.Url.ToString();
if (url.Contains("?Eliminar"))
{
var db = Database.Open("database");
string id = url.Substring(url.IndexOf('?') + 10);
db.Execute("DELETE FROM Provincias WHERE ProvinciaId = @0", id);
}
}
<script languaje="JavaScript">location.href='/Administracion/Provincias/ProvinciasJQ.cshtml';</script>Obtiene por parámetro de la url el id de la provincia a eliminar y si existe lo elimina. Luego vuelve a la página que lo llamo.
Partial View ProvinciasGrid.cshtml
@{
var db = Database.Open("database");
var selectQueryString = "SELECT * FROM Provincias";
var data = db.Query(selectQueryString);
var grid = new WebGrid(source: data,
defaultSort: "Nombre",
rowsPerPage: 10);
}
<fieldset>
<legend>Listado de Provincias</legend>
<div id="grid">
@grid.GetHtml(tableStyle: "ui-widget ui-widget-content",
headerStyle : "ui-widget-header",
columns: grid.Columns(
grid.Column(header: "Accionnes",
format:
@<text><a href="../../Methods/Provincias/EliminarProvincia.cshtml?Eliminar=@item.ProvinciaId">(Eliminar)</a>
<a href="#" onclick="mostrarEdicion('@item.ProvinciaId', '@item.Nombre')">(Editar)</a></text>),
grid.Column("ProvinciaId", "Id"),
grid.Column("Nombre", "Provincia")
)
)
</div>
</fieldset>Básicamente lee todos los registros de la tabla de provincias y los muestra en una grilla. Además agrega dos links. Uno para eliminar, que llama al método EliminarProvincia con un parámetro que es el id de la provincia a eliminar. El otro link es el de editar y llama a una función de javascript que estará en la página principal de las provincias.
Página principal de provincias Provincias.cshtml
@{
// Set the layout page and page title
Layout = "~/_SiteLayout.cshtml";
Page.Title = "Tabla de Provincias";
}
<script type="text/javascript">
$(function() {
$('#dialog-form').dialog({
autoOpen : false,
modal: true,
height: 160,
width: 475,
buttons: {
'Agregar' : function(){
$.ajax({
type: "POST",
url: $("#add-book-form").attr('action'),
data: $("#add-book-form").serialize(),
dataType: "text/plain",
success: function(response) {
$('#dialog-form').dialog('close');
location.href = "../../Methods/Provincias/AgregarProvincia.cshtml?Nombre=" + $("#nombre").val();
},
error: function(response) {
alert(response);
$('#dialog-form').dialog('close');
}
});
},
Cancelar: function() {
$('#dialog-form').dialog('close');
}
}
});
$('#dialog-form-edit').dialog({
autoOpen : false,
modal: true,
height: 200,
width: 475,
buttons: {
'Aceptar' : function(){
$.ajax({
type: "POST",
url: $("#add-book-form").attr('action'),
data: $("#add-book-form").serialize(),
dataType: "text/plain",
success: function(response) {
$('#dialog-form').dialog('close');
location.href = "../../Methods/Provincias/EditarProvincia.cshtml?Nombre=" + $("#nombreEdit").val() + "&Id=" + $("#IdProv").val();
},
error: function(response) {
alert(response);
$('#dialog-form-edit').dialog('close');
}
});
},
Cancelar: function() {
$('#dialog-form-edit').dialog('close');
}
}
});
$('#nueva-provincia')
.button().click(function() {
$('#dialog-form').dialog('open');
});
});
function mostrarEdicion(id, descripcion){
$('#IdProv').val(id);
$('#nombreEdit').val(descripcion);
$('#dialog-form-edit').dialog('open');
}
</script>
<div id="grid" class="ui-widget">
@RenderPage("~/Partials/ProvinciasGrid.cshtml")
</div>
<div id="dialog-form" title="Agregar nueva provincia">
<div class="row">
<span class="label"><label for="nombre">Nombre:</label></span>
<input type="text" name="nombre" id="nombre" size="40" />
</div>
</div>
<div id="dialog-form-edit" title="Editar provincia">
<div class="row">
<span class="label"><label for="nombre">ID:</label></span>
<input type="text" disabled="disabled" name="IdProv" id="IdProv" size="5" />
<br/>
<span class="label"><label for="nombre">Nombre:</label></span>
<input type="text" name="nombreEdit" id="nombreEdit" size="40" />
</div>
</div>
<p><button id="nueva-provincia">Agregar nueva provincia</button></p> Esta página cuenta con dos div que serán las pantallas de creación y modificación de datos: dialog form y dialog form edit. Mediante JQuery se arma las respectivas pantallas y las acciones a realizar en cada una. Cada pantalla llamara al método que le corresponda, mencionado anteriormente.
Espero que sea de ayuda. Cualquier duda pueden comentar y con gusto, si es que puedo, se las aclarare.
