ASP Imobiliaria 2007-2010

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:

ddlBairros

data source => name = dsBairros

SQL = SELECT [codBairro], [codMunicipio], [Bairro] FROM [Bairros] WHERE ([codMunicipio] = ?)

ddlNegocio

data source => name = dsNegocio

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

ddlCategorias

data source => name = dsCategorias

SQL = SELECT [Codigo], [Categoria] FROM [Categorias]

ddlQuartos

data source => name = dsQuartos

SQL = SELECT [Codigo], [Quantidade] FROM [Quartos]

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.SelectedValueDim codMun As Integer = ddlMunicipios.SelectedValueDim codBai As Integer = ddlBairros.SelectedValueDim codNeg As Integer = ddlNegocio.SelectedValueDim quartos As String = ddlQuartos.SelectedItem.TextDim codCat As Integer = ddlCategoria.SelectedValueDim nquartos As Integer = 0Dim url As StringIf 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=" & codBaiEnd If If Not quartos.Equals("TODOS") Then nquartos = ddlQuartos.SelectedIndex url = url & "&codQuarto=" & nquartosEnd 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


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 caractere

Descrição

C Exibe os valores numéricos em formato de Unidade Monetária.

D Exibe os valores numéricos em formato decimal.

E Exibe valores numéricos em formato científico (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 = FalseEnd IfEnd 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


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.


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


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 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:



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 - 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;


Na janela de configuração do assistente selecione AccessDataSource e e aceite o nome padrão AccessDataSource3 (ou informe um nome mais conveniente);



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:



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


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.


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


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;


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



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;

exibeFoto.aspx

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")

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)


Documents

ASP Imobiliaria 2007-2010