none
Organizar pagina aspx RRS feed

  • Pergunta

  • Uso VS2010, aspnet4, c#

    Estou com uma dúvida sobre a organização do html na pagina aspx, as páginas da minha aplicação está como abaixo, essa é a forma correta levando em consideração a performance e boas práticas? Gostaria da opinião de voces especialistas.

    ------------------------------------- pagina aspx----------------------------------------------

    <%@ Page Title="" Language="C#" MasterPageFile="~/MenuSite.master" AutoEventWireup="true" CodeFile="ListarUsuario.aspx.cs" Inherits="Modulo_ListarUsuario" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">

    <script src="Script/js/jquery-1.8.3.js" type="text/javascript"></script> 

    <script type="text/javascript">   .  .  .   </script>

    <style type="text/css">  .  .  .   </style>

    </asp:Content>

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">

    <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      .   .   .  HTML...

      </asp:UpdatePanel>

     </asp:Content>


    Álvaro Luiz


    • Editado Álvaro Luiz quinta-feira, 9 de abril de 2015 23:21
    quinta-feira, 9 de abril de 2015 23:20

Respostas

  • Segue um exemplo de como trabalho:

    MasterPage

    <!DOCTYPE html>
    
    <html lang="pt-br">
    <head runat="server">
        <title>Projeto X</title>
    
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
        <link href="css/padrao.css" rel="stylesheet" />
        <script src='<%# Page.ResolveClientUrl("~/Scripts/jquery-1.11.1.min.js") %>' type="text/javascript"></script>
        <script></script>
        <asp:ContentPlaceHolder ID="headPrincipal" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="frmPrincipal" runat="server" enctype="multipart/form-data">
            <asp:ScriptManager ID="smrPrincipal" runat="server" AsyncPostBackTimeout="3600"></asp:ScriptManager>
        </form>
    </body>
    </html>
    
    Aspx:
    
    <%@ Page Title="" Language="C#" MasterPageFile="~/MspPrincipal.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="headPrincipal" runat="server">
        <script type="text/javascript">
        </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="cphPrincipal" runat="server">
        <asp:UpdatePanel ID="pnlPagina" runat="server" class="container">
            <ContentTemplate>
            </ContentTemplate>
        </asp:UpdatePanel>
    </asp:Content>

    • Marcado como Resposta Álvaro Luiz sexta-feira, 10 de abril de 2015 10:40
    quinta-feira, 9 de abril de 2015 23:34
  • Aspx:

    <%@ Page Title="" Language="C#" MasterPageFile="~/MspPrincipal.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="headPrincipal" runat="server">
        <script type="text/javascript">
        </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="cphPrincipal" runat="server">
        <asp:UpdatePanel ID="pnlPagina" runat="server" class="container">
            <ContentTemplate>
            </ContentTemplate>
        </asp:UpdatePanel>
    </asp:Content>

    • Marcado como Resposta Álvaro Luiz sexta-feira, 10 de abril de 2015 10:40
    quinta-feira, 9 de abril de 2015 23:34
  • Aspx.cs:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    
    namespace Web
    {
        public partial class Default : Page
        {
            protected override void OnLoad(EventArgs e)
            {
                base.OnLoad(e);
                Page.Header.DataBind();
            }
            protected void Page_Load(object sender, EventArgs e)
            {
            }
        }
    }
    O método Page.Header.DataBind() dentro do OnLoad, vai ajudar a carregar os arquivos *.js de forma correta.

    • Marcado como Resposta Álvaro Luiz sexta-feira, 10 de abril de 2015 10:40
    quinta-feira, 9 de abril de 2015 23:35
  • Álvaro, pode sim. Sem problemas.
    • Marcado como Resposta Álvaro Luiz sexta-feira, 10 de abril de 2015 11:41
    sexta-feira, 10 de abril de 2015 11:21

