MXStudio

ASP.Net e Excel – Paginação habilitada ao exportar GridView

X@nBuRzUm — Sun, 19 May 2013 16:15:12 +0000

Olá, sejam ben vindos a mais um artigo, onde hoje estaremos vendo em como exportar um GridView com paginação habilitada para arquivo do Excel. Vamos precisar de um banco de dados, onde como sempre estamos fazendo uso do banco de dados Northwind da Microsoft. Caso não o possua , baixe e instale através do link abaixo:

Download Northwind Database
O nosso código HTML consiste em um GridView e um Button. Para o GridView I vamos habilitar a paginação usando a propriedade AllowPaging e também especifique no evento OnPageIndexChanging.

E vamos usar os seguintes Namespaces:

using System.IO;

using System.Data;

using System.Drawing;

using System.Data.SqlClient;

using System.Configuration;

VB.Net

Imports System.IO

Imports System.Data

Imports System.Drawing

Imports System.Data.SqlClient

Imports System.Configuration

E para vincular nosso GridView, abaixo está o código para esta tarefa o GridView com os registros da tabela do banco de dados Northwind Clientes.

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

this.BindGrid();

}

}

 

private void BindGrid()

{

string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;

using (SqlConnection con = new SqlConnection(strConnString))

{

using (SqlCommand cmd = new SqlCommand("SELECT * FROM Customers"))

{

using (SqlDataAdapter sda = new SqlDataAdapter())

{

cmd.Connection = con;

sda.SelectCommand = cmd;

using (DataTable dt = new DataTable())

{

sda.Fill(dt);

GridView1.DataSource = dt;

GridView1.DataBind();

}

}

}

}

}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

If Not IsPostBack Then

Me.BindGrid()

End If

End Sub

 

Private Sub BindGrid()

Dim strConnString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString

Using con As New SqlConnection(strConnString)

Using cmd As New SqlCommand("SELECT * FROM Customers")

Using sda As New SqlDataAdapter()

cmd.Connection = con

sda.SelectCommand = cmd

Using dt As New DataTable()

sda.Fill(dt)

GridView1.DataSource = dt

GridView1.DataBind()

End Using

End Using

End Using

End Using

End Sub

Abaixo a tela resultante no browser.

Vamos implementar a paginação, o evento OnPageIndexChanging lida com a Paginação no GridView

protected void OnPageIndexChanging(object sender, GridViewPageEventArgs e)

{

GridView1.PageIndex = e.NewPageIndex;

this.BindGrid();

}

VB.Net

Protected Sub OnPageIndexChanging(sender As Object, e As GridViewPageEventArgs)

GridView1.PageIndex = e.NewPageIndex

Me.BindGrid()

End Sub

Abaixo está o código para Exportar o GridView para arquivo Excel com a paginação habilitada. Em primeiro lugar o GridView é novamente preenchido com os dados do banco de dados após a definição AllowPaging para false, em seguida, um loop é executado em todas as linhas da GridView e as cores da linha e a linha alternada são aplicadas às suas células individuais. Se isso não for feito, a cor vai espalhar em todas as células da planilha do Excel, para cada row

Class textmode é aplicada a todas as células de modo que eles sejam processadas ??como formato texto, conforme o número mso, fazendo isso impedimos grandes números de ficar convertidos em valores exponenciais.

protected void ExportToExcel(object sender, EventArgs e)

{

Response.Clear();

Response.Buffer = true;

Response.AddHeader("content-disposition", "attachment;filename=GridViewExport.xls");

Response.Charset = "";

Response.ContentType = "application/vnd.ms-excel";

using (StringWriter sw = new StringWriter())

{

HtmlTextWriter hw = new HtmlTextWriter(sw);

 

//para Exportar todas as páginas

GridView1.AllowPaging = false;

this.BindGrid();

 

GridView1.HeaderRow.BackColor = Color.White;

foreach (TableCell cell in GridView1.HeaderRow.Cells)

{

cell.BackColor = GridView1.HeaderStyle.BackColor;

}

foreach (GridViewRow row in GridView1.Rows)

{

row.BackColor = Color.White;

foreach (TableCell cell in row.Cells)

{

if (row.RowIndex % 2 == 0)

{

cell.BackColor = GridView1.AlternatingRowStyle.BackColor;

}

else

{

cell.BackColor = GridView1.RowStyle.BackColor;

}

cell.CssClass = "textmode";

}

}

 

GridView1.RenderControl(hw);

 

// estilo para formatar números para string

string style = @"";

Response.Write(style);

Response.Output.Write(sw.ToString());

Response.Flush();

Response.End();

}

}

 

public override void VerifyRenderingInServerForm(Control control)

{

/* Verifica se o controle é processado */

}

VB.Net

Protected Sub ExportToExcel(sender As Object, e As EventArgs)

Response.Clear()

Response.Buffer = True

Response.AddHeader("content-disposition", "attachment;filename=GridViewExport.xls")

Response.Charset = ""

Response.ContentType = "application/vnd.ms-excel"

Using sw As New StringWriter()

Dim hw As New HtmlTextWriter(sw)

 

'para exportar todas as páginas

GridView1.AllowPaging = False

Me.BindGrid()

 

GridView1.HeaderRow.BackColor = Color.White

For Each cell As TableCell In GridView1.HeaderRow.Cells

cell.BackColor = GridView1.HeaderStyle.BackColor

Next

For Each row As GridViewRow In GridView1.Rows

row.BackColor = Color.White

For Each cell As TableCell In row.Cells

If row.RowIndex Mod 2 = 0 Then

cell.BackColor = GridView1.AlternatingRowStyle.BackColor

Else

cell.BackColor = GridView1.RowStyle.BackColor

End If

cell.CssClass = "textmode"

Next

Next

 

GridView1.RenderControl(hw)

' estilo para formatar números para string

Dim style As String = ""

Response.Write(style)

Response.Output.Write(sw.ToString())

Response.Flush()

Response.[End]()

End Using

End Sub

 

Public Overrides Sub VerifyRenderingInServerForm(control As Control)

' Verifica se o controle é processado

End Sub

E aqui o resultado no Excel.

Faça o download dos arquivos clicando ASP.Net e Excel – Paginação habilitada ao exportar GridView.

ASP.Net e Google Finance API Web Service – Conversão de moedas e Taxas de Câmbio

X@nBuRzUm — Sun, 12 May 2013 15:19:03 +0000

