Mvc ile jQuery Template Kullanımına Giriş – Video

Geçtiğimiz günlerde jQuery Template hakkında detaylı bir yazı yazmıştım. Bu videoda template olayını mvc ile birlikte kullanıp bilgilerimizi pekiştiriyoruz. Mvc kontrolümüzden gelen json veriyle işlemlerimizi yaptığımız bu videoda, templatenin artılarınada değiniyoruz.

Videoyu daha kaliteli izlemek için buradan indirebilirsiniz.

Konuyla ilgili adresler;

  1. http://weblogs.asp.net/hajan/archive/2010/12/15/jquery-templates-with-asp-net-mvc.aspx
  2. http://weblogs.asp.net/hajan/archive/2010/12/13/jquery-templates-tmpl-tmplitem-and-template.aspx
  3. http://weblogs.asp.net/hajan/archive/2010/12/13/jquery-templates-in-asp-net-introduction.aspx
  4. http://api.jquery.com/jQuery.template/
  5. http://stephenwalther.com/blog/archive/2010/11/30/an-introduction-to-jquery-templates.aspx

Projeyi buradan, videoyu buradan indirebilirsiniz.

Mvc projesinde jQuery Ajax Kullanımı – Video

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.

Projeyi buradan, videoyu buradan indirebilirsiniz.

MasterPage kullanımda kontrollerin ID mevzusu

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>

jQuery Template

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.

. Okumaya devam et jQuery Template

jQueryUi AutoComplete kullanımı

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..

jQuery ile AY aralığı seçim mekanızması

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.

Okumaya devam et jQuery ile AY aralığı seçim mekanızması

GridView içindeki kontrole erişme (Findcontrol)

İ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>

Okumaya devam et GridView içindeki kontrole erişme (Findcontrol)

Asp.net projelerinde jQuery ipuçları

jQuery UI yi son zamanlarda çok fazla kullanmaya başladım. Projelerde görünüm olarak ve fonksiyonellik olarak çok güzel bir bütünlük oluyor. Kullanımı da oldukça basit. Geçenlerde başıma enteresan bir durum geldi. Ui dialog içerisinde bir butonla işlem yaptırmak istedim fakat olmadı. Butona tıkladığınızda sayfa PostBack olmuyordu, haliyle yapmak istediğim şeyi yapamıyordum. Bu durumu şu şekilde aştım.

Okumaya devam et Asp.net projelerinde jQuery ipuçları

GridView ile çalışmak ve püf noktaları

Uzun bir aradan sonra kontrollerimizi tanımaya kaldığımız yerden devam ediyoruz. Ana hatlarıyla anlatmaya çalışacağım kontrol namı diğer GridView1 :) Çok fazla detaya girmeden en sık kullanılan özelliklerini ve jQuery ile birlikte neler yapabileceğimize vakit kaybetmeden bir göz atalım.

GridView, bir veri kaynağından gelen veriyi ekrana liste şeklinde basan kontrolümüz. Bir çok yerde kullandığımız bu kontrolde, sayfalama ve sıralama işlemlerini rahatlıkla yapabiliyoruz. Okumaya devam et GridView ile çalışmak ve püf noktaları

Bir açılır menünün anatomisi

Basit bir açılır menü (drop down) nasıl yapılır, mantığı nasıldır bunu anlatmaya çalışacağım. Bu örnekteki açılır menü, üzerine tıklandığında açılıyor, basit bir değişiklikle üzerine gelindiğinde de açılmasını sağlayabilirsiniz.

Hemen html ve css kodlarımıza bir bakalım.

<style type="text/css">
body{font-family:"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;background-color:#3c3c3c;}

h1{
    text-shadow:0 1px 1px #575656;
    font-size:50px;
    color:#d1d1d1;
    margin:0
}

.container{width:500px;}

.dd{
    border:1px solid #575656;
    padding:5px;
    background:#e9e9e9 url('images/arrow.png') top right no-repeat;
    color:#4d4d4d;
    cursor:pointer;
    font-weight:bold;
}
.dd:hover{color:Black;}

.dd ul{
    position:relative;
    background-color:#e9e9e9;
    list-style:none;
    margin:5px;
    padding:0;
    display:none;
    font-weight:normal;
}

.dd ul li{border-bottom:1px solid #c0c0c0;font-size:14px}
.dd ul li a{color:#4d4d4d;text-decoration:none;display:block;padding:5px;}
.dd ul li:last-child{border-bottom:none}
.dd ul li:hover{background-color:#c0c0c0;border-bottom:1px solid #a8a8a8}

</style>
<div class="container">
    <div class="dd">
        Select item
        <ul>
            <li><a href="#">İtem 1</a></li>
            <li><a href="#">İtem 2</a></li>
            <li><a href="#">İtem 3</a></li>
            <li><a href="#">İtem 4</a></li>
            <li><a href="#">İtem 5</a></li>
        </ul>
    </div>
</div>

Okumaya devam et Bir açılır menünün anatomisi

Web işine nasıl başlamalıyım ?

Yaz geldi, okullar da bitti, bundan istifade etmek isteyen genç arkadaşlar, yeni maceralara yelken açmak istiyorlar. Ne rahatsız bir giriş cümlesi oldu bu ya, başlık da güzel olmadı zaten :S Son zamanlarda asp.net nasıl öğrenebilirim, css nasıl örğenebilirim, php nasıl öğrenebilirim gibisinden sayısız şey görüyorum. İnsanlar da cevap veriyor, o siteye bak bu siteye bak, şu kitabı al vs.. Esasında bu arkadaşların öğrenmeleri gereken şey bence dinamik bir web sayfasını oluşturan temellerin neler olduğu. Adam php öğrenmeye başlıyor sonra bakıyor ki javascript diye bir şey de varmış ya da bakıyor ki arkadaş tasarım için css, html vs.. şeyler de varmış, aklı gidiyor ve her şeyden bir anda soğuyor ki bu gayet normal. Halbuki yapıyı kabaca bilse kendine yakın gördüğü kısımdan başlayabilir ve en azından karşısına zart çıkan x bir şeyi gördüğünde şaşırmaz. Okumaya devam et Web işine nasıl başlamalıyım ?

jQuery Asp.Net Fotoğraf Kırpmak

Fotoğraf kırpmak (crop) işlemi dışarıdan karışık bir işmiş gibi görünsede esasında çok basit bir işlemdir. Hele ki jCrop diye güzel jquery eklentisi varken bu işlem hem kolay hemde eğlencelidir. Olayın mantığına bakacak olursak, jCrop bizim için resim üzerinde seçtiğimiz kısımın yükseklik, genişlik, x ve y değerlerini alıyor. Sornasın da bu bilgiler eşliğinde orjinal resim üzerinde kesme işlemini yapıyoruz. Eklentinin bir çok ayarı ve özelliği bulunuyor, bunlara buradan ulaşabilirsiniz. Az kaldı unutuyordum, projenize jquery.js ve jCrop u eklemeyi unutmayın :)

Okumaya devam et jQuery Asp.Net Fotoğraf Kırpmak