Criando um ASP.NET MVC Web Application

Postado por Carlos Fernando Sylverio | Postado em Programação, Tecnologia | Postado em 04-04-2010

0

No post ASP.Net MVC fiz uma introdução as caracteristicas desse novo tipo de projeto web. Neste post vou apresentar um pouco mais sobre esse projeto, sua estrutura, comportamento.
Para isso é necessário instalar o ASP.NET MVC. Após a instalação o Visual Studio 2008 apresentará um novo tipo de projeto Web, chamado ASP.NET MVC Web Application.

New Project ASP.NET MVC Web Application

Ao criar um projeto do tipo ASP.NET MVC Web Application uma aplicação de demonstração (padrão) é apresentada na Solution Explorer.

O ASP.NET MVC a primeira vista parece ser bem complicado, mas apartir do momento que se conhece melhor a sua estrutura e seu funcionamento, ele passa a ser bem simples.

Estrutura do ASP.NET MVC Web Application

Primeiramente vamos nos atentarmos a estrutura, pois ela contem diversas convensões que devem ser utilizadas pelo ASP.NET MVC.
Solution Explorer MVC Web Application
Repare nos diretórios, obrigatóriamente teremos o Controller, Model e View.
Outra convensão é para as classes controladoras (contidas no diretório Controller), devem possuir o sufixo Controller em seus nomes e um sub-diretório no diretorio View. Confuso? Repare na Solution o diretorio Controller, note que possui duas classes controladoras Account e Home ambas com o sufixo Controller. Agora veja o diretório View, ele possui dois sub-diretórios com o mesmo nome da controladora (Account e Home).
No diretório View ficam os templates que correspondem a ações dos controllers e seram renderizados.
O sub-diretório View/Shared contém recorsos compartilhados com a aplicação, como página de erro genérica, master page, entre outros.
O diretório Script é destinado a armazenar biblioteca JavaScript e scripts (.js)
O diretório Content é destinado a armazenar arquivos de estilo (CSS), arquivos de imagens e outros não dinâmicos.
Na raiz do ASP.NET MVC Web Application temos os arquivos Global.asax, default.aspx e web.config estes arquivos são utilizados em conjunto para realizarem a sobreescrita (rewrite) de URL, mas esse assunto ficará para um próximo post.

Como ASP.NET MVC trabalha

Para compreender melhor o funcionamento do ASP.NET MVC, vamos remover alguns arquivos e diretórios da aplicação padrão.

  • App_Data (diretório)
  • AccountController.cs (arquivo)
  • Account (diretório)
  • About.aspx (arquivo)
  • Index.aspx (arquivo)
  • Error.aspx (arquivo)
  • LogOnUserControl.ascx (arquivo)
  • Site.Master (arquivo)

Hello Word

Como é padrão e não pode faltar em qualquer tutorial de introdução, vamos criar a famosa aplicação Hello Word!. Para isso no arquivo HomeController reescreva o código para que fique da seguinte forma:

1
2
3
4
5
6
7
    public class HomeController : Controller
    {
        public string Index()
        {
            return "Hello, word!";
        }
    }

Pronto, ao executar (F5) criamos nosso primeiro ASP.NET MVC Application.

Na arquitetura MVC, os controllers são reponsáveis por manipular as requisições. No .NET, controller são classes derivadas de System.Web.Mvc.Controller. E cada método público no Controller é conhecido como Action Method (método de ação), que são chamdos da web por meio de alguma URL. Em nossa aplicação acima temos nosso controller chamado HomeController com seu action method chamado Index.
Quando executamos a aplicação o Routing System (sistema de rotas) do ASP.NET MVC decidiu qual controller e action method executar. Não por acaso utilizei este controller e action method, esta é a configuração padrão de nosso aplicação, que está configurada no arquivo Global.asax.cs, como pode ser visto:

