Programacion ASP con c# 1
Colegio Salesiano Don Bosco
Academia Programación
Área y Sub-área: ___________Informatica/Programacion___________________________________________________________
Educador: _Luis Orozco______________________________________________________________________________________
Ciclo Escolar: ____2015_________________
Grado: __5to____________________________________
Secciones: ____A,B,C y D___________________________________
El modelo de programación MVC
Introducción ASPX con CSHARP
MVC es uno de los tres modelos de programación ASP.NET.
MVC es un marco para la creación de aplicaciones web usando un diseño MVC (Modelo Vista
Controlador):
•
•
•
El modelo representa el núcleo de la aplicación (por ejemplo una lista de registros de bases de
datos).
La vista muestra los datos (los registros de base de datos).
El controlador se encarga de la entrada (a los registros de base de datos).
El modelo MVC también proporciona un control total sobre HTML, CSS y JavaScript.
El modelo MVC define web
aplicaciones con 3 capas lógicas:
La capa de negocio (lógica Modelo)
La capa de presentación (Vista lógica)
El control de entrada (lógica Controlador)
El modelo es la parte de la aplicación que se encarga de la lógica para los datos de aplicación.
A menudo, los objetos del modelo recuperar datos (y almacenar datos) de una base de datos.
La vista es las partes de la aplicación que se encarga de la visualización de los datos.
Muy a menudo las vistas se crean a partir de los datos del modelo.
El controlador es la parte de la aplicación que se encarga de la interacción del usuario.
Normalmente los controladores leer datos de una entrada de usuario de vista, el control, y enviar los
datos de entrada al modelo.
Colegio Salesiano Don Bosco
Academia Programación
Ejercicio Creación de un proyecto con ASP MVC
Paso 1
Iremos a ARCHIVO/NUEVO/PROYECTO
Seleccionaremos APLICACIÓN WEB DE ASP.NET MVC 4
Seleccionaremos Aplicación De Internet, luego aceptar.
Colegio Salesiano Don Bosco
Academia Programación
Pasó 2
Empezaremos a crear el proyecto de ASP, con un estilo CSS, para esto iremos a la parte izquierda y
escribiremos LAYOUT
El archivo _Layout.cshtml representan el diseño de cada página en la aplicación. Se encuentra en la
carpeta compartida dentro de la carpeta Vistas.
Abra el archivo y cambie el contenido con esto:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> @ViewBag.Title </title>
<link href=" @Url.Content("~/Content/Site.css") " rel="stylesheet" type="text/css" />
<script src=" @Url.Content("~/Scripts/jquery-1.5.1.min.js") "></script>
<script src=" @Url.Content("~/Scripts/modernizr-1.7.min.js") "></script>
</head>
<body>
<ul id="menu">
<li> @Html.ActionLink("Home", "Index", "Home") </li>
<li> @Html.ActionLink("Movies", "Index", "Movies") </li>
<li> @Html.ActionLink("About", "About", "Home") </li>
</ul>
<section id="main">
@RenderBody()
<p>Copyright Profesores De Informatica Don Bosco. All Rights Reserved.</p>
</section>
</body>
</html>
En el código anterior, ayudantes HTML se utilizan para modificar la salida HTML:
@ Url.Content () - contenido de URL se insertará aquí.
@ Html.ActionLink () - se insertará enlace HTML aquí.
Usted aprenderá más sobre ayudantes HTML en un capítulo posterior de este tutorial.
Colegio Salesiano Don Bosco
Academia Programación
En el código anterior, el código marcado en rojo son C # usando Razor marcado.
@ ViewBag.Title - se inserta el título de la página aquí.
RenderBody ()
Pasó 3
Añadir estilos
La hoja de estilo para la aplicación se llama Site.css. Se encuentra en la carpeta de contenido.
Abra el archivo Site.css y cambie el contenido con esto:
Y añadiremos el siguiente código CSS
body
{
font: "Trebuchet MS", Verdana, sans-serif;
background-color: #5c87b2;
color: #696969;
}
h1
{
border-bottom: 3px solid #cc9900;
font: Georgia, serif;
color: #996600;
}
#main
{
padding: 20px;
background-color: #ffffff;
border-radius: 0 4px 4px 4px;
}
a
{
color: #034af3;
}
/* Menu Styles ------------------------------*/
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
Colegio Salesiano Don Bosco
Academia Programación
}
ul#menu li a
{
background-color: #e8eef4;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover
{
background-color: #ffffff;
}
/* Forms Styles ------------------------------*/
fieldset
{
padding-left: 12px;
}
fieldset label
{
display: block;
padding: 4px;
}
input[type="text"], input[type="password"]
{
width: 300px;
}
input[type="submit"]
{
padding: 4px;
}
/* Data Styles ------------------------------*/
table.data
{
background-color:#ffffff;
border:1px solid #c3c3c3;
border-collapse:collapse;
width:100%;
}
table.data th
{
background-color:#e8eef4;
border:1px solid #c3c3c3;
padding:3px;
}
table.data td
{
border:1px solid #c3c3c3;
padding:3px;
}
Colegio Salesiano Don Bosco
Academia Programación
Paso 4
El controlador de Inicio
El archivo de controlador en nuestros HomeController.cs aplicación, define el Índice de dos controles y
Acerca de.
Cambie el contenido del archivo HomeController.cs con esto:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcDemo.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{return View();}
public ActionResult About()
{return View();}
}
}
Las Vistas Controlador
Los archivos Index.cshtml y About.cshtml en la carpeta Vistas define el vistas ActionResult Índice () y
Acerca de () en el controlador.
Tipos de archivo ASP.NET
Los siguientes tipos de archivos HTML se pueden encontrar en la carpeta Vistas:
File Type
Extention
Plain HTML
.htm or .html
Classic ASP
.asp
Classic ASP.NET
.aspx
ASP.NET Razor C# .cshtml
ASP.NET Razor VB .vbhtml
Colegio Salesiano Don Bosco
Academia Programación
El archivo de índice
El archivo Index.cshtml representa la página de inicio de la aplicación. Es de archivos por defecto de la
aplicación (archivo de índice).
Coloque el siguiente contenido en el archivo:
@{ViewBag.Title = "Home Page";}
<h1>Bienvenidos Alumnos Salesianos</h1>
<p>Put Home Page content here</p>
El Archivo Acerca de
El archivo About.cshtml representan la página Acerca de la solicitud.
Coloque el siguiente contenido en el archivo:
@{ViewBag.Title = "About Us";}
<h1>About Us</h1>
<p>Put About Us content here</p>
Criterios a evaluar
Paso 1
1pts
Funciona el programa
utilizando ciclo WHILE
Paso 2
Funciona el programa
utilizando ciclo WHILE
Paso 3
Funciona el programa
utilizando ciclo FOR
Paso 4 (2pts)
Funciona el programa
utilizando ciclo FOR
0pt
No funciona el
programa con ningún
ciclo
No funciona el
programa con ningún
ciclo
No funciona el
programa con ningún
ciclo
No funciona el
programa con ningún
ciclo
Total
Copiar la lista de cotejo para que su práctica sea válida y calificada.
© Copyright 2024