ASP .

NET - Sistema para Imobiliária com Ajax - I

Neste artigo eu vou mostrar como criar um pequeno sistema web para imobiliária usando os
recursos do ASP .NET e do AJAX.

Vamos supor que você possui uma pequena imobiliária e pretende oferecer o serviço de
venda, compra e aluguel de imóveis na internet. Como atingir o seu objetivo sem gastar
um centavo e usando recursos gratuitos ?

Pois bem , este artigo vai mostrar que você pode conseguir o seu objetivo usando a
ferramenta para desenvolvimento Visual Web Developer Express Edition(VWD) sem
precisar ser um guru no assunto. Vou dar um enfoque básico para iniciantes e desta forma
não vou me ater à criação de documentos de requisitos, camada de acesso a dados,
camada de negócio , etc. A idéia é por um sistema para funcionar o mais rápido possível ,
depois veremos como podemos aperfeiçoar o tal sistema. Primeiro o arroz com feijão
depois o camarão...

Eis as ferramentas você deve ter instaladas no seu computador :

- Visual Web Developer 2008 Express Edition;

- Microsoft Access ou SQL Server 2005 Express;

Ao final dos artigos teremos um sistema para consulta de imóveis na web onde você poderá
expor os imóveis de sua carteira imobiliária aos seus clientes.

Para iniciar vou mostrar a página inicial do site da imobiliária que eu já criei no VWD. Eu
usei um template free para o leiaute do site e algumas imagens ilustrativas. O link para
pegar os templates é http://www.freecsstemplates.org/  se você não aprovar o template que
eu estou usando fique a vontade para escolher outro;
Na página principal o cliente pode realizar a busca por imóveis selecionando o Estado ,
Município , Bairro , tipo de negócio , tipo de imóvel e quantidade de quartos
disponíveis.

O resultado da busca é exibida em um GridView onde temos a referência do imóvel, o

código, o bairro o valor , a quantidade de garagens , a quantidade de quartos , a data de
atualização e um ícone indicando se o imóvel possui fotos.
Naturalmente em qualquer projeto de software a primeira etapa a ser bem definida é o
levantamento e definição de requisitos, mas como estamos tratando um sistema bem
simples vamos criar as tabelas de dados que o sistema vai precisar para armazenar as
informações. Para identificar as tabelas basta pensar um pouco no negócio que vamos
implementar.

Com isso em mente identificamos que o sistema vai precisar guardar informações relativas
a:

 Estados
 Municípios
 Bairros
 Tipos de negócio : Venda , Compra, Aluguel, etc.
 Tipos de imóvel : casa , apartamento , chácara, terreno , etc.
 Dados do imóvel : endereço, valor, garagens , estado , nome do proprietário ,
condições , etc.

Podemos então começar criando as tabelas : Estados, Municipios, Bairros, Negocio,

Categoria e Imoveis.

Obs: Você pode efetuar os ajustes que julgar necessário para adaptar o modelo a sua
realidade.
Mas qual banco de dados vamos usar ?

Bem , a princípio poderíamos usar qualquer banco de dados relacional mas eu vou usar o
Microsoft Access por questão de simplicidade e por que pretendo hospedar o sistema em
meu servidor web e eu não tenho uma conta com suporte ao SQL Server. Ficamos então
com o Access. ( O Firebrid ou MySQL seriam boas escolhas também).

Vamos criar um banco de dados chamado Imobiliaria.mdb e a seguir as tabelas abaixo:

Para saber mais como criar um banco de

dados veja os artigos do site:
 Criar banco de dados via Código -
Access , SQL Server
 Usando o Access para criar um
banco de dados e tabelas
 Data Manager - Criando Banco de
dados, tabelas

A seguir temos as tabelas criadas no Microsoft Access. (Você pode criar as tabelas também
no utilitário Visdata do VB6):
Não esqueça de incluir o banco de dados na pasta App_Data. Clique sobre a pasta e
selecione Add Existing Item e selecione o arquivo imobiliaria.mdb criado.

Preencha as tabelas com alguns dados apenas para poder usá-la na criação do nosso site
protótipo e exibir alguns dados, mais a frente iremos criar a área de administração do site
onde a manutenção destas tabelas poderá ser feita por você usando os recursos do sistema.

Abra o Visual Web Developer 2008 Express Edition e crie um novo web site com o nome
que você achar mais adequado, para o exemplo deste artigo eu vou usar o nome MacImob.

Para facilitar o desenvolvimento e dar um padrão visual ao site da imobiliária vamos usar o
recurso chamado Master Page que nada mais é do que criar um modelo de página que será
usado por todas as páginas do site.

Para saber mais sobre o assunto Master

Page veja os artigos:
 Usando Master Pages
 ASP - Navegação com Site Map ,
Menu , TreeView e Master Page
 Master Page - Extendo o conteúdo
para incluir dados de outras páginas

Veja abaixo o modelo da master page que iremos usar no site da imobiliária:
O template que eu estou usando pode ser obtido no site http://www.freecsstemplates.org/.
Se você não gostar do meu leiaute pode alterar e usar o seu próprio leiaute.

Criando a master Page

