Jan
22

Primeiramente, o que seria JavaScript Embedded, e por que usa-la?

È simples, você certamente ja deve ter notado um Tag <script> no seu HTML gerado com o endereço WebResource.axd?d=Ei2D0BWn0DEpey-.............., então o WebResource.axd vai "redirecionar" para um arquivo JavaScript que está dentro de uma dll (que certamente será a dll dos seus controles customizado).

Se você tem o costume de criar/customizar controles, então você já deve ter precisado adicionar código JavaScript, e criar uma string contendo o JavaScript e adiciona-lo quando estiver fazendo o Render ou então usando  ScriptManager.RegisterClientScriptBlock, essa é uma solução muita estranho (para não dizar gambiarra). Outro motivo para usa-lo é que como o navegador vai interpreta-lo como um arquivo JS (e não um texto no meio do seu HTML) então, ele vai ficar em cache e sua página vai ficar mais otimizada.

Vou criar um controle demo, mais especificamente, um HyperLink que quando clicar exibirá uma alert.

1° Passo: criar e fazer a herança do controle

   1: [ToolboxData("<{0}:MGHyperLink runat=server />")]
   2: public class MGHyperLink : System.Web.UI.WebControls.HyperLink
   3: {
   4: }

 

2° Passo: criar meu aquivo JavaScript que vai conter a função para exibir o alert

   1: function DemoAlert()
   2: {
   3:     debugger; //Abilitar o debug
   4:     alert("Alo Mundo!");
   5:     return false;
   6: }

É muito importante setar o Build Action para Embedded Resource

E como fazer isso?

  1. Clica no arquivo
  2. Precione F4 para exibir as propriedades
  3. E então altere o Build Action para Embedded Resource

Bem simples a função a unica coisa  a destacar é o debugger que se seu IE estiver habilitado para debugar JavaScript e você estiver usando o VisualStudio 2008 ele será considerado um breakPoint.

 

3º Passo: Definir o arquivo JavaScript para com um Web Resource

Abra o arquivo AssemblyInfo que fica dentro da pasta Properties, ele é cridado automaticamente quando você cria um projeto como ClassLibrary. Então informe onde fica o arquivo que você criou

   1: //Caminho completo do JavaScript incluindo o nome do projeto + as pastas + nome do arquivo
   2: [assembly: WebResource("CustomControl.Controls.HyperLink.Resource.DemoAlert.js", "text/javascript")]

Isso não serve somente para arquivos JavaScripts não, você pode usar para arquivos CSS, imagens...

 

4º Passo: Renderizar a tag <script> com o endereço do seu arquivo:

   1: protected override void OnPreRender(EventArgs e)
   2: {
   3:     base.OnPreRender(e);
   4:     
   5:     //Antes de renderizar adicionar o JavaScript
   6:     ScriptManager.RegisterClientScriptResource(this, GetType(),
   7:         "CustomControl.Controls.HyperLink.Resource.DemoAlert.js");            
   8: }

O ScriptManager vai fazer todo o trabalho de criar a tag com o caminho adequando.

 

5 º Passo: Adicionar o evento onclick no hyperlink para executar a função JavaScript

   1: protected override void Render(HtmlTextWriter writer)
   2: {
   3:     //Adicionando o evento onClik com a funcao JS criada
   4:     writer.AddAttribute("onclick", "DemoAlert()");
   5:     base.Render(writer);
   6: }

 

Então basta agora adicionar seu controle na página e depois visualize o código HTML gerado, verá que o seu arquivo JavaScript está dentro de um WebResource.axd assim:

   1: <script src="/WebResource.axd?d=Ei2D0BWn0DEpey-kSzG_XQ2&amp;t=633314183876875000" type="text/javascript"></script>

 

Se você está curioso de saber com ficou seu arquivo, então abra o WebResource.axd (o caminho completo) na barra de endereço e verá que seu arquivo não foi nada modificado.

Links:


Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Add comment


 

  Country flag

biuquote
Loading



Search


Novidades no seu e-mail


Recent posts

Recent comments

Designer Original Binary Bonsai | Adaptado para MagoDigital | BlogEngine.NET