Saudações, neste artigo veremos em como obter a Convert Amount , ou seja converter um valor de uma moeda para outra utilizando as mais recentes Taxas de câmbio do Google API com nosso ASP.Net. O nosso HTML Markup consistem em uma caixa de texto para inserir a quantidade, dois DropDownLists para a seleção das Moedas e um botão para converter a moeda.













































































































































































Converter para

E iremos usar os seguintes Namespaces:

using System.Net;

using System.Web.Script.Serialization;

VB.Net

Imports System.Net

Imports System.Web.Script.Serialization

E teremos a classe para manter os valores de conversão de moeda, desde que o Google API retorne as taxas de conversão de moeda em formato JSON, vamos ter que fazer uso de uma classe para converter a string JSON para objeto C # usando JavaScriptSerializer.

public class Rate

{

public string to { get; set; }

public string from { get; set; }

public double rate { get; set; }

}

VB.Net

Public Class Rate

Public Property [to]() As String

Get

Return _to

End Get

Set(value As String)

_to = value

End Set

End Property

Private _to As String

Public Property from() As String

Get

Return _from

End Get

Set(value As String)

_from = value

End Set

End Property

Private _from As String

Public Property rate() As Double

Get

Return _rate

End Get

Set(value As Double)

_rate = value

End Set

End Property

Private _rate As Double

End Class

E agora vamos converter o Valor de uma moeda para outra, utilizando Currency Exchange Rates. No clique do botão Converter é feita uma chamada para o Google Exchange API usando a classe WebClient com o da moeda ou seja, a moeda atual e para a moeda que você deseja converter. O Service, em seguida, retorna uma string JSON que contém a taxa de câmbio atual de acordo com o mercado. Agora, a taxa de câmbio é multiplicada pela quantidade, para obter o Valor Convertido.

[/hp]protected void Convert(object sender, EventArgs e)

{

double amount = 0d;

if (double.TryParse(txtAmount.Text.Trim(), out amount))

{

string url = string.Format(“http://rate-exchange.appspot.com/currency?from={0}&to={1}”, ddlFrom.SelectedItem.Value, ddlTo.SelectedItem.Value);

WebClient client = new WebClient();

string rates = client.DownloadString(url);

Rate rate = new JavaScriptSerializer().Deserialize(rates);

double converted_amount = amount * rate.rate;

string message = ddlFrom.SelectedItem.Value + “: ” + amount + “\\n”;

message += ddlTo.SelectedItem.Value + “: ” + converted_amount + “\\n”;

message += “Taxa: 1 ” + ddlFrom.SelectedItem.Value + ” = ” + rate.rate + ” ” + ddlTo.SelectedItem.Value;

ClientScript.RegisterStartupScript(this.GetType(), “alert”, “alert(‘” + message + “‘);”, true);

}

else

{

ClientScript.RegisterStartupScript(this.GetType(), “alert”, “alert(Valor do montante inválid006F.’);”, true);

}

}[/php]

VB.Net

Protected Sub Convert(sender As Object, e As EventArgs)

Dim amount As Double = 0.0

If Double.TryParse(txtAmount.Text.Trim(), amount) Then

Dim url As String = String.Format("http://rate-exchange.appspot.com/currency?from={0}&to={1}", ddlFrom.SelectedItem.Value, ddlTo.SelectedItem.Value)

Dim client As New WebClient()

Dim rates As String = client.DownloadString(url)

Dim rate As Rate = New JavaScriptSerializer().Deserialize(Of Rate)(rates)

Dim converted_amount As Double = amount * rate.rate

Dim message As String = ddlFrom.SelectedItem.Value & ": " & amount & "\n"

message &= ddlTo.SelectedItem.Value & ": " & converted_amount & "\n"

message &= "Rate: 1 " & ddlFrom.SelectedItem.Value & " = " & rate.rate & " " & ddlTo.SelectedItem.Value

ClientScript.RegisterStartupScript(Me.[GetType](), "alert", "alert('" & message & "');", True)

Else

ClientScript.RegisterStartupScript(Me.[GetType](), "alert", "alert('Valor do montante inválido

.');", True)

End If

End Sub

Aqui a tela no browser:

E clique no link abaixo para fazer o download dos arquivos deste artigo:

Download

Até mais.

ASP.Net – Preencher jQuery Accordion com dados do database

X@nBuRzUm — Sat, 04 May 2013 21:34:30 +0000

?Olá amigos, neste artigo veremos como manter ou re-manter a guia selecionada em jQuery UI Tabs no PostBack em ASP.Net. Imagine a seguinte situação, o plugin jQuery UI Tabs não faz parte do ViewState, portanto, sua seleção de Tab é perdida. Para solucionar isso, vamos precisar guardar tab index selecionado em um campo do tipo Hidden antes do PostBack e depois buscar o seu valor de volta no carregamento da página e definir a guia selecionada utilizando o índice armazenado no campo oculto. Para manter a jQuery UI Tabs selecionada no PostBack, você vai notar que iremos fazer o uso do controle ASP.Net HiddenField que é definido com o índice da Tab selecionada atual assim que a tab é selecionada usando o select event handler da Tabs jQuery UI.
E, em seguida, na Tab Index selecionada é buscada de volta no campo Hidden e usando o índice a jQuery Tab é selecionada.













Tab 1

Tab 2

Tab 3





Content 1





Content 2





Content 3

Agora, no server side estaremos buscando o valor do campo Hidden da coleção Request.Form e, em seguida, configurá-lo de volta para o campo Hidden . Isso é feito porque os valores set client side não se reflete diretamente na propriedade Value.

protected void Page_Load(object sender, EventArgs e)

{

selected_tab.Value = Request.Form[selected_tab.UniqueID];

}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

selected_tab.Value = Request.Form(selected_tab.UniqueID)

End Sub

Aqui o resultado no browser.

E clicando abaixo você poderá fazer o download dos códigos utilizados neste artigo.

Download

ASP.Net – GridView vinculando dados com jQuery ou JSON

X@nBuRzUm — Sat, 27 Apr 2013 20:29:13 +0000

Saudações amigos programadores neste artigo, veremos como fazer uma paginação no GridView usando jQuery AJAX. Se quiser saber mais sobre jQuery e AJAX no ASP.Net acesse nossos outros artigos. E logicamnte para isso iremos precisar de uma banco de dados, e como sempre estamos usando o Microsoft Northwind. Caso você não o possua, você pode baixá-lo usando o link fornecido abaixo.

Download Northwind Database

Abaixo está a nosso código HTML. Onde temos um ASP.Net GridView gvCustomers e um controle HTML DIV onde o Pager será preenchido pela paginação.

Vamos precisar dos seguintes Namespaces:

using System.Data;

using System.Web.Services;

using System.Configuration;

using System.Data.SqlClient;

VB.Net

Imports System.Data

Imports System.Web.Services

Imports System.Configuration

Imports System.Data.SqlClient

E vamos preencher nosso GridView com dados. No evento Page Load da página vamos preencher o GridView com dados fictícios, para que possamos usar sua estrutura Table HTML para preencher os dados usando jQuery. Foi criado uma variável PageSize que irá decidir o número de registros a serem exibidos por página no GridView. Lembrando que, o DataTable sendo preenchido tem as mesmas colunas que serão retornados da consulta SQL

private static int PageSize = 10;

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

BindDummyRow();

}

}

 

