O Javascript se tornou uma parte muito importante da tecnologia ASP.NET, seus modelos oferecem aos desenvolvedores muitas maneiras de trabalhar corretamente com suas funções de JavaScript em páginas ASP.NET. Você pode utilizar desde as tradicionais tags de scripts para utilizar código Javascript em uma página ou utilizar classes que gerenciam scripts em uma aplicação ASP.NET. Contudo as páginas ASP.NET sempre foram consideras lentas, principalmente em suas versões iniciais, basta procurar no Google por “lentidão ASP.NET” e encontrará uma enxurrada de artigos sobre o assunto. Com inúmeras reclamações de desempenho, o Javascript, Ajax, JQuery e outras bibliotecas foram incorporadas ao ASP.NET ao longo de sua evolução se tornando parte de seus Templates oficiais, deste modo a Microsoft também passou a incorporar o Javascript em sua biblioteca de linguagens e em suas mais recentes tecnologias (Windows Phone e App Store), criando sua própria documentação e contribuindo para a evolução da linguagem.
ASP.NET – Lento ???
Javascript: https://msdn.microsoft.com/en-us/library/ie/yek4tbz0(v=vs.94).aspx
Por fim, afim de proporcionar uma tecnologia mais leve e dinâmica a Microsoft criou inúmeras melhorias e modificações sobre como os scripts podem ser utilizados na plataforma, criando assim novas classes e marcando velhas classes como obsoletas, como por exemplo Page.RegisterClientScriptBlock() foi substituído nas novas versões por ClientScriptManager.ClientScriptBlockRegistered() e por ai vai. A Microsoft também tornou o ASP.NET grátis e abriu seu código sob a licença Apache, para que seja mais competitivo diante de outras tecnologias Web, como o Ruby on Rails, referencia citada na pagina oficial do ASP.NET, que inspirou a versão ASP.NET com Pattern MVC e Unobtrusive Javascript, o Rails também possui integração nativa com JQuery, Ajax e outros frameworks como CoffeeScript e NodeJS. Deste modo utilizar o ASP.NET para desenvolver aplicações Web se faz importante que o desenvolvedor sempre esteja atualizado e antenado com as novas modificações da plataforma.
Web Application – Template – Javascript
Alguns arquivos Javascript de um template são usados pelo Visual Studio e outros pela própria aplicação, para uma introdução sobre como estes arquivos são utilizado você pode consultar esta pagina:
ASP.NET Javascript: http://www.asp.net/web-forms/overview/client-script,-jquery,-and-ajax
Usando uma Biblioteca Externa
1 – Crie um projeto web do tipo C# Empty e crie uma pagina Web Forms chamada default.aspx. Vamos começar de um modo simples utilizando apenas um arquivo Javascript externo, entretanto vamos utilizar validações usando os componentes visuais e precisamos desabilitar as novas validações Javascript Unobtrusive que são o novo padrão para o ASP.NET faremos isto modificando o arquivo Web.config.
Crie uma nova pasta chamada DAScripts e dentro crie um novo arquivo Javascript chamado MeujsTeste.js:
Javascript
2 – Na tag Head de sua página crie uma nova tag Script e utilize os recursos do editor para localizar seu arquivo:
Visual Studio – Pick URL
3 – Selecione seu arquivo Javascript:
MeujsTeste.js
4 – Utilize os códigos abaixo para cada arquivo e rode sua aplicação :
Javascript – Eventos
Exemplo:
Neste exemplo utilizamos Javascript para imprimir na página os eventos de entrada e saída do mouse em um componente TextBox do WebForms.
default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="DAWebApp001._default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style2 {
width: 14%;
}
.auto-style3 {
height: 23px;
}
.auto-style5 {
width: 248px;
}
.auto-style6 {
width: 54%;
}
.auto-style8 {
height: 23px;
width: 54%;
}
.auto-style9 {
height: 23px;
width: 248px;
}
</style>
<script type="text/javascript" src="DAScripts/MeujsTeste.js"></script>
</head>
<body>
<h1>Desenvolvimento Aberto - ASP.NET</h1>
<h2>Validação de Controles</h2>
<form id="form1" runat="server">
<div>
<table style="width: 100%;">
<tr>
<td class="auto-style3" colspan="2">
<asp:Label ID="LabelMenssagem" runat="server" Text="Entre com os dados abaixo:"></asp:Label>
</td>
<td class="auto-style8"></td>
</tr>
<tr>
<td class="auto-style2">
<asp:Label ID="Label2" runat="server" Text="Nome:"></asp:Label>
</td>
<td class="auto-style5">
<asp:TextBox ID="TextBox1nome" onMouseOver="meuMouseOver()" onMouseOut="meuMouseOut()" runat="server" Width="142px" ></asp:TextBox>
</td>
<td class="auto-style6">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1nome" ErrorMessage="Nome é obrigatório." ForeColor="Red" ValidationGroup="AllValidator"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="auto-style3">
<asp:Label ID="Label3" runat="server" Text="Sobrenome:"></asp:Label>
</td>
<td class="auto-style9">
<asp:TextBox ID="TextBox2sobrenome" runat="server" Width="240px"></asp:TextBox>
</td>
<td class="auto-style8">
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="TextBox2sobrenome" ErrorMessage="Sobrenome é obrigatório." ForeColor="Red" ValidationGroup="AllValidator"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="auto-style3">
<asp:Label ID="Label4" runat="server" Text="Cargo:"></asp:Label>
</td>
<td class="auto-style9">
<asp:TextBox ID="TextBox3cargo" runat="server" Width="186px"></asp:TextBox>
</td>
<td class="auto-style8">
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox3cargo" ErrorMessage="Cargo é obrigatório." ForeColor="Red" ValidationGroup="AllValidator"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="auto-style3">
<asp:Label ID="Label5" runat="server" Text="Salário:"></asp:Label>
</td>
<td class="auto-style9">
<asp:TextBox ID="TextBox4salario" runat="server"></asp:TextBox>
</td>
<td class="auto-style8">
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="TextBox4salario" ErrorMessage="Salário é obrigatório. " ForeColor="Red" ValidationGroup="AllValidator"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style9"> </td>
<td class="auto-style8"> </td>
</tr>
<tr>
<td class="auto-style3">
<asp:Button ID="Button1enviardados" runat="server" Text="Enviar Dados" OnClick="Button1enviardados_Click" ValidationGroup="AllValidator" />
</td>
<td class="auto-style9"> </td>
<td class="auto-style8"> </td>
</tr>
</table>
<!-- Div - logs do evento javascript -->
<div id="meulog"></div>
</div>
</form>
</body>
</html>
default.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace DAWebApp001
{
public partial class _default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1enviardados_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
// Envia menssagem quando todos os campos requeridos
// forem preenchidos tornando a página valida.
LabelMenssagem.ForeColor = System.Drawing.Color.Green;
LabelMenssagem.Text = "Dados enviados com sucesso.";
}
}
}
}
MeujsTeste.js
// Desenvolvimento Aberto
// Javascript teste
function meuMouseOver() {
var div = document.getElementById('meulog');
div.innerHTML = div.innerHTML + 'Você entrou no campo nome ';
}
function meuMouseOut() {
var div = document.getElementById('meulog');
div.innerHTML = div.innerHTML + 'Você saiu do campo nome ';
}
Web.config
<?xml version="1.0" encoding="utf-8"?>
<!--
For more information on how to configure your ASP.NET application, please visit
http://go.microsoft.com/fwlink/?LinkId=169433
-->
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.5" />
<httpRuntime targetFramework="4.5" />
</system.web>
<appSettings>
<add key="ValidationSettings:UnobtrusiveValidationMode" value="None"/>
</appSettings>
</configuration>
Ricardo Mantovani
Desenvolvimento Código Aberto 