|
|
|
ASP.NET Sayfalarına Dinamik Olarak JavaScript Kodu Eklemek |
|
| Gönderiliyor lütfen bekleyin... |
|
|
Merhaba, ilk ASP,NET
makalemin konusu JavaScript fonksiyon ve kod parçacıklarının sayfaya sunucu tarafında
eklenmesi.
Makale İçeriği :
- JavaScript’in
web uygulamaları için önemi.
- Örnek olarak
kullanacağımız PopUp pencere JavaScript kodları.
- Yöntem 1 .
Bir Web Kontrole dinamik olarak attribute eklemek.
- Yöntem 2 .
Page.RegisterStartupScript metodu ile sayfaya başlangıç scripti eklemek.
- Yöntem 3 . Page.RegisterClientScriptBlock
metodu ile sayfaya script bloğu eklemek.
- Sonuç
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(’http://www.csharpnedir.com/’,’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(’http://www.csharpnedir.com/’,’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.
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(’http://www.csharpnedir.com/
";
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(’http://www.csharpnedir.com/ ’,’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(’http://www.csharpnedir.com/
";
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(’http://www.csharpnedir.com/
";
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. İleriki makalelerimde
bu yöntemleri kullanarak custom control tasarımı yapacağız.
Makale:
ASP.NET Sayfalarına Dinamik Olarak JavaScript Kodu Eklemek ASP.NET Mustafa Erhan Ersoy
|
|
|
|
|
-
-
Eklenen Son 10
-
Bu Konuda Geçmiş 10
Bu Konuda Yazılmış Yazılmış 10 Makale Yükleniyor
Son Eklenen 10 Makale Yükleniyor
Bu Konuda Yazılmış Geçmiş Makaleler Yükleniyor
|
|
|