Aplicacion Web con Asp.Net MVC y Visual Basic

Aplicacion Web con Asp.Net MVC y Visual Basic

Llega para ustedes la segunda parte del Tutorial para Realizar una Aplicacion Web con Asp.Net MVC y Visual Basic en el entorno de Visual Studio 2013, en la primera parte vimos un poco de la teoria de lo que vamos a hacer el dia de hoy asi que si no lo has leido te recomiendo que le des un vistazo ya que es un tema algo confuso y podras perderte a lo largo del Articulo. Hoy realizaremos nuestra primera aplicacion web con Asp.Net MVC y VB mostrando asi la practica de lo aprendido en el articulo anterior, asi que vamos ya a la info :yum:

Enlaces

Escenario

Ahora que ya hemos visto una pequeña introduccion a Asp.Net MVC en el Articulo anterior del Tema, ahora lo que haremos sera poner en practica lo aprendido y reforzar las bases de la estructura basica de una Aplicacion Web con Asp.Net MVC en VB. Porque en VB? Simplemente porque en Internet existen muchos recursos y documentacion de como crear una aplicacion web MVC utilizando C# y casi nula de como realizar una aplicacion web MVC mediante VB.

Visual Studio 2013

Es hora de abrir nuestro IDE de Visual Studio 2013, nos vamos a File -> New -> Project

 Aplicacion Web con Asp.Net MVC y Visual Basic 1

Seleccionamos Visual Basic -> Web -> Visual Studio 2012. En la parte derecha seleccionamos ASP.NET MVC 4 Web Application, nombramos nuestro proyecto y damos Ok.


¿Sabías que?

¿Necesitas aprender algo nuevo ? Ve a Udemy, busca el tema del que quieres aprender, selecciona el curso para ti y continua con tu aprendizaje.

Udemy

Aplicacion Web con Asp.Net MVC y Visual Basic 2

Seleccionamos ahora un Template Vacio y nos aseguramos que el motor de vistas sea Razor ( mas adelante en otros Articulos hablaremos de Razor :yum: ) damos Ok de nuevo.

Ahora nos aparecera nuestro proyecto con una cierta estructura, hagamos un resumen de las carpetas que se nos han creado:

  • App_Data: Contendra datos de la Aplicacion como archivos SQL
  • App_Start: Contendra Archivos de Configuracion de la Aplicacion ( entre ellos el RouteConfig.* )
  • Content: Contendra Archivos Estaticos como CSS 
  • Controllers: Contendra los Controladores de nuestra Aplicacion
  • Filters: Contendra clases para el comportamiento After y Before de las Acciones de los Controladores
  • Images: Contentra Imagenes que utilizara nuestra Aplicacion. 
  • Models: Contendra los Modelos de nuestra Aplicacion.
  • Scripts:  Contendra Archivos de Script como javascript
  • Views: Contendra las Vistas de nuestra Aplicacion.

 

El Codigo ( VB )

Ahora, nos toca comenzar con el Codigo.. Para agregar un nuevo modelo simplemente damos click derecho sobre la carpeta Models -> Add -> Class  y escribimos el nombre de nuestro modelo y comenzamos a escribir codigo en el, para esta Aplicacion vamos a crear 3 modelos 4 modelos:

  • Persona
  • Informacion1
  • InfoAccion2
  • InfoAccion3

Persona

Public Class Persona
Dim Nombre As String
Dim Direccion As String
Dim Telefono As String

Sub New(Nombre As String, Direccion As String, Telefono As String)
Me.Nombre = Nombre
Me.Direccion = Direccion
Me.Telefono = Telefono
End Sub

Public Function getNombre() As String
Return Nombre
End Function

Public Function getDireccion() As String
Return Direccion
End Function
Public Function getTelefono() As String
Return Telefono
End Function

Public Sub setNombre(Nombre As String)
Me.Nombre = Nombre
End Sub

Public Sub setDireccion(Direccion As String)
Me.Direccion = Direccion
End Sub
Public Sub setTelefono(Telefono As String)
Me.Telefono = Telefono
End Sub
End Class

Informacion1

Public Class Informacion1
Dim texto As String

Public Sub New(texto As String)
Me.texto = texto
End Sub

Public Function getTexto() As String
Return texto
End Function

Public Sub setTexto(texto As String)
Me.texto = texto
End Sub
End Class

InfoAccion2

Public Class InfoAccion2
Dim texto As String

Public Sub New(texto As String)
Me.texto = texto
End Sub

