C#nedir?com
 
YAZAR HAKKINDA
uğur erdem
uğur erdem
http://www.csharpnedir.com/
İletişme geçmek için tıklayın.
3 Makalesi yayınlanmakta.
Yazar hakkında detaylı bilgi için tıklayın.
Yayınlanan diğer makaleleri için tıklayın.
İlgili etiketler: asp.net asp.net messagebox jquery jquery asp.net jquery plugin jquery plugin asp.net jquery plugin mesaj kutusu jquery plugin messagebox mesaj mesaj kutusu Kodlama uğur erdem
 
YAZI HAKKINDA
Türü : Serbest Köşe (?)
Serbest Köşede C#nedir?com üyelerinin hazırladıkları yazılar yayınlanır. Bu yazılar editör incelemesine girmeden yayınlanır.
Seviyesi : Başlangıç
Kategori : Kodlama
Yayınlanma Tarihi : 30.6.2011
Okunma Sayısı : 42323
Yorum Sayısı : 3     yorum yaz
Site İçi AramaSİTE İÇİ ARAMA
Üye Girişini AçÜye GİRİŞİ
Üye girişi için tıklayın.
Kullanıcı Adı
Şifre
 
Beni her zaman hatırla
Bir hafta boyunca kullanıcı bilgilerinizi kullanıcı çıkışı yapana kadar hatırlar. (Paylaşılan bilgisayarlarda önerilmez.)
 
Şifremi / Kullanıcı Adımı unuttum.
 
.net TV RSS Serbest KÖŞE (?)
Serbest Köşede C#nedir?com üyelerinin hazırladıkları yazılar yayınlanır. Bu yazılar editör incelemesine girmeden yayınlanır.
emre TAŞ
XML - Deniz Kılınç
emre TAŞ
yazının devamı >
emre TAŞ
Decompiling and Reverse Engineering .Net Radyo
emre TAŞ
yazının devamı >
emre TAŞ
Masaüstü mü ? İnternet Mi? .Net Radyo
emre TAŞ
yazının devamı >
emre TAŞ
.Net Kavramları - .Net Radyo
emre TAŞ
yazının devamı >
emre TAŞ
Yeni Başlayanlar için - .Net Radyo
emre TAŞ
yazının devamı >
Makale Gönder Bende Yazmak İstiyorum
.net TV RSSBlogroll
Turhal Temizer 'in Blogu
How to Best Market Your Messenger Bot 29.6.2017
Turhal Temizer 'in Blogu
Advanced Natural Language Processing Tools for Bot Makers – LUIS, Wit.ai, Api.ai and others 29.6.2017
Burak Selim Şenyurt
Python - PEP8 Uyumlu Kod Geliştirmek 29.6.2017
Burak Selim Şenyurt
GoLang - Yönlendiriciler(Routers) 29.6.2017
  Diğer Herşey
Sponsorlar
BT Akademi
Medya Portakal
Video Hosting Sponsoru
Csharpnedir.com bir Ineta üyesidir
Uzman Abi
Her Yönüyle C# - Sefer Algan
Alert - Jquery -ASP.NET
 
Kapat
Sayfayı Yazdır Sık Kullanılanlara Ekle Arkadaşıma Gönder MySpace Del.Ico.Us Digg Facebook Google Mixx Reddit StumbleUpon

 

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>

uyarihata

bilgibasari

 

Bir makaleninde sonuna geldik. Diğer bir yazımda ise aynı mesaj kutuları updatepanel kullanarak yapmayı anlatacağım. Bol kodlu günler

 

Makale:
Alert - Jquery -ASP.NET Kodlama uğur erdem
  • Yazılan Yorumlar
  • Yorum Yaz
TEM
19
2011
Yukarıdaki örneği bulamadım ama benim kullandığım ve buna benzer başka bir örneği http://yazogren.com/JqueryMessageSample.rar adresinden indirebilirsiniz.
TEM
19
2011
CSS i de verebilir misiniz. resim dosyaları ile birlikte ;
TEM
19
2011
elinizze sağlık fakat çalışır demo yokmuydu. ben denedim ve bazı sorunlar var. draggable değil, widget is not defined. ve callback de not defined ...
Sayfalar : 1 
Yorum yazabilmek için üye girişi yapmalısınız. Üye girişi için tıklayın.
Üye değilseniz Üyel Ol linkine tıklayarak üyeliğinizi hemen başlatabilirisniz.
 
  • Bu Konuda Son 10
  • 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