No menu Web Site selecione a opção Add New Item e a seguir selecione o template Master
Page e informe o nome Imob.master clicando em Add;
Vamos incluir o template na master page deixando somente o que for do nosso interesse e
em seguida vamos incluir cinco controles DropDownList a partir da ToolBox ; cada
controle será preenchido por um datasource que é a respectiva tabela com os dados a
serem exibidos, desta forma teremos:

 ddlEstados - exibe os estados da tabela Estados;

 ddlMunicipios - exibe os municípios cadastrados na tabela Municipios;
 ddlBairros - exibe os dados da tabela Bairros;
 ddlNegocio - exibe os tipos de negócios da tabela Negocio;
 ddlCategoria - exibe as categorias da tabela Categorias;
 ddlQuartos - exibe a quantidade de quartos cadastrados na tabela Quartos;

Para saber mais sobre o assunto

DropDownList veja os artigos:
 ASP.NET : Exibindo tabelas e
campos em um dropdownlist
 Usando DropDownList em
páginas ASP.NET

Devemos definir um datasource para cada um dos DropDownList e configurá-lo da forma

adequada. Fazemos isso começando pelo ddlEstados até o ddlQuartos;

A seguir vou mostrar como configurar o ddlEstados o procedimento é praticamente

idêntico para os demais controles.
 - Selecione o dropdownlist - ddlEstados ,selecione o
checkbox "Enable AutoPostBack", o qual submete a página
ao servidor assim que uma opção for selecionada;

- Em DropDownList Tasks clique em Choose Data Source;

- Em seguida selecione <Add new data source>

- Na janela do assistente selecione Access DataBase , pois

estamos usando um banco padrão Access, e informe o
nome dsEstados clicando em OK;

Na próxima janela informe a localização do banco de dados; Clique em Browse e selecione

o arquivo Imobiliaria.mdb na pasta App_Data clicando em Next>;
A seguir selecione a tabela Estados e marque os campos codEstado e nomeEstado e clique
em Next>;

Finalmente na janela Choose Data Source selecione o campo nomeEstado para ser exibido
no controle e codEstado para ser usado como valor da seleção;
Pronto já temos o ddlEstados pronto para exibir os estados cadastrados na tabela Estados.

O procedimento adotado para o controle ddlMunicipios é o mesmo só tem uma pequena

diferença: O controle ddlMunicipios deverá exibir somente os municípios do estado que foi
selecionado anteriormente, para configurá-lo para agir desta forma fazemos o seguinte:

Selecione o segundo dropdownlist -  ddlMunicipios - e repita os mesmos passos efetuados

para o primeiro:

- Em DropDownList Tasks e clique em Choose Data Source.../

- A seguir em Choose Data Source selecione <New data source...> e clique em OK;

- Na próxima janela do assistente marque a opção Access DataBase.  Informe o nome

dsMunicipios e clique em OK;

- Na janela Configure Data Source clique no botão Browse e selecione o banco de dados
Imobiliaria.mdb na pasta App_data;

- A seguir selecione a tabela Municipios e marque todos os campos; ( Agora preste

atenção ...)
- Clique no botão WHERE para montar uma condição de exibição de dados para o controle;
Na janela add WHERE Clause selecione o campo para o qual deseja criar a condição , no
nosso caso o campo codEstado;

Em seguida selecione de onde deverá sair o parâmetro para estipular a condição. No nosso
caso o parâmetro virá do primeiro controle dropdownlist - ddl1;

Em seguida clique no botão Add e em OK;

Veja a consulta SQL criada contendo a cláusula Where indicando que será selecionado os
campos da tabela Municipios onde o codEstado for igual ao valor selecionado no primeiro
dropdownlist;

Na última janela do assistente selecione para exibir o nome do município e o campo

codMunicipio para ser o valor do dropdownlist;

A  configuração dos demais controles repete o mesmo procedimento somente alterando o

nome do DataSource a instrução SQL e os nomes dos campos que serão exibidos. Veja a
seguir um resumo com as propriedades especificas para cada um dos dropdownlists:

data source => name = dsBairros

SQL = SELECT [codBairro], [codMunicipio],

[Bairro] FROM [Bairros] WHERE ([codMunicipio]
= ?)

ddlBairros
 data source => name = dsNegocio

SQL = SELECT [codigo], [negocio] FROM [Negocio]

ddlNegocio

 
data source => name = dsCategorias

SQL = SELECT [Codigo], [Categoria] FROM

[Categorias]

ddlCategoria
s

data source => name = dsQuartos

SQL = SELECT [Codigo], [Quantidade] FROM

[Quartos]

ddlQuartos

Já temos os controles DropDownList configurados irei mostrar a seguir o código

relacionado ao evento Click do botão OK e o código usado para efetuar a seleção padrão
de valores nos controles quando da carga do formulário.

Você pode ver o site funcionando em : http://www.macoratti.net/imob/ (somente a opção

padrão esta funcionando...)
Acompanhe a segunda parte do artigo em : ASP .NET - Sistema para Imobiliária com Ajax
- II

José Carlos Macoratti

ASP .NET - Sistema para Imobiliária com Ajax - II

Neste artigo eu vou continuar a  criar um pequeno sistema web para imobiliária usando os
recursos do ASP .NET e do AJAX.(Por enquanto sem Ajax...)

Você pode ver o site funcionando em : http://www.macoratti.net/imob/ (somente a opção

padrão esta funcionando...)

