Gua de BootStrap para ASP.

NET MVC

Haremos un mantenimiento de la tabla Categoria a travs de stored procedures y LINQ to SQL

Classes.
I.- El modelo de datos de la base ALMACEN es:

Los stored procedures que necesitamos son los siguentes:

USE ALMACEN
GO
/*********************************************************************
*************************/
/* PROCEDIMIENTOS ALMACENADOS NECESARIOS PARA EL MANTENIMIENTO DE
DATOS DE LA TABLA CATEGORIA */
/*********************************************************************
*************************/
CREATE PROCEDURE dbo.PR_LISTAR_CATEGORIA
AS
SELECT * FROM CATEGORIA
GO
CREATE PROCEDURE dbo.PR_BUSCAR_CATEGORIA
@INT_CODIGO INT
AS
SELECT * FROM CATEGORIA
WHERE INTCATEGORIA=@INT_CODIGO
GO
CREATE PROCEDURE dbo.PR_INSERTAR_CATEGORIA
@VC_DESCRIPCION VARCHAR(100)
AS
/* VALIDAMOS QUE NO EXISTAN DOS CATEGORAS CON EL MISMO NOMBRE
*/

IF NOT EXISTS(SELECT * FROM CATEGORIA WHERE

VCDESCRIPCION=@VC_DESCRIPCION)
BEGIN
DECLARE @INT_CODIGO INT
SELECT @INT_CODIGO=ISNULL(MAX(INTCATEGORIA),0) + 1
FROM CATEGORIA
INSERT INTO CATEGORIA(INTCATEGORIA,VCDESCRIPCION)
VALUES(@INT_CODIGO,@VC_DESCRIPCION)
END
GO
CREATE PROCEDURE dbo.PR_ACTUALIZAR_CATEGORIA
@INT_CODIGO INT,
@VC_DESCRIPCION VARCHAR(100)
AS
/* VALIDAMOS QUE NO EXISTAN DOS CATEGORAS CON EL MISMO NOMBRE
*/
IF NOT EXISTS(SELECT * FROM CATEGORIA WHERE
VCDESCRIPCION=@VC_DESCRIPCION)
BEGIN
UPDATE CATEGORIA
SET VCDESCRIPCION=@VC_DESCRIPCION
WHERE INTCATEGORIA=@INT_CODIGO
END
GO
CREATE PROCEDURE dbo.PR_ELIMINAR_CATEGORIA
@INT_CODIGO INT
AS
DELETE CATEGORIA
WHERE INTCATEGORIA=@INT_CODIGO
GO

II.- Creamos nuevo proyecto ASP.NET MVC

III.- Carpeta Models

Clase CategoriaModel.cs
using
using
using
using

System;
System.Collections.Generic;
System.Linq;
System.Web;

namespace DemoBootStrap.Models
{
public class CategoriaModel
{
DataAlmacenDataContext contexto = new DataAlmacenDataContext();
//////////////////////////////////////////////////////////////////
//Mtodo que retorna una lista de instancias de la tabla CATEGORIA
//////////////////////////////////////////////////////////////////
public List<CATEGORIA> ListarCategorias()
{
//Declaramos variable de tipo lista
List<CATEGORIA> lista = new List<CATEGORIA>();
var consulta = contexto.PR_LISTAR_CATEGORIA();
//Recorremos la data recuperado por la consulta
// a travs del stored procedure
foreach (var cat in consulta)
{
//Instanciamos la tabla CATEGORIA
CATEGORIA cate = new CATEGORIA();
cate.INTCATEGORIA = cat.INTCATEGORIA;
cate.VCDESCRIPCION = cat.VCDESCRIPCION;
//Agregamos la instancia de la tabla CATEGORIA a la lista
lista.Add(cate);
}
//Retornamos como resultado la lista
return lista;
}

///////////////////////////////////////////////////////////
//Mtodo que retorna una estructura de tipo tabla CATEGORIA
///////////////////////////////////////////////////////////
public CATEGORIA BuscarCategoria(int intcodigo)
{
//Instanciamos la tabla Categoria
//La idea es llenar cada uno de los campos
//de la tabla CATEGORIA con la ejecucin del stored
PR_BUSCAR_CATEGORIA
CATEGORIA cate = new CATEGORIA();
try
{
var consulta = contexto.PR_BUSCAR_CATEGORIA(intcodigo);
foreach (var cat in consulta)
{
cate.INTCATEGORIA = cat.INTCATEGORIA;
cate.VCDESCRIPCION = cat.VCDESCRIPCION;
}
}
catch (Exception)
{
throw;
}
return cate;
}
///////////////////////////////////////////////////////
//Mtodo que inserta una categora y retorna un mensaje
///////////////////////////////////////////////////////
public string InsertarCategoria(CATEGORIA cat)
{
string strresultado = String.Empty;
try
{
contexto.PR_INSERTAR_CATEGORIA(cat.VCDESCRIPCION);
strresultado = "Excelente";
}
catch (Exception ex)
{
strresultado = ex.Message;
}
return strresultado;
}
/////////////////////////////////////////////////////////
//Mtodo que actualiza una categora y retorna un mensaje
/////////////////////////////////////////////////////////
public string ActualizarCategoria(CATEGORIA cat)
{
string strresultado = String.Empty;
try
{

contexto.PR_ACTUALIZAR_CATEGORIA(cat.INTCATEGORIA,
cat.VCDESCRIPCION);
strresultado = "Excelente";
}
catch (Exception ex)
{
strresultado = ex.Message;
}
return strresultado;
}

/////////////////////////////////////////////////
//Mtodo que elimina una categora dado su cdigo
/////////////////////////////////////////////////
public string EliminarCategoria(int intcodigo)
{
string strresultado = String.Empty;
try
{
contexto.PR_ELIMINAR_CATEGORIA(intcodigo);
strresultado = "Excelente";
}
catch (Exception ex)
{
strresultado = ex.Message;
}
return strresultado;
}
}
}

