Acceder desde una Ip a IIS Express


Aunque IIS Express está diseñado principalmente para ser utilizado por desarrolladores en  un equipo de trabajo usando simplemente «localhost:puerto» como punto de pruebas pruebas, quizás no sepa que haciendo un par de cambios en la configuración , también es posible utilizarlo desde equipos externos, por ejemplo para poder hacer pruebas de una web o servicio desde otros dispositivos conectados a la misma red  como terminales móviles .

Partiremos de un proyecto ASP.NET  Core  creado en Visual Studio , da igual si se trata de una aplicación MVC, Web Forms, Web API o lo que sea. Para desarrollar el ejemplo, imaginemos que al ejecutarlo en local estamos usando la URL http://localhost:44342/.

Veamos paso a paso cómo acceder a esta aplicación desde otro equipo conectado a la red local, y cómo solucionar algunos de los problemas que podemos encontrar por el camino.

1. Averiguamos con qué dirección está visible nuestro equipo desde el exterior
Esto podemos hacerlo con cierta facilidad ejecutando el comando «ipconfig | find «IPv» » en la terminal (cmd)  de la siguiente forma:

C:\WINDOWS\system32>ipconfig | find "IPv4"
Dirección IPv4. . . . . . . . . . . . . . : 192.168.56.1
Dirección IPv4. . . . . . . . . . . . . . : 192.168.99.1
Dirección IPv4. . . . . . . . . . . . . . : 192.168.1.46
Dirección IPv4. . . . . . . . . . . . . . : 172.17.117.209
Dirección IPv4. . . . . . . . . . . . . . : 172.17.177.129

C:\WINDOWS\system32>

El número de resultados que veremos ahí dependerá de los adaptadores de red (físicos o virtuales) que tengamos configurados en nuestro equipo. De ellos tendremos que seleccionar la dirección que se encuentre en el rango de red usado por los equipos externos desde los cuales queremos acceder a nuestra web.

En el jemplo  como  todos los equipos de la red local usan direcciones del tipo 192.168.56.*,  el nombre de host que deberían usar para acceder a mi equipo de trabajo sería la 192.168.56.1

2. Localizamos el archivo de configuración de IIS Express del proyecto

Este archivo se llama «applicationhost.config» y en proyectos de Visual Studio se encuentra en una carpeta llamada «.vs\nombre de proyecto\config» que encontramos en el directorio  de la solución, en la subcarpeta del nombre del proyecto  y dentro de ella, en la subcarpeta «config».

En otros casos, el archivo de configuración se puede  encontrar en la carpeta de configuración de IIS Express de vuestro usuario en el equipo: %userprofile%\documents\iisexpress\config.

3. Localizamos las líneas donde se especifica la URL por defecto del proyecto

En el archivo «applicationhost.config«, debemos localizar la parte de la configuración donde se indica la URL de acceso al proyecto en la máquina local. Por ejemplo, podría ser algo como esto:

<bindings>
<binding protocol=»http» bindingInformation=»*:53980:localhost» />
<binding protocol=»https» bindingInformation=»*:44342:localhost» />
</bindings>

 

Observe que este binding está limitando el acceso a vuestro sitio web, permitiendo únicamente el uso del host «localhost» para acceder al mismo. Para habilitar el acceso desde equipos externos, lo primero que tenemos que hacer es añadir otros bindings con el nombre de host que se utilizará desde fuera.

4. Añadimos a la configuración de IIS Express el nuevo binding con la dirección de nuestro equipo

En la sección de configuración <bindings>, añadimos una nueva línea en la que indicaremos que la aplicación también será accesible utilizando como host nuestra IP, de forma que quedaría más o menos como aparece a continuación.

 Ojo, ¡deberiamos elegir un puerto distinto al que usamos en localhost para que no haya conflictos !

Bien, pues si ahora intentamos ejecutar sin depuración sin permisos de administrador  nos aparecera el error de que no es posible iniciar IIS Express, pero no se preocupe pues este error aparece siempre que no hayamos lanzado Visual Studio como administrador, pues el nivel de permisos del proceso bajo el que se lanza IIS Express no es suficiente como para «apropiarse» de una dirección y puerto TCP/IP del equipo y utilizarla para escuchar peticiones.

En cambio, si iniciamos Visual Studio como administrador veremos que arranca correctamente y que, de hecho, podemos acceder a la aplicación utilizando tanto localhost:44342 como con permisos de administrador 192.168.1.46:44342, lo que quiere decir que, si no existen problemas de permisos, el binding está bien hecho.

 

5. Reservar la URL y conceder permisos de uso (sólo no administradores)

