Translate this page now :



»Programação
»Programação.NET
»Banco de Dados
»Webdesign
»Office
» Certificações Microsoft 4
»Treinamentos4
»Programação 4
»Webdesign«
»Office & User Tips«
»Grupos de Usuários
»Células Acadêmicas«
intcontpiada : 118
Suporte Técnico
Você já está cadastrado e participa do grupo de usuários de sua cidade ? Se não, comente o porque.
 
 
Faça um pequeno teste com 10 questões de VB
.:.
Teste seus conhecimentos em Visual Basic, SQL Server e ASP 3.0 com nossas provas on-line
.:.
Aprimore seus conhecimentos em programação com nosso treinamento on-line de lógica de programação
.:.
Veja nosso calendário de treinamentos
Gostou da Página?
Então

para um amigo!
 





Por Dennes Torres
dennes@bufaloinfo.com.br
Dennes Torres possui as certificações MCAD, MCSD,MCSE, MCDBA e MCT. Atualmente atua Como diretor da Búfalo Informática, líder do grupo de usuários DevASPNet no Rio de Janeiro e membro da liderança dos grupos getWindows e devSQL, também do Rio de Janeiro, podendo sempre ser encontrado na lista de discussão do grupo DevASPNet (devaspnet-subscribe@yahoogrupos.com.br) bem como nas reuniões do grupo. Mantém dois blogs em http://cidadaocarioca.blogspot.com

Roteamento de URLs (URL Mapping)

Pesquisa personalizada
Pesquisar Dicas:






Requisitos

Visual Studio .NET 2010 Beta 2

Framework .NET 4.0 Beta 2

SQL Server 2000 ou superior

Banco de exemplo Northwind - baixe aqui

Observações

Pode ser utilizada a versão Beta 1, com pequena alteração no código de roteamento, conforme citado no artigo

Um formato muito frequente de desenvolvimento é termos uma página de listagem de informações com links para uma página com mais detalhes sobre as informações. Uma listagem de clientes, por exemplo, com links para mais detalhes sobre os clientes.

Porém os links para mais detalhes sobre os clientes seriam URLs tal como :

http://seusite/detalhes.aspx?cod=ALFKI

Onde ALFKI é o código do cliente.

O problema desta URL é que ela não é uma URL muito amigável em termos de SEO - Search Engine Optimization. As ferramentas de busca - e até mesmo os usuários - vêem como mais amigáveis uma URL como http://seusite/clientes/ALFKI

É óbvio que não podemos criar uma página para cada cliente ou algo assim, por isso a criação destas URLs é chamada de roteamento : a URL http://seusite/clientes/ALFKI é *roteada* para a URL http://seusite/detalhes.aspx, sendo que a página detalhes.aspx é capaz de recuperar as informações adicionais na URL, tal como o id do cliente.

O roteamento de URLs existe desde o framework 3.5, porém era muito complexo de ser realizado. No ASP.NET 4.0 novos recursos surgiram que tornaram o roteamento de URLs bem simples de ser realizado.

Vamos montar passo-a-passo um webSite utilizando os recursos de roteamento do ASP.NET 4.0

Criando o site e a página default.aspx

1) Crie um novo webSite chamado TesteRoteamento

2) Crie uma página chamada default.aspx

3) Insira um SQLDataSource na página

4) Configure o SQLDataSource para trazer a tabela customers, campos customerID, companyName, ContactName e Country do banco northwind em seu servidor SQL Server

5) Durante o Wizard, clique no botão advanced e marque a opção "Generate insert, update and delete"

6) Crie uma gridview, ligue com o SQLDataSource1, faça um auto-format e habilite na smarttag as opções de paging, sorting, editing e deleting

7) Clique em "Edit Columns" na smart tag da gridview

8) Mova o commandField para a última coluna

9) Crie um novo Hyperlink Field e posicione logo abaixo da coluna CompanyName

Vamos substituir a coluna companyname por um link no formato do roteamento para a página de detalhes

10) Configure as propriedades do HyperlinkField da seguinte forma :