IV.-Carpeta Controllers
Agregamos controlador vaco llamado CategoriaController

using
using
using
using
using

System;
System.Collections.Generic;
System.Linq;
System.Web;
System.Web.Mvc;

using DemoBootStrap.Models;
namespace DemoBootStrap.Controllers
{
public class CategoriaController : Controller
{
// GET: Categoria
CategoriaModel modelo = new CategoriaModel();
//Mtodo que lista las categoras

public ActionResult Listar()

{
//return View();
return View(modelo.ListarCategorias());
}
//Mtodo que crea la vista para nueva categora
public ActionResult Crear()
{
return View();
}
//Mtodo que graba a la base de datos la categora
[HttpPost]
public ActionResult Crear(CATEGORIA cat)
//public ActionResult Create(FormCollection collection)
{
// TODO: Add insert logic here
if (modelo.InsertarCategoria(cat).Equals("Excelente"))
{
//Si la categora se logra insertar
//refrescamos el listado de datos
return RedirectToAction("Listar");
}
else
{
return RedirectToAction("Crear");
}
}
//Mtodo que trae los datos de una categora
public ActionResult Editar(int id)
{
//cat es una variable que representa a la tabla Categoria
var cat = modelo.BuscarCategoria(id);
return View(cat);
}
//Mtodo que graba a la base de datos las actualizaciones
//de una categora
[HttpPost]
public ActionResult Editar(int id, CATEGORIA cat)
//public ActionResult Edit(int id, FormCollection collection)
{
// TODO: Add update logic here
//Instanciamos la tabla Categoria
CATEGORIA cate = new CATEGORIA();
//Seteamos los nuevos valores de la categora
cate.INTCATEGORIA = id;
cate.VCDESCRIPCION = cat.VCDESCRIPCION;
//Actualizamos la tabla con los nuevos valores de la categora
if (modelo.ActualizarCategoria(cate).Equals("Excelente"))
{
//Si la categora se logra insertar
//refrescamos el listado de datos
return RedirectToAction("Listar");
}

else
{
return RedirectToAction("Edit");
}
}
}
}

V.- Agregamos carpeta Imgenes y pegamos archivos indicados

VI. Carpeta Scripts

Clic derechoAgregarArchivo JavaScript y lo llamamos JsLlamadas.js
$("#btnelnuevo").click(function (eve) {

$("#modal-content").load("/Categoria/Crear");

});
$('.btneditar').click(function (eve) {

$("#modal-content").load("/Categoria/Editar/" + $(this).attr("data-id"));

});