O fluxo das páginas que iremos mostrar pode ser visto no esquema abaixo:

Já definimos a master page conforme a figura abaixo:

Quando a página for carregada desejamos preencher os controles dropdownlist e exibir
alguns valores já selecionados , pois eu não preenchi a tabela com dados para todas as
opções , então vou deixar selecionada a opção padrão para que seja exibidos os dados
existentes.

Podemos usar o evento DataBound de cada um dos controles e pré-selecionar um valor que
será exibido na página. O código esta descrito abaixo:

Protected Sub ddlEstados_DataBound(ByVal sender As Object, ByVal e As

System.EventArgs) Handles ddlEstados.DataBound

    ddlEstados.Items.FindByValue("8").Selected = True

End Sub

Protected Sub ddlMunicipios_DataBound(ByVal sender As Object, ByVal e As

System.EventArgs) Handles ddlMunicipios.DataBound

    ddlMunicipios.Items.FindByValue("16").Selected = True

End Sub

Protected Sub ddlNegocio_DataBound(ByVal sender As Object, ByVal e As

System.EventArgs) Handles ddlNegocio.DataBound
    ddlNegocio.Items.FindByValue("1").Selected = True

End Sub

Protected Sub ddlCategoria_DataBound(ByVal sender As Object, ByVal e As

System.EventArgs) Handles ddlCategoria.DataBound

   ddlCategoria.Items.FindByValue("2").Selected = True

End Sub

Protected Sub ddlQuartos_DataBound(ByVal sender As Object, ByVal e As

System.EventArgs) Handles ddlQuartos.DataBound

   ddlQuartos.Items.FindByValue("7").Selected = True

End Sub

Nota: O código acima foi usado apenas para mostrar uma das maneiras de você selecionar
um valor padrão, mais a frente iremos removê-lo, pois desta forma a seleção de outro
estado irá gerar um erro.

Quando o usuário fizer a sua seleção e clicar no botão OK devermos montar a requisição
contendo os parâmetros referente a cada um dos itens dos controles dropdownlist, assim
temos que incluir o seguinte código no evento Click do botão de comando btnOK:

Protected Sub btnOK_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles

btnOK.Click
 
Dim codEst As Integer = ddlEstados.SelectedValue
Dim codMun As Integer = ddlMunicipios.SelectedValue
Dim codBai As Integer = ddlBairros.SelectedValue
Dim codNeg As Integer = ddlNegocio.SelectedValue
Dim quartos As String = ddlQuartos.SelectedItem.Text
Dim codCat As Integer = ddlCategoria.SelectedValue
Dim nquartos As Integer = 0
Dim url As String
If codEst = -1 Or codMun = -1 Or codBai = -1 Or codNeg = -1 Or codCat = -1 Then
      Response.Redirect("~/erro/erroGenerico.aspx")
Else
    url = "Imoveis.aspx?codEstado=" & codEst & "&codMunicipio=" & codMun &
"&codNegocio=" & codNeg & "&codCategoria=" & codCat & "&codBairro=" & codBai
End If
 
If Not quartos.Equals("TODOS") Then
    nquartos = ddlQuartos.SelectedIndex
    url = url & "&codQuarto=" & nquartos
End If
 
Response.Redirect(url)
End Sub

No código acima primeiro eu estou definindo variáveis para receber cada um dos valores
selecionados dos controles dropdowlist.
Se , por algum motivo ,  um dos dropdownlist chaves como o que exibe os estados,
municipios, bairros , o negócio e a categoria não apresentar nenhuma seleção então
redirecionamos para uma página de erro: Response.Redirect("~/erro/erroGenerico.aspx")

Nota: O tratamento de erros merecerá uma atenção mais detalhada mais adiante.

Em seguida montamos a url que conterá os parâmetros da requisição:

  url = "Imoveis.aspx?codEstado=" & codEst & "&codMunicipio=" & codMun & "&codNegocio=" & codNeg &
"&codCategoria=" & codCat & "&codBairro=" & codBai

Esta é a url que contém todos os parâmetros com exceção da seleção do número de
quartos.

Em seguida verificamos se NÃO foi selecionado a opção para TODOS os quartos; neste caso
teremos que incluir a quantidade de quartos selecionada na url;

     nquartos = ddlQuartos.SelectedIndex
     url = url & "&codQuarto=" & nquartos

Por último redirecionamos para a url : Response.Redirect(url)

Você deve estar se perguntando como eu sei quais os parâmetros que tenho que passar ?

Bem, para isso temos que criar primeiro a página imoveis.aspx que irá exibir o resultado
da seleção, e isto tem que ser planejado antes para que possamos definir os parâmetros
que vamos usar.

Mas antes vejamos a página Default.aspx que exibe as propagandas dos imóveis...

Eu vou usar um controle DataList para exibir as imagens das propagandas na página
Default.aspx.  Para isso temos que criar uma tabela chamada propaganda  com a seguinte
estrutura:
A seguir cadastre as imagens da propaganda que deseja exibir:

Agora inclua um novo item no web site no menu WebSite opção Add New Item;

Na janela Add New Item selecione o Template Web Form e informe o nome Default.aspx
marcando as opções : Place code in separate File e Select master page;

Agora a partir da ToolBox inclua um componente DataList na guia Data e selecionando o

