none
Pasar HTML a una vista de ASP MVC RRS feed

  • Pregunta

  • Hola:

     Tengo una vista que fue desarrollada usando el NotePad dentro de esta vista se hacen referencias a elementos de Boostrap, esta vista funciona muy bien mandandola a llamar desde el NotePad con el index.Html el problema es que debe de ser parte de un desarrollo ASP MVC usando Vs, me provoca confusion como hacer referencia a los elementos del bootstrap para que pueda obtener la misma interfas pero desde Visual Studio:

    Estas son las referencias que tiene la vista.

    <!DOCTYPE html>
    <html lang="en" class="no-js">
    <head>
    	<meta charset="UTF-8" />
    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    	<title>MyTitle</title>
    	<link rel="icon" type="image/png" href="Favicon.png" />
    	<link rel="stylesheet" href="bootstrap3/css/bootstrap.css">
    	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
    	<link rel="stylesheet" type="text/css" href="css/demo.css" />
    	<link rel="stylesheet" type="text/css" href="css/icons.css" />
    	<link rel="stylesheet" type="text/css" href="css/component.css" />
    	<script src="js/modernizr.custom.js"></script>
    </head>
    	<body> 
    		<div id="wrapper"> 
    		</div><!-- /container -->
    		
    
    		
    		<script src="js/classie.js"></script>
    		<script src="js/mlpushmenu.js"></script>
    		<script>
    			new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );
    		</script>
    		
    		<script src="bootstrap3/js/jquery-1.11.3.min.js"> </script>
    		<script src="bootstrap3/js/bootstrap.js"> </script>
    	</body>
    </html>

    Todos los elementos marcados puedo encontrarlos dentro de los directorios mencionados, pero ahora, necesito pasar esta vista al Visual Studio en un proyecto MVC y desconosco donde debo de meterlos y como referenciarlos en la vista.

    Ya tengo el paquete de Boostrap instalado.


    Saludos desde Monterrey, Nuevo León, México!!!


    domingo, 12 de julio de 2015 20:20

