Merhaba Arkadaşlar bu yazımda sizlere jquery ve onun bir plug in kullanarak ASP.Net uyarı mesajı verdirmeye çalışacağız. Hepimiz biliyoruz ki ASP.NET 2.0 ile kullanıcılara yaptıkları işlem sonuçlarını bir mesaj kutusu ile göstermek istersek javascriptleri kullanıyoruz. Ben de size bir uygulama içerinde jquery kullanıp onun bir plug in ile sayfalarımızda kullanıcılarımızı bilgilendirmek için Mesaj kutusunu nasıl çıkaracağımız hakkında ufak bir bilgi vermeye çalışacağım. Buna geçmeden önce jquery hakkında biraz bilgi vermek istiyorum.
Jquery Nedir ?
jQuery hem javaScript hem ajax hem de efekt kütüphanesi olarak kullanılabilen bir framework’dür.
2006 Yılında John Resig tarafından geliştirilmeye başlanmış. Bir javascript frameworkdur.Şu anda 15 kişilik ekip tarafından geliştirilmektedir.Jquery lisans olarak GPL ve MIT lisansları altında geliştiricilere sunulmaktadır.Lisans ile ilgi daha detay bilgi için www.jquery.com sitesini ziyaret edebilirsiniz.
Client taraftaki bir çok işlemi çok daha kolay ve hızlı yapmak istediğimizde kullanabiliriz.
Sayfamızda Css,Efektler vb. çok kullanıyor ve bunlar üzerinde çok sık işlem yapıyorsak Jquery derdimizin dermanı olacaktır.
Jquery nereden indirir ve sayfama nasıl eklerim ? sorusunu sorduğunuzu duyar gibi oldum. Jquery ile merak ettiklerinize şu linkleri kullanım erişebilirsiniz.
www.visualjquery.com
www.jquery.com
İlk ile Jquery test edebilir, eventlerinin, metotlarının kullanımlarını örnekleri ile görebilirsiniz. Diğer linkte ise jquery kitaplığına ve dökümanlarına ulaşabilirsiniz.
Jquery kitaplığını indirdikten sonra sayfamıza
<head runat=”server”>
<script src=”js/jquery.js” type=”text/javascript”></script>
<title>Jquery mesaj kutusu </title>
</head>
Şeklinde ekleyebiliriz. Daha sonra jquery için hazırlanmış ve kullanacağımız pluginleri indirelim. Burada farklı iki yapı var onlardanda kısaca bahsetmek istiyorum. Birinci ekleyeceğimiz plugin ile mesaj kutusunun sayfa üzerinde hareketliğini sağlayacağız. İkinici plugin ise mesaj kutusunun çıkmasını sağlayacak olan plugin. Bu plugin birde kendine ait css dosyası var. Bu sayade açılacak olan Mesaj kutusunun renklendirilmesi ve mesajın durumuna göre ikonun ayarlanması için hazırlanmıştır.
Bu pluginleride sayfamıza eklediğimizde head taglarımızın arası şu şekilde görünecektir.
<head runat=”server”>
<link href=”Css/jquery.alerts.css” rel=”stylesheet” type=”text/css”/>
<script src=”js/jquery.js” type=”text/javascript”></script>
<script src=”js/ui.core.js” type=”text/javascript”></script>
<script src=”js/jquery.ui.draggable.js” type=”text/javascript”></script>
<script src=”js/jquery.alerts.js” type=”text/javascript”></script>
<title>Jquery mesaj kutusu </title>
</head>
Sayfa içerine pluginlerimizi, Jquery ve Plugin Css Dosyasını eklemeyi bitirdik. Şimdi asıl kısıma gelip işlemimize başlayalım. Ben burada Page nesnesinden miras alan yeni bir class tanımlayıp onun üzerindede kullanıcın yaptığı işlemlerin sonucuna göre bilgilendirme mesajlarının gösterimini gerçekleştirecek olan metotları tanımlayacağım.
Bu plugin ile kullanımına bakalım. jAlert(‘MesajTip’, ‘Mesaj’,'Başlık’); şeklinde sayfa içerisinde tanımlandığında mesaj kutumuz çıkacaktır. Mesaj tipi olarak tanımlaya bileceğimiz yapılar ise;
error
warning
success
info
şeklinde sıralanabilir. CSS dosyası ise hangi tip mesaj açılıyorsa ise ona göre bir düzenlemeyi barındırıyor. Projeye eklediğim classa jqPage adını verdim. Bu arada ikinci bir class daha ekleyip. Bu class içerisinde ise mesaj kutularının çıkmasını sağlayan scrip kodunu barındıracağım. O classada jalertScripts adını verelim.
Bu classımın içeriği şu şekilde;
public class jalertScripts
{
public const string JalertsError = “jAlert(‘error’, ‘{0}’,'{1}’);”;
public const string JalertsWarning = “jAlert(‘warning’, ‘{0}’,'{1}’);”;
public const string JalertsSuccess = “jAlert(‘success’, ‘{0}’,'{1}’);”;
public const string JalertsInfo = “jAlert(‘info’, ‘{0}’,'{1}’);”
}
düzenleyelim. Buradaki süslü parantezler bizim mesaj olarak göstermek istediğimiz ve kullanıcadan parametre olarak aldığımız mesajlarlar yer değiştirecektir. Bu işlemi yapabilmek içinde yeni bir class oluşturup BuildString adını verelim.
public class BuildString
{
public static string BuildScriptString(string pScript,string[] p)
{
for (int i = 0; i < p.Length; i++)
{
pScript = pScript.Replace(“{“ + i + “}”, p[i]);
}
return pScript;
}
}
Buradaki metot sayesinde jquery üzerine eklediğimiz plugin script formatına uygun mesajımızı oluşturmuş olduk.
ASP.NET sayfasından miras alan bir class daha oluşturalım. Bu class içerisinde mesajlarımızın metotlarını tanımladıktan sonra web sitemiz için oluşturacağımız sayfaları bu classtan miras alarak oluşturduğumuzda artık sayfalarımızda istediğimiz bilgilendirme mesajını rahatlıkla gösterebilir olacağız.
Bu classı oluşturmaya geçmeden öcne bir noktaya daha değinmek istiyorum. Sayfamız içerisinde jquery ile mesajlarımızı gösterebilmek için sayfamızın body nesnesini server side hale getirip id si ni de bd olarak atamamız gerekiyor. Mesaj kutularımızı sayfamızın onload halinde çıkaracağımız için sayfamızdaki body ye codebehind tarafta erişip onload haline attribute olarak mesaj kutularımızın çıkmasını yani oluşturduğumu scripti ekleyeceğiz.
Şimdi bir class daha ekleyip içeriğini şu şekilde düzenliyorum.
public class jqPage:Page
{
public void SuccessMessage(string pMsg, string pTitle)
{
string script =BuildString.BuildScriptString(jalertScripts.JalertsSuccess, newstring[] { pMsg, pTitle });
((HtmlGenericControl)this.FindControl(“bd”)).Attributes.Add(“onload”, script);
}
public void WarningMessage(string pMsg, string pTitle)
{
string script =BuildString.BuildScriptString(jalertScripts.JalertsWarning, newstring[] { pMsg, pTitle });
((HtmlGenericControl)this.FindControl(“bd”)).Attributes.Add(“onload”, script);
}
public void InfoMessage(string pMsg, string pTitle)
{
string script =BuildString.BuildScriptString(jalertScripts.JalertsInfo, new string[] { pMsg, pTitle });
((HtmlGenericControl)this.FindControl(“bd”)).Attributes.Add(“onload”, script);
}
public void ErrorMessage(string pMsg, string pTitle)
{
string script =BuildString.BuildScriptString(jalertScripts.JalertsError, newstring[] { pMsg, pTitle });
((HtmlGenericControl)this.FindControl(“bd”)).Attributes.Add(“onload”, script);
}
}
Burada yaptığım işlemler üzerinde biraz konuşalım. İlk kısımda söylediğimiz gibi bu class Page classından miras alıyor. Çünkü projemiz içerisinde kullanacağımız sayfalarda bu class tan miras alacaklar. Dolayısıyla bu classın tüm page özelliklerine sahip olması gerekiyor. Şimdi mesajlarımızı gösteren metotları inceleyelim. Dört ayrı tipte mesaj kutumuz olduğunu hatırlıyorsunuz değil mi ? her bir mesaj kutusu tipi için farklı bir metot tanımladım. Şimdi metotlardan birini inceleyelim. Daha önce adım adım oluşturduğumuz classlarımızın burada neler yaptıklarını daha iyi anlayacağız. Buildstring classımız ile jquery plugin çalışması için gerekli olan script şeklini oluşturuyoruz. Aldığı parametrelerden birincisi jalertscript classında tanımladığımız sabit ifademiz. İkincisi ise kullanıcıya göstermek istediğimiz mesaj ve bu measjın başlığını içerisinde barındıran string tipindeki dizimiz. Buildstring classını hatırlayacak olursanız içerisinde dizi elemaları üzerinde geçerken script içeriğinde süslü parantez olarak ayırdığımız yerlele replace ediyoruz. Bu sayede plugin çalışması için gerekli olan script kodunu oluşturuyoruz. Sonra oluşan kodumuzu sayfamızın onload olayına ekleyip mesajımızın görünmesini sağlıyoruz.
Sayfamızın source ve codebehind kısımlarına bakalım.
public partial class _Default : jqPage
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnInfo_Click(object sender, EventArgs e)
{
this.InfoMessage(“işleminiz devam ediyor lütfen bekleyiniz.”,“Bilgi”);
}
protected void btnSuccess_Click(object sender, EventArgs e)
{
this.SuccessMessage(“İşleminiz başarı ile tamamlandı”,“Başarılı”);
}
protected void btnError_Click(object sender, EventArgs e)
{
this.ErrorMessage(“İşleminiz gerçekleştirilirken hata ile karşılaşıldı”,“Hata”);
}
protected void btnWarning_Click(object sender, EventArgs e)
{
this.WarningMessage(“Kişisel bilgilerinizi güncellemeniz gerekmektedir.”,“Uyarı”);
}
}
—————–source—————————-
<body runat=”server” id=”bd”>
<form id=”form1″ runat=”server”>
<div>
<asp:Button ID=”btnInfo” runat=”server” Text=”Info”onclick=”btnInfo_Click” />
</div>
<div>
<asp:Button ID=”btnSuccess” runat=”server” Text=”Başarılı”
onclick=”btnSuccess_Click” />
</div>
<div>
<asp:Button ID=”btnError” runat=”server” Text=”Hatalı”
onclick=”btnError_Click” />
</div>
<div>
<asp:Button ID=”btnWarning” runat=”server” Text=”Uyarı”
onclick=”btnWarning_Click” />
</div>
</form>
</body>
Bir makaleninde sonuna geldik. Diğer bir yazımda ise aynı mesaj kutuları updatepanel kullanarak yapmayı anlatacağım. Bol kodlu günler