private void BindDummyRow()

{

DataTable dummy = new DataTable();

dummy.Columns.Add("CustomerID");

dummy.Columns.Add("ContactName");

dummy.Columns.Add("City");

dummy.Rows.Add();

gvCustomers.DataSource = dummy;

gvCustomers.DataBind();

}

VB.Net

Private Shared PageSize As Integer = 10

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

If Not IsPostBack Then

BindDummyRow()

End If

End Sub

 

Private Sub BindDummyRow()

Dim dummy As New DataTable()

dummy.Columns.Add("CustomerID")

dummy.Columns.Add("ContactName")

dummy.Columns.Add("City")

dummy.Rows.Add()

gvCustomers.DataSource = dummy

gvCustomers.DataBind()

End Sub

Aqui teremos a paginação no SQL Server com Stored Procedure. Segue-se a stored procedure que irá realizar a paginação no banco de dados SQL Server e retorno por dados da página.

CREATE PROCEDURE [dbo].[GetCustomers_Pager]

@PageIndex INT = 1

,@PageSize INT = 10

,@RecordCount INT OUTPUT

AS

BEGIN

SET NOCOUNT ON;

SELECT ROW_NUMBER() OVER

(

ORDER BY [CustomerID] ASC

)AS RowNumber

,[CustomerID]

,[CompanyName]

,[ContactName]

,[City]

INTO #Results

FROM [Customers]

 

SELECT @RecordCount = COUNT(*)

FROM #Results

 

SELECT * FROM #Results

WHERE RowNumber BETWEEN(@PageIndex -1) * @PageSize + 1 AND(((@PageIndex -1) * @PageSize + 1) + @PageSize) - 1

 

DROP TABLE #Results

END

Abaixo está o Web Method que está sendo chamado pela função AJAX jQuery que preenche o GridView com os dados e também faz a paginação. O PageIndex é passado como parâmetro do lado do cliente com base em que página é clicado pelo usuário, enquanto o PageSize que começa a partir da variável estática que foi declarada. Com base nesses parâmetros, podemos buscar os registros. Os registros localizados junto com a contagem total de registro são enviados via Client Side como string XML. Nota: A contagem total de registro é necessária para preencher pager.

 [WebMethod]

public static string GetCustomers(int pageIndex)

{

string query = "[GetCustomers_Pager]";

SqlCommand cmd = new SqlCommand(query);

cmd.CommandType = CommandType.StoredProcedure;

cmd.Parameters.AddWithValue("@PageIndex", pageIndex);

cmd.Parameters.AddWithValue("@PageSize", PageSize);

cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;

return GetData(cmd, pageIndex).GetXml();

}

 

private static DataSet GetData(SqlCommand cmd, int pageIndex)

{

string strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;

using (SqlConnection con = new SqlConnection(strConnString))

{

using (SqlDataAdapter sda = new SqlDataAdapter())

{

cmd.Connection = con;

sda.SelectCommand = cmd;

using (DataSet ds = new DataSet())

{

sda.Fill(ds, "Customers");

DataTable dt = new DataTable("Pager");

dt.Columns.Add("PageIndex");

dt.Columns.Add("PageSize");

dt.Columns.Add("RecordCount");

dt.Rows.Add();

dt.Rows[0]["PageIndex"] = pageIndex;

dt.Rows[0]["PageSize"] = PageSize;

dt.Rows[0]["RecordCount"] = cmd.Parameters["@RecordCount"].Value;

ds.Tables.Add(dt);

return ds;

}

}

}

}

VB.Net

< WebMethod()> _

Public Shared Function GetCustomers(pageIndex As Integer) As String

Dim query As String = "[GetCustomers_Pager]"

Dim cmd As New SqlCommand(query)

cmd.CommandType = CommandType.StoredProcedure

cmd.Parameters.AddWithValue("@PageIndex", pageIndex)

cmd.Parameters.AddWithValue("@PageSize", PageSize)

cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output

Return GetData(cmd, pageIndex).GetXml()

End Function

 

Private Shared Function GetData(cmd As SqlCommand, pageIndex As Integer) As DataSet

Dim strConnString As String = ConfigurationManager.ConnectionStrings("conString").ConnectionString

Using con As New SqlConnection(strConnString)

Using sda As New SqlDataAdapter()

cmd.Connection = con

sda.SelectCommand = cmd

Using ds As New DataSet()

sda.Fill(ds, "Customers")

Dim dt As New DataTable("Pager")

dt.Columns.Add("PageIndex")

dt.Columns.Add("PageSize")

dt.Columns.Add("RecordCount")

dt.Rows.Add()

dt.Rows(0)("PageIndex") = pageIndex

dt.Rows(0)("PageSize") = PageSize

dt.Rows(0)("RecordCount") = cmd.Parameters("@RecordCount").Value

ds.Tables.Add(dt)

Return ds

End Using

End Using

End Using

End Function

Abaixo está a implementação Client Side, aqui no evento load do jQuery o GridView é preenchido com PageIndex 1 usando o método GetCustomers que preenche o GridView que foi inicialmente preenchido com dados fictícios. Usando o Record Count, o pager é preenchido dentro do HTML DIV usando o jQuery Plugin ASPSnippets_Pager..

Abaixo, os estilos CSS necessários para colocar em sua página.

Abaixo está o screenshot do ASP.Net GridView com o Cliente Paging Side usando jQuery AJAX