Respuestas

  • Hola JoséLuisGarcía,

    ¿Es un proyecto nuevo? o es un proyecto que intentas rediseñarlo utilizando bootstrap.

    Si es un proyecto nuevo y ocupas VS 2013 o versiones superiores entonces las plantillas ya vienen preparadas para utilizar BootStrap, allí no hay mucho que hacer mas que usarlo.

    Si es un proyecto que no nació con bootstrap incorporado, entonces lo que queda es instalar bootstrap con ayuda de Nuget o hacerlo de manera manual (tienes la ventaja de preparar el archivo según lo que vayas a utilizar), luego referenciar los estilos y los script (js) en tu Layout y listo, tampoco hay más que hacer.

    Cuando trabajas con MVC las vistas podrían heredar apariencia (digo podrían porque por ejemplo las vistas parciales no lo hacen) de una "plantilla" llamada _layout.cshtml (lo encuentras en la carpeta Views/Shared/_Layout.cshtml). Es ahí donde debes definir tus enlaces a estilos, scripts, etc; todas tus vistas heredarán la apariencia que definas ahí.

    MVC trabaja con bundles que te permite entre muchas cosas crear un (contenedor/paquete) de estilos y scripts minificados que hacen que la cantidad de paquetes descargados sea menor (analogía de los sprites), además de otorgar algo de fluidez,  dan orden.

    Finalmente, cuando trabajas con BootStrap no es necesario utilizar reseteadores de estilos como el que haces referencia (normalize), bootstrap lo hace.

    Si la solución propuesta atendió su consulta no olvide marcarla como respuesta.

    Willams Morales
    Arequipa - PERÚ
    domingo, 12 de julio de 2015 20:46
  • Olvide lo siguiente:

    Si lo que quieres es cargar una vista con el código tal y como lo tienes, entonces tienes que indicar que no quieres usar una página de diseño, entonces antes de tu declaración <!DOCTYPE html>, escribe lo siguiente:

    @{
        Layout= null;
    }

    domingo, 12 de julio de 2015 21:04
  • A ver, creo que esto será un poco largo pero intentaré hacer todo lo posible para poder aportar al desarrollo de tu proyecto.

    Primero. Como te mencioné las vistas heredan apariencia de una página de diseño llamada _Layout.cshtml. Puedes tener más de una página de diseño si así lo deseas. La página de diseño contiene todos los elementos comunes que las demás páginas utilizarán como la cabecera, el pie de página, el menú principal, además de referenciar los estilos, los scripts, y demás componentes comunes a tus vistas, esto es algo como una página maestra que le llaman en ASP Net. Una página de diseño pinta de la siguiente manera (mil disculpas si equivoco en algo, no tengo ningún editor a mano para apoyarme):

    <!DOCTYPE html>
    <html>
      <head>
        <title>Mi primera aplicación</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
      </head>
      <body>
        <head>
          <h1>Hola mundo</h1>
        </head>
    
        <nav>
          <li>@html.ActionLink("Inicio", "Home")</li>
          <li>@html.ActionLink("Mantenimiento", "Home")</li>
        </nav>
    
        @RenderBody()
    
        <footer>
          <p>Página creada para enseñar</p>
        </footer>
    
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)  
      </body>
    </html>


    Como te darás cuenta, _Layout.cshtml es una página con elementos HTML(5) pero con instrucciones en Razor (las que marqué en negrita). De ellas la más importante es @RenderBody. @RenderBody renderizara la vista hija. ¿y qué es la vista hija? Pues la vista hija son las vistas que heredarán apariencia de _Layout. Algo que quiero que tomes en cuenta es que _Layout no tiene la extensión html, sino cshtml; esto porque estás páginas contiene Razor, y Razor se ejecuta en el servidor.

    Entonces, por lo mencionado en el párrafo anterior, las vistas en las que te apoya tu diseñador no deben de tener la extensión html, sino cshtml (la vista puede ser un archivo html pero sin código Razor). Recuerda que Razor se procesa en el servidor que procesa la vista para generar un documento HTML que será devuelto finalmente al navegador. ¿Entonces, que forma tiene una vista? Imagínate que quieres desplegar la lista de productos

    @model IEnumerable<Aplicacion.Model.Productos>
    
    @foreach(var item Model)
    {
      item.Codigo  
      item.Nombre
      
    }

    Bueno, está vista está muy básica pero podría estar construida dentro de una tabla. Entonces, al momento de llamar una vista, primero se renderiza la página de diseño y en @RenderBody inscrustará la lista de productos.

    Ahora, ¿Podrías crear una aplicación donde no tengas una página de diseño (_Layout)? Pues sí, pero en toda aplicación hay vistas comunes, no tiene sentido no tener una página de diseño.

    Bajo mi experiencia, un diseñador debe apoyarte en la maquetación de la aplicación (básicamente es el layout) y en la maquetación de algunas vistas comunes, el tema de los estilos ya los trabajas fácilmente con bootstrap.



    domingo, 12 de julio de 2015 21:51
  • Ok, entiendo entonces que la solucion es tan sencilla como crear las carpetas manualmente y colocar dentor los archivos que requiero para que estas vistas trabajen sin problemas.

    Saludos desde Monterrey, Nuevo León, México!!!

    Ojo que dichas carpetas content y scripts ya se crean por defecto cuando inicias un proyecto bajo la plantilla MVC. Por eso Nuget coloca los archivos bootstrap*.css en la carpeta content y los archivos bootstrap*.js en la carpeta scripts. Ahora, tu puedes crear la carpeta que quieras y colocarlos ahí, teniendo siempre el cuidado de hacer referencia exacta a la ubicación de los archivos. Hay una tendencia de tener la siguiente estructura, puedes o no seguirla:

    Content
    ---img
    -------logo.jpg
    ---css
    -------site.css
    -------bootstrap.css
    -------printer.css
    ---js
    -------bootstrap.js
    -------common.js
    ---fonts
    -------norecuerdo.ttf

    Algo que olvide decirte es que puedes configurar la descarga de bootstrap según tus necesidades. Es decir, si quieres sólo el tema de la gestión de grids entonces no descargas js, no sé, pones los ingredientes en la mesa según la cena que prepararás, no necesitas poner mas.


    lunes, 13 de julio de 2015 0:28
  • Hola JoséLuisGarcía,

    Las rutas no son un problema, ayudan y mucho; de seguro ya las utilizarás posteriormente. Lo que una ruta hace es direccionar al controlador y action según la url definida. En tu caso, la ruta Default invocará al método de acción Index del controlador Home. Pues bien, yo te había comentado que todas las vistas heredan presentación de _Layout, y si en Layout tienes definido las referencias a tus estilos entonces no deberías tener problemas. 

    A ver, haz algo. Cuando cargue tu página has clic derecho sobre ella y elije ver el código fuente de la página, revisa si están los enlaces que definen tus estilos, revisa además que refieran a rutas validas. 

    Si tienes todos los enlaces puede estar sucediendo algo: a ver, cuando defines varios estilos con la etiqueta Link, el orden en que los pones define el nivel de precedencia. Es decir, si tienes:

    <link href="css/site1.css" rel="Stylesheet" type="text/css" />
    <link href="css/site2.css" rel="Stylesheet" type="text/css" />
    <link href="css/site3.css" rel="Stylesheet" type="text/css" />
    y las 3 hojas de estilo tienen estilos para la etiqueta <p>, el formato final quedará definido por el estilo de la hoja site3.css.
    lunes, 13 de julio de 2015 2:45
  • Hola JoséLuisGarcía,

    Gracias por los adjuntos, te mencionaré mis observaciones y luego pasaré a adjuntarte el código:

    1. En la página de diseño _Layout no veo en ningún lugar @RenderBody, ya te había comentado que ello es necesario para renderizar la vista hija.
    2. También te había comentado que tengas cuidado en el orden de precedencia de las hojas de estilos. Cuida de que demo.css y components.css no "solapen" los estilos que bootstrap está dando a algunos elementos. No estoy seguro cuál es el objetivo de todas las hojas de estilo que tienes.
    3. También te había comentado que si usas bootstrap no necesitas la referencia a Normalize.css
    4. También te había comentado que intentes agrupar los estilos en un Bundle, si no lo entiendes ahora, te sugiero que lo estudies y lo pongas en practica posteriormente.
    5. Algo trivial: favicon debería tener extensión ico, no png.

    La vista Index.cshtml debería tener la siguiente forma

    @{
          ViewBag.Title = "Home Page";
    }
    
    <h1>Está cabecera ya tiene estilo de bootstrap</h1>

    lunes, 13 de julio de 2015 14:51
  • La página de diseño _Layout.cshtml debería tener la siguiente forma:

    <!DOCTYPE html>
    <html lang="en" class="no-js">
    <head>
    	<meta charset="UTF-8" />
    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    	<title>@ViewBag.Title | Mi Aplicacion</title>
    	<link rel="icon" type="image/png" href="Favicon.png" />
    	<link rel="stylesheet" href="bootstrap3/css/bootstrap.css">
    	<link rel="stylesheet" type="text/css" href="css/demo.css" />
    	<link rel="stylesheet" type="text/css" href="css/icons.css" />
    	<link rel="stylesheet" type="text/css" href="css/component.css" />
    	<script src="js/modernizr.custom.js"></script>
    </head>
    	<body> 
    		@RenderBody()
    		
    		<script src="bootstrap3/js/jquery-1.11.3.min.js"> </script>
    		<script src="bootstrap3/js/bootstrap.js"> </script>
    	</body>
    </html>

    Espero que con esto ya puedas ver tu vista incrustada dentro del diseño de _Layout

    Si la solución propuesta atendió su consulta no olvide marcarla como respuesta.

    Willams Morales
    Arequipa - PERÚ

    lunes, 13 de julio de 2015 14:52

