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>
Günümüzde çoklu dil (multi language) giderek önem kazanıyor. Bunun en büyük sebebi, projelerin artık ülke bazlı düşünülmüyor olması. Eskiden 2 dil bile fazla gelirken şimdilerde kullanıcı eğilimine göre bu sayı artabiliyor. Çoklu dil yapısı için bir sürü yöntem bulunuyor. Örneğin; xml, veritabanı, resource kullanmak vb.. Biz bu yazımızda resource ile çoklu dilli uygulama nasıl geliştirilir buna bakacağız.
Öncelikle mevcut bir sayfamızı kolay bir şekilde nasıl çoklu dile çeviririz buna bakacağız. Ben örnek olarak küçük bir form hazırladım.
Formumuz da textbox, dropdownlist, label, button ve validator kontrollerimiz bulunuyor. Eğer elle bu forma daha doğrusu sayfaya girişip tek tek elle değişkenleri tanımlamaya kalkarsak epey bir zamanımızı alır. Visual studio geliştiricileride böyle düşünmüşler ki bizi yormamak için Tools menüsünün altına Generate Local Resource özelliğini koymuşlar. Unutmadan bu menü sadece tasarım kısmındayken çıkıyor. Buraya tıkladığımızda bizim yerimize resource dosyası oluşturuluyor ve gerekli değişiklikler sayfamızda yapılıyor. Kaynak dosyamız App_LocalResources klasörünün altında sayfaAdi.aspx.resx şeklinde bulunuyor. (daha fazla…)
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..
Repeater asp.net aleminin bana göre en delikanlı kontrolüdür. Kafasından hiç bir şey yapmaz, biz ne dersek onu yapar. Bu sebepten dolayı veriyle ilgili kontrollerin en az özelliklisidir, hatta özelliği yoktur bile :) Madem hiç bir özelliği yok neden var bu kontrol ? Hemen anlatayım.
Repeater’ ın abisi olan DataList bir çok güzel özelliği üzerinde barındıran bir kontroldür. GridView ise bu iki kontrolden farklı bir mantıkta çalışır bu sebepten ötürü kulvarları çok farklıdır. GridView veriyi satır satır (row) ekrana basar, DataList ve Repeater ise eleman elaman (item) basar. GridView’ da DataList’ de veriyi ekrana basarken kendi html şablonunu kullanır, Repeater ise hiç bir şablonu kullanmaz, etiketsiz, biçimsiz bir veri ekrana basar. Şöyleki, sanki bir döngü yazdınız ve veritabanından gelen saf veriyi ekrana bastınız. Bunun neresi güzel diye sorabilirsiniz. İstediğiniz gibi şekillendirebilirsiniz, kendiniz şekillendireceğiniz için w3 kurallarına uygun ve arama motorlarının sevdiği cinsten bir tasarım yapabilirsiniz. Burada şöyle bir durum da var, DataList ile 5 dakikada yapacağınız bir işi Repeater’ la 25 dakikada yaparsınız. Arada ki fark ise birinde kurallara uygun bir tasarım ve tamamen kontrolü sizde olan bir tasarım, diğerinde ise kuralsız ve zaman zaman kontrolün sizde olmadığı bir tasarım. Bu sebepten dolayı, sitelerin kullanıcı arayüzünde Repeater, yönetici kısmında ise DataList kullanmak gerekiyor diye düşünüyorum. (daha fazla…)
İ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>