VII.-Archivo _Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Mi aplicacin ASP.NET</title>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" datatoggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Nombre de aplicacin", "Index", "Home", new {
area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">

<li>@Html.ActionLink("Inicio", "Index", "Home")</li>

<li>@Html.ActionLink("Acerca de", "About", "Home")</li>
<li>@Html.ActionLink("Contacto", "Contact", "Home")</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>&copy; @DateTime.Now.Year - Mi aplicacin ASP.NET</p>
</footer>
</div>
@*@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")*@
@RenderSection("scripts", required: false)
</body>
</html>

VIII.- Vistas
Vista Listar.cshtml
@model IEnumerable<DemoBootStrap.Models.CATEGORIA>
@{
ViewBag.Title = "Listar";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">

$(document).ready(function ()
{
$('#btnnuevo').click(function ()
{
$('#modal-content').load("/Categoria/Crear");
});
//$('#btneditar').click(function () {
$('.btneditar1').click(function (eve) {
//var id= $(this).attr("data-id");
//alert(id);
$("#modal-content").load("/Categoria/Editar/" +
$(this).attr("data-id"));

});

});
</script>

10

@*<div align="center">
<img src="~/Imagenes/Mantenimiento.jpg" width="200" height="200" class="imgrounded"/>
<h2>Mantenimiento de categoras</h2>
</div>*@
<div class="modal" id="mimodal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<input type="button" class="close"
data-dismiss="modal" value="&times;" />
<h3>Insert/Update de Categoras</h3>

</div>
<div class="modal-body">
<div id="modal-content">
</div>
@*<p>cuerpo de la ventana modal</p>*@
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default"
data-dismiss="modal" id="btncerrar" value="Cerrar" />

</div>
</div>
</div>
</div>
<div align="center">
<img src="~/Imagenes/Mantenimiento.jpg" width="200" height="200" class="imgrounded" />
<h2>Mantenimiento de categoras</h2>
</div>
<div class="row">
<input type="button" class="btn btn-danger" data-toggle="modal"
data-target="#mimodal" id="btnnuevo" value="Nueva categora" />
<a href="#mimodal" id="btnelnuevo" data-toggle="modal" class="btn btn-primary
btn-lg">New category</a>
</div>

11

@*<p>
@Html.ActionLink("Create New", "Create")
</p>*@
@*<table class="table table-hover">*@
<table class="table table-hover">
<tr>
<th>
@Html.DisplayNameFor(model => model.INTCATEGORIA)
</th>
<th>
@Html.DisplayNameFor(model => model.VCDESCRIPCION)
</th>
<th>Editar registro</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.INTCATEGORIA)
</td>
<td>
@Html.DisplayFor(modelItem => item.VCDESCRIPCION)
</td>
<td>
<button class="btneditar1 btn-primary edit" dataid="@item.INTCATEGORIA"
data-toggle="modal" data-target="#mimodal" >
<i class="glyphicon glyphicon-file"></i>
</button>|
<a href="#mimodal" class="btneditar btn-link btn-info" datatoggle="modal" data-id="@item.INTCATEGORIA"><i class="glyphicon glyphiconpencil"></i></a>@*|*@

@*@Html.ActionLink("Eliminar categoria", "Delete", new { id =

item.INTCATEGORIA })*@
</td>
</tr>
}
</table>
@section Scripts
{
<script src="~/Scripts/JsLlamadas.js"></script>
}

Vista Crear.cshtml
@model DemoBootStrap.Models.CATEGORIA
@*@{
ViewBag.Title = "Crear";
Layout = "~/Views/Shared/_Layout.cshtml";
}*@
@{
Layout = null;

12

}
<h2>Creacin de una categora</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
@*<h4>CATEGORIA</h4>*@
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.VCDESCRIPCION, htmlAttributes: new {
@class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.VCDESCRIPCION, new {
htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.VCDESCRIPCION, "", new
{ @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Grabar" class="btn btn-default"
onclick="return Validar();" />
</div>
</div>
</div>
}
<div>
@Html.ActionLink("Regresar al listado de categoras", "Listar")
</div>
<script type="text/javascript">

function Validar() {
var des = $("#VCDESCRIPCION").val();
if (des == '') {
alert('Indique la descripcin');
$("#str_usuario").focus();
return false;
}

return true;
}
</script>

Vista Editar.cshtml

13

@model DemoBootStrap.Models.CATEGORIA
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
@*<title>Editar</title>*@
</head>
<body>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Editar CATEGORIA</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.INTCATEGORIA)
<div class="form-group">
@Html.LabelFor(model => model.VCDESCRIPCION, htmlAttributes: new
{ @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.VCDESCRIPCION, new {
htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.VCDESCRIPCION, "",
new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Grabar" class="btn btn-default"
onclick="return Validar();" />
</div>
</div>
</div>
}
<div>
@Html.ActionLink("Regresar al listado", "Listar")
</div>
</body>
</html>
<script type="text/javascript">

function Validar() {
var des = $("#VCDESCRIPCION").val();
if (des == '') {
alert('Indique la descripcin');
$("#str_usuario").focus();
return false;

14

return true;
}
</script>

IX.-Ejecucin de la aplicacin

15

X.- Webs de referencia

Ejemplo para Carousel:
http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

Ejemplo de Navigation Bars

http://www.w3schools.com/bootstrap/bootstrap_navbar.asp

Cambiar el Size de una ventana modal BootStrap

http://www.w3schools.com/bootstrap/bootstrap_modal.asp

http://www.w3schools.com/bootstrap/bootstrap_pagination.asp

http://www.cssya.com.ar/bootstrapya/

16