Header Text : CompanyName

Sort Expression : CompanyName

DataNavigateURLField : CustomerID

DataNavigateURLFormatString : clientes/{0}

DataTextField : CompanyName

Nestas configurações não existe nada de fato diferente do que se faz normalmente com o Hyperlink Field na gridview, porém a DataNavigateURLFormatString irá gerar links no formato roteado que desejamos.

11) Apague a coluna companyName original, deixando o commandField

12) Faça um Ok nas configurações e faça um view in browser para ver o resultado

13) Repare na URL gerada, pela barra de status do browser

Criando a página Detalhes.aspx

1) Crie uma nova página chamada detalhes.aspx

2) Crie um SQLDataSource que traga a tabela customers, campos customerid, companyname, contactname e country

É claro que para uma página de detalhes a lógica seria trazer mais informações, mas isso é só um exemplo e como exemplo basta.

3) Clique no botão "Where" durante o wizard, após selecionar os campos

4) Em Column, selecione "CustomerID"

5) O operator aparecerá como "=", vamos deixar desta forma.

6) Abrindo a caixa source você descobrirá uma opção que não existia anteriormente : "Route". Escolha esta opção.

7) Em Route Key, vamos escrever "codigo".

É um nome que estamos inventando para representar o CustomerID na URL, mas na verdade não está sendo inventado neste ponto, ele será definido mais adiante neste passo-a-passo.

8) Clique em "Add" para adicionar o filtro

9) Complete o wizard e entre em source da página. Você poderá observar que a seguinte tag foi criada entre os parâmetros do DataSource :

<SelectParameters>
       <asp:RouteParameter Name="CustomerID" RouteKey="codigo" Type="String" />
</SelectParameters>

Com isso concluimos que temos um novo tipo de objeto Parameter que pode ser utilizado nos datasources.

10) Voltando ao design, inclua um detailsview, vincule-o com o SQLDataSource1 e faça um autoformat.

11) Apague a propriedade width do detailsview.

Teste Incompleto

Neste ponto temos a página de listagem com um link para o roteamento e a página de detalhes utilizando uma informação do roteamento como filtro. Porém não existe nada que ligue a URL nova com a página detalhes.aspx.

Testando o acesso ao link, receberá um erro 404 :

 

Completando o roteamento

1) Adicione um Global Application Class (global.asax)

O roteamento deve ser configurado no application_start

2) Adicione o seguinte import :

<%@ Import Namespace="System.Web.Routing" %>

3) Monte o application_Start da seguinte forma :

Visual Basic :

Sub Application_Start(ByVal sender As Object, ByVal e As EventArgs)

       RouteTable.Routes.MapPageRoute("clientes", "clientes/{codigo}", "~/detalhes.aspx")

End Sub


C# :

void Application_Start(object sender, EventArgs e) 
{
       RouteTable.Routes.MapPageRoute("clientes", "clientes/{codigo}","~/detalhes.aspx");
}

Observe que é nessa instrução - MapPageRoute - em que estamos criando o elemento código, indicando que se chamará "codigo" tudo que vir depois da "/" após "clientes"

Curiosidade : Esta síntaxe é nova na versão beta 2 do ASP.NET 4.0, na versão beta 1 a síntaxe era a seguinte :

Visual Basic :

RouteTable.Routes.Add("clientes",New Route("clientes/{codigo}",New PageRouteHandler("~/detalhes.aspx")))

 

C# :

RouteTable.Routes.Add("clientes", new Route("clientes/{codigo}",
               new PageRouteHandler("~/detalhes.aspx")));

4) Teste novamente a default.aspx e clique no link.

A página detalhes.aspx é executada, mas em momento algum a URL da página detalhes.aspx é exibida ao usuário, o que o usuário vê é a URL amigável do roteamento

Utilizando dados do Roteamento

O sistema de roteamento possui Expressions (ASP.NET Expressions, lembra delas ?) que permitem utilizar os dados do roteamento. Vejamos um exemplo.