1
2
3
4
5
6
7
8
9
10
public static void RegisterRoutes(RouteCollection routes)
{
    routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
 
    routes.MapRoute(
        "Default",                                            // Route name
        "{controller}/{action}/{id}",                         // URL with parameters
        new { controller = "Home", action = "Index", id = "" }// Parameter defaults
    );
}

Em nosso Routing System, é definido a rota default com o controller Home e o action method Index sem passagem de parâmetro. Dessa forma as seguintes requisição serão manipuladas pela action Index no HomeController:

  • /
  • /Home
  • /Home/Index

Renderizando Web Pages

Como já mensionado, na arquitetura MVC o Controller é responsável por manipular as requisições e as Views são componentes de interface do usuário. Assim não está correto em nossa aplicação o controller enviar a resposta (no nosso caso texto) para o browser. Em uma aplicação real o controller deve passar essa tarefa para uma View. Para isso vamos reescrever o método Index da seguinte forma:

1
2
3
4
5
6
7
public class HomeController : Controller
{
    public ViewResult Index()
    {
        return View();
    }
}

Dessa forma a action retorna um objeto do tipo ViewResult, passando para o Framework a instrução de renderizar uma View. O próximo passo é criar a View, para isso podemos clicar com o botão direito no action method Index e selecione Add View, isto irá criar um novo template para o action method em “~/Views/Home/Index.aspx”.
Altere o código HTML na tag body da seguinte forma:

1
2
3
4
<body>
    <h1>Hello, Word!</h1>
    <p>(renderizada apartir da View)</p>
</body>

Nossa aplicação está finalizada, execute para visualizar a página rendenrizada pela View.

Hello Word ASP.NET MVC Web Application

Repare que não é necessário informar o nome da View que será chamada. O Framework renderiza a View que contém o mesmo nome do action method.

Há outros objetos de retorno que um Action Method pode retornar que instrui o framework diferentes fins. Esses tipos de retorno são chamados Action Results, mas isso será assunto para um próximo post, assim como a compreensão do M de Model de nossa arquitetura MVC.

Enjoy ;-)

O que é Enterprise Library

Postado por Carlos Fernando Sylverio | Postado em Tecnologia | Postado em 15-03-2010

0

Enterprise Library é uma biblioteca de aplicação que soluciona necessidades comuns.
A Enterprise Library possui uma coleção de blocos de aplicação (Application Blocks) que são reutilizáveis, extensíveis e permitem a customização do código-fonte.

A Enterprise Library faz parte de um grupo da Microsoft Patterns & Practices conhecido como Patterns & Practices, e não é nativo do Framework.NET, não possui suporte, localização ou garantias de compatibilidade, porem pode ser baixado gratuitamente.

O Enterprise Library prove blocos de código com funcionalidades que seria necessário desenvolver em uma aplicação caso já não estivesse pronto. Com a vantagem de já terem sidas testadas pela Microsoft e outras empresas de diversos tipos de aplicação. Estes blocos de aplicação tem a função de auxiliar equipes de desenvolvimento, permitindo que se concentre nas regras de negócio do cliente evitando que percam tempo criando tarefas comuns a uma aplicações como registro de log, autorização de usuários, acesso a dados, criptografia e outros.

Os blocos de aplicação fornecidos pelo Enterprise Library são:

  • Caching Application Block: possibilita a incorporação de cache local na aplicação.
  • Cryptography Application Block: possilita a fácil implementação de criptografia simétrica ou de hash.
  • Data Access Application Block: possibilita a implementação a funcionalidade de acesso ao banco de dados de forma padronizada e simplificada.
  • Exception Handling Application Block: possilita criar uma estratégia consistente de tratamente de exceções entre as camadas de uma aplicação.
  • Logging Application Block: possilita a criação de um procedimento padrão de registro de log na aplicação.
  • Policy Injection Application Block: possibilita implementar politicas de interceptação de operações para implementar funcionalidades comuns como registro de log, uso de cache, tratamento de exceção, entre outros.
  • Security Application Block: possibilita a incorporação de autenticação e cache de dados relacionados a segurança da aplicação.
  • Validation Application Block: utilizado para criar regras de validação para objetos de negócio, podendo ser reutilizado em diversas camadas da aplicação.

A instalação do Enterprise Library fornece os seguintes itens:

  • Arquivos Binários: inclui pre-compilado, strong-named assemblies para todos os códigos fontes.
  • Código Fonte: inclui o código fonte para todos os blocos de aplicação, ferramenta de configuração, teste unitário, e o QuickStarts.
  • Teste Unitário: inclui os teste unitários que foram criados enquanto os blocos de aplicação eram desenvolvidos.
  • QuickStarts: aplicações de exemplo para o fácil entendimento das caracteristicas dos blocos de aplicação.
  • Documentação: que pode ser visualizada como Visual Studio Help. A documentação inclui um guia sobre com utilizar o Enterprise Library e referência a biblioteca.

Abaixo um mapa de dependência entre os blocos de aplicação:

depêndencia entre os blocos de aplicação do Enterprise Library

Até mais ;-)

ASP.Net MVC

Postado por Carlos Fernando Sylverio | Postado em Programação, Tecnologia | Postado em 12-02-2010

0

ASP.NET MVC é um framework (que promete bastante evolução no framework.NET 4.0 que será lançado junto com o VS 2010) voltado para o desenvolvimento de aplicações web seguindo o padrão de arquitetura MVC Model-View-Controller que separa a aplicação em três (3) componentes principais: o modelo, a visão e controlador.
O framework MVC é definido no namespace System.Web.Mvc, suporta parte do namespace System.Web e permite o desenvolvimento de aplicações web utilizando a combinação dos dois tipos de abordagens Web Forms e MVC. Nenhuma abordagem exclui a outra.

O framework MVC inclui os seguintes componentes:

  • Modelo (Model) – Objetos de modelo são partes da aplicação que implementam a lógica para as aplicações de domínio.
  • Visão (Views) – Views são componentes de interface do usuário (UI).
  • Controladores (Controllers) – Controladores são componentes que manipulam as interações dos usuários, trabalhando os dados com o model, e finalmente seleciona a view para “renderizar” os resultados de saída para mostrar no UI.

O padrão MVC permite separar os diferentes aspectos de uma aplicação web e fornece um baixo acoplamento entre elementos por especificar cada tipo de lógica que pode ser utilizada na aplicação. Esta separação permite um melhor gerenciamento de complexidade da aplicação, pois a concentração em um aspecto da programação de cada vez. Também possibilita o desenvolvimento guiado por teste (TDD) de uma forma mais fácil do que em Web Forms.
A perda de acoplamento entre os componentes de uma aplicação, MVC também promove desenvolvimento paralelo. Um desenvolvedor pode trabalhar em uma view, enquanto um segundo desenvolvedor pode trabalhar em uma lógica do contoller e um terceiro desenvolvedor pode focar na lógica de negocio do modelo.

Vantagens de uma aplicação baseada em MVC

A utilização do modelo MVC traz alguns benefícios ao desenvolvimento com relação ao antigo Web Forms como:

  • Não utilize ViewState ou foms baseados em servidor (server).
  • Maior liberdade para desenvolvedores que gostam do controle total sobre o comportamento de uma aplicação (HTML).
  • Usa um padrão Front Controller que processa as requisições de uma aplicação web através de um simples controlador (controller). Isto possibilita o desenvolvimento de uma aplicação que suporta uma rica rota de infraestrutura.
  • Fornece um suporte melhor para test-driven development (TDD).
  • O ASP.NET MVC framework suporta Injeção de Dependência (ID) e Inversão de Controle (IC).
  • Mapeamento de URL .
  • Utilização das características existente com o uso de páginas (.aspx), user control (.ascx) e máster Page (.master ) no modelo MVC.

Até mais ;-)

Extension Methods no C# 3.0

Postado por Carlos Fernando Sylverio | Postado em Programação, Tecnologia | Postado em 13-12-2009

2

Extension Methods é uma das muitas características que torna o LINQ possível .
Em resumo podemos dizer que Extension Methods é a possibilidade de inserir métodos em objetos já compilados. O método criado tem a característica de um método estático, porem só está acessível ao objeto associado.
Com esse recurso podemos adicionar aos .NET types novos métodos. Assim classes como StringHelpers, Util, entre outras, com uma variedade de métodos de auxílio, podem ser inseridos diretamente no fonte.
Exemplo de uma classe com validação:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
using System.Text.RegularExpressions; 
namespace ExtensionMethodsExample
{
    public class Util
    {
        /// <summary>Verifica se o argumento do tipo string é um numérico</summary>
        /// <param name="arg">argumento a ser validado</param>
        /// <returns>True - se for numérico</returns>
        public bool IsNumeric(string arg)
        {
            return Regex.IsMatch(arg, @"^\d+$");
        }
    }
}

Com o uso do Extension Methods podemos inserir o método que verifica se a variável é numérica no próprio tipo string.
Abaixo um exemplo de seu uso, e depois vou explicar como o extension methods é declarado.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
using System;
using System.Text.RegularExpressions;
 
namespace ExtensionMethodsExample
{
    public static class Extensions
    {
        public static bool IsNumeric(this string arg)
        {
             return Regex.IsMatch(arg, @"^\d+$");
        }
    }
} 
 
public class Program
{
    public static void Main(string[] args)
    {
        string codigo1 = "1234";
        string codigo2 = "ABCD";
 
        Imprime(codigo1);
        Imprime(codigo2);
    }
 
    private static void Imprime(string codigo)
    {
        if (codigo.IsNumeric())
        {
            Console.WriteLine("Codigo numerico: {0}", codigo);
        }
        else
        {
            Console.WriteLine("Codigo alphanumerico: {0}", codigo);
        }
    }
}

Para criarmos um extension methods precisamos de uma classe e método estático. Todo método extension sempre terá seu primeiro parâmetro a palavra reservada this, seguido do tipo ao qual o método será inserido, no exemplo o tipo string. Esse parâmetro representa a própria instância do objeto. Para os parâmetros subseqüentes serão utilizados na chamada do método. O nome da classe é de livre escolha, ela não interfere na implementação do extension methods, a única ressalva é que seja uma classe estática.

Compare a diferença da verificação de condição utilizando a classe Util e o extension methods

1
2
3
4
5
Util util = new Util();
if (util.IsNumeric(codigo))
{
    // faz algo
}

e

1
2
3
4
if (codigo.IsNumeric())
{
    // faz algo
}

O código torna-se mais legível e mais implícito seus métodos, tornando a linguagem muito mais dinâmica.
Enjoy ;-)

Entendento o SQL Server sysobjects e syscolumns

Postado por Carlos Fernando Sylverio | Postado em Programação, Tecnologia | Postado em 07-12-2009

2

SQL Server sysobjects é uma tabela do SGBD SQL Server que armazena informações sobre os objetos criado no banco de dados. Contendo uma linha (registro) para cada objeto existente, como uma restrição, padrão, log, regra e procedimento armazenado.
No exemplo abaixo podemos encontrar informação sobre todos os objetos utilizados no banco de dados:
 

SELECT * FROM sysobjects
 

A coluna type e xtype possuem informação sobre o tipo de objeto. Tome cuidado para não confundir os valores das constantes. Há pequenas particularidades entre elas.
Para exibir todas as tabelas criadas pelo usuário executamos a seguinte instrução:
 

SELECT  * FROM sysobjects WHERE xtype='U'
 

Ou saber as trigger existentes em cada tabela:

 
SELECT
    Sys2.name           AS TableName,
    Sys1.name           AS TriggerName,
    CASE
        WHEN Sys1.deltrig > 0 THEN 'Delete'
        WHEN Sys1.instrig > 0 THEN 'Insert'
        WHEN Sys1.updtrig > 0 THEN 'Update'
    END
FROM
    sysobjects Sys1
    INNER JOIN sysobjects Sys2 ON
        Sys1.parent_obj = Sys2.id
WHERE
    Sys1.xtype = 'TR'
ORDER BY
    Sys2.name
 

Lista de possibilidades de valores para a coluna xtype:

  • C = CHECK constraint 
  • D = Default or DEFAULT constraint 
  • F = FOREIGN KEY constraint 
  • L = Log 
  • P = Stored procedure 
  • PK = PRIMARY KEY constraint (type is K) 
  • RF = Replication filter stored procedure 
  • S = System table 
  • TR = Trigger 
  • U = User table 
  • UQ = UNIQUE constraint (type is K) 
  • V = View 
  • X = Extended stored procedure

 
A tabela syscolumns retorna uma linha para cada coluna de um objeto que tem colunas, como exibições ou tabelas. E pode ser um auxilio na obtenção de informação sobre as colunas das tabelas:

 
SELECT 
    *
FROM 
    sysobjects SysObj
    INNER JOIN syscolumns SysCol ON
        SysObj.id = SysCol.id
WHERE 
    SysObj.type='U'
    AND
    SysObj.name = 'tbl_cliente'
 

Referência:

Observação: Os exemplos deste post foram criados para a versão 2005 do SQL Server, para versão 2000 do SQL Server consulte o artigo Mapeando tabelas do sistema do SQL Server 2000 para exibições do sistema do SQL Server 2005

Quando utilizar Literal e Label

Postado por Carlos Fernando Sylverio | Postado em Programação, Tecnologia | Postado em 02-12-2009

0

Primeiramente vamos as definições:

  • Literal é um controle que reserva um local da página para exibir um texto estático.
  • Label é um controle de rótulo usado para mostrar textos na página.

Ambos os controles possuem a propriedade Text, que define o texto a ser exibido.
Não há um controle melhor ou pior. E sim saber quando e como utilizar esses controles corretamente. O mais importante é entender e saber o que é produzido em sua renderização.
É nesse momento que as diferenças ficam mais aparentes.

Criando um projeto para comparar os controles
Para exemplificar os controles criei um ASP.Net Web Site com o nome LabelTeste
Na página Default.aspx inclui o seguinte código interno a tag form:

<div id="teste">
        <h3>Controles ASP.Net</h3>
        <p><asp:Label ID="lblTeste1" runat="server"></asp:Label></p>
        <p><asp:Literal ID="ltrTeste1" runat="server"></asp:Literal></p>
        <p><asp:Label ID="lblTeste2" AssociatedControlID="txtTeste2" runat="server"></asp:Label><asp:TextBox ID="txtTeste2" runat="server"></asp:TextBox></p>
</div>

Ao executar a aplicação, teremos a seguinte tela:

Tela Web Control

Clique com o botão direito e selecione codigo-fonte e veja o código gerado 

<div id="teste">
        <h3>Controles ASP.Net</h3>
        <p><span id="lblTeste1">label 1</span></p>
        <p>literal 1</p>
        <p><label for="txtTeste2" id="lblTeste2">label 2</label><input name="txtTeste2" type="text" id="txtTeste2" /></p>
</div>

Repare no código gerado. O controle Label renderiza o texto interno das tags span, que na maioria das vezes é desnecessário. Isso aumenta a quantidade de código a ser trafego do servidor para o cliente. Neste caso que só queriamos a apresentação de um texto, damos preferência ao Literal, que renderiza somente o texto de uma forma estática sem geração de tags.
A principal vantagem do Label é quando necessitamos de associa-lo a um outro controle. Que é feito por meio do atributo AssociatedControlID.
Assim é gerado as tags label que são utilizadas para dar foco a um outro controle.

Até mais
;-)

Utilizando Reflection com C#

Postado por Carlos Fernando Sylverio | Postado em Programação, Tecnologia | Postado em 08-11-2009

0

Entre as utilização de reflection podemos citar a instânciação de classes ou a utilização de plugins (como os utilizados no firefox), que são definidos em tempo de execução.

Basicamente reflection é uma maneira de se descobrir dados de uma classe/objeto/interface em tempo de execução. Dessa forma podemos examinar os tipos em um assembly e interagir com eles ou instanciá-los. Também podemos criar tipos no momento de execução.

Neste post criarei um exemplo de instânciar objetos em tempo de execução (runtime) utilizando reflection.
Abaixo segue um diagrama de classe do modelo utilizado para o exemplo:

modelo produto

Utilizando reflection

using System;
using System.Collections.Generic;
using System.Reflection;
 
namespace UtilizandoReflection {
    public class Program {
        public static void Main(string[] args) {
 
            StateFactory factory = new StateFactory();
 
            // Cria 3 produtos em estado diferentes
            Product product1 = new Product();
            Product product2 = new Product();
            Product product3 = new Product();
 
            product1.State = factory.Create(1, "item pendente");
            product2.State = factory.Create(2, "item no estoque");
            product3.State = factory.Create(3, "item vendido");
 
            Console.WriteLine("Produto {0}: {1} -- Type {2}", product1.State.ID, product1.State.Description, product1.State.GetType().ToString());
            Console.WriteLine("Produto {0}: {1} -- Type {2}", product2.State.ID, product2.State.Description, product2.State.GetType().ToString());
            Console.WriteLine("Produto {0}: {1} -- Type {2}", product3.State.ID, product3.State.Description, product3.State.GetType().ToString());
        }
    }
 
    /// <summary>Classe responsável por criar intâncias de estado</summary>
    public class StateFactory {
        private Dictionary<int, string> states;
 
        public StateFactory(){
            states = new Dictionary<int, string>(3);
            states.Add(1, "Pending");
            states.Add(2, "Stock");
            states.Add(3, "Sold");
        }
 
        /// <summary>Cria uma instância de estado</summary>
        /// <param name="ID">Identificador da instância</param>
        /// <param name="description">descrição do estado</param>
        /// <returns>Estado</returns>
        public State Create(int ID, string description) {
 
            string baseName = "UtilizandoReflection";
 
            // cria array com os parâmetro utilizado no construtor do estado
            object[] args = new object[2];
            args.SetValue(ID, 0);
            args.SetValue(description, 1);
 
            //using System.Reflection
            Assembly assembly = Assembly.Load(baseName);
            return (State)assembly.CreateInstance(baseName + "." + states[ID], true, BindingFlags.CreateInstance, null, args, null, null);
        }
    }
 
    #region Domain
    public class Product {
        public State State;
    }
    public abstract class State {
        public int ID;
        public string Description;
        public State(int ID, string description) {
            this.ID = ID;
            this.Description = description;
        }
    }
    public class Pending : State { // estado pendente
        public Pending(int ID, string description) : base(ID, description) { }
    }
    public class Stock : State { // estado estoque
        public Stock(int ID, string description) : base(ID, description) { }
    }
    public class Sold : State { // estado vendido
        public Sold(int ID, string description) : base(ID, description) { }
    }
    #endregion
}

Resultado da execução:

Produto 1: item pendente -- Type UtilizandoReflection.Pending
Produto 2: item no estoque -- Type UtilizandoReflection.Stock
Produto 3: item vendido -- Type UtilizandoReflection.Sold

Observe que as classes a serem instanciadas por reflection estão na mesma solution ou project, assim utilizamos o método Load do Assembly, porem quando a classe a ser utilizada for de uma DLL, utilizamos o método LoadFile e informamos o nome completo da DLL.

Como mencionado no início do post, há outras utilizações de reflection, como manipular atributos e métodos, mas isso é assunto para um próximo post.

Enjoy ;-)

Validação de formulário com JQuery

Postado por Carlos Fernando Sylverio | Postado em Programação, Tecnologia | Postado em 28-10-2009

1

Validation é um plugin do framework jQuery que permite fazer a validação de formulários de várias maneiras.
Neste post vou demonstrar como realizar algumas validações em um formulário utilizando o este plugin.

Para é necessário fazer o download do jQuery plugin: Validation

Pronto agora que temos todos os arquivos necessário, devemos incluir na tag de nosso exemplo o seguinte trecho de código:

<script language="JavaScript" src="jquery/jquery-1.3.2.js" type="text/javascript"></script>
<script language="JavaScript" src="jquery-validate/jquery.validate.js" type="text/javascript"></script>

Ainda dentro da tag head, inserimos o trecho de código que fará a validação de nosso formulário:

$(document).ready( function() {
    $("#cadastro").validate({
        // Define as regras
        rules:{
            nomeCliente:{
                required: true, 
                minlength: 2
             }
         },
         // Define as mensagens de erro para cada regra
         messages:{
              nomeCliente:{
                  required: "Digite o seu nome.",
                  minLength: "O seu nome deve conter, no mínimo, 2 caracteres."
              }
          }
    });		
});

Agora é só inserir o código HTML do formulário a página:

<form id="cadastro" method="post" action="">
    <p><label>Nome:</label><input type="text" id="nome_cliente" name="nomeCliente" /></p>
     <input type="submit" value="Enviar" />
</form>

Observe que as regras e mensagens aplicadas a caixa de texto são referênciadas pelo nome do elemento (atributo name) e não pelo id.

Dessa forma, podemos fazer validações de formulário, de uma forma simples e rápida. Mais informações e métodos de valições podem ser entrados na documentação oficial do JQuery.

Para quem conhece css, o código gerado ao apresentar a mensagem contem o atributo class com o valor error, que pode ser usado para aprimorar o layout do formulário.

<form id="cadastro" action="" method="post">
    <p><label>Nome:</label><input id="nome_cliente" class="error" type="text" name="nomeCliente"/>
            <label class="error" for="nome_cliente" generated="true">O seu nome deve conter, no mínimo, 2 caracteres.</label>
     </p>
     <input class="submit" type="submit" value="Enviar"/>
</form>

Enjoy ;-)

Introdução ao Ajax

Postado por Carlos Fernando Sylverio | Postado em Programação, Tecnologia | Postado em 19-10-2009

0

O problema que o Ajax tenta resolver está enraizado no protocolo de comunicação HTTP. Isso porque esse protocolo é sem estado (stateless), assim o controle das ações executadas na aplicação cliente é controlado pelo código no servidor web. Ou seja, as alterações (ou entrada de dados) executadas na página web pelo usuário são enviadas para o servidor para que este atualize seu estado, e o servidor responde a alteração reenviado todo o HTML para o browser.

Ajax
Mas o que é o Ajax?

Ajax é o acrônimo (da língua inglesa) de Asynchronous Javascript and XML, ele não é uma linguagem de programação e sim a combinação de tecnologias existentes (Javascript, XML e XmlHttpRequest) que nos permite realizar solicitações assíncronas ao servidor para busca de informações e/ou atualizar seu estado.
Em outras palavras o Ajax, é um objeto presente nos browser atuais que combinado com JavaScript pode se comunicar com o servidor Web sem recarregar e redesenhar a página inteira.

Utilizando do Ajax

O exemplo abaixo apresenta uma página chamada calcProduto.html, onde o usuário escolhe o tipo de produto e informa a quantidade de produto que gostaria de adquir. Ao clicar no botão calcular, é realizado via ajax uma requisição ao servidor web (arquivo calcProduto.php) que realiza o calculo necessário e sua reposta é renderizada sem recarregar a página html.

Abaixo o código do arquivo calcProduto.html:

<html>
    <head>
        <title>Produto</title>
        <script language="javascript" type="text/javascript">
 
            var request = null;
 
            // função que cria objeto de requisição
            function createRequest () {
                try {
                    // cria objeto XmlHttpRequest para os browser Firefox, Safari, Opera
                    request = new XMLHttpRequest();
                } catch( trymicrosoft ) {
                    try {
                        // cria objeto XmlHttpRequest para o browser IE
                        request = new ActiveXObject( "Msxm12.XMLHTTP" );
                    } catch( othermicrosoft ) {
                        try{
                            // cria objeto XmlHttpRequest para o browser IE
                            request = new ActiveXObject( "Microsoft.XMLHTTP" );
                        } catch( failed ) {
                            request = null;
                        }
                    }
                }
                if ( request == null ) {
                    alert( "Erro ao criar objeto Request!" );
                }
            }
 
            // função que executa chamada ao servidor para realizar o calculo
            function getPrice () {
 
                createRequest ();
 
                var prod = document.getElementById( "produto").value;
                var qtd = document.getElementById( "quantidade").value;
                var url = "calcProduto.php?produto=" + prod + "&quantidade=" + qtd;
 
                request.open( "GET", url, true );
                request.onreadystatechange = updatePage; // define função a ser chamada a obter resposta do servidor web
                request.send( null ); // null informa que não está sendo enviado nenhum dado na requisição
            }
 
            // função chamada ao obter retorno da requisição e atualiza interface
            function updatePage () {
 
                if( request.readyState == 4 ) {
                    if( request.status == 200 ){
                        var resultado = document.getElementById( "resultado" );
                        resultado.innerHTML = request.responseText;
                    }
                    else{
                        alert( "Erro: não foi possível obter resposta do servidor." );
                    }
                }
            }
 
        </script>
    </head>
    <body>
        <h1>Calculo de produto</h1>
        <p> Escolha um produto e informe a quantidade.</p>
        <form method="GET" action="calcProduto.php">
            <p> Produto: 
                <select name="produto" id="produto">
                    <option value="0">Caneta</option>
                    <option value="1">Borracha</option>
                    <option value="2">Giz</option>
                    <option value="3">Apagador</option>
                </select>
            </p>htm
            <p> Quantidade <input type="text" name="quantidade" id="quantidade"></p>
            <p><input type="button" value="Calcular" onClick="getPrice();"></p>
        </form>
        <div id="resultado">
        </div>
    </body>
</html>

O código utilizado no servidor web:

<?php
    $produto = $_REQUEST['produto'];
    $qtd = $_REQUEST['quantidade'];
 
    $prodName = '';
    $vlr = '';
 
    switch($produto){
        case "0":
            $prodName = 'Caneta';
            $vlr = 1;
            break;
        case '1':
            $prodName = 'Borracha';
            $vlr = 2;
            break;
        case '2':
            $prodName = 'Giz';
            $vlr = 3;
            break;
        case '3':
            $prodName = 'Apagador';
            $vlr = 4;
            break;
    }
    $total = $qtd * $vlr;
?>
<h3>Calculo:</h3>
<table  border=1 >
    <tr>
        <td>Produto</td>
        <td>Quantida</td>
        <td>Valor unidade</td>
        <td>Total</td>
    </tr>
    <tr>
        <td><?php print $prodName ?></td>
        <td><?php print $qtd ?></td>
        <td><?php echo "R$ " .number_format($vlr, 2, ',', '.'); ?></td>
        <td><?php echo "R$ " .number_format($total, 2, ',', '.'); ?></td>
    </tr>
</table>

Futuramente falarei um pouco mais sobre o componente XmlHttpRequest e seus recursos.
Enjoy ;-)

Configuração do IIS com Rewriting

Postado por Carlos Fernando Sylverio | Postado em Tecnologia | Postado em 20-08-2009

0

Olá,

Só para complementar os últimos post. Segue 2 links interessantes de Rewriting que podem ser muito úteis.

URL Rewriting: Criando URLs competitivas!

URL Rewriting: no IIS com ASP, ASP.NET ou PHP

Até mais