Existem várias maneiras de se adicionar script dinamicamente em uma página html no lado servidor, aqui eu vou ensinar três delas.
A primeira e a mais simples é usando o ClientScriptManager que é uma classe para a manipulação de scripts do lado cliente
Vamos ao exemplo:
protected void Page_Load(object sender, EventArgs e)
{
ClientScriptManager cs = Page.ClientScript;
cs.RegisterClientScriptBlock(this.GetType(), "meuScript", "alert('Seja bem-vindo ao desenvolvedores.net');", true);
}
Este é o modo mais simples de se adicionar uma tag script. Vamos aos parâmetros.
No primeiro parâmetro informamos o tipo de objeto que iremos colocar o nosso script.
No segundo parâmetro informamos uma chave para identificar o nosso script.
No terceiro parâmetro informamos o nosso script.
No quarto parâmetro informamos que é para ser adicionado a tag <script>…</script>.
Usando esta técnica o script será adicionado no corpo do html, ou seja entre a tag <body>…</body>. Vejam o código gerado pelo asp
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title></head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGSCZayBSwoHn5bPS8BXxDJhk6Dhtg==" />
</div>
<script type="text/javascript">
//<![CDATA[
alert('Seja bem-vindo ao desenvolvedores.net');//]]>
</script>
<div>
</div>
</form>
</body>
</html>
Ok! Interessante, e funciona. Mas em alguns casos eu preciso adicionar na tag <head>…</head>. Isto é interessante quando temos que declarar uma função que será executada por algum componente, ou quando queremos tratar algo antes do corpo da página ser montado. Então. Como devo proceder?
Neste caso temo que usar o objeto chamado HtmlGenericControl e definir seu tipo e atributos. Vamos ao exemplo:
protected void Page_Load(object sender, EventArgs e)
{
HtmlGenericControl script = new HtmlGenericControl("script");
script.Attributes.Add("type", "text/javascript");
script.InnerHtml = "alert('Seja bem-vindo ao desenvolvedores.net');";
this.Page.Header.Controls.Add(script);
}
Veja que definimos o tipo de objeto “script” e usamos o Attributes para definir a linguagem de script que vamos utilizar, e dentro da propriedade InnerHtml colocamos todo o código do nosso script.
Aqui o código gerado pela página, repare nas linhas em destaque que estão dentro da tag <head>…</head>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title>
<script type="text/javascript">
alert('Seja bem-vindo ao desenvolvedores.net');
</script>
</head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGSCZayBSwoHn5bPS8BXxDJhk6Dhtg==" />
</div>
<div>
</div>
</form>
</body>
</html>
Bom. Mas eu uso um arquivo .js para organizar meus scripts, tem como eu fazer isso usando um arquivo?
A resposta é sim, tem como. Usando a mesma técnica descrita acima. Podemos adicionar um .js à nossa página. Vamos ao exemplo:
protected void Page_Load(object sender, EventArgs e)
{
HtmlGenericControl script = new HtmlGenericControl("script");
script.Attributes.Add("type", "text/javascript");
script.Attributes.Add("src", "Arquivo.js");
this.Page.Header.Controls.Add(script);
}
Repare que tiramos o InnerHtml e colocamos mais um atributo, o src , é aqui que definimos o caminho para o nosso arquivo .js.
abaixo o código gerado pela página. Repare nas linhas em destaque
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
Untitled Page
</title>
<script type="text/javascript" src="Arquivo.js">
</script>
</head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGSCZayBSwoHn5bPS8BXxDJhk6Dhtg==" />
</div>
<div>
</div>
</form>
</body>
</html>
É isso ai pessoal 🙂
Até o próximo
♦ Marcelo