1) Na página detalhes.aspx, acima do detailsview, insira um label

2) Ao lado do label escreva : "Cliente sendo exibido : "

3) Pelo source, altere o código do label para o seguinte :

<asp:Label ID="Label1" runat="server" Text="<% $RouteValue:codigo %>"></asp:Label>

4) Teste novamente a default.aspx e clique em um link.

Você poderá observar que a expression $RouteValue irá exibir o valor "codigo" contido na rota.


Uso Misto de Rotas

Vamos montar uma situação mais complexa na utilização de rotas.

1) Na default.aspx, no topo da página, insira um novo datasource, sqlDataSource2

2) Configure este datasource para trazer o campo country da tabela customers utilizando distinct (para que o país não se repita).

3) Insira uma dropdownlist (que ficará acima da gridview e do sqlDataSource1) e ligue ao sqlDataSource2 utilizando country como campo display e value.

4) Marque o autopostBack da dropdownlist

5) No sqlDataSource1 configure a filtragem pelo campo country utilizando a dropdownlist como parâmetro.

6) Teste a página

Fizemos uma filtragem por país, nada de especial nisso.

7) No Application_start do globa.asax adicione a seguinte rota :

Visual Basic :

RouteTable.Routes.MapPageRoute("Paises","paises/{pais}","~/default.aspx")

C# :

RouteTable.Routes.MapPageRoute("Paises","paises/{pais}","~/default.aspx");

Desta vez adicionamos a rota antes que ela esteja sendo utilizada em qualquer local.

8) No page_load do default.aspx, programe o seguinte :

Visual Basic :

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Me.IsPostBack Then
            If Not IsNothing(Me.RouteData.Values("pais")) Then
                DropDownList1.SelectedValue = Me.RouteData.Values("pais")
            End If
        End If
    End Sub

C# :

 

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            if (this.RouteData.Values["pais"]!=null)
            {
                DropDownList1.SelectedValue = this.RouteData.Values["pais"];
            }
        }
    }

 

Com isso a página default.aspx está pronta para caso o usuário resolva chamar a página diretamente pela rota ao invés de utilizar a combo. Ao mesmo tempo criamos atalhos diretos para os paises sem necessidade de passar pela combo.

9) Rode a página

10) Digite a url http://localhost:suaporta/seusite/paises/Brazil

Os clientes do Brasil serão exibidos


 



Envie seus comentrios sobre este artigo

Nome :

E-mail :

Comentários :


Avise-me quando houverem novos comentrios nesta pgina

Veja abaixo os comentários já enviados :

Nome : Gesmar de Paula Santos Júnior E-Mail : gesmarjunior@gmail.com
Muito interessante, ainda mais em tempos em que o SEO é cada vez mais necessário!
Esse Visual Studio 2010 e .Net Framework está realmente inovador nas novas funções.

Parabens pelo artigo!
Nome : Gesmar de Paula Santos Júnior E-Mail : gesmarjunior@gmail.com
Muito interessante, ainda mais em tempos em que o SEO é cada vez mais necessário!
Esse Visual Studio 2010 e o .Net Framework 4.0 estão realmente inovando nas novas funções.

Parabens pelo artigo!
Nome : André Cavalheiro E-Mail : andre_cavalheiro@msn.com
Muito bom, simples e prático,
mais uma prova que a Framework 4 veio com muitas novidades!!
parabens
Nome : 1 E-Mail : -1'
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : 1 E-Mail : 1
1
Nome : dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Dennes Torres de Oliveira E-Mail : dennes@bufaloinfo.com.br
teste
Nome : dennes E-Mail : dennes@bufaloinfo.com.br
testando
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Denes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : dennes E-Mail : dennes@bufaloinfo.com.br
Nome : dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Dennes Torres de Oliveira E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Dennes Torres de Oliveira E-Mail : dennes@bufaloinfo.com.br

teste
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : Dennes E-Mail : dennes@bufaloinfo.com.br
teste
Nome : dennes E-Mail : dennestorres@gmail.com
teste