componente DataList abra a DataList Tasks e em Choose Data Source selecione <New
data source>;
Na próxima janela selecione o objeto Access DataBase, aceite o nome padrão e clique em 
Next>;

Na próxima janela informe o caminho do banco de dados Access que estamos usando;

Finalmente selecione a tabela Propaganda e marque os campos Código e Local e clique em

Next> e Finish;
Agora temos que fazer um pequeno ajuste no DataList.. Selecione o controle e em  
DataList Tasks clique na opção Edit Templates;

Em ItemTemplate remova os campos incluído por padrão e inclua uma tabela com uma
linha e uma coluna e no seu interior inclua um controle Image a partir da ToolBox;

Clique no controle Image e em Edit DataBindings e a seguir defina a propriedade ImageUrl

vinculada ao campo Local conforme a figura abaixo;
Para encerrar clique em End Template Editing. Agora defina as seguinte propriedades para
o DataList na janela de propriedades (F4);

 RepeatColumns  = 3
 RepeatDirection = Vertical

Pronto, agora ao ser chamada , a página Default.aspx irá exibir as imagens cadastradas
conforme abaixo:
Poderíamos incluir no DataList , no ItemTemplate , um controle HiperLink para direcionar
o usuário para uma página de detalhes das propagandas.

Agora voltemos para  a página Imoveis.aspx que irá exibir a seleção do usuário.

Acompanhe a terceira parte do artigo em : ASP .NET - Sistema para Imobiliária com Ajax -
III  

José Carlos Macoratti

ASP .NET - Sistema para Imobiliária com Ajax - III

Neste artigo eu vou continuar a  criar um pequeno sistema web para imobiliária usando os
recursos do ASP .NET e do AJAX.(Por enquanto sem Ajax...)

Você pode ver o site funcionando em : http://www.macoratti.net/imob/ (somente a opção

padrão esta funcionando...por enquanto...)

O fluxo das páginas que iremos mostrar pode ser visto no esquema abaixo:

Obs: Lembrando que estamos seguindo o 'caminho feliz' usando os recursos básicos da
ASP .NET para por o site para funcionar o mais rápido possível.

Neste artigo vou mostrar como construir a página imoveis.aspx que pode ser vista na
imagem a seguir:
Esta página é responsável por exibir o resultado da seleção de imóveis feita pelo usuário na
página principal; na verdade , a pesquisa vai estar sempre disponível pois foi definida na
master page.

A página imoveis.aspx é chamada a quando o usuário clica no botão OK e  url que aciona a
página imoveis.aspx pode ter duas construções:

1 - O valor padrão onde serão exibidos imóveis com qualquer quantidade de quartos:

 "Imoveis.aspx?codEstado=" & codEst & "&codMunicipio=" & codMun & "&codNegocio=" & codNeg &
"&codCategoria=" & codCat & "&codBairro=" & codBai

2 - O valor definindo uma quantidade de quartos específica:

 "Imoveis.aspx?codEstado=" & codEst & "&codMunicipio=" & codMun & "&codNegocio=" & codNeg &
"&codCategoria=" & codCat & "&codBairro=" & codBai & "codQuarto=" & nquartos

Neste caso a página imóveis pode estar recebendo os seguintes parâmetros via url:

1. codEst - o código do estado

2. codMun - o código do Município
3. codNeg - o código do Negócio
4. codCategoria - o código da Categoria
 5. codBairro - o código do Bairro
6. codQuarto - a quantidade de quartos

Sendo que a o parâmetro codQuarto pode ser passado ou não, dependendo da opção que o 
usuário fez na pesquisa.

Dessa forma temos que criar duas fontes de dados que devem ser selecionadas de forma
dinâmicas, e, cada uma delas deverá esperar os parâmetros definidos.

Vamos então criar duas fontes de dados:

 dsImoveis - Para exibir todos os imóveis com uma quantidade de quartos

definida(usa o parâmetro codQuarto)
 dsImoveis2 - Para exibir todos os imóveis com qualquer quantidade de quartos (Não
usa o parâmetro codQuarto)

Criando a página de imóveis e a fonte de dados

Clique com o botão direito do mouse sobre o nome do projeto e selecione Add New Item,
selecionando a seguir o template Web Form e informando o nome Imoveis.aspx e clique
no botão Add; (Não esqueça de marcar as opções Place code in separate file e Select
Master Page);

Selecione a master page : Imob.Master e clique em OK;

A seguir inclua, a partir da ToolBox , guia Data , o componente GridView na página

imoveis.aspx e altere sua propriedade ID para gdvImoveis;

Selecione o componente gridview e abra a menu GridView Tasks; em Choose Data Source
selecione a opção <New DataSource..>;

Na janela de configuração do assistente selecione AccessDataSource e informe o nome

dsImoveis;

Na janela Choose DataBase informe o caminho e o nome do banco de dados: clique no

botão Browse e selecione o banco de dados Imobiliaria.mdb da pasta App_Data;
Na janela - Configure Select Statement - selecione a opção - Specify a custom  SQL
statement or stored procedure e clique em Next>;