Todas as Respostas

  • Segue um exemplo de como trabalho:

    MasterPage

    <!DOCTYPE html>
    
    <html lang="pt-br">
    <head runat="server">
        <title>Projeto X</title>
    
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
        <link href="css/padrao.css" rel="stylesheet" />
        <script src='<%# Page.ResolveClientUrl("~/Scripts/jquery-1.11.1.min.js") %>' type="text/javascript"></script>
        <script></script>
        <asp:ContentPlaceHolder ID="headPrincipal" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="frmPrincipal" runat="server" enctype="multipart/form-data">
            <asp:ScriptManager ID="smrPrincipal" runat="server" AsyncPostBackTimeout="3600"></asp:ScriptManager>
        </form>
    </body>
    </html>
    
    Aspx:
    
    <%@ Page Title="" Language="C#" MasterPageFile="~/MspPrincipal.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="headPrincipal" runat="server">
        <script type="text/javascript">
        </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="cphPrincipal" runat="server">
        <asp:UpdatePanel ID="pnlPagina" runat="server" class="container">
            <ContentTemplate>
            </ContentTemplate>
        </asp:UpdatePanel>
    </asp:Content>

    • Marcado como Resposta Álvaro Luiz sexta-feira, 10 de abril de 2015 10:40
    quinta-feira, 9 de abril de 2015 23:34
  • Aspx:

    <%@ Page Title="" Language="C#" MasterPageFile="~/MspPrincipal.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="headPrincipal" runat="server">
        <script type="text/javascript">
        </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="cphPrincipal" runat="server">
        <asp:UpdatePanel ID="pnlPagina" runat="server" class="container">
            <ContentTemplate>
            </ContentTemplate>
        </asp:UpdatePanel>
    </asp:Content>

    • Marcado como Resposta Álvaro Luiz sexta-feira, 10 de abril de 2015 10:40
    quinta-feira, 9 de abril de 2015 23:34
  • Aspx.cs:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    
    namespace Web
    {
        public partial class Default : Page
        {
            protected override void OnLoad(EventArgs e)
            {
                base.OnLoad(e);
                Page.Header.DataBind();
            }
            protected void Page_Load(object sender, EventArgs e)
            {
            }
        }
    }
    O método Page.Header.DataBind() dentro do OnLoad, vai ajudar a carregar os arquivos *.js de forma correta.

    • Marcado como Resposta Álvaro Luiz sexta-feira, 10 de abril de 2015 10:40
    quinta-feira, 9 de abril de 2015 23:35
  • Olá Alexandre,

    Acho que estou no caminho certo pelo menos no aspx. Mas este método Page.Header.DataBind() dentro do OnLoad, no seu Code Behind ele ajuda no carregamento dos arquivos *.js, os imports no lado cliente, isto é, no aspx, é isso mesmo? 


    Álvaro Luiz


    • Editado Álvaro Luiz quinta-feira, 9 de abril de 2015 23:54
    quinta-feira, 9 de abril de 2015 23:54
  • Isso.
    Se você observar o aspx da master page, uso o Page.ResolveClientUrl para mapear os arquivos js.
    O Page.Header.DataBind() resolve esses links.
    Dessa forma, você não precisa se preocupar com a hierarquia deles de acordo com o caminho das suas páginas.
    Outro ponto importante, ao meu ver, é você utilizar o updatepanel dentro de cada página, pois já me deparei com alguns conflitos de js por ter deixado um único updatepanel na masterpage. 

    sexta-feira, 10 de abril de 2015 00:27
  • Alexendre, 

    todas as minhas páginas que tem a masterpage, usam os scripts abaixo em comum.

    <link href="../../../Styles/Site.css" rel="stylesheet" type="text/css" />
    <script src="../../../Script/js/development-bundle/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="../../../Script/js/js/jquery-ui.js" type="text/javascript"></script>

    Posso remover esse scripts das páginas e colocá-los na masterpage, com a dica que voce passou?


    Álvaro Luiz


    Álvaro Luiz

    sexta-feira, 10 de abril de 2015 11:19
  • Álvaro, pode sim. Sem problemas.
    • Marcado como Resposta Álvaro Luiz sexta-feira, 10 de abril de 2015 11:41
    sexta-feira, 10 de abril de 2015 11:21
  • Alexandre, aproveitando o embalo mais uma dúvida,

    Tenho algumas páginas que abro dentro de um jQuery Dialog, estas não importam nenhum menu, mas todas usam o mesmo script:

    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <script src="~/Script/js/development-bundle/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="~/Script/js/js/jquery-ui.js" type="text/javascript"></script>

    Como faço para referenciar sem precisar declarar em cada uma página os 3 scripts? Tem como?


    Álvaro Luiz

    sexta-feira, 10 de abril de 2015 13:05
  • Estas páginas estão dentro da masterpage, ou são páginas "independentes"?
    sexta-feira, 10 de abril de 2015 13:41
  • são independentes

    Álvaro Luiz

    sexta-feira, 10 de abril de 2015 14:04
  • Então você tem que colocar as referências sim. Em cada página.
    sexta-feira, 10 de abril de 2015 14:05