Você pode fazer o download dos arquivos deste artigo, clicando aqui.

ASP.Net – Enviando email com Gmail

X@nBuRzUm — Thu, 18 Apr 2013 18:41:29 +0000

Enviando email em ASP.Net com VB.Net.

Apenas por curiosidade o Gmail é um serviço gratuito de webmail criado pelo Google em 2004. Atualmente novos cadastros estão abertos ao público e podem ser feitos diretamente no site. Foi anunciado no dia 1 de Abril de 2004, Dia da Mentira, o que lançou inicialmente certa dúvida quanto à sua autenticidade.

Tal serviço de webmail revolucionou os demais já existentes. O Gmail oferecia, em seu início, 1GB de espaço de armazenamento. O Yahoo! Mail e MSN Hotmail, que ofereciam 6MB e 2MB, respectivamente, tiveram de rever a questão de espaço disponível para continuarem tendo condições de concorrer comercialmente. O mesmo ocorreu com provedores pagos e gratuitos ao redor do mundo.

Exatamente por esse motivo e para manter o recurso de oferecer mais espaço que a maioria dos provedores, no dia primeiro de Abril de 2005 o sistema lançou seu programa “infinito + 1″ e começou a aumentar o espaço de armazenamento. A princípio, a taxa de aumento era de 4 bytes por segundo (aprox. 337 KB/dia) e já chegou a ser de 1500 bytes por segundo (aprox. 124 MB/dia). Atualmente esta taxa gira em torno de 4 bytes por segundo (aprox. 345 KB/dia ~ 124MB por ano) e o serviço oferece mais de 10 GB de espaço de armazenamento.

Atualmente, o código que faz o Gmail funcionar é composto de 443.000 linhas de JavaScript (com 978.000 linhas se os comentários forem incluídos). A maior parte foi escrita a mão.

Em outubro de 2012 o serviço da Google obteve aproximadamente 288 milhões de visitantes únicos, contra 286 milhões do serviço da Microsoft (Hotmail) e, em terceiro lugar, ficou o Yahoo! Mail, que obteve 281,7 milhões de visitantes únicos

Para isso iremos usar os seguintes mamespaces, você precisa importa-los para poder funcionar o envio de e-mails.

Imports System.Net.Mail
Imports System.Net

Aqui estão as propriedades da classe MailMessage, essas propriedades ~sao requeridas para a classe mail message:
From – Endereço de e-mail do remetente
To – Destinatário (s) Endereço de E-mail
CC – Com cópia
BCC – Cópias ocultas
Subject – Assunto do e-mail
Body – Corpo do e-mail
IsBodyHtml – Especifica se corpo contém texto ou marca HTML.
Attachments – Anexos.
ReplyTo – Responder Para endereço de email.

E agora vamos criar um objeto MailMessage, para o envio do email.

Dim objmail As MailMessage = New MailMessage()
objmail.From = New MailAddress("sender@gmail.com")
objmail.Subject = "Olá"
objmail.Body = " Aqui o Corpo do e-mail "
objmail.IsBodyHtml = True
objmail.To.Add(New MailAddress("recepient@gmail.com"))

Propriedades da Classe SMTP, abaixo estão as propriedades da classe SMTP.

Host – Seu SMTP Server
EnableSsl – Especifique se você host aceita conexões SSL.
UseDefaultCredentials – Defina como true para permitir a autenticação com base nas credenciais da conta usada para enviar e-mails
Credentials – credenciais de login válido para o servidor SMTP
Port – número da porta do servidor SMTP
Abaixo código com as propriedades configuradas.

smtp.Host = "smtp.gmail.com"
smtp.EnableSsl = True
Dim NetworkCred As NetworkCredential = New System.Net.NetworkCredential()
NetworkCred.UserName = "seu_email@gmail.com"
NetworkCred.Password = "aqui sua senha"
smtp.UseDefaultCredentials = True
smtp.Credentials = NetworkCred
smtp.Port = 587

Send Email

O método Smtp.Send(..) é usado para enviar o e-mail. Veja o exemplo abaixo

smtp.Send(objmail)

Você pode fazer o download dos arquivos usados neste tutorial clicando aqui.

ASP.Net e jQuery – Galeria de Imagens com jCarousel

X@nBuRzUm — Sun, 07 Apr 2013 20:53:11 +0000

Neste artigo vou explicar como implementar uma galeria de Imagens com jQuery Carousel em ASP.Net usando o controle Repeater eo plugin jCarousel jQuery.Quem tiver dúvidas sobre jQuery, porfavor acesse os outros artigos sobre o assunto.

jCarousel é um plugin jQuery para controlar uma lista de itens de forma horizontal ou vertical. Os itens, que podem ser de conteúdo estático HTML ou carregado com (ou sem) AJAX, pode ser rolados para trás e para a frente (com ou sem animação). Podemos ter alguns exemplos como:

• Exemplos estáticos (Simples, vertical, Circular, com autoscrolling, ilustrando as funções de retorno de chamada, com controles externos, com a posição inicial personalizada, múltiplas em uma única página)
• Exemplos dinâmicos (loading de conteúdo dinâmico via JavaScript, loading de conteúdo dinâmico via Ajax, loading de conteúdo dinâmico via Ajax a partir de um script PHP, loading de conteúdo dinâmico via Ajax a partir do fluxo de fotos Flickr, com conteúdo dinâmico carregamento via Ajax da API do Flickr)
• Exemplos especiais (jCarousel como Textscroller, Thickbox 3, com efeitos de animação personalizada)

Para usar o componente jCarousel, incluir a biblioteca jQuery, o arquivo de origem jCarousel e um arquivo de folha de estilo jCarousel pele dentro da tag de seu documento HTML:

O download package contém alguns exemplo de skin. Sinta-se livre para construir suas próprias skins com base nele.

jCarousel espera uma estrutura muito básica de marcação HTML dentro de seu documento HTML:

[/php]

jCarousel automaticamente quebra a marcação HTML necessária em volta da lista. O atributo class aplica o jCarousel skin “nome” para o carrossel.

tag of your HTML document:”>Para configurar jCarousel, adicione o seguinte código dentro da tag de seu documento HTML:

jCarousel aceita um monte de opções de configuração. Após jCarousel ser inicializado, a marcação totalmente criado no DOM é:









Primeiro item

Segundo item