Como hemos comentado antes, este paso no será necesario si estamos ejecutando Visual Studio (y por tanto IIS Express) como administrador. Pero si no es así, debemos abrir una la línea de comandos con permisos elevados y utilizar la siguiente instrucción para reservar la URL y darle derechos de uso a determinados usuarios del equipo, por ejemplo como sigue desde la terminal de windows (cmd)  con permisos de administrador (no lo intente desde PowerShell porque le dara error) :

Pero antes de hacerlo tened en cuenta unos detalles:

  • Primero, la URL debe estar completa, incluida la barra del final.
  • El usuario puede ser cualquier grupo del sistema o nombre de usuario con dominio.
  • Los nombres de grupo son sensibles al idioma de instalación de Windows. Es decir, si vuestro Windows está instalado en inglés, debéis usar el nombre «everyone» en lugar de «todos».

Tras ejecutar el comando, ya debería ser posible acceder a la aplicación desde el equipo utilizando tanto la URL interna (localhost) como la externa (192…), cada una con su puerto correspondiente.

Pero el acceso externo aún no está garantizado: el firewall impedirá el acceso a no ser que le indiquemos lo contrario.

6. Abrir el firewall

Por defecto, el firewall de Windows rechazará cualquier intento de acceso a la máquina desde el exterior, por lo que debemos configurar una regla de entrada que asegure que las peticiones hacia nuestra web podrán entrar sin que el firewall rechaze ese trafico.

Esto lopodemos hacer dede el intrefaz graficos en configuracion avanzada en reglas del Cortafuegois  o bien desde la  consola de comandos con permisos de administrador, ejecutando la siguiente orden :netsh advfirewall firewall add rule name=»Acceso externo a mi aplicacion web» dir=in action=allow protocol=TCP localport=44342

Por supuesto, recuerde que:

  • El parámetro localport debe ser el puerto que haya elegido para el acceso externo, el mismo que usamos en el archivo de configuración de IIS Express, y más adelante al reservar la URL.
  • Es conveniente poner un nombre reconocible a la regla, de forma que más adelante podamos identificarla con facilidad.

Como ultima nota, si  desea probar su aplicacion desde un  dispositivo android , aseguresea antes qeu este esta dentro de su red, y no olvide escribir la direcccion completa (con https)  y desde un navegador diferente al usado como navegador interna ( por ejemplo con Chrome o Firefox)

¡Y eso es todo! Si ha llegado hasta aquí, ya podra ejecutar o depurar vuestra aplicación en Visual Studio, y acceder a ella desde cualquier equipo de la red local usando la dirección que hayas elegido en los pasos anteriores.

¿que es cshtml?


Un fichero cshtml, es un fichero que le permite añadir código c# dentro del marcado del HTML( si fuera Visual basic el fichero seria vbhtml).

Este tipo de ficheros aparecieron con un nuevo motor de vistas llamado Razor que fue lanzado con ASP.NET MVC 3.  Ahora gracias  a Razor, podemos generar vistas muy más limpias y sencillas que con asp.net
Ejemplo de Razor:

menu»>
@foreach (var item in Model)
{
<li>Item.Name</li>

}

</ul>

Una de las novedades con mejor acogida de la nueva versión del frameworkd ASP.NET MVC 3 ha sido sin duda el nuevo motor de vistas llamado Razor. Si bien es cierto que con las primeras versiones y el motor de vistas aspx muchos programadores se echaban para atrás con ASP.NET MVC, con Razor se pueden  generar vistas de una forma más sencilla y fluida.

ASP.NET MVC 3 es un marco para la construcción de aplicaciones web escalables basadas en estándares usando patrones de diseño bien establecidas y el poder de ASP.NET y. NET Framework.

Características principales:

  • Extensible integrada del sistema de andamiaje a través NuGet
  • HTML 5 plantillas de proyecto habilitados
  • Vistas Expresivo, incluyendo el nuevo motor de vistas Razor
  • Ganchos potentes con la inyección de dependencias y Acción Global Filtros
  • Soporte JavaScript rico con discreta JavaScript, jQuery Validation y JSON vinculante
  • Se instala de lado a lado con ASP.NET MVC 2,  y puede descargarse desde aqui

ASP.NET MVC 3 se basa en ASP.NET MVC 1 y 2, la adición de grandes características que simplifican tanto el código y permitir la extensibilidad más profundo.

En primer lugar, Razor pasa a ser el motor de vistas por defecto, aunque tenemos disponibles ambos al crear un nuevo proyecto o una nueva vista.

Accediendo a variables de servidor

Cuando trabajamos con el aspx view engine, para acceder al contenido de Model, ViewData, helpers, etcétera necesitábamos añadir las siguientes etiquetas: <%: %>

1
2
<p>Please enter your username and password. <%: Html.ActionLink("Register", "Register") %>
if you don't have an account.</p>

