Mvc projemizde jQuery ajaxı kullanarak, bir içeriğin altına yorum ekleme ve silme işlemini gerçekleştireceğiz. Bu işlemin bize kazandırdıklarını, mvc ile uygulama geliştirmenin bize kattıklarınıda anlamaya çalışacağız. Umarım faydalı olur.
Videoyu daha kaliteli izlemek için buradan indirebilirsiniz.
Asp.Net de sayfamıza eklediğimiz her kontrolün bir id si bulunuyor. Javascript ile kontrollerimize erişmek istediğimizde bu id leri direk kullanabiliyoruz. Eğer masterpage kullanırsak işler biraz değişiyor. Sayfamız masterpage den türediği zaman kontrollerin idlerine bir ön ek geliyor. Bunu kod tarafında göremesekte sayfa yorumlandıktan sonra kaynak kodlarına baktığımızda id lerin değiştiğini görüyoruz. Haliyle jquery ile ilgili id deki elemanı seçmemiz için kod tarafında ki id değil, kullanıcı (client) tarafında ki id yi kullanmamız gerekiyor. Bu durumda İki şekilde problemimizi çözebiliyoruz. Birinci çözüm yolu kontrollerin ClientID özelliğini kullanmak. <%=kontrol.ClientID%> dediğimizde geriye dönen id bizim kontrolümüzün sayfa yorumlandıktan sonra oluşan değerdir. Fakat bu yöntemi .js sayfamızda kullanmamız söz konusu değil bu sebepten direk .js içerisine html de oluşan id yi yazarak kullanabiliyoruz. Şöylede bir durum var hiç uğraşmadan kontrollerimize class atayıp yukarıdaki olaylara bulaşmadan direk class adını yazarak seçip istediğimiz işlemleri aynen yapabiliriz. Burada ki tek nüans id yakalama performansı class a göre daha iyi fakat bunu küçük işlerde görmemiz çok zor ;) Neyse umarım konu anlaşılmıştır. Aşağıda bir örnek bulunuyor, dilerseniz çalışan halini buradan indirebilirsiniz.
<script type="text/javascript">
jQuery(function($) {
$("#<%=date.ClientID %>").mask("99/99/9999");
$("#<%=phone.ClientID %>").mask("(999) 999-9999");
$("#ctl00_ContentPlaceHolder1_tin").mask("99-9999999");
$("#ctl00_ContentPlaceHolder1_ssn").mask("999-99-9999");
});
</script>
Template kelimesini görünce akla hemen sitenin komple arayüzü geliyor fakat bu template tam olarak o template değil. Özetlemek gerekirse jSon veriyi istediğimiz kalıpta göstermemize olanak sağlayan ve html çıktısında kod tekrarını ortadan kaldıran bir yapı. Benide en çok kod tekrarını ortadan kaldırması cezbetti. Ne demek bu ? Örneğin; kod tarafında bir döngüyle ekrana 20 satır kayıt basıyoruz ve bu 20 satır kayıt için her seferinde div ul li gibi etiketlerle biçimlendirdiğimizden 20*html etiketi oluyor. Eklentinin ana sayfasına buradan ulaşabilirsiniz.
Uzun zaman önce jQuery eklentisi olan Autocomplete ile birlikte nasıl bu işi yaptığımızı yazmıştım. Bu sefer jQueryUi ye eklenen bu özelliğin nasıl kullanıldığını anlatmaya çalışacağım. Jqueryui ile birlikte gelen autocomplete de bir çok özellik bulunuyor. Tüm özellikleri kolayca kullanabiliyor ve istediğiniz gibi şekillendire biliyorsunuz. Ben bu örnekte temel olarak arama işlemini anlatacağım, eklentinin sayfasından diğer özelliklerine bakıp kendinize göre geliştirmeler yapabilirsiniz. Hemen default.aspx sayfamızdan başlayalım;
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
<link href="ui-Themes/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<script>
$(function() {
$("#deger").autocomplete({
source: "Search.ashx",
minLength: 1,
select: function(event, ui) {
alert(ui.item.id +" / "+ ui.item.value);
}
});
});
</script>
<div class="demo">
<div class="ui-widget">
<label for="deger">Bir değer girin: </label>
<input id="deger" size="50" />
</div>
</div>
Yukarıda ki kodda anlatılacak çok fazla bir şey bulunmuyor. Jquery kütüphanelerimizi yüklüyoruz, sonrasında değer girilecek input umuzun id sini yakalayıp autocomplete özelliğini ekliyoruz. Source ye dinamik olarak aramanın yapılacağı sayfamızın adresini veriyoruz. minLenght değeri ise kaç karakterden sonra aramaya başlanması gerektiğini ifade ediyor. 3 yazarsak 3. karakterle birlikte arama işlemi başlayacaktı. Select kısmında ise veri seçildiğinde ne olacağını fonksiyon olarak tanımlıyoruz. Bu örnekte gelen verinin değerini ve id sini alert ile ekrana basıyoruz.
Search.ashx (arama işleminin gerçekleştiği sayfamız.)
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
string strJsonTemplate = "\"id\":{0},\"value\":\"{1}\"";
string strParam = context.Request.QueryString["term"];
StringBuilder sb = new StringBuilder();
Dictionary<int, string> d = veriler();
sb.Append("[");
foreach (KeyValuePair<int, string> item in d.Where(v => v.Value.Contains(strParam)))
{
sb.Append("{" + string.Format(strJsonTemplate, item.Key, item.Value) + "},");
}
sb.Append("]");
context.Response.Write(sb.ToString().Replace(",]", "]")); //sonda kalan virgülü kaldırıyoruz.
}
public Dictionary<int,string> veriler()
{
Dictionary<int, string> d = new Dictionary<int, string>();
d.Add(1, "javascript");
d.Add(2, "asp.net");
d.Add(3, "csharp");
d.Add(4, "php");
d.Add(5, "java");
d.Add(6, "jquery");
d.Add(7, "html");
d.Add(8, "css");
d.Add(9, "mssql");
d.Add(10, "mysql");
d.Add(11, "visual studio");
d.Add(12, "net beans");
return d;
}
Bur örnekte Dictionary içerisine elle eklediğim veriler içerisinde arama işlemi yaptım. Siz bu kısmı istediğiniz gibi düzenleyip veritabanınızda arama işlemini kolayca yaptırabilirsiniz. Bu sayfada ekstradan yaptığımız tek olay veriyi jSon veri türüne çevirmek. Arama işlemini QueryString ile birlikte gelen term bilgisini kullanıyoruz. Sonrasında basit bir foreach ve bilgileri ekrana yazdırıyoruz.
Basit bir jSon verisi;
[{"id":1,"value":"javascript"},{"id":5,"value":"java"}]
Gördüğünüz gibi çok basit ve kullanışlı bir şekilde otomatik tamamlama işlemini yaptık. İlgili projeyi buradan indirebilirsiniz. Hepinize güzel ve sağlıklı günler, hoşça kalın..
Nasıl başlık ama :) Geçenlerde bir rapor ekranında ay aralıklarına göre işlem yaptırmam gerekiyordu. İki tane takvim koyup, kullanıcıya istediğin aralığı seç demek istemedim, çünkü erişebilirlilik adına hoş olmayan bir durum ortaya çıkıyor. Aradım taradım ayların aralığını seçmek için bir mekanızma bulamadım. Madem öyle dedim kendim yapayım. Bize lazım olanlar jQuery, jQuery Ui ve Ui ile birlikte gelen slider. Yapmak istediğimiz şey hemen aşağıda ki fotoğrafta gördüğünüz mekanızma. Kullanıcı tarih aralıklarını basit bir şekilde belirtiyor ve alacağımız raporu ona göre filtreliyoruz.
İki önceki yazımızda gridview içerisine templatefield içerisinde textbox eklemiştik. Bu yazımızda kontrol içerisindeki kontrollere nasıl erişebiliyoruz buna bakacağız. Konu bütünlüğü bozulmasın diye gridview içerisindeki kontrollere erişmeye çalışıp, çeşitli denemeler yapacağız. Örnekte kullnacağımız gridviewimiz şu şekilde.
<asp:GridView runat="server" ID="GridView1" CssClass="grid" ShowFooter="true" AutoGenerateColumns="false">
<HeaderStyle CssClass="header" />
<RowStyle CssClass="row" />
<AlternatingRowStyle CssClass="alternate" />
<FooterStyle CssClass="footer" />
<PagerStyle CssClass="pager" />
<Columns>
<asp:BoundField DataField="id" HeaderText="Id" />
<asp:BoundField DataField="tarih" HeaderText="Tarih" />
<asp:BoundField DataField="sessionid" HeaderText="Oturum Kimliği" />
<asp:TemplateField HeaderText="Bu bir checkbox">
<ItemTemplate>
<asp:CheckBox runat="server" ID="cbCheckBox" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Bu bir textbox">
<ItemTemplate>
<asp:TextBox runat="server" ID="txtTextBox" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Bu bir literal">
<ItemTemplate>
<asp:Literal runat="server" ID="ltrLiteral" Text='<%#Eval("id") %>' />
</ItemTemplate>
<FooterTemplate>
<asp:Button runat="server" ID="btnGonder" Text="Gönder" OnClick="btnGonder_click" />
</FooterTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