Na próxima janela selecione a opção Query Builder, pois vamos criar a nossa instrução SQL
usando as tabelas Imoveis e Bairros conforme a figura abaixo:
Marque os campos da tabela Imoveis  e Bairros conforme indicado, e, para os parâmetros
que vamos receber devemos indicar na coluna Filter o sinal  =? que é o usado para o Access
para indicar um parâmetro; (No SQL Server a indicação é feita assim =@nomeparametro)

Você pode ver na parte inferior a instrução SQL ser montada. A instrução final é a seguinte:

SELECT Imoveis.codigo, Imoveis.codEstado, Imoveis.codMunicipio, Imoveis.codNegocio, Imoveis.codQuarto,

Imoveis.endereco, Imoveis.valor, Imoveis.codCategoria, Bairros.Bairro, Imoveis.garagem, Imoveis.atualizado,
Imoveis.foto, Imoveis.referencia FROM (Imoveis INNER JOIN Bairros ON Imoveis.codBairro = Bairros.codBairro)
WHERE (Imoveis.codEstado = ?) AND (Imoveis.codMunicipio = ?) AND (Imoveis.codBairro = ?) AND
(Imoveis.codNegocio = ?) AND (Imoveis.codQuarto = ?) AND (Imoveis.codCategoria = ?)

Agora temos que definir a origem e o nome  dos parâmetros que estamos esperando, clique
em Next> e na janela Define Parameters siga as seguintes etapas para realizar esta
definição:
1- Em Parameters selecione o parâmetro que deseja definir;

2- Na combobox Parameter Source informe : QueryString indicando que o parâmetro será

recebido via url;

3- Em QueryStringField informe o nome do parâmetro conforme definido;

4- Após repetir o processo para todos os parâmetros clique em Next> e a seguir clique em
Finish;

Pronto, já definimos o datasource dsImoveis. O processo para definir o datasource

dsImoveis2 é semelhante e não será mostrado.

Bem,  como temos dois datasource como sabemos qual devemos usar em tempo de
execução ?

Para fazer isso teremos que definir no evento Load da página imoveis.aspx o seguinte
código:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As

System.EventArgs) Handles Me.Load
 
If Request.QueryString("codQuarto") = "" Or
Request.QueryString("codQuarto") = Nothing Then
       gdvImoveis.DataSourceID = "dsImoveis2"
Else
      gdvImoveis.DataSourceID = "dsImoveis"
End If
 
End Sub

O código é bem simples, ele carrega o datasource verificando se estamos recebendo via url
o parâmetro codQuarto atribuindo de forma dinâmica o datasource a propriedade
DataSourceID do GridView.

Vamos agora mostrar alguns detalhes do GridView.

Selecione o controle e clique em Edit Columns;

Note que além dos campos definidos no datasource Imoveis temos um campo Detalhes que
é do tipo HyperlinkField.  Este campo irá ser visualizado como um link no GridView e
quando for clicado deve direcionar para uma outra página.

Para este campo definimos na aba Data as seguintes propriedades:

 DataNavigateUrlFields : Codigo
 DataNavigateUrlFormatString : ~/detImoveis.aspx?imov={0}
 DataTextField : referencia

A propriedade DataNavigateUrlFields define o nome do campo a partir da fonte de dados

usado para construir a URL para o hiperlink do objeto HyperlinkField, assim o campo
codigo será usado nesta construção;
A propriedade DataNavigateUrlFormatString defina a sequência de caracteres que
especifica o formato no qual as urls para os hiperlinks no objeto HyperlinkField são
processadas. O valor  ~/detImoveis.aspx?imov={0} indica que vamos chamar a página
detImoveis.aspx passando o parâmetro imov sendo que o valor {0} será substituído pelo
campo codigo conforme definido anteriormente.

Nota:  O formato {0} possui a seguinte

sintaxe : {A: Bxx}, onde Bxx indica a 
formatação usada que pode ter os
seguintes valores:
Formato de
Descrição
caractere
Exibe os valores numéricos em formato de Unidade
C
Monetária.
D Exibe os valores numéricos em formato decimal.
Exibe valores numéricos em formato científico
E
(exponencial).
F Exibe os valores numéricos no formato Fixo.
G Exibe valores numéricos em geral, formatar.
N Exibe os valores numéricos em formato de número.
X Exibe os valores numéricos

A propriedade DataTextField define o campo que será exibido no gridview.

O campo Foto foi definido como um TemplateField. Selecionando o GridView em GridView

Tasks clique em Edit Templates;

No itemTamplate incluímos um componente Image (ID=Image2) sem fazer nenhuma

definição de vinculação pois faremos isso via código;

Nosso objetivo é exibir na coluna Foto uma imagem indicando se existem ou não fotos para
o respectivo imóvel. Após definir o componente image no templateField Foto vamos usar o
evento RowDataBound do gridview para verificar se o imóvel possui ou não foto e assim
exibir uma imagem correspondente visto que temos duas imagens :

 sfoto.gif -> imagem usada para imóveis sem foto;

 cfoto.gif -> imagem usada para imóveis com foto;

A seguir o código associado ao evento RowDataBound para exibir as imagens conforme o

valor do campo Foto;

Nota: O evento RowDataBound ocorre quando uma linha de dados é vinculada aos
dados em um controle GridView;
Protected Sub gdvImoveis_RowDataBound(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.GridViewRowEventArgs) Handles gdvImoveis.RowDataBound
 
