WebMatrix - Criando uma Loja Virtual - Procurando produtos e definindo erros - 4

Na  terceira parte deste artigo incluímos alguns recursos das redes sociais em nossa loja virtual e agora vamos definir a procura no catalogo de produtos de forma que o usuário possa localizar um produto desejado e definir as mensagens de erro que iremos exibir.

Criando uma página de busca para os produtos

Vamos incluir mais uma funcionalidade em nossa loja virtual : permitir que o usuário localize um produto no catálogo de produtos.

Para isso vamos criar uma página parcial contendo um formulário de busca o que iremos renderizar na página de leiaute. Quando o usuário preencher e submeter o formulário de busca ele será enviado para uma página separada que irá pesquisar o banco de dados e exibir os resultados encontrados.

Vamos começar adicionando o formulário de busca à página de leiaute. Inclua uma página chamada _Busca.cshtml na pasta \Shared\Partials e substitua o código gerado pelo código abaixo:

<form action="/Busca.cshtml" method="post">
@Html.TextBox("criterio")
<input type="Submit" value="Procurar" />
</form>

Esta página possui apenas um TextBox e um botão de comando Submit. O atributo do formulário é definido para postar os valores dos controles da nossa página de busca Busca.chstml.

Vamos agora incluir a página de busca em nossa página de leiaute. Abra o arquivo _Layout.cshtml e ajuste a div <header> incluindo o código abaixo:

<div id=”headerRight”>
     <div id="search">@RenderPage("~/Shared/Partials/_Busca.cshtml")</div>
</div>

Vamos também alterar o nosso arquivo de estilo. Abra o arquivo Style.css na pasta \CSS e inclua o código abaixo que posiciona o formulário de busca lado direito do cabeçalho da página:

#headerRight{
 float:right;
     margin-right: 20px;
}
#search {
  margin-top: 40px;
  text-align: right;
}

O resultado obtido após isso pode ser visto abaixo:

Vamos agora criar a página Busca.cshtml na raiz do site; esta página irá aceitar os dados postados pelo formulário de busca (_Busca.cshtml), consultar o banco de dados e exibir os resultados.

Clique com o botão direito sobre a raiz do site e selecione New File, selecione o template CSHTML e informe o nome Busca.cshtml;

A seguir substitua o código gerado pelo código abaixo:

@{
  Layout = "~/Shared/Layouts/_Layout.cshtml";
  Page.Title = "Resultados - Catálogo ";

  var db = Database.Open("TecnoSite");
  var buscarPalavras = Request["criterio"].Split(' ');

  IEnumerable<dynamic> resultado = Enumerable.Empty<string>();

  var sqlSelect = "SELECT produtoid, titulo FROM Produtos WHERE " +
                         "titulo LIKE @0 OR descricao LIKE @0 OR referencias LIKE @0";

  foreach(var palavra in buscarPalavras)
  {
     resultado = resultado.Concat(db.Query(sqlSelect, "%" + palavra + "%").ToList());
  }
}
<h1>Resultado da Busca</h1>
<p>@resultado.Count() produto(s) encontrado(s) para o critério : <em>@Request["criterio"]</em></p>
<ul id="buscaResultado">
@foreach (var item in resultado)
{
  <li>
  <a href="/ProdutoDetalhes/@item.produtoid">@item.titulo</a>
  </li>
}		 As 3 primeiras linhas definem o leiaute da página, o título e a abertura do
banco de dados TecnoSite;

A seguir obtemos o critério informado pelo usuário na caixa de texto do
formulário de busca separando-o em uma matriz de strings usando o caractere
de espaço como separador:
var buscarPalavras = Request["criterio"].Split(' ');

Para pesquisar por várias palavras no banco de dados, vamos realizar
uma consulta para cada palavra, e selecionar todas as linhas onde a palavra
corresponde ás colunas titulo, descricao ou referencias:
var sqlSelect = "SELECT produtoid, titulo FROM Produtos WHERE " +
                        "titulo LIKE @0 OR descricao LIKE @0 OR referencias LIKE @0";

Vamos concatenar todos os resultados da consulta SQL em uma variável resultado
do tipo IEnumerable<dynamic>:
IEnumerable<dynamic> resultado = Enumerable.Empty<string>();

Obs: Se não fizermos essa declaração ocorrerá um erro do tipo:
"use of unassigned local variable” ao usarmos o método de extensão : IEnumerable.Concat()

Em seguida vamos percorrer o resultado da matriz executando o SQL para cada palavra
da matriz e exibir todos os resultados combinados:
foreach(var palavra in buscarPalavras)
{
    resultado = resultado.Concat(db.Query(sqlSelect, "%" + palavra + "%").ToList());
}

A exibição é feita pelo código abaixo:
@foreach (var item in resultado)
{
  <li>
  <a href="/ProdutoDetalhes/@item.produtoid">@item.titulo</a>
  </li>
}

Ao executar o projeto e realizar uma busca iremos obter o seguinte resultado:

Observe que cada resultado da busca exibe o título do produto como link que o usuário pode usar para obter mais detalhes do produto.

Se você quiser pode melhorar a apresentação do resultado alterando o arquivo Style.css da pasta CSS do site incluindo o código a seguir:

/* resultado da busca
---------------------------------*/
#buscaResultado li {
   margin-top: 10px;
   font-size: 1.1em;
   list-style: none;
}
</ul>

Melhorando o tratamento de erros

Até o momento não definimos nenhum tratamento de erros em nosso site de forma que se ocorrer algum erro o usuário será apresentado a uma página de erro parecida com as das figuras abaixo:

Vamos melhorar a apresentação de erros ao usuário de forma que sejam exibidas páginas mais amigáveis.

Exibindo uma página de erro padrão

Vamos criar uma página na raiz do site com o nome Erro.cshtml que será usada como página de erro padrão.

Clique com o botão direito sobre a raiz do site e selecione New File, selecione o template CSHTML e informe o nome Erro.cshtml;

A seguir substitua o código gerado pelo código abaixo:

@{
Layout = "~/Shared/Layouts/_Layout.cshtml";
Page.Title = "ERRO";
}
<h1>ERRO</h1>
<p>
    Ocorreu um erro no processamento.
    Não foi possível processar sua requisição.
</p>
<p>
<br />Tente selecionar uma categoria no painel
      para visualizar detalhes dos produtos
</p>

As páginas de erros customizadas são configurados no arquivo web.config em uma site ASP .NET . Ate o momento não temos um arquivo Web.config no nosso site, vamos então incluir um arquivo web.config na pasta raiz do site.

Clique com o botão direito sobre a raiz do site e selecione New File, clique em Suggested e selecione o template Web.Config e aceitando o nome padrão e clicando em OK;

O arquivo Web.config é um arquivo baseado em XML que contém informações sobre a configuração de diversas opções disponíveis para sites ASP.NET.

Vamos incluir a linha de em azul abaixo que define o arquivo de erro padrão para o nosso site:

<?xml version="1.0"?>

<configuration>

    <system.web>
        <compilation debug="false" targetFramework="4.0" />
        <customErrors mode="On" defaultRedirect="/Erro"/>
    </system.web>

</configuration>
O atributo mode do elemento customErrors no Web.config pode conter um os seguintes valores:

On - Habilita a pagina de erro padrão
Off - desabilita a pagina de erro padrão
RemoteOnly - Especifica que os erros personalizados são mostrados somente para clientes remotos e
que os erros ASP .NET, com informações de depuração, são mostrados para o localhost.

O elemento customErrors que incluímos no arquivo web.config diz ao servidor para exibir a página especificada no valor do atributo defaultRedirect.

Para testar esta página, você precisa gerar um erro. Uma maneira de fazer isso é para informar um código de produto inválido na URLData: http://localhost:<porta>/ProdutoDetalhes/5h

O resultado obtido para este teste será a nossa página Erro.cshtml conforme figura abaixo:

Tratando o erro 404

A página de erro personalizada que implementamos irá mostrar a página de erro amigável ao usuário sempre que um erro é encontrado pelo servidor web ou ASP.NET. No entanto, se o o usuário tentar navegar para uma página que não existe, ele ainda vai receber a página de erro 404 padrão do IIS.

Vamos então ajustar o arquivo web.config para exibir uma página de erro personalizada para o erro 404. Para isso vamos incluir o código abaixo (destacado em azul) no arquivo web.config:

<?xml version="1.0"?>

<configuration>

    <system.web>
        <compilation debug="false" targetFramework="4.0" />
        <customErrors mode="RemoteOnly" defaultRedirect="/Erro"/>
    </system.web>

   <system.webServer>
      <httpErrors errorMode="Custom">
         <remove statusCode="404" subStatusCode="-1" />
         <error statusCode="404" subStatusCode="-1"
              prefixLanguageFilePath=""
              path="../Erro/404" responseMode="Redirect" />
       </httpErrors>
   </system.webServer>
   
</configuration>		 Estamos instruindo o IIS a redirecionar os erros 404 para a pagina ../Erro.cshtml
passando o valor 404 na URL.

Vamos agora alterar a página Erro.cshtml para exibir a página de erro personalizada para o erro 404 incluindo o seguinte código destacado em azul:

@{
Layout = "~/Shared/Layouts/_Layout.cshtml";

  var mensagem = UrlData[0] == "404" ? "Arquivo não encontrado" : "ERRO!";
  Page.Title = mensagem;

}

<h1>@mensagem</h1>

<p>
   <h3> Ocorreu um erro no processamento.
    Não foi possível processar sua requisição.
   </h3>
</p>
<p>
<br />
    <h3>
    Tente selecionar uma categoria no painel
    para visualizar detalhes dos produtos
    </h3>
</p>		 Estamos verificando o código passado na URL e se o parâmetro for igual a
a 404 então exibimos a mensagem Arquivo não Encontrado.

O resultado para o erro 404 mostrará a nossa página personalizada conforme figura a seguir:

Dessa forma definimos a busca de um produto na base de dados e o tratamento personalizado de erros em nosso web site.

Na continuação deste artigo irei abordar os tópicos relacionados com o processo de compra de produtos criando um carrinho de compras.

Aguarde a quarta parte do artigo: WebMatrix - Criando uma Loja Virtual - 5

Referências:

José Carlos Macoratti