Con Razor simplemente utilizaremos @ al inicio y el view engine se encargará de determinar hasta dónde debe procesar.

1
2
<p>Please enter your username and password. @Html.ActionLink("Register", "Register") if
you don't have an account.</p>

Recorrer una lista

Para recorrer una lista es bastante similar a como lo haríamos con el motor aspx, con la diferencia del etiquetado para comenzar la sentencia foreach.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@foreach (var item in Model) {
    <tr>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
        <td>
            @item.FirstName
        </td>
        <td>
            @item.LastName
        </td>
        <td>
            @item.Address
        </td>
        <td>
            @item.E_Mail
        </td>
        <td>
            @item.Mobile
        </td>
    </tr>
}

Si nos fijamos en la llave de cierre del bucle, vemos que en Razor no es necesario etiquetar esa llave  ya que se supone que pertenece a la llave de apertura abierta anteriormente, caso que no ocurría con aspx view engine:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<% foreach (var item in Model) { %>
    <tr>
        <td>
            <%: Html.ActionLink("Edit", "Edit", new { id=item.Id }) %> |
            <%: Html.ActionLink("Details", "Details", new { id=item.Id }) %> |
            <%: Html.ActionLink("Delete", "Delete", new { id=item.Id }) %>
        </td>
        <td>
            <%: item.FirstName %>
        </td>
        <td>
            <%: item.LastName %>
        </td>
        <td>
            <%: item.Address %>
        </td>
        <td>
            <%: item.E_Mail %>
        </td>
        <td>
            <%: item.Mobile %>
        </td>
    </tr>
<% } %>

Bloques de código

Por otro lado, para utilizar bloques de código bastará con utilizar la arroba y abrir llaves para delimitar el espacio abarcado por el bloque.

1
2
3
4
@{
    ViewBag.Title = "Loop";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Tag

Otro escenario que se nos puede presentar es que dentro de un bloque de código necesitemos añadir código javascript o HTML que no requiera ser procesado por el motor.

1
2
3
4
5
6
7
8
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
        http://asp.net/mvc</a>.
</p>
@if (DateTime.Now.Year == 2011)
{
    <text>while year is 2011 this should be shown.</text>
}

Para que nos hagamos una idea más clara, si no añadimos el tag , algunas partes del código anterior sería interpretadas como palabras clave.

Archivo _ViewStart.cshtml

Para conseguir unas vistas más limpias y concisas, aparece un nuevo archivo llamado _ViewStart.cshtml.

El objetivo del mismo trata de recopilar código común a todas las vistas de la aplicación, simplificando el código de las mismas. Por defecto aparece definido en él el layout utilizado en las vistas, en caso de no ser especificado en las mismas.

1
2
3
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Sections

Otra de las novedades dentro de Razor es la posibilidad de crear secciones.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
</head>
<body>
    <div>
        <div id="header">
            <div id="title">
                <h1>
                    My MVC Application</h1>
            </div>
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
            <div id="menucontainer">
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                </ul>
            </div>
        </div>
        <div id="main">
            @RenderBody()
            <div id="footer">
                @RenderSection("returngis");
            </div>
        </div>
    </div>
</body>
</html>

Cuando definimos una sección en el layout, el objetivo principal es que la misma pueda ser modificada dinámicamente dependiendo de la vista que solicitemos de la siguiente manera.

1
2
3
@section returngis{
    <p>Este es un ejemplo para <a href="http://www.returngis.net">Returng(GiS);</a></p>
}

Si tenemos varias vistas dependiendo del anterior layout y no todas asignan un valor a la sección definida anteriormente, al acceder a alguna de las vistas sin esta definición saltaría la siguiente excepción:

Este error ocurre debido a que, por defecto, cuando se define una sección se da por hecho que la misma debe estar implementada en cualquier vista que utilice este layout. Para evitar esto, basta con modificar la definición de la sección agregando el parámetro false al final para convertir la sección de obligatorio a opcional.

1
@RenderSection("returngis", false)

Nuevos helpers

Por último, y no por ello menos importante :se añaden a nuestra lista de helpers 5 más, algunos de ellos imprescindibles:

  • Chart: A partir de la versión 3 no necesitaremos crear un chart from scratch como hacíamos en este antiguo post. Este helper renderiza exactamente las mismas características que en ASP.NET 4.
  • WebGrid: Un helper más que necesario el cual renderiza un grid con paginación y ordenación. Gracias a José M. Aguilar tenemos un tutorial de este helper explicando paso a paso cada una de las funcionalidades.
  • Crypto: Utilizado para crear password hash.
  • WebImage: Se utiliza para renderizar imágenes.
  • WebMail: Nos ayuda en el envío de emails.

Fuente  aqui