If e.Row.RowType = DataControlRowType.DataRow Then
     Dim img As Image = CType(e.Row.FindControl("image2"), Image)
       Dim ok As Integer = CType(e.Row.Cells(7).Text, Integer)
 
      Select Case ok
             Case 0
            img.ImageUrl = "~/images/sfoto.gif"
            img.Visible = True
         Case 1
          img.ImageUrl = "~/images/cfoto.gif"
          img.Visible = True
      End Select
 
     e.Row.Cells(8).ColumnSpan = 2
     e.Row.Cells(7).Visible = False
End If
End Sub

Neste código definimos a variável img como do tipo image obtendo o valor do controle
image2 definido no templateField;

Definimos a variável ok como sendo do tipo integer e com o valor do campo da coluna 7
que é o campo foto. O campo foto e do tipo Texto e possui os valores 0 para indicar sem
foto e 1 para indica com foto;

Verificamos o valor da variável ok que possui o valor do campo foto (coluna 7) e conforme
o valor atribuímos a imagem , que esta na pasta /images, a propriedade ImageUrl do
controle Image2;

Expandimos o campo 8 e ocultamos o campo foto (coluna 7) de forma a exibir somente a

imagem no GridView;

E com isso temos a nossa página imoveis.aspx perfeitamente funcional. A próxima etapa
será mostrar os detalhes dos imóveis na página detImoveis.aspx onde iremos exibir as
fotos e informações do imóvel selecionado.

Acompanhe a quarta parte do artigo em : ASP .NET - Sistema para Imobiliária com Ajax -
IV  

José Carlos Macoratti

ASP .NET - Sistema para Imobiliária com Ajax - IV

Continuando a criação do site da imobiliária irei mostrar como criar a página para exibir os
detalhes dos imóveis. Esta página irá exibir as fotos dos imóveis, informações sobre o
imóvel e informações sobre a imobiliária.

Você pode ver o site funcionando em : http://www.macoratti.net/imob/ (somente a opção

padrão esta funcionando...por enquanto...)

O fluxo das páginas do site da imobiliária pode ser visto no esquema abaixo:

Obs: Lembrando que estamos seguindo o 'caminho feliz' usando os recursos básicos da
ASP .NET para por o site para funcionar o mais rápido possível.

A página detImoveis.aspx possui o leiaute exibido na figura abaixo:

A página possui os controles : Label, DataList e FormView que serão usados para exibir as
informações. (Existem outras formas de se obter o mesmo resultado)

Esta página é chamada quando o usuário seleciona um imóvel na página Imoveis.aspx,

clicando no link da referência do imóvel. Isto é possível porque definimos no controle
GridView da página Imoveis.aspx o campo Detalhes como um campo do tipo
HyperlinkField definido da seguinte forma:
Note que além dos campos definidos no datasource Imoveis temos um campo Detalhes que
é do tipo HyperlinkField.  Este campo irá ser visualizado como um link no GridView e
quando for clicado deve direcionar para uma outra página.

Para este campo definimos na aba Data as seguintes propriedades:

 DataNavigateUrlFields : Codigo
 DataNavigateUrlFormatString : ~/detImoveis.aspx?imov={0}
 DataTextField : referencia

A propriedade DataNavigateUrlFields define o nome do campo a partir da fonte de dados

usado para construir a URL para o hiperlink do objeto HyperlinkField, assim o campo
codigo será usado nesta construção;

A propriedade DataNavigateUrlFormatString defina a sequência de caracteres que

especifica o formato no qual as urls para os hiperlinks no objeto HyperlinkField são
processadas. O valor  ~/detImoveis.aspx?imov={0} indica que vamos chamar a página
detImoveis.aspx passando o parâmetro imov sendo que o valor {0} será substituído pelo
campo codigo conforme definido anteriormente.

Criando a página de detalhes do Imóvel

Para criar a página detImoveis.aspx clique no menu WebSite e selecione Add New Item,
e, em Templates selecione Web Form, informando o nome detImoveis.aspx, tendo o
cuidado de marcar as opções Place code in separate file e Select Master Page, e clique no
botão Add;
Na sequência selecione a master page : Imob.Master e clique em OK;

A seguir inclua um componente DataList que iremos usar para exibir as imagens dos
imóveis na página definindo para o controle as seguintes propriedades :

 RepeatDirection = Horizontal;
 RepeatColumns = 2

Selecione o componente DataList e abra a menu DataList Tasks; em Choose Data Source
selecione a opção <New DataSource..>;

Na janela de configuração do assistente selecione AccessDataSource e aceite o nome

padrão AccessDataSource1 (ou informe um nome mais conveniente);

Na janela Choose DataBase informe o caminho e o nome do banco de dados: clique no

botão Browse e selecione o banco de dados Imobiliaria.mdb da pasta App_Data;

Na janela - Configure Select Statement - selecione a opção - Specify a custom  SQL

statement or stored procedure e clique em Next>;

Na próxima janela selecione a opção Query Builder, pois vamos criar a nossa instrução SQL
usando a tabela Fotos conforme a figura abaixo:
Clique em OK e você verá na janela do existente o resultado do SQL montado. Clique em
Next>;
Na janela Define Parameters vamos definir a origem e o nome dos parâmetros que
estamos esperando. A definição deve ser feita conforme a figura abaixo:

