JavaScript’in web uygulamaları için önemi
JavaScript’in en büyük avantajı sunucuya yapılan isteklerin (PostBack) azaltılarak network trafiğini azaltmak dolayısıyla daha hızlı web uygulamaları geliştirmektir. Dinamik web sayfaları tasarlamak ve kullanıcıya, server’a gitmeksizin cevap verebilmektir. Kullanıcıyı doğru veri girmeye zorlayarak sunucuya düşen görevi hafifletmek. (Validation)
Örnek olarak kullanacağımız PopUp pencere JavaScript kodları
Örneğimizde, sık olarak kullanılan popup pencere JavaScript kodunu kullanacağız : window.open(’Linki görüntüleyebilmek için <a href="%2$s"><strong>Üye</strong></a> olmanız gerekiyor.;,’anycontent’, ’width=800, height=600 ,scrollbars=1’);
JavaScript ile kullanıcının sayfa içerisinde gezerken yaptığı yaptığı olaylara karşı form kontrollerinin OnClick, OnFocus, OnBlur, OnMouseOver gibi olayları otomatik olarak çağrılır. Yapmamız gereken uygun olaya uygun JavaScript kodunu eklemektir. <input type="button" onclick="javascript:window.open(’Linki görüntüleyebilmek için <a href="%2$s"><strong>Üye</strong></a> olmanız gerekiyor.;,’anycontent’, ’width=800, height=600 ,scrollbars=1’);">
Yukarıdaki buton’a bastığımızda bir popup sayfası açacaktır. Yöntem 1 . Bir Web Kontrole dinamik olarak attribute eklemek
Öncelikle VS.NET’te bir C# ile ASP.NET Web Uygulaması açalım. Sayfamıza aşağıdaki resimdeki gibi üç adet buton koyalım.
Linki görüntüleyebilmek için <a href="%2$s"><strong>Üye</strong></a> olmanız gerekiyor.
Sayfamızın HTML body tag’i basitçe :
<body>
<form id="Form1" method="post" runat="server">
<table ID="Table1">
<tr>
<td colSpan="2">
<h2>.NET ve JavaScript</h2>
</td>
</tr>
<tr>
<td>Javascript Örnek 1 :</td>
<td><asp:button id="btnScript1" runat="server" Text="Örnek 1"></asp:button></td>
</tr>
<tr>
<td>Javascript Örnek 2 :</td>
<td><asp:button id="btnScript2" runat="server" Text="Örnek 2"></asp:button></td>
</tr>
<tr>
<td>Javascript Örnek 3 :</td>
<td><asp:button id="btnScript3" runat="server" Text="Örnek 3"></asp:button></td>
</tr>
<tr>
<td align="center" colSpan="2"><a style="COLOR: red" name="ancLabel"></a></td>
</tr>
</table>
</form>
</body>
Şeklinde olmalı. Şimdi sunucu tarafında hazırladığımız JavaScript kodunu sayfanın Page_Load olayında belirlediğimiz bir kontrole (btnScript1) ekleyelim.
private void addAttributeToControl(WebControl control) {
string strScript = "javascript:";
// Açacağımız popup sayfa scripti :
strScript += "window.open(’Linki görüntüleyebilmek için <a href="%2$s"><strong>Üye</strong></a> olmanız gerekiyor. ";
strScript += "’,’anycontent’,";
// PopUp pencerenin özellikleri :
strScript += "’width=800"; // Genişlik
strScript += ",height=600"; // Yükseklik
strScript += ",scrollbars=1"; // Scrollbar
strScript += "’);";
// Bir kontrolün attributes kolleksiyonuna javascript eklenmesi :
control.Attributes.Add("onclick", strScript);
}
private void Page_Load(object sender, System.EventArgs e) { // Attribute olarak Javascript’in kontrole eklenmesi :
this.addAttributeToControl(this.btnScript1);
} ASP.NET web kontrollerinin attributes kolleksiyonu ile her browser’ın desteklediği her attribute kontrole eklenebilir. Şimdi projeyi derledikten sonra sayfayı çağıralım ve sayfanın kaynak koduna bakalım.
<input type="submit" name="btnScript1" value="Örnek 1" id="btnScript1" onclick="javascript:window.open(’Linki görüntüleyebilmek için <a href="%2$s"><strong>Üye</strong></a> olmanız gerekiyor. ’,’anycontent’,’width=800,height=600,scrollbars=1’);" />
şeklinde olacaktır.
Yöntem 2 . Page.RegisterStartupScript metodu ile sayfaya başlangıç scripti eklemek
Page nesnesinin RegisterStartupScript metodu, sayfaya başlangıç scripti eklememizi sağlar. Dolayısıyla ekleyeceğimiz script sayfa browser’da açılırken çalışacaktır. Dikkat edilmesi gereken husus, script sayfanın en sonuna eklenir. Yani sayfanın tamamı geldikten sonra browser tarafından çalıştırılır.
Şimdi ikinci butonumuzun click olayına aşağıdaki kodu ekleyelim :
private void btnScript2_Click(object sender, System.EventArgs e) {
// DİKKAT :
// StartUpScript olarak sayfaya kaydedildiği için sayfanın her yenilenişinde bu script çalışacaktır.
// Ayrıca bu script hep postback ile çalışacaktır.
string strScript="";
// Scriptin daha önce eklenip eklenmediğini kontrol ediyoruz :
if(!this.IsStartupScriptRegistered("Baslangic"))
{
// Javascript’imizi oluşturuyoruz :
strScript = "<script language=’JavaScript’>";
// Açacağımız popup sayfa scripti :
strScript += "window.open(’Linki görüntüleyebilmek için <a href="%2$s"><strong>Üye</strong></a> olmanız gerekiyor. ";
strScript += "’,’anycontent’,";
// PopUp pencerenin özellikleri :
strScript += "’width=800"; // Genişlik
strScript += ",height=600"; // Yükseklik
strScript += ",scrollbars=1"; // Scrollbar
strScript += "’);";
strScript += "</script>";
// Oluşturduğumuz script’in başlangıç script’i olarak sayfaya eklenmesi :
this.RegisterStartupScript("Baslangic", strScript);
}
}
Şimdi sayfayı browser’da açtıktan sonra Örnek 2 butonuna basarsak sayfa server’a gidip gelecek ve popup açacaktır. İlk postback’ten sonra sayfanın kaynak koduna bakarsanız, oluşturduğumuz JavaScript kodunu görebilirsiniz.
Yöntem 3 . Page.RegisterClientScriptBlock metodu ile sayfaya script bloğu eklemek
Page nesnesinin RegisterClientScriptBlock metodu, sayfaya script bloğu yani Javascript fonksiyonu eklememizi sağlar. RegisterStartupScript’dan farklı olarak yazılan fonksiyon sayfanın başında body HTML taginin hemen altına eklenir.
private void addBlockToPage()
{
string strScript = "<script language=’JavaScript’>";
// DİKKAT : fonksiyon olarak tanımlıyoruz.
strScript += "function popUpWindow()";
strScript += "{";
// Açacağımız popup sayfa scripti :
strScript += "window.open(’Linki görüntüleyebilmek için <a href="%2$s"><strong>Üye</strong></a> olmanız gerekiyor. ";
strScript += "’,’anycontent’,";
// PopUp pencerenin özellikleri :
strScript += "’width=800"; // Genişlik
strScript += ",height=600"; // Yükseklik
strScript += ",scrollbars=1"; // Scrollbar
strScript += "’);";
// Kullanıcı taraflı Programlamanın daha iyi anlaşılabilmesi için formu göndermeyeceğiz :
strScript += "return false;";
strScript += "}";
strScript += "</script>";
// Scriptin daha önce eklenip eklenmediğini kontrol ediyoruz :
if(!this.IsClientScriptBlockRegistered("ScriptBlok"))
{
// Oluşturduğumuz script’in, script blok olarak sayfaya eklenmesi :
this.RegisterClientScriptBlock("ScriptBlok", strScript);
// Fonksiyon olarak tanımladığımız javascript’i butonun click olayına ekliyoruz :
this.btnScript3.Attributes.Add("onclick", "javascript:return popUpWindow();");
}
}
private void Page_Load(object sender, System.EventArgs e)
{
// Script bloğu olarak Javascriptin sayfaya eklenmesi :
this.addBlockToPage();
} Sonuç
Bu makalemde hazırladığımız kullanıcı taraflı JavaScript kodlarının .aspx sayfasına dinamik olarak eklenmesi üzerinde durduk. Kullanılan örneklerin yeraldığı projeyi indirmek için tıklayın. (Linki görüntüleyebilmek için <a href="%2$s"><strong>Üye</strong></a> olmanız gerekiyor.) İleriki makalelerimde bu yöntemleri kullanarak custom control tasarımı yapacağız.
Alıntıdır. Umarım işine yarar..