Todas las respuestas

  • Hola JoséLuisGarcía,

    ¿Es un proyecto nuevo? o es un proyecto que intentas rediseñarlo utilizando bootstrap.

    Si es un proyecto nuevo y ocupas VS 2013 o versiones superiores entonces las plantillas ya vienen preparadas para utilizar BootStrap, allí no hay mucho que hacer mas que usarlo.

    Si es un proyecto que no nació con bootstrap incorporado, entonces lo que queda es instalar bootstrap con ayuda de Nuget o hacerlo de manera manual (tienes la ventaja de preparar el archivo según lo que vayas a utilizar), luego referenciar los estilos y los script (js) en tu Layout y listo, tampoco hay más que hacer.

    Cuando trabajas con MVC las vistas podrían heredar apariencia (digo podrían porque por ejemplo las vistas parciales no lo hacen) de una "plantilla" llamada _layout.cshtml (lo encuentras en la carpeta Views/Shared/_Layout.cshtml). Es ahí donde debes definir tus enlaces a estilos, scripts, etc; todas tus vistas heredarán la apariencia que definas ahí.

    MVC trabaja con bundles que te permite entre muchas cosas crear un (contenedor/paquete) de estilos y scripts minificados que hacen que la cantidad de paquetes descargados sea menor (analogía de los sprites), además de otorgar algo de fluidez,  dan orden.

    Finalmente, cuando trabajas con BootStrap no es necesario utilizar reseteadores de estilos como el que haces referencia (normalize), bootstrap lo hace.

    Si la solución propuesta atendió su consulta no olvide marcarla como respuesta.

    Willams Morales
    Arequipa - PERÚ
    domingo, 12 de julio de 2015 20:46
  • Olvide lo siguiente:

    Si lo que quieres es cargar una vista con el código tal y como lo tienes, entonces tienes que indicar que no quieres usar una página de diseño, entonces antes de tu declaración <!DOCTYPE html>, escribe lo siguiente:

    @{
        Layout= null;
    }

    domingo, 12 de julio de 2015 21:04
  • Hola Willams:

     El proyecto es uno nuevo, pero las vistas (archivos con extensión HTML) las creo otro compañero usando el NotePad por lo cual las referencias a dichos componentes las ves de esa forma.

     Ahora, lo que yo intento hacer es pasar ese archivo HTML a una vista de MVC para posteriormente hacer que interactue con el resto de la aplicación (que desarrolle yo) pero como en el archivo tengo las referencias directas no se como hacerle para desde Vs ejecutar esa misma vista sin que pierda ninguna característica.

     Estas dudas son porque este es mi primer proyecto con MVC, en general mi primer proyecto WEB y como tal me encuentro documentandome para poder usar las vistas que me enviaron.

     Mi duda central aqui es, ¿como reemplazo las referencias actuales del archivo por las referencias de los componentes presentes en mi proyecto?

    Por ejemplo:

    <link rel="stylesheet" type="text/css" href="css/demo.css" />

    ¿Como hacer la referencia a "demo.Css" en Vs 2013?, donde lo instalo?, como instalo los componentes de Css?


    Saludos desde Monterrey, Nuevo León, México!!!

    domingo, 12 de julio de 2015 21:20
  • Hola:

    Si lo que quieres es cargar una vista con el código tal y como lo tienes

     La aplicacion tendra un Menu basico y universal para todas las vistas por lo cual me sirve el uso del Layout, y es ese primer punto que quiero atacar, como cambiar la apariencia del layout que se genera por default con lo que yo tengo en mi archivo index.Html (index.thml que me crearon desde el notepad y con las referencias puestas en el origen de esta pregunta)


    Saludos desde Monterrey, Nuevo León, México!!!

    domingo, 12 de julio de 2015 21:23
  • A ver, creo que esto será un poco largo pero intentaré hacer todo lo posible para poder aportar al desarrollo de tu proyecto.

    Primero. Como te mencioné las vistas heredan apariencia de una página de diseño llamada _Layout.cshtml. Puedes tener más de una página de diseño si así lo deseas. La página de diseño contiene todos los elementos comunes que las demás páginas utilizarán como la cabecera, el pie de página, el menú principal, además de referenciar los estilos, los scripts, y demás componentes comunes a tus vistas, esto es algo como una página maestra que le llaman en ASP Net. Una página de diseño pinta de la siguiente manera (mil disculpas si equivoco en algo, no tengo ningún editor a mano para apoyarme):

    <!DOCTYPE html>
    <html>
      <head>
        <title>Mi primera aplicación</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
      </head>
      <body>
        <head>
          <h1>Hola mundo</h1>
        </head>
    
        <nav>
          <li>@html.ActionLink("Inicio", "Home")</li>
          <li>@html.ActionLink("Mantenimiento", "Home")</li>
        </nav>
    
        @RenderBody()
    
        <footer>
          <p>Página creada para enseñar</p>
        </footer>
    
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)  
      </body>
    </html>


    Como te darás cuenta, _Layout.cshtml es una página con elementos HTML(5) pero con instrucciones en Razor (las que marqué en negrita). De ellas la más importante es @RenderBody. @RenderBody renderizara la vista hija. ¿y qué es la vista hija? Pues la vista hija son las vistas que heredarán apariencia de _Layout. Algo que quiero que tomes en cuenta es que _Layout no tiene la extensión html, sino cshtml; esto porque estás páginas contiene Razor, y Razor se ejecuta en el servidor.

    Entonces, por lo mencionado en el párrafo anterior, las vistas en las que te apoya tu diseñador no deben de tener la extensión html, sino cshtml (la vista puede ser un archivo html pero sin código Razor). Recuerda que Razor se procesa en el servidor que procesa la vista para generar un documento HTML que será devuelto finalmente al navegador. ¿Entonces, que forma tiene una vista? Imagínate que quieres desplegar la lista de productos

    @model IEnumerable<Aplicacion.Model.Productos>
    
    @foreach(var item Model)
    {
      item.Codigo  
      item.Nombre
      
    }

    Bueno, está vista está muy básica pero podría estar construida dentro de una tabla. Entonces, al momento de llamar una vista, primero se renderiza la página de diseño y en @RenderBody inscrustará la lista de productos.

    Ahora, ¿Podrías crear una aplicación donde no tengas una página de diseño (_Layout)? Pues sí, pero en toda aplicación hay vistas comunes, no tiene sentido no tener una página de diseño.

    Bajo mi experiencia, un diseñador debe apoyarte en la maquetación de la aplicación (básicamente es el layout) y en la maquetación de algunas vistas comunes, el tema de los estilos ya los trabajas fácilmente con bootstrap.



    domingo, 12 de julio de 2015 21:51
  • Por ejemplo:

    <link rel="stylesheet" type="text/css" href="css/demo.css" />

    ¿Como hacer la referencia a "demo.Css" en Vs 2013?, donde lo instalo?, como instalo los componentes de Css?

    La pregunta es muy básica que temo no estar entendiéndote bien y temo más aún responderte algo que no esperas. Lo que menciona la etiqueta Link es que debes de tener un archivo demo.css en la carpeta css de tu proyecto. Bueno, es sólo copiar el archivo a esa carpeta. 

    domingo, 12 de julio de 2015 21:57
  • Hola:

     A si es, entiendo que es el path de ubicación de los archivos mencionados, pero creí que existe alguna otra forma de meter estos archivos dentro del proyecto, al igual que el bootstrap instala sus archivos pienso que existe alguna forma de instalar el CSS dentro del proyecto...

     Disculpa si mis preguntas son demasiado obvias apenas ando desmenuzando este tema.


    Saludos desde Monterrey, Nuevo León, México!!!

    domingo, 12 de julio de 2015 23:07
  • A ver, bootstrap no instala nada por sí sólo en un proyecto web. Para usar bootstrap en un proyecto web puedes hacerlo manualmente o apoyarte del administrador de paquetes Nuget (puedes usar también CDN, Bower, npm y demás formas explicadas en la página oficial de bootstrap). Ahora, el proceso para usar bootstrap en un proyecto web es tan simple como descargar y copiar los archivos en las carpetas correspondientes (por defecto dentro de content y scripts).

    domingo, 12 de julio de 2015 23:20
  • Ok, entiendo entonces que la solucion es tan sencilla como crear las carpetas manualmente y colocar dentor los archivos que requiero para que estas vistas trabajen sin problemas.

    Saludos desde Monterrey, Nuevo León, México!!!

    domingo, 12 de julio de 2015 23:55
  • Ok, entiendo entonces que la solucion es tan sencilla como crear las carpetas manualmente y colocar dentor los archivos que requiero para que estas vistas trabajen sin problemas.

    Saludos desde Monterrey, Nuevo León, México!!!

    Ojo que dichas carpetas content y scripts ya se crean por defecto cuando inicias un proyecto bajo la plantilla MVC. Por eso Nuget coloca los archivos bootstrap*.css en la carpeta content y los archivos bootstrap*.js en la carpeta scripts. Ahora, tu puedes crear la carpeta que quieras y colocarlos ahí, teniendo siempre el cuidado de hacer referencia exacta a la ubicación de los archivos. Hay una tendencia de tener la siguiente estructura, puedes o no seguirla:

    Content
    ---img
    -------logo.jpg
    ---css
    -------site.css
    -------bootstrap.css
    -------printer.css
    ---js
    -------bootstrap.js
    -------common.js
    ---fonts
    -------norecuerdo.ttf

    Algo que olvide decirte es que puedes configurar la descarga de bootstrap según tus necesidades. Es decir, si quieres sólo el tema de la gestión de grids entonces no descargas js, no sé, pones los ingredientes en la mesa según la cena que prepararás, no necesitas poner mas.


    lunes, 13 de julio de 2015 0:28
  • Hola:

     Gracias por todas las respuestas, logre configurar mi _Layout.cshtml pero tengo un problema, la clase RouteConfig:

        public class RouteConfig
        {
            public static void RegisterRoutes(RouteCollection routes)
            {
                routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
    
                routes.MapRoute(
                    name: "Default",
                    url: "{controller}/{action}/{id}",
                    defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
                );
            }
        }

     Esta clase me la genera automáticamente el Vs al crear un proyecto MVC, al ejecutar la aplicacion puedo ver el Index del Home y en la parte de abajo las etiquetas HTML de mi archivo pero sin los estilos configurados, comentarize todo lo de la vista index de Home pero sigo viendo todo sin estilos.

    ¿Como indicarle al index que herede de _Layout_cshtml?


    Saludos desde Monterrey, Nuevo León, México!!!

    lunes, 13 de julio de 2015 2:29
  • Hola JoséLuisGarcía,

    Las rutas no son un problema, ayudan y mucho; de seguro ya las utilizarás posteriormente. Lo que una ruta hace es direccionar al controlador y action según la url definida. En tu caso, la ruta Default invocará al método de acción Index del controlador Home. Pues bien, yo te había comentado que todas las vistas heredan presentación de _Layout, y si en Layout tienes definido las referencias a tus estilos entonces no deberías tener problemas. 

    A ver, haz algo. Cuando cargue tu página has clic derecho sobre ella y elije ver el código fuente de la página, revisa si están los enlaces que definen tus estilos, revisa además que refieran a rutas validas. 

    Si tienes todos los enlaces puede estar sucediendo algo: a ver, cuando defines varios estilos con la etiqueta Link, el orden en que los pones define el nivel de precedencia. Es decir, si tienes:

    <link href="css/site1.css" rel="Stylesheet" type="text/css" />
    <link href="css/site2.css" rel="Stylesheet" type="text/css" />
    <link href="css/site3.css" rel="Stylesheet" type="text/css" />
    y las 3 hojas de estilo tienen estilos para la etiqueta <p>, el formato final quedará definido por el estilo de la hoja site3.css.
    lunes, 13 de julio de 2015 2:45
  • Algo que olvide mencionar:

    Imagino que la vista Index.cshtml sólo tiene elementos del <Body>, ¿verdad?. Es decir, no tiene <!DOCTYPE html> ni la etiqueta <head>, ¿verdad?. Sólo debería tener elementos de contenido.

    lunes, 13 de julio de 2015 3:14
  • Hola hice las pruebas sugeridas:

    Aqui es donde no veo los estilos del Layout

    "view-source:http://localhost:7597/Home/Index" veo estas lineas de codigo:

    <!DOCTYPE html>
    <html lang="en" class="no-js">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> - MyTitle</title>
        <link rel="icon" type="image/png" href="Content/Images/Favicon.png" />
        <link rel="stylesheet" href="Content/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="Content/css/normalize.css" />
        <link rel="stylesheet" type="text/css" href="Content/css/demo.css" />
        <link rel="stylesheet" type="text/css" href="Content/css/icons.css" />
        <link rel="stylesheet" type="text/css" href="Content/css/component.css" />
        <script src="Scripts/modernizr.custom.js"></script>
        <link href="/Content/css" rel="stylesheet"/>
    
        <script src="/Scripts/modernizr-2.6.2.js"></script>
    
    </head>
    

    Aqui veo los estilos:

    "view-source:http://localhost:7597/"

    <!DOCTYPE html>
    <html lang="en" class="no-js">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> - MyTitle</title>
        <link rel="icon" type="image/png" href="Content/Images/Favicon.png" />
        <link rel="stylesheet" href="Content/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="Content/css/normalize.css" />
        <link rel="stylesheet" type="text/css" href="Content/css/demo.css" />
        <link rel="stylesheet" type="text/css" href="Content/css/icons.css" />
        <link rel="stylesheet" type="text/css" href="Content/css/component.css" />
        <script src="Scripts/modernizr.custom.js"></script>
        <link href="/Content/css" rel="stylesheet"/>
    
        <script src="/Scripts/modernizr-2.6.2.js"></script>
    
    </head>
    

    Esto es lo que tengo en el Home/Index:

    @{
          ViewBag.Title = "Home Page";
    }

    lunes, 13 de julio de 2015 4:56
  • A ver, creo que estamos confundiendo las cosas.

    ¿Puedes mostrar todo el código que tienes en el archivo _Layout.cshtml y también todo el código que tienes en el archivo Index.cshtml.?


    lunes, 13 de julio de 2015 5:18
  • hola

    >>Tengo una vista que fue desarrollada usando el NotePad dentro de esta vista se hacen referencias a elementos de Boostrap, esta vista funciona muy bien mandandola a llamar desde el NotePad con el index.Html

    una duda con este punto, cuando llevas el html que se creo en notepad al proyecto mvc, lo estas ubicando dentro de un index.cshtml ?

    porque si en la carpeta view pones un .html no va a funcionar, tiene que ser dentro del .cshtml

    >>¿como reemplazo las referencias actuales del archivo por las referencias de los componentes presentes en mi proyecto?

    si tienes los .css y .js que requieres dentro del proyecto solo es cuestion de que uses el ~/ en los tag <script> y <link> en mvc este resuelve la ruta relativa de forma automatica

    >>pero creí que existe alguna otra forma de meter estos archivos dentro del proyecto, al igual que el bootstrap instala sus archivos pienso que existe alguna forma de instalar el CSS dentro del proyecto

    depende, hay forma de hacerlo de forma automatica si usas nuget, pero esto incluira los archivos de estilo estandar

    si quieres un estilo personalizado los .css deberas cambiarlo de forma manual

    imagen

    ojo nuget incluira los .js y .css dentro del proyecto, pero no agregara los <script> y <link> en las vistas, ya sea en el _layout o en la view que estes creando, eso lo defines tu

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina


    lunes, 13 de julio de 2015 5:40
  • Hola Willams:

     Esto es todo lo que tengo de codigo en el Index.cshtml ubicado dentro de la carpeta HOME:

    @{
          ViewBag.Title = "Home Page";
    }

     El resto de codigo en estos momentos no puedo mostrarlo porque no estoy en frente de la Pc, pero basicamente es un menu un DataTable de boostrap, pero todo lo que refiere a estilos esta aqui:

    <!DOCTYPE html>
    <html lang="en" class="no-js">
    <head>
    	<meta charset="UTF-8" />
    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    	<title>MyTitle</title>
    	<link rel="icon" type="image/png" href="Favicon.png" />
    	<link rel="stylesheet" href="bootstrap3/css/bootstrap.css">
    	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
    	<link rel="stylesheet" type="text/css" href="css/demo.css" />
    	<link rel="stylesheet" type="text/css" href="css/icons.css" />
    	<link rel="stylesheet" type="text/css" href="css/component.css" />
    	<script src="js/modernizr.custom.js"></script>
    </head>
    	<body> 
    		<div id="wrapper"> 
    		</div><!-- /container -->
    		
    
    		
    		<script src="js/classie.js"></script>
    		<script src="js/mlpushmenu.js"></script>
    		<script>
    			new mlPushMenu( document.getElementById( 'mp-menu' ), document.getElementById( 'trigger' ) );
    		</script>
    		
    		<script src="bootstrap3/js/jquery-1.11.3.min.js"> </script>
    		<script src="bootstrap3/js/bootstrap.js"> </script>
    	</body>
    </html>


    Saludos desde Monterrey, Nuevo León, México!!!

    lunes, 13 de julio de 2015 12:52
  • Hola Leandro:

    una duda con este punto, cuando llevas el html que se creo en notepad al proyecto mvc, lo estas ubicando dentro de un index.cshtml ?

     Todo el código lo estoy ubicando dentro del archivo _Layout.cshtml, después me fui al index.cshtml dentro de la carpeta Home y elimine todo el contenido que contenía los valores por defecto.

     Según entiendo de palabras de de Willams, el _Layout.cshtml es el template par el resto de vistas ya que las demás vistas heredan de este, mis preguntas entonces serian,

    ¿Para que una vista herede de _Layout.cshtml, tiene que hacerse algo adicional que insertar un archivo con extensión cs.html?

    ¿Si en el Layout se tiene todo el diseño del menú y estilos que se usaran en toda la aplicacion, en el archivo Index tengo que poner nuevamente estos estilos y diseño del Menu?


    Saludos desde Monterrey, Nuevo León, México!!!

    lunes, 13 de julio de 2015 13:00
  • Hola JoséLuisGarcía,

    Gracias por los adjuntos, te mencionaré mis observaciones y luego pasaré a adjuntarte el código:

    1. En la página de diseño _Layout no veo en ningún lugar @RenderBody, ya te había comentado que ello es necesario para renderizar la vista hija.
    2. También te había comentado que tengas cuidado en el orden de precedencia de las hojas de estilos. Cuida de que demo.css y components.css no "solapen" los estilos que bootstrap está dando a algunos elementos. No estoy seguro cuál es el objetivo de todas las hojas de estilo que tienes.
    3. También te había comentado que si usas bootstrap no necesitas la referencia a Normalize.css
    4. También te había comentado que intentes agrupar los estilos en un Bundle, si no lo entiendes ahora, te sugiero que lo estudies y lo pongas en practica posteriormente.
    5. Algo trivial: favicon debería tener extensión ico, no png.

    La vista Index.cshtml debería tener la siguiente forma

    @{
          ViewBag.Title = "Home Page";
    }
    
    <h1>Está cabecera ya tiene estilo de bootstrap</h1>

    lunes, 13 de julio de 2015 14:51
  • La página de diseño _Layout.cshtml debería tener la siguiente forma:

    <!DOCTYPE html>
    <html lang="en" class="no-js">
    <head>
    	<meta charset="UTF-8" />
    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    	<title>@ViewBag.Title | Mi Aplicacion</title>
    	<link rel="icon" type="image/png" href="Favicon.png" />
    	<link rel="stylesheet" href="bootstrap3/css/bootstrap.css">
    	<link rel="stylesheet" type="text/css" href="css/demo.css" />
    	<link rel="stylesheet" type="text/css" href="css/icons.css" />
    	<link rel="stylesheet" type="text/css" href="css/component.css" />
    	<script src="js/modernizr.custom.js"></script>
    </head>
    	<body> 
    		@RenderBody()
    		
    		<script src="bootstrap3/js/jquery-1.11.3.min.js"> </script>
    		<script src="bootstrap3/js/bootstrap.js"> </script>
    	</body>
    </html>

    Espero que con esto ya puedas ver tu vista incrustada dentro del diseño de _Layout

    Si la solución propuesta atendió su consulta no olvide marcarla como respuesta.

    Willams Morales
    Arequipa - PERÚ

    lunes, 13 de julio de 2015 14:52
  • Hola Willams:

    En la página de diseño _Layout no veo en ningún lugar @RenderBody, ya te había comentado que ello es necesario para renderizar la vista hija..

    - Actualmente lo tiene, solo que como no tengo el codigo no lo puse, pero ya lo tiene

    También te había comentado que tengas cuidado en el orden de precedencia de las hojas de estilos. Cuida de que demo.css y components.css no "solapen" los estilos que bootstrap está dando a algunos elementos. No estoy seguro cuál es el objetivo de todas las hojas de estilo que tienes.

    - Esto lo tengo que revisar, lo curioso es que en el layout si se muestran los estilos tal como los requiero, solo que no entreo a ninguna "vista" por que aqui "view-source:http://localhost:7597"  creo que solo accede al Layout

    También te había comentado que si usas bootstrap no necesitas la referencia a Normalize.css

    - Omiti quitar esta referencia, pero quitarlo no sera problema.

    También te había comentado que intentes agrupar los estilos en un Bundle, si no lo entiendes ahora, te sugiero que lo estudies y lo pongas en practica posteriormente.

    - Esto lo estudiare con mas detenimiento.

    Algo trivial: favicon debería tener extensión ico, no png.

    - El Favicon, lo cambio, gracias por la observacion


    Saludos desde Monterrey, Nuevo León, México!!!

    lunes, 13 de julio de 2015 17:47
  • Hola JoséLuisGarcía,

    Pero al final no me queda claro, ¿lograste obtener lo que requerías? ¿dónde estas teniendo problemas?

    A ver, ya me habías mostrado la configuración de rutas que tienes donde por defecto cargará el método de acción Index que se encuentra en el controlador Home. Ahora, Index.cshtml por convención debería de estar dentro de la carpeta Views/Home/Index.cshtml, ¿verdad?. 

    Si todo ello has hecho entonces ya es bastante raro que no puedas cargar la vista Index basada en la hoja de diseño _Layout.cshtml


    lunes, 13 de julio de 2015 18:10
  • Hola:

     Aun no logro que Index.cshtml se muestre con el Menu y estilos creados en el _Layout.cshtml, index si esta ubicado dentro del directorio que mencionas "Views/Home/Index.cshtml".

    Al momento de yo ejecutar la aplicación, arranca en este path "view-source:http://localhost:7597" ahí si despliega el Menú con sus estilos, fonts etc, pero no creo que sea lo correcto que solo se muestre el puerto nunca he visto algo así, siempre la primer vista es un index pero si tecleo "view-source:http://localhost:7597/Home/Index" (este index es el que tiene únicamente el "

    @{
          ViewBag.Title = "Home Page";
    }

    Aquí solo veo la estructura de mi _Layout.cshtml en una pagina en blanco sin ningún estilo y según entendí todas las vistas heredan de _Layout.cshtml por lo cual si _Layout tiene referenciados los estilos Index debería de mostrarse correctamente.

     No se si necesariamente los estilos deban de estar registrados en el Boundless....

    Gracias por tu ayuda. Estoy pensando crear un nuevo hilo con este tema en especifico.


    Saludos desde Monterrey, Nuevo León, México!!!


    lunes, 13 de julio de 2015 19:48
  • Hola,

    Pero si Index.cshtml solo tiene "ViewBag.Title = Home Page", ¿qué estilos son los que quieres ver?. Aquí hay mucho que ya no estoy entendiendo. Ambas formas acceden a Index, es decir, no colocando nada o colocando la ruta, ello lo tienes definido en Route.

    Creo que esto abría que verlo en vivo, te ofrezco ayudarte a revisar tu código, en caso lo desees puedes hacerme llegar tu cuenta de skype.


    lunes, 13 de julio de 2015 20:23
  • Hola:

     Con gusto, si gustas podemos tener una sesión a las 7:00 pm me parece que Perú tiene el mismo horario que México.

    live: joseluis.gab

    Me agregas y me avisas.

    Nota.

     Descubrí que los estilos solo se heredan si están declarado dentro del Bundle, puse ahi los estilos pero posiblemente ahora si uno me este reemplazando a otro puesto que los textos no se muestran correctamente.


    Saludos desde Monterrey, Nuevo León, México!!!



    lunes, 13 de julio de 2015 20:35
  • me salvaste willy muchas gracias :3
    miércoles, 19 de diciembre de 2018 16:37