1- Em Parameters
selecione o
parâmetro que
deseja definir;

2- Na combobox
Parameter Source
informe :
QueryString
indicando que o
parâmetro será
recebido via url;

3- Em
QueryStringField
informe o nome do
parâmetro conforme
definido;
 4- A seguir clique
em Next> e a seguir
clique em Finish;

Com isso já temos o DataList configurado para exibir as fotos dos imóveis a partir da tabela
Fotos. Lembrando que na tabela estamos armazenando somente o caminho e nome da
foto. Esta estratégia tem a vantagem de ser mais simples e de guardar menos informações
no banco de dados mas tem como desvantagem o fato que você tem que gerenciar as
imagens. Dependendo da situação e para um banco de dados SQL Server o recomendável
seria armazenar a imagem no banco de dados.

Exibindo os dados da imobiliária

Para exibir os dados da imobiliária inclua, a partir da ToolBox,, guia Data ,  um
componente FormView;

Acima do componente FormView inclua um componente Label e defina sua propriedade

Text como Imobiliaria;

Selecione o componente FormView e abra a menu FormView Tasks; em Choose Data

Source selecione a opção <New DataSource..>;

Na janela de configuração do assistente selecione AccessDataSource e  e aceite o nome

padrão AccessDataSource2 (ou informe um nome mais conveniente);

Na janela Choose DataBase informe o caminho e o nome do banco de dados: clique no

botão Browse e selecione o banco de dados Imobiliaria.mdb da pasta App_Data;

Na janela - Configure Select Statement - selecione a opção - Specify Columns from a

table view e selecione a tabela Imobiliarias marcando os campos que deseja obter ,  e
clique em Next>;
A seguir clique em Next> e a seguir clique em Finish;

Exibindo os dados do Imóvel

Para exibir os detalhes do imóvel inclua, a partir da ToolBox,, guia Data ,  um componente
FormView;

Acima do componente FormView inclua um componente Label e defina sua propriedade

Text como Imobiliária;

Selecione o componente FormView e abra a menu FormView Tasks; em Choose Data

Source selecione a opção <New DataSource..>;

Na janela de configuração do assistente selecione AccessDataSource e  e aceite o nome

padrão AccessDataSource3 (ou informe um nome mais conveniente);

Na janela Choose DataBase informe o caminho e o nome do banco de dados: clique no

botão Browse e selecione o banco de dados Imobiliaria.mdb da pasta App_Data;

Na janela - Configure Select Statement - selecione a opção - Specify a custom  SQL

statement or stored procedure e clique em Next>;

Na próxima janela selecione a opção Query Builder, pois vamos criar a nossa instrução SQL
usando a tabela Imoveis  conforme a figura abaixo:
Na janela Define Parameters vamos definir a origem e o nome dos parâmetros que
estamos esperando. A definição deve ser feita conforme a figura abaixo:

1- Em Parameters
selecione o parâmetro
que deseja definir;

2- Na combobox
Parameter Source
informe : QueryString
indicando que o
parâmetro será
recebido via url;

3- Em
QueryStringField
informe o nome do
parâmetro conforme
definido;

4- A seguir clique em
Next> e a seguir clique
 em Finish;

A seguir clique em Next> e a seguir clique em Finish;

A seguir selecione o controle e clique em Edit Templates para fazer os ajustes nos
campos :

- Inclua o Texto Ref: na frente

da Label referenciaLabeI0;

- Inclua o texto atualizado: na

frente da Label
atualizadoLabel

- Em ItemTemplate inclua um
controle TextBox e defina sua
propriedade Multiline igual a
True;

- Selecione o controle TextBox

e clique em Edit
DataBindings;

- Defina sua propriedade Text

como : Bind("descrição")

Encerre a edição e pronto já temos a página detImoveis.aspx pronta para exibir todas as
informações que desejamos.
A próxima etapa será mostrar uma imagem em tamanho maior(zoom) da imagem
selecionada pelo cliente na página detImoveis.aspx.

Acompanhe a quinta parte do artigo em : ASP.NET -Sistema para Imobiliária com Ajax -
V  

José Carlos Macoratti

ASP .NET - Sistema para Imobiliária com Ajax - V

Continuando a criação do site da imobiliária irei mostrar como criar a página para exibir os
detalhes dos imóveis. Esta página irá exibir uma foto ampliada a partir de uma seleção
feita pelo usuário na página de fotos do imóvel - detImoveix.aspx.

Você pode ver o site funcionando em : http://www.macoratti.net/imob/ (somente a opção

padrão esta funcionando...por enquanto...)

O fluxo das páginas do site da imobiliária pode ser visto no esquema abaixo:
Obs: Lembrando que estamos seguindo o 'caminho feliz' usando os recursos básicos da
ASP .NET para por o site para funcionar o mais rápido possível.

Qual o nosso objetivo ?

Na página detImoveix.aspx temos exibidas as fotos cadastradas dos imóveis , correto ?

Vamos fazer com que ao escolher uma foto e clicar sobre ela a mesma seja aberta em
outra janela ampliada.

No artigo anterior eu mostrei como criar a página detImoveis.aspx para exibir as fotos dos
imóveis. Usamos um controle DataList para isso.

