Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • View Page

    Cargado por

    Luis Hernandez
    14 vistas10 páginas

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    14 vistas10 páginas

    View Page

    Cargado por

    Luis Hernandez

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 10

    Crear formatos de pginas con Ver pginas principales (C #)

    En Microsoft ASP.NET Equipo |16 de octubre 2008 DESCARGAR ACTIVOS: PDF En este tutorial, aprender a crear un diseo de pgina comn para mltiples pginas de la aplicacin mediante el aprovechamiento de las pginas maestras de vista. Puede utilizar una pgina maestra vista, por ejemplo, para definir un diseo de pgina de dos columnas y el uso del diseo de dos columnas para todas las pginas de la aplicacin web.

    Crear formatos de pginas con Ver pginas principales


    En este tutorial, aprender a crear un diseo de pgina comn para mltiples pginas de la aplicacin mediante el aprovechamiento de las pginas maestras de vista. Puede utilizar una pgina maestra vista, por ejemplo, para definir un diseo de pgina de dos columnas y el uso del diseo de dos columnas para todas las pginas de la aplicacin web. Tambin puede tomar ventaja de las pginas principales de visualizacin para compartir contenido comn a travs de mltiples pginas de la aplicacin. Por ejemplo, puede colocar el logotipo de su sitio web, enlaces de navegacin, y los anuncios de banner en una pgina maestra vista. De esta manera, cada pgina de la aplicacin sera mostrar este contenido de forma automtica. En este tutorial, aprender a crear una nueva pgina principal vista y crear una nueva pgina de contenido vista basado en la pgina principal.

    Creacin de una vista de pginas principales


    Vamos a empezar por la creacin de una pgina maestra vista que define un diseo de dos columnas. Para agregar una nueva pgina principal fin de un proyecto de MVC, haga clic en el carpeta Views \ Shared, seleccionando la opcin de men Agregar, Nuevo elemento y seleccionar la vista de pginas principales MVCplantilla (vase la figura 1).

    Figura 01 : Agregar una pgina maestra vista ( clic para ver la imagen en tamao completo ) Puede crear ms de una pgina maestra vista en una aplicacin. Cada pgina maestra vista puede definir un diseo de pgina diferente. Por ejemplo, es posible que desee ciertas pginas para tener un diseo de dos columnas y otras pginas de tener un diseo de tres columnas. Una pgina principal vista se parece mucho a una vista estndar ASP.NET MVC. Sin embargo, a diferencia de una vista normal, una pgina maestra vista contiene uno o ms <asp:contentplaceholder> etiquetas. Los<contentplaceholder> etiquetas se utilizan para marcar las reas de la pgina principal que se puede reemplazar en una pgina de contenido individual. Por ejemplo, la pgina principal vista en el Listado 1 define un diseo de dos columnas. Contiene dos<contentplaceholder> etiquetas. Una <ContentPlaceHolder> para cada columna. Listado 1 - Views \ Shared \ Site.master <% @ Master Language = "C #" AutoEventWireup = "true" CodeBehind = "Site.Master.cs" Inherits =% "MvcApplication1.Views.Shared.Main"> <DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN "

    <Estilo HTML {

    tipo = "text / css" >

    background-color : gris ; } .column { float:left; width:300px; border:solid 1px black; margin-right:10px; padding:5px; background-color:white; min-height : 500px ; } </ Style> <Asp: ContentPlaceHolder ID = "cabeza" </ asp: ContentPlaceHolder> </ head> <body> <h1> mi sitio web </ h1> <div class="column"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> <div class="column"> <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server"> </asp:ContentPlaceHolder> </div> </ Body> </ html> El cuerpo de la pgina principal vista en el Listado 1 contiene dos <div> etiquetas que corresponden a las dos columnas. La hoja de estilos en cascada clase columna se aplica a ambos <div> etiquetas. Esta clase se define en la hoja de estilos declarado en la parte superior de la pgina principal. Usted puede ver cmo se representar la pgina principal vista al cambiar a la vista Diseo. Haga clic en la ficha Diseo en la parte inferior izquierda del editor de cdigo fuente (ver Figura 2). runat = "server" >

    Figura 02 : Vista previa de una pgina maestra en el diseador ( Haga clic para ver la imagen en tamao completo )

    Crear una vista de Contenido


    Despus de crear una pgina maestra vista, puede crear una o ms pginas vistas de contenido basado en la pgina maestra vista. Por ejemplo, puede crear una pgina de contenido Vista de ndice para el controlador de Inicio, haga clic en la carpeta Vistas Inicio \, seleccionar Agregar, Nuevo elemento , la seleccin de la Vista Contenido MVC plantilla, introducir el nombre Index.aspx, y haciendo clic en el Add botn (vase la Figura 3).

    Figura 03 : Agregar una pgina de contenido vistas ( clic para ver la imagen en tamao completo ) Despus de hacer clic en el botn Agregar un nuevo dilogo que le permite seleccionar una pgina principal a fin de asociar a la pgina de contenido de vista (vase la Figura 4). Usted puede navegar a la pgina principal Site.master opinin de que hemos creado en la seccin anterior.

    Figura 04 : Seleccin de una pgina principal ( Haga clic para ver la imagen en tamao completo ) Despus de crear una nueva pgina de contenido vista basado en la pgina maestra Site.master, se obtiene el archivo en el Listado 2. Ficha 2 - Views \ Home \ Index.aspx <% @ Page Title = "" Language = "" MasterPageFile = "C # ~ / Views / Shared / Site.Master" AutoEventWireup = "true" CodeBehind = "Index.aspx.cs" Inherits = "MvcApplication1.Views.Home.Index "%> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> </asp:Content> <asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server"> </asp:Content> Tenga en cuenta que este punto de vista contiene un <asp:Content> etiqueta que corresponde a cada uno de los<asp:contentplaceholder> etiquetas en la pgina maestra vista. Cada <asp:Content> etiqueta incluye un atributo ContentPlaceHolderID que apunta a lo particular <asp:contentplaceholder> que prevalece. Ntese, adems, que la pgina de vista contenidos en el Listado 2 no contiene ninguna de las operaciones normales de apertura y cierre de las etiquetas HTML. Por ejemplo, que no contiene la apertura y cierre <html> o<head> etiquetas. Todas las etiquetas normales de apertura y cierre estn contenidos en la pgina maestra vista.

    Cualquier contenido que desea mostrar en una pgina de contenido de la vista debe ser colocado dentro de un<asp:Content> tag. Si coloca cualquier contenido HTML u otro fuera de estas etiquetas, por lo que recibir un error cuando intenta ver la pgina. No es necesario para anular todos los <asp:contentplaceholder> etiqueta de una pgina maestra en una pgina de vista de contenido. Slo tiene que anular un <asp:contentplaceholder> etiqueta cuando se quiere sustituir la etiqueta de contenido particular. Por ejemplo, la vista Index modificado en el Listado 3 contiene slo dos <asp:Content> etiquetas. Cada uno de los <asp:Content> etiquetas incluye algn texto. Listado 3 - Views \ Home \ Index.aspx (modificado) <% @ Page Title = "" Language = "" MasterPageFile = "C # ~ / Views / Shared / Site.Master" AutoEventWireup = "true" CodeBehind = "Index.aspx.cs" Inherits = "MvcApplication1.Views.Home.Index "%> <asp: Content ID = "Content2" ContentPlaceHolderID = "ContentPlaceHolder1" runat = "server" > <h1> contenido en la primera columna! </ h1> </ Asp: Content> <asp: Content ID = "Content3" runat = "server" >

    ContentPlaceHolderID = "ContentPlaceHolder2"

    <h1> contenido en la segunda columna! </ h1> </ Asp: Content>

    Cuando se solicita la vista en el Listado 3, se muestra la pgina en la Figura 5. Observe que la vista hace que una pgina con dos columnas. Ntese, adems, que el contenido de la pgina de contenidos vista se fusiona con el contenido de la pgina principal vista

    Figura 05 : El contenido de la pgina Vista de ndice ( Haga clic para ver la imagen en tamao completo )

    Modificar View Master pgina de contenido


    Un tema que se encuentra casi de inmediato cuando se trabaja con visin pginas maestras es el problema de modificar la vista Patrn contenido de la pgina cuando se solicitan diferentes vistas las pginas de contenido.Por ejemplo, desea que cada pgina de la aplicacin web para tener un ttulo nico. Sin embargo, el ttulo se declara en la pgina maestra vista y no en el contenido de la pgina vista. As que, cmo personalizar el ttulo de pgina de cada pgina de contenido visin? Hay dos maneras que usted puede modificar el ttulo que aparece en una pgina de contenido de la vista. En primer lugar, se puede asignar un ttulo de la pgina en el atributo ttulo del <% @ page%> directiva declar en la parte superior de una pgina de contenido de la vista. Por ejemplo, si desea asignar el ttulo de la pgina "Super Gran Sitio" a la vista de ndices, entonces se puede incluir la siguiente directiva en la parte superior de la vista de ndice: <% @ title page = lenguaje "Super Great Website" MasterPageFile = "C #" = "~ / Views / Shared / Site.Master" AutoEventWireup = "true" cdigo subyacente = "Index.aspx.cs" hereda = "MvcApplication1.Views.Home.Index"%> Cuando la vista de ndices se representa en el explorador, el ttulo deseado en la barra de ttulo del navegador:

    Hay un requisito importante que una pgina vista principal debe cumplir para que el atributo title para trabajar. La pgina principal de la vista debe contener una runat="server"> <head etiqueta en lugar de una normal de<head> etiqueta para su encabezado. Si el <head> etiqueta no incluye el atributo = "server" runat entonces no aparecer el ttulo. La pgina maestra vista predeterminada incluye la necesaria runat="server"> <head tag. Un enfoque alternativo a la modificacin principal contenido de la pgina desde una pgina de contenido visin individual es envolver la regin que desea modificar en un <asp:contentplaceholder> tag. Por ejemplo, imagine que desea cambiar no slo el ttulo, sino tambin los meta tags, dictada por una pgina de vista principal. La pgina de vista de master en el Listado 4 contiene una <asp:contentplaceholder> etiqueta dentro de su headtag. Listado 4 - Views \ Shared \ Site2.master <% @ Master Language = "C #" AutoEventWireup = "true" CodeBehind = "Site2.Master.cs" Inherits = "MvcApplication1.Views.Shared.Site2"%> <DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN "

    <Asp: ContentPlaceHolder ID = "cabeza" runat = "server" > <title> favor cambia mi ttulo </ title> <meta nombre = "description" content = "Por favor ingrese su

    <Asp: ContentPlaceHolder "server" >

    ID = "ContentPlaceHolder1"

    runat =

    </ Asp: ContentPlaceHolder> </ div> </ body> </ html> Observe que el <asp:contentplaceholder> tag en el Listado 4 incluye contenido predeterminado: a ttulo predeterminado y etiquetas meta predeterminada. Si no se reemplaza este <asp:contentplaceholder> etiqueta en una pgina de contenido vista individual, a continuacin, se mostrar el contenido predeterminado. La pgina de vista contenidos en el Listado 5 anula el <asp:contentplaceholder> tag con el fin de mostrar un ttulo personalizado y meta etiquetas personalizadas. Listado 5 - Views \ Home \ Index2.aspx <% @ Page Title = "" Language = "C #" MasterPageFile = "~ / Views/Shared/Site2.Master" AutoEventWireup = "true" CodeBehind = "Index2.aspx.cs" Inherits = "MvcApplication1.Views.Home.Index2 "%> <Asp: Content ID = "content1" ContentPlaceHolderID = "cabeza" runat = "server" > <title> El Index2 pgina </ title> <meta nombre = "description" content = "Descripcin de Index2

    Slo un poco de contenido en el cuerpo de la pgina. </ Asp: Content>

    Resumen
    Este tutorial proporciona una introduccin bsica para ver las pginas maestras y ver las pginas de contenido.Usted aprendi cmo crear nuevas pginas maestras ver y crear vistas las pginas de contenido basadas en ellos. Tambin se examin cmo se puede modificar el contenido de una pgina maestra vista desde una pgina de contenido particular visin.

    También podría gustarte