Como você pode ver, há alguns elementos adicionados, que atribuiu classes (além das classes que você já pode ter atribuídos manualmente). Sinta-se livre para projetar seu carrossel com as classes que você pode ver acima. Bom, como já tivemos uma introdução sobre o jCarousel, agora vamos implementar em nosso ASP.Net.

O jQuery jCarousel faz uso de HTML e tags UL e LI para criar a galeria de imagens do carrossel. Iremos usar o controle Repeater do ASP.Net para preencher as tags LI dinamicamente em UL com base nos valores do banco de dados.

















' />

Vamos precisar usar os seguintes Namespaces, importer o seguinte:

using System.Data;

VB.Net

Imports System.Data

Depois disso, vamos preencher o controle Repeater ASP.Net usando DataTable. No código abaixo iremos usar de DataTable com linhas fictícias para vincular a lista de imagens para o controle Repeater. Você pode preencher o DataTable do banco de dados também.

protected void Page_Load(object sender, EventArgs e)

{

DataTable dt = new DataTable();

dt.Columns.AddRange(new DataColumn[1] { new DataColumn("ImageUrl") });

dt.Rows.Add("http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg");

dt.Rows.Add("http://static.flickr.com/75/199481072_b4a0d09597_s.jpg");

dt.Rows.Add("http://static.flickr.com/57/199481087_33ae73a8de_s.jpg");

dt.Rows.Add("http://static.flickr.com/77/199481108_4359e6b971_s.jpg");

dt.Rows.Add("http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg");

dt.Rows.Add("http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg");

dt.Rows.Add("http://static.flickr.com/58/199481218_264ce20da0_s.jpg");

dt.Rows.Add("http://static.flickr.com/69/199481255_fdfe885f87_s.jpg");

dt.Rows.Add("http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg");

dt.Rows.Add("http://static.flickr.com/70/229228324_08223b70fa_s.jpg");

rptImages.DataSource = dt;

rptImages.DataBind();

}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

Dim dt As New DataTable()

dt.Columns.AddRange(New DataColumn(0) {New DataColumn("ImageUrl")})

dt.Rows.Add("http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg")

dt.Rows.Add("http://static.flickr.com/75/199481072_b4a0d09597_s.jpg")

dt.Rows.Add("http://static.flickr.com/57/199481087_33ae73a8de_s.jpg")

dt.Rows.Add("http://static.flickr.com/77/199481108_4359e6b971_s.jpg")

dt.Rows.Add("http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg")

dt.Rows.Add("http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg")

dt.Rows.Add("http://static.flickr.com/58/199481218_264ce20da0_s.jpg")

dt.Rows.Add("http://static.flickr.com/69/199481255_fdfe885f87_s.jpg")

dt.Rows.Add("http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg")

dt.Rows.Add("http://static.flickr.com/70/229228324_08223b70fa_s.jpg")

rptImages.DataSource = dt

rptImages.DataBind()

End Sub

E o resultado no browser é dados abaixo:

E assim finalizamos nosso artigo. Para fazer o download dos arquivos usados neste artigo clique no link abaixo:

Download

Até mais e boa programação

ASP.Net e AJAX AutoSuggest TextBox

X@nBuRzUm — Wed, 03 Apr 2013 01:17:28 +0000

Olá caros amigos desenvolvedores, hoje estaremos vendo como usar AJAX Control AutoCompleteExtender diretamente com ASP.Net Web Page sem o uso de qualquer serviço web. Você pode acessar mais artigos sobre controles AJAX em nosso site. Mas para quem não sabe o que é aqui vai uma explicação e suas propriedades. AutoComplete é um ASP.NET AJAX extender que pode ser anexado a qualquer controle TextBox, e irá associar esse controle com um painel pop-up para exibir as palavras que começam com o prefixo digitado na caixa de texto.

O dropdown com as palavras fornecidas por um serviço web é posicionado na parte inferior esquerda da caixa de texto. Podemos associar um AutoCompleteExtender que “puxe” palavras que começam com o conteúdo da caixa de texto usando um serviço web.

Quando você digita mais conteúdo do que o comprimento mínimo especificado palavra, um pop-up irá mostrar palavras ou frases que começam com esse valor. Com o cache ligado, podemos escrever os mesmos prefixos, e teremos vários resultados em vez de apenas uma chamada para o serviço web.

As propriedades do

A textbox está vinculada com um AutoCompleteExtender que é inicializado com este código. As propriedades itálico são opcionais:

ServicePath="AutoComplete.asmx"

MinimumPrefixLength="2"

CompletionInterval="1000"

EnableCaching="true"

CompletionSetCount="20"

CompletionListCssClass="autocomplete_completionListElement"

CompletionListItemCssClass="autocomplete_listItem"

CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"

DelimiterCharacters=";, :"

ShowOnlyCurrentWordInCompletionListItem="true">



  ... 

  ...

TargetControlID – O controle TextBox onde o usuário os tipos de conteúdo a serem preenchidos automaticamente
ServiceMethod – O método de web service para ser chamado. A assinatura deste método deve coincidir com o seguinte:

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]

public string[] GetCompletionList(string prefixText, int count) { … }

Note que você pode substituir “GetCompletionList” com um nome de sua escolha, mas o tipo de retorno e o nome do parâmetro e o tipo deve corresponder exatamente, incluindo o caso.

ServicePath – O caminho para o web service que o extender vai puxar a palavra\frase completa. Se este não for fornecido, o método de serviço deve ser um método de página.
ContextKey – User/page contexto específico fornecido a uma sobrecarga (overload) opcional do método descrito por ServiceMethod/ServicePath. Se a chave de contexto é usada, ela deve ter a mesma assinatura de um parâmetro adicional chamado contextKey do tipo string:

[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public string[] GetCompletionList(

string prefixText, int count, string contextKey) { … }

Note que você pode substituir “GetCompletionList” com um nome de sua escolha, mas o tipo de retorno e o nome do parâmetro juntamente com o tipo deve corresponder exatamente, incluindo o caso.

UseContextKey – Se a propriedade ContextKey deve ou não ser usada. Este será automaticamente ativado se a propriedade ContextKey é sempre definida (no cliente ou no servidor). Se a chave de contexto é usada, ele deve ter a mesma assinatura com um parâmetro adicional chamado contextKey do tipo string (como descrito acima).
MinimumPrefixLength – Número mínimo de caracteres que deve ser inserido antes de chegar sugestões do web service.
CompletionInterval – Tempo em milissegundos quando o temporizador vai chutar para obter sugestões usando o web service.
EnableCaching – Se o cache do lado do cliente é ativado.
CompletionSetCount – Número de sugestões a ser recuperada a partir do web service.
CompletionListCssClass – Classe CSS que será usada para o estilo a lista de conclusão flyout.
CompletionListItemCssClass – Classe CSS que será usada para um item de estilo na lista AutoCompletar flyout.
CompletionListHighlightedItemCssClass – Classe CSS que será usada para o estilo de um item de destaque na lista AutoCompletar flyout.
DelimiterCharacters – Especifica um ou mais caracteres usado para separar as palavras. O texto na AutoComplete textbox é indexado com estes caracteres e do webservice completa o último token.
FirstRowSelected – Determina se a primeira opção na lista AutoComplete será selecionada por padrão.
ShowOnlyCurrentWordInCompletionListItem – Se for true e DelimiterCharacters forem especificados, os itens da lista de AutoComplete exibe sugestões para a palavra atual para ser concluída e não mostrar o resto das fichas.
Animations – Animações genéricas para o AutoComplete extender.
- OnShow – A animação OnShow será executada cada vez que a lista de conclusão AutoComplete é exibida. A lista de conclusão será posicionada corretamente, mas oculta. A animação pode usar para exibir a lista de conclusão, juntamente com quaisquer outros efeitos visuais.
- OnHide – A animação OnHide será executada cada vez que a lista de conclusão AutoComplete está oculta.

Então vamos para nosso banco de dados, neste artigo iremos usar o nosso famoso e conhecido banco de dados Northwind. Se você não o possuir, faça o download usando o link fornecido abaixo.

Download Northwind Database

Nossa Connection String, uma vez que banco de dados é baixado, você pode anexar o mesmo a instância do SQL Server. Eu estou fazendo uso do SQL Server 2012 Express, portanto, abaixo é a minha seqüência de conexão.

AJAX Control Toolkit

Baixe o AJAX Control Toolkit DLL usando o link abaixo e adicione a referência ao seu projeto.

Download AJAX Control Tookit

E para registrá-lo na página ASPX, faça como dado abaixo:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

Nosso HTML, ficará como abaixo na página Web ASP.Net

Como você pode notar acima, colocamos um ScriptManager, um TextBox que atuará como AutoComplete e o AJAX Control Toolkit AutoCompleteExtender. Também estamos chamando um método SearchCustomers usando a propriedade ServiceMethod.

Métodos Server Side

O método a seguir é usado para preencher a lista completa de clientes Auto

[System.Web.Script.Services.ScriptMethod()]

[System.Web.Services.WebMethod]

public static List SearchCustomers(string prefixText, int count)

{

using (SqlConnection conn = new SqlConnection())

{

conn.ConnectionString = ConfigurationManager

.ConnectionStrings["constr"].ConnectionString;

using (SqlCommand cmd = new SqlCommand())

{

cmd.CommandText = "select ContactName from Customers where " +

"ContactName like @SearchText + '%'";

cmd.Parameters.AddWithValue("@SearchText", prefixText);

cmd.Connection = conn;

conn.Open();

List customers = new List();

using (SqlDataReader sdr = cmd.ExecuteReader())

{

while (sdr.Read())

{

customers.Add(sdr["ContactName"].ToString());

}

}

conn.Close();

return customers;

}

}

}

VB.Net

 _

Public Shared Function SearchCustomers(ByVal prefixText As String, ByVal count As Integer) As List(Of String)

Dim conn As SqlConnection = New SqlConnection

conn.ConnectionString = ConfigurationManager _

.ConnectionStrings("constr").ConnectionString

Dim cmd As SqlCommand = New SqlCommand

cmd.CommandText = "select ContactName from Customers where" & _

" ContactName like @SearchText + '%'"

cmd.Parameters.AddWithValue("@SearchText", prefixText)

cmd.Connection = conn

conn.Open()

Dim customers As List(Of String) = New List(Of String)

Dim sdr As SqlDataReader = cmd.ExecuteReader

While sdr.Read

customers.Add(sdr("ContactName").ToString)

End While

conn.Close()

Return customers

End Function

O método acima simplesmente procura na tabela de clientes e retorna a lista de nomes de clientes que correspondam ao texto prefixo. É muito importante manter a assinatura do mesmo método dado acima. O método deve ter dois parâmetros nomeadamente:

1. prefixText (string)
2. count (int)

Caso contrário, o método não funciona com AutoCompleteExtender.

E assim, finalizamos mais um artigo. Você pode baixar o código fonte em C # e VB.Net usando o link abaixo:

Download

Até mais e boa programação.

ASP.Net e JavaScript – Master Pages

X@nBuRzUm — Thu, 07 Mar 2013 23:58:37 +0000

Bem vindos a mais um artigo, onde estaremos fazendo uma integração de JavaScript com Master Pages em ASP.NET. Muitos enfrentam problemas em como usar JavaScript com Master Pages em ASP.NET. Esta necessidade é a origem de nosso artigo, ao trabalhar com Master Pages há apenas uma Master Pages e várias páginas de conteúdo, portanto, escrever função JavaScript se torna um problema.

Colocar o JavaScript em páginas de conteúdo. Ao trabalhar com Master Pages temos que colocar o JavaScript dentro de tags de script em páginas de conteúdo entre o espaço reservado para conteúdo.

Como você vai notar acima eu coloquei uma função JavaScript em uma página de conteúdo dentro do ContentPlaceHolder. Você pode colocar o script em qualquer lugar dentro do ContentPlaceHolder da página de conteúdo, mas é melhor colocá-lo na parte inferior.

Problema com os IDs dos controles, você pode considerar o exemplo abaixo, onde foi usado uma caixa de texto, uma label e um botão HTML e no evento onclick do botão HTML estamos chamando a função JavaScript GetValue()

Mas quando executar a aplicação e clicar no botão iremos receber o erro em JavaScript solicitando um objeto requerido.

Agora o motivo para o erro JavaScript acima é o ID dos controles Label1 e TextBox1. A função JavaScript não é capaz de encontrar todos os controles com ID Label1 e TextBox1 Para mais detalhes consulte a figura abaixo, que exibe o código HTML da página.

Perceba que o ID do TextBox1 mudou para ctl00_ContentPlaceHolder1_TextBox1 e da Label1 mudou para ctl00_ContentPlaceHolder1_Label1, portanto, a função JavaScript não é capaz de encontrá-los. Mas você vai perceber que o ID do Button1 tem n mudanças, a razão é o runat = “server” que não está presente no botão. Quando MasterPages são usadas tendem a mudar o nome de todos os controles nas páginas de conteúdo que têm runat=”server”.

A solução para o problema acima é tendo a ajuda das tags ASP.Net inline e as propriedades ClientID e UniqueID de um controle ASP.Net. A definição dos dois termos é dada abaixo:

ClientID – ASP.NET gera automaticamente um ClientID para um servidor quando o controle é processado como HTML ID do controle.

UniqueID – O identificador hierarquicamente qualificado exclusivo atribuído a um controle por parte do ASP.NET processado como nome de código HTML do controle.

Estamos usando ASP.Net Inline Server Tags, que simplesmente imprime o ClientID do controle Label1, assim, não há necessidade de se preocupar com os IDs de mudança. Esta é a melhor prática para este método, abrangendo para todos os controles com tag runat = “server”.

Para quem não esta acostumado com Embedded Code Blocks ( ), vou explicar, esses blocos de código incorporados nos permite escrever o código ASP.Net dentro do aspx usando as tags do servidor .

Vejamos alguns exemplos:




MX Dev

VB.Net




MX Dev

Como você pode ver acima, no código acima eu usei Server Tags para executar um loop que imprime Baboo Dev 3 vezes, juntamente com o contador. Você pode consultar o resultado na imagem abaixo.

Vocês notaram a diferença do C# code para o VB, é que em C# o loop FOR inicia-se com 0.

Também você pode usar server tags embutidas para imprimir variáveis e também chamar funções que retornam valor quando igual a operador que é usado. Em geral, é um atalho para declaração Response.Write. Como também podemos imprimir variável.





Meu nome é .

VB.Net





Meu nome é .

E para chamar funções.





Hora Atual .

VB.Net





 Hora Atual .

No código acima estamos simplesmente chamando a função GetTime() usando as tags do servidor. E abaixo a imagem resultante no browser.

Expressões Data-Binding ( )

As Server Tags com um hash são usados para ligar dados com várias linhas ou itens para um controle de fonte de dados como Repeater, GridView, FormView, DataGrid, etc.






Lista de Nomes

VB.Net

Aqui primeiro criamos um novo objeto DataTable depois acrescentamos uma coluna chamada Nomes para ele, em seguida adicionamos três linhas, a fim de adicionar nomes de três pessoas para o DataTable. Então atribuímos a tabela de dados para um controle Repeater que finalmente exibe o mesmo.

Você vai notar que tenho usado declaração Eval para vincular os dados. Você também pode usar Bind, a diferença Eval para Bind pode ser usado para obter, bem como atualização de dados, portanto, geralmente Bind é usada com controles Textbox. Abaixo a imagem do browser.

Expressões ASP.Net ( )

O prefixo $ expression para AppSettings, ConnectionStrings ou recursos. O formato da expressão é a seguinte

O tipo pode ser AppSettings, ConnectionStrings, ou Recursos com base no que você deseja atribuir.

SelectCommand="SELECT * FROM [Customers]"

ConnectionString="">

Acima atribuímos o valor da connection string à fonte de dados usando o ASP.Net Expressions

Comentários Server Side ( )

As tags são usadas para especificar os comentários do lado do servidor na página aspx.

A sintaxe é:

<%-- Aqui via o comentário --%>

Abaixo foi feito um comentário em um controle TextBox na página aspx, desta maneira o controle não é processado.

Bom, então já tivemos uma boa explicação sobre ASP.Net Server Tags Inline.

Agora, após as alterações feitas a função JavaScript será capaz de encontrar os controles e, portanto, ela funciona corretamente conforme necessário. A razão pela qual ela começou a trabalhar também pode ser visto no código HTML da página, como mostrado na figura abaixo.

As marcações em amarelo mostra que o ID do TextBox e da Label é o mesmo que é gerado pela MasterPage, portanto, a função JavaScript começou a trabalhar. O método acima não funciona com arquivos JavaScript Source (JS), pois não conseguem interpretar as tags, elas não são permitidas. E aqui o resultado final:

Você pode baixar o código fonte de exemplo para este artigo através do link abaixo.

Download

Até mais e boa programação.

ASP.Net AJAX – Preenchendo com dados o Controle Line Chart

X@nBuRzUm — Sun, 03 Mar 2013 14:15:32 +0000

Neste artigo vou explicar com um exemplo de como preencher dinamicamente o controle ASP.Net AJAX Control Toolkit Animated Line Chart com o banco de dados SQL Server.

Para esse nosso artigo iremos precisar de um banco de dados, e sempre estamos adotando o Northwind Database do SQL Server. Caso você não o possua, clique no link abaixo para fazer o download.

Download e instalação Northwind Database

Para usar o controle ASP.Net AJAX Line Chart, arraste um ASP.Net AJAX ToolScriptManager na página, em seguida registre o AJAX Control Toolkit Library após a adição de referência ao seu projeto.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

Nosso código HTML é simples, ele contém de um DropDownList ASP.Net e um controle ASP.Net AJAX Control Toolkit Line Chart.

Com base na seleção do DropDownList, o gráfico de linha será preenchido a partir de banco de dados dinamicamente.

Vamos também precisar utilizar os seguintes Namespaces.

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

VB.Net

Imports System.Data

Imports System.Data.SqlClient

Imports System.Configuration

E vamos popular (preencher) nosso DropDownList e o ASP.Net AJAX Control Toolkit Line Chart, para isso no evento Load da página ASP.Net vamos preencher o DropDownList com lista de países de banco de dados Northwind, onde os pedidos (Orders ) foram enviados. Após, no evento SelectedIndexChanged do DropDownList preenchemos com informação estatística ou seja em que cidade do país selecionado, as ordens foram distribuídas. Esta informação estatística é apresentada como Gráfico de Linhas onde o eixo são as cidades dos países da cidade selecionada e a série a quantidade total de pedidos enviados em cada cidade.

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

string query = "select distinct shipcountry from orders";

DataTable dt = GetData(query);

ddlCountries.DataSource = dt;

ddlCountries.DataTextField = "shipcountry";

ddlCountries.DataValueField = "shipcountry";

ddlCountries.DataBind();

ddlCountries.Items.Insert(0, new ListItem("Select", ""));

}

}