Apenas para recordar página detImoveis.aspx possui o leiaute exibido na figura abaixo:
A página possui os controles : Label, DataList e FormView que serão usados para exibir as
informações. (Existem outras formas de se obter o mesmo resultado)

Temos então que chamar a página exibeFoto.aspx passando o código da foto que
desejamos abrir. Uma maneira bem simples de fazer isso é incluir no código da página
detImoveis.aspx um comando <a href></a> envolvendo a imagem do imóvel que esta no
itemTemplate.

Veja abaixo um trecho de código onde eu estou destacando o código que efetua esta
tarefa:

.......
<asp:DataList ID="DataList1" runat="server" DataKeyField="Código" 
DataSourceID="AccessDataSource1"  RepeatDirection="Horizontal" Width="100%"
Height="100%" RepeatColumns="2">
<ItemTemplate>
    <table class="style5">
           <tr><td>
              <a href='exibeFoto.aspx?fotoID=<%# Eval("código")%>'
target="_blank">
                      <asp:Image ID="Image2" runat="server" Height="160px"
ImageUrl='<%# Eval("Foto") %>' Width="160px" />
              </a>
           </td></tr>
     </table>
     <asp:Label ID="Label3" runat="server" Text='<%# Eval("descricao") %>' />
    <br /><br />
</ItemTemplate>
</asp:DataList>
..........

Ao usar o código abaixo :

  <a href='exibeFoto.aspx?fotoID=<%# Eval("código")%>' target="_blank">

Quando o usuário clicar na foto a página exibeFoto.aspx será chamada e o parâmetro

fotoID contendo o código da foto selecionada será montado junto com a URL.

Vamos então preparar a página exibeFoto.aspx para receber este parâmetro e exibir a
foto. Vejamos como criar a página e definir os seus detalhes.

Criando a página para exibir a foto ampliada

Clique com o botão direito do mouse sobre o nome do projeto e selecione ao opção Add
New Item;

Clique com o botão direito do mouse sobre o nome do projeto e selecione Add New Item,
selecionando a seguir o template Web Form e informando o nome Imoveis.aspx e clique
no botão Add; (Não esqueça de marcar a opção Place code in separate file). Nota: Não
vamos marcar a opção Select Master Page;

A seguir inclua, a partir da ToolBox , guia Data , o componente FormView na página

exibeFoto.aspx e aceite o nome na sua propriedade ID para FormView1;

Selecione o componente FormView e abra a menu FormView Tasks; em Choose Data

Source selecione a opção <New DataSource..>;

Na janela de configuração do assistente selecione AccessDataSource e aceite o nome

AccessDataSource1;

Na janela Choose DataBase informe o caminho e o nome do banco de dados: clique no

botão Browse e selecione o banco de dados Imobiliaria.mdb da pasta App_Data;
Na janela - Configure Select Statement - selecione a opção - Specify a custom  SQL
statement or stored procedure e clique em Next>;

Defina seguinte instrução SQL : SELECT Código, Foto, codImovel FROM Fotos
WHERE (Código=?)

Você pode usar o Query Builder ou digitar diretamente a instrução.

Esta instrução irá selecionar a foto da tabela Fotos para um determinado código.

Clique em Next> e defina a fonte do parâmetro como QueryString e defina o nome fotoID
para o mesmo; desta forma o parâmetro deverá vir de outra página e terá o nome igual a
fotoID;

Pois é exatamente isso que será passado para a página exibeFoto.aspx quando o usuário
clicar em uma imagem na página detImoveis.aspx. Lembre-se que definimos uma
referência igual a:  <a href='exibeFoto.aspx?fotoID=<%# Eval("código")%>'
target="_blank">

Então só falta preparar a página exibeFoto.aspx para exibir a foto ampliada.

Selecione o componente FormView e abra a menu FormView Tasks e clique em Edit

Templates;

Agora em ItemTemplate inclua uma tabela com duas linhas e na primeira linha inclua um
componente Image alterando o seu tamanho conforme a figura abaixo;

Na segunda linha inclua um controle Hyperlink com Text igual a Retornar;

 Clique no controle Image e
selecione EditDataBinding;

A seguir selecione ImageUrl e

defina a expressão Eval("Foto")

Selecione o controle Hyperlink e

clique em DataBindings;

A seguir selecione NavigateUrl e

defina a expressão:
 "~/detImoveis.aspx?imov=" &
Eval("codImovel")

exibeFoto.aspx

Com isso já podemos exibir a foto ampliada e retornar para página detImoveis.aspx.

Abaixo vemos o resultado da exibição de uma imagem exibida na página:

As imagens que eu usei não possuem uma resolução boa pois foram escolhidas apenas para
testar a funcionalidade.

Com isso concluímos a primeira parte da nossa Imobiliária virtual usando o caminho feliz ,
com rapidez e digitando pouco código apenas usando os controles e assistente do Visual
Web Developer 2008 Express Edition.

Não gastamos um centavo e temos um site funcional que pode até ser usado por uma
pequena imobiliária.

A segunda fase será mostrar a área de administração da imobiliária onde irei criar as
páginas para cadastrar os imóveis, as fotos , os bairros, as cidades , enfim, os dados
necessários para por a imobiliária para funcionar.

Aguarde o próximo artigo : ASP .NET - Sistema para Imobiliária com Ajax VI (ainda inativo)

José Carlos Macoratti