Public Function getTexto() As String
Return texto
End Function

Public Sub setTexto(texto As String)
Me.texto = texto
End Sub

End Class

InfoAccion3

Public Class InfoAccion3
Dim texto As String
Public Sub New(texto As String)
Me.texto = texto
End Sub

Public Function getTexto() As String
Return texto
End Function

Public Sub setTexto(texto As String)
Me.texto = texto
End Sub

End Class

Debemos tener 2 Controladores, para agregar un nuevo controlador damos click derecho sobre la carpeta Controllers -> Add -> Controller ( como puedes ver se agrega «Controller» al final del nombre ), nosotros los llamamos:

  • HomeController ( default )
  • controlador2Controller

HomeController 

Public Class HomeController
Inherits System.Web.Mvc.Controller

Function Index() As ActionResult
Dim persona = New Persona("Jonathan Melgoza", "Diagonal Aldama #00", "123456789")

Return View(persona)
End Function

End Class

controlador2Controller

Public Class controlador2Controller
Inherits System.Web.Mvc.Controller

'
' GET: /otraAccion

Function Index() As ActionResult
Dim informacion1 = New Informacion1("Este es otro Controlador llamado Controlador2 con una Accion Index.(la accion Index no se ve en la URL por defecto)")

Return View(informacion1)
End Function

Function Accion2() As ActionResult
Dim infoAccion2 = New InfoAccion2("Este es el Accion numero 2 del Controlador Controlador2.")

Return View(infoAccion2)
End Function

Function Accion3() As ActionResult
Dim infoAccion3 = New InfoAccion3("Este es el Accion numero 3 del Controlador Controlador2.")

Return View(infoAccion3)
End Function

End Class

Aqui podemos decir que el controlador crea las instancias de los modelos y lo pasa a la vista correspondiente a la accion que reciba por parte del usuario.

Ahora agregamos las vistas, las vistas deben de estar dentro de la carpeta de su respectivo Controlador. Dentro del controlador home tenemos una accion llamada index, asi que tenemos que dar click derecho sobre Views -> Add -> New Folder y lo llamamos Home, dentro de esta carpeta Home crearemos una vista llamada como la accion dentro del Controlador Home en este caso Index.

Tambien agregaremos las otras vistas siguiendo el mismo proceso, el otro controlador que tenemos se llama controlador2 ( omite la palabra Controller que se agrega automaticamente ) asi que creamos dentro de Views la carpeta controlador2 y dentro de esta las 3 vistas que tiene en acciones dentro del controlador controlador2 ( mira el codigo de controlador2:  Index, Accion2 y Accion3 ) el codigo de estas vistas es:

Index.vbhtml ( Controlador Home )

@ModelType AplicacionWebMVC1.Persona

<center></center><h2><strong>Primera Aplicacion Web MVC con ASP.NET</strong></h2></center>
<hr />
Hola,<br /><br />Soy @Model.getNombre vivo en @Model.getDireccion y mi telefono es @Model.getTelefono.<br /><br />
Gracias por tu Atencion.
<br /><br />
<a href="http://localhost:18473/controlador2/">Ir a otro Controlador.</a>

Index.vbhtml ( Controlador controlador2 )

@ModelType AplicacionWebMVC1.Informacion1

<strong><h2>Otro Controlador</h2></strong>
@Model.getTexto
<br /><br />
Accion1 ( es esta Pagina, estas en el AccionResult llamado Index)
<br />
<a href="http://localhost:18473/controlador2/Accion2">Accion2</a>
<br />
<a href="http://localhost:18473/controlador2/Accion3">Accion3</a>

 Accion2

@ModelType AplicacionWebMVC1.InfoAccion2

<h2>Accion2</h2>
<hr />
@Model.getTexto
<br />
<a href="http://localhost:18473/controlador2">Regresar a Controlador2</a>

Accion3

@ModelType AplicacionWebMVC1.InfoAccion3

<h2>Accion3</h2>
<hr />
@Model.getTexto
<br />
<a href="http://localhost:18473/controlador2">Regresar a Controlador2</a>

Aqui en las Vistas solo decir que el texto @ModelType y @Model es sintaxis de Razor en VB ( poca documentacion para VB y mucha para C# :confused: ) y declaran el tipo de modelo con el que trabajaran y acceso al modelo respectivamente.

Resultado

 

Aplicacion Web con Asp.Net MVC y Visual Basic

Clic para valorar esta información
[Total: 0 Promedio: 0]