protected void ddlCountries_SelectedIndexChanged(object sender, EventArgs e)

{

string query = string.Format("select shipcity, count(orderid) from orders where shipcountry = '{0}' group by shipcity", ddlCountries.SelectedItem.Value);

DataTable dt = GetData(query);

string[] x = new string[dt.Rows.Count];

decimal[] y = new decimal[dt.Rows.Count];

for (int i = 0; i < dt.Rows.Count; i++)

{

x[i] = dt.Rows[i][0].ToString();

y[i] = Convert.ToInt32(dt.Rows[i][1]);

}

LineChart1.Series.Add(new AjaxControlToolkit.LineChartSeries { Data = y });

LineChart1.CategoriesAxis = string.Join(",", x);

LineChart1.ChartTitle = string.Format("{0} Order Distribution", ddlCountries.SelectedItem.Value);

if (x.Length > 3)

{

LineChart1.ChartWidth = (x.Length * 75).ToString();

}

LineChart1.Visible = true;

}

private static DataTable GetData(string query)

{

DataTable dt = new DataTable();

string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;

using (SqlConnection con = new SqlConnection(constr))

{

using (SqlCommand cmd = new SqlCommand(query))

{

using (SqlDataAdapter sda = new SqlDataAdapter())

{

cmd.CommandType = CommandType.Text;

cmd.Connection = con;

sda.SelectCommand = cmd;

sda.Fill(dt);

}

}

return dt;

}

}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

If Not IsPostBack Then

Dim query As String = "select distinct shipcountry from orders"

Dim dt As DataTable = GetData(query)

ddlCountries.DataSource = dt

ddlCountries.DataTextField = "shipcountry"

ddlCountries.DataValueField = "shipcountry"

ddlCountries.DataBind()

ddlCountries.Items.Insert(0, New ListItem("Select", ""))

End If

End Sub

Protected Sub ddlCountries_SelectedIndexChanged(sender As Object, e As EventArgs)

Dim query As String = String.Format("select shipcity, count(orderid) from orders where shipcountry = '{0}' group by shipcity", ddlCountries.SelectedItem.Value)

Dim dt As DataTable = GetData(query)

Dim x As String() = New String(dt.Rows.Count - 1) {}

Dim y As Decimal() = New Decimal(dt.Rows.Count - 1) {}

For i As Integer = 0 To dt.Rows.Count - 1

x(i) = dt.Rows(i)(0).ToString()

y(i) = Convert.ToInt32(dt.Rows(i)(1))

Next

LineChart1.Series.Add(New AjaxControlToolkit.LineChartSeries() With { _

.Data = y _

})

LineChart1.CategoriesAxis = String.Join(",", x)

LineChart1.ChartTitle = String.Format("{0} Order Distribution", ddlCountries.SelectedItem.Value)

If x.Length > 3 Then

LineChart1.ChartWidth = (x.Length * 75).ToString()

End If

LineChart1.Visible = True

End Sub

Private Shared Function GetData(query As String) As DataTable

Dim dt As New DataTable()

Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString

Using con As New SqlConnection(constr)

Using cmd As New SqlCommand(query)

Using sda As New SqlDataAdapter()

cmd.CommandType = CommandType.Text

cmd.Connection = con

sda.SelectCommand = cmd

sda.Fill(dt)

End Using

End Using

Return dt

End Using

End Function

E aqui a imagem resultante no browser.

Você pode fazer o download dos códigos usados neste artigo clicando no link abaixo:

Download

ASP.Net – Contagem de Caracteres e a Validação do Comprimento máximo de caracteres

X@nBuRzUm — Thu, 28 Feb 2013 23:44:26 +0000

Neste artigo vou explicar como implementar Contagem de Caracteres e a Validação do Comprimento máximo de caracteres para os TextBox e o controle HTML TextArea. O controle HTML TextArea não tem a propriedade MaxLength como o TextBox normal e campos do tipo Password possuem, mas podemos usar o plugin jQuery MaxLength que simula o funcionamento do MaxLength normal com a ajuda de JavaScript e jQuery.

Então vamos a implementação do Plugin jQuery MaxLength para ASP.Net TextBox (TextArea), abaixo, você vai notar a implementação do plugin MaxLength jQuery. O plugin MaxLength jQuery tem os seguintes parâmetros obrigatórios e opcionais:

1. MaxLength (obrigatório) – valor inteiro indicando o limite de comprimento máximo de caracteres.
2. CharacterCountControl (opcional) – Por padrão, o plugin irá exibir a contagem de caráter abaixo do TextArea, mas o usuário tem a opção de especificar explicitamente o controle de contagem dos caracteres.
Lembrando que o controle de contagem de caracteres só pode ser usado com a tag HTML SPAN ou DIV.

3. DisplayCharacterCount (opcional) – Padrão True. Se escolhida para false a contagem de caracteres será desativada.

 
 
 title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">script>
 <script type="text/javascript" src="MaxLength.min.js">script>
 <script type="text/javascript">
 $(function () {
 //Normal Configuration
 $("[id*=TextBox1]").MaxLength({ MaxLength: 10 });

 //Specifying the Character Count control explicitly
 $("[id*=TextBox2]").MaxLength(
 {
 MaxLength: 15,
 CharacterCountControl: $('#counter')
 });

 //Disable Character Count
 $("[id*=TextBox3]").MaxLength(
 {
 MaxLength: 20,
 DisplayCharacterCount: false
 });
 });
 script>
 head>
 <body>
 <form id="form1" runat="server">
 <div id="counter">
 div>
 <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Width="300" Height="100"
 Text="Mudassar Khan">asp:TextBox>
 <br />
 <br />
 <asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" Width="300" Height="100">asp:TextBox>
 <br />
 <br />
 <asp:TextBox ID="TextBox3" runat="server" TextMode="MultiLine" Width="300" Height="100">asp:TextBox>
 form>
 body>
 html></pre>
<p><a href="http://www.mxstudio.com.br/wp-content/uploads/2013/02/contagem.fw_.png"></a></p>
<p>Faça o download dos arquivos <a href="http://www.mxstudio.com.br/wp-content/uploads/2013/02/ASP.Net-Contagem-de-Caracteres-e-a-Validação-do-Comprimento-máximo.zip">aqui</a>.</p>

</article>
</main></body></html>