Archive

Archive for the ‘ASP.NET’ Category

Chamando Métodos de uma Página ASPX usando JQuery e AJAX

Logo JQueryMuitas vezes no ASP.NET queremos evitar os Postbacks, chamadas para a mesma página, no intuido de melhorar a usabilidade de algum componente ou da própria página. Para isso utilizamos artifícios providos pelo Javascript, JQuery e AJAX.

No entanto, surge um problema quando queremos utilizar, no código que roda no lado cliente (client-side), dados que são produzidos no lado do servidor (server-side). A solução para esse problema é bem simples: fazer todo o trabalho no servidor e repassar para a página apenas o resultado das operações, através de JQuery. E para que não ocorram Postbacks, devemos usar AJAX para chamar os métodos da página aspx que produzem os dados a serem exibidos.

Como faço isso?! Desse jeito:
Crie um novo projeto Web, adicione o arquivo correspondente ao JQuery e uma classe chamada Client.
Arquivo JQuery adicionado ao Projeto

A classe Client só vai possuir duas propriedades, ficando assim:

public class Client
{
    public string Name { get; set; }
    public int Age { get; set; }
}

Adicione uma página com o nome de Clients.aspx e, em seu code-behind, crie o método GetClient para retornar um objeto do tipo Client. O método precisa ser static e assinado com o atributo [WebMethod].

public partial class Clients : System.Web.UI.Page
{
	protected void Page_Load(object sender, EventArgs e)
	{
	}

	[WebMethod]
	public static Client GetClient()
	{
		Client ada = new Client { Name = "Ada", Age = 40 };
		return ada;
	}
}

Agora, no modo Design, adicione à pagina o código JQuery que irá chamar o método GetClient. Para isso, na tag head acrescente o seguinte código:

<script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script><script type="text/javascript">// <![CDATA[
        $(document).ready(function () {
            $("#runJasonFromPage").click(function () {
                $.ajax({
                    type: "POST",
                    url: "Clients.aspx/GetClient",
                    data: "{}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (jasonResult) {
                        alert(jasonResult.d.Name);
                    }
                });
            });
        });
// ]]></script>

O que o código acima faz é assinar o evento de click de um elemento da página chamando o método GetClient da página Clients.aspx. O resultado obtido na chamada desse método é repassado para uma função javascript, na forma de um objeto JSON, JavaScript Object Notation. Essa função simplesmente exibe a propriedade Name desse objeto, através de um alert.

Note que não é preciso serializar o objeto Client no código da página Clients.aspx. O ASP.NET já faz essa serialização por padrão.

Agora precisamos criar o elemento que irá executar o código JQuery que escrevemos acima. Adicione, então, um botão HTML com o id runJasonFromPage à página:

<input id="runJasonFromPage" type="button" value="Run JSON From Page" />

Pronto! Sua página está chamando um método de servidor sem ser necessário Postback e sem utilizar controles de servidor.

Categorias:.NET, ASP.NET

Criando um Calendário com Legendas

Vamos criar um calendário que possui legendas em algumas datas especiais, como na figura abaixo:

calendar

Para isso, vamos criar um Projeto ASP.NET.

Abra o Visual Studio, clique no menu File > New > Project e escolha a opção ASP.NET Web Application.

Uma página Default.aspx será criada. Nela, adicione um controle Calendar, através da Toolbox, que geralmente

fica à esquerda:

toolbar

Clique com o botão direito sobre a página e selecione a opção View Code, para ir ao arquivo code-behind da página.

Vamos adicionar algumas linhas de código ao arquivo, começando por um atributo que servirá para armazenarmos os

valores da legenda que será apresentada em sua respectiva data:

//Tabela hash data - legenda
private Hashtable cronograma = new Hashtable();

Criemos agora um método que irá preencher a hashtable com as legendas, escolhendo algumas datas especiais. Você pode

modificar a data e a legenda e adicionar mais legendas à outras datas.

private void GetCronograma()
{
    this.cronograma[DateTime.Today.ToShortDateString()] = "Dia de Hoje!";
    this.cronograma["25/12/2010"] = "Natal";
    this.cronograma["31/12/2010"] = "Ano Novo";
    this.cronograma["30/06/2010"] = "Férias";
}

Vamos precisar configurar o nosso calendário para apresentar a legenda. Para isso usamos o seguinte código no evento Page_Load da página Default.aspx:

protected void Page_Load(object sender, EventArgs e)
{
    this.GetCronograma();
    //define o posicionamento das informações contidas na célula do calendário
    this.MeuCalendario.DayStyle.HorizontalAlign = HorizontalAlign.Center;
    this.MeuCalendario.DayStyle.VerticalAlign = VerticalAlign.Top;
    //define a largura da célula do calendário
    this.MeuCalendario.DayStyle.Width = new Unit(90);
    //define a altura da célula do calendário</span>
    this.MeuCalendario.DayStyle.Height = new Unit(30);
    //define a data atual do calendário
    this.MeuCalendario.TodaysDate = DateTime.Today;
    //define a data que é mostrada inicialmente pelo calendário
    this.MeuCalendario.VisibleDate = this.MeuCalendario.TodaysDate;
}

Agora, vamos voltar ao modo Design da nossa página Default.aspx, para adicionar um evento ao nosso controle Calendar.

Clique com o botão direito sobre o controle Calendar e escolha a opção Properties:

prop

Note que o calendário mostrado pela imagem acima está com algumas cores definidas. Você pode configurar o estilo do

seu calendário usando as propriedades na barra de Propriedades. Use a criatividade!

Na lista de Propriedades, clique sobre o Raio, que aparece na parte superior da barra, para ver a lista de eventos do controle:

events

Clique duas vezes sobre o Evento DayRender. Isso irá adicionar algumas linhas ao código da página Default.aspx.

Insira o código abaixo, no evento DayRender:

protected void MeuCalendario_DayRender(object sender, DayRenderEventArgs e)
{
    //adiciona quebra de linha depois do número do dia
    Literal lit = new Literal();
    lit.Visible = true;
    lit.Text = "&lt;br/&gt;";
    e.Cell.Controls.Add(lit);

    if(this.cronograma[e.Day.Date.ToShortDateString()] != null)
    {
        //adiciona a legenda usando a hashtable
        Label lbl = new Label();
        lbl.Visible = true;
        lbl.Text = (string)this.cronograma[e.Day.Date.ToShortDateString()];
        e.Cell.Controls.Add(lbl);
    }

}
Esse código adiciona um controle Literal para quebra de linha. Dessa forma, nossa legenda será desenhada abaixo

do número do seu respectivo dia. Um controle Label também é inserido, criando a legenda, usando os dados do hashtable.

Rode a aplicação. Temos agora um calendário com legendas!

 

Download do projeto

Categorias:ASP.NET