Jquery Append Methodu

Herhangi bir html etiketi içine html girdileri eklemek için Jquery’de append() methodu kullanılır. Mesela html <select> tagı içine bir veya birden çok <option> tagı eklemek için şöyle bir scriptten yararlanabiliriz.

$.each(criterias, function (index, criteria) {
      $('#SelectItems').append('<option value="' + criteria.sno + '">' + criteria.DisplayName + '</option>');
                                });
Reklamlar

Jquery ile Css Tanımlama

Eğer bir elementin içinde style tanımlamak istemiyorsanız veya bazı eventlar tetiklendiği an style’i değiştirmek isterseniz bunu Jquery’nin css() methodu ile yapmanız mümkün. Örneğin istenilmeyen bir durumla karşılaşıldığında veya validationdan bir hata fırlatıldığında text alanının border özelliklerini bu şekilde değiştirebiliriz

$("#emailtext").css({ "border": "1px solid #f00" });

Tekrar eski haline getirmek istersek ise :

$("#emailtext").css({ "border": "" });

Jquery ile Html table’ın Satır ve Sütunlarını kaldırmak ve Yeniden Oluşturmak

Projenizin tasarımında bir sayfada veya ekranda div yerine table kullanıyorsanız table’ın içindeki satır ve sutunları kaldırıp gelen verilere göre tekrardan oluşturmak isteyebilirsiniz. Bunun için kullandığınız table içindeki <tr> taglarını kaldırmanız yeterlidir. Bunun için Jqueryde find() komutunu kullanabilirsiniz.

Kod Örneği :

$('#tableexample').find("tr").remove();

Daha sonra table’in içine dinamik olarak html tagleri ekleyebilirsiniz. Benim yazdığım kod blogunda ajax ile elde ettiğim datayı each döngüsünün içinde dinamik oluşturduğum <tr> ve <td> tagları içine yerleştirdim :

$.each(emails, function (index, email) {
                            $('#exampletable').append('<tr>' +
                                '<td>' + email.Value + '</td>' +
                                '<td><a class="aremoveemail" href="javascript:void(0)">' +
                                '<img class="removeemail" title="' + email.sno + '" src="@Url.Content("~/Content/images/cancel.png")" style="width: 15px; height: 15px;" /></a></td>'
                                + '</tr>');
                        });

 

HighCharts

Web Projemde çok kullandığım highchartlardan bahsetmek istiyorum. Highchartlar açık kaynak kodlu, bir çok geliştiricinin görsel anlamda grafiklerle ister web olsun, ister mobil uygulamalarını geliştirip, zenginleştirmesini sağlayan javascript kütüphanelerine sahip gayet esnek ve dinamik yapıdaki interaktif chartlardır. Highchartlar ile birden çok çeşit chartı projenize dahil edip kullanmak gerçekten çok basit. Higchartlar görsellikler olarak harika sonuçlar ortaya çıkarıyor. Line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart tiplerinin hepsini kullanmanız mümkün. Siteye girip incelediğinizde demolarına göz attığınızda örnekleri canlı olarak görebiliyorsunuz veya JsFiddle aracılığıyla client tarafında değişiklik yapıp chartlarda değişiklikleri görebiliyorsunuz. Highchartın demo sayfası : http://www.highcharts.com/demo. Örnek bir higchart görüntüsü:

HighChart
İstediğiniz tipteki chartın kaynak kodlarına View Options diyerek elde edebilirsiniz. Edit In JsFiddle butonuna tıklayarakta JsFiddle’da kaynak kodlarını editeleyebilirsiniz. Yukarıdaki chartın kaynak kodlarının preview penceresi şu şekildedir:

OptionsHighCharts

Bu şekilde diğer örnekleri de görebilmeniz mümkün. Tabi bunlar client tarafındaki oluşturulmuş scriptler. İsterseniz code-behind tarafında da higchartlarla çalışabilirsiniz. Burada kaynak kodları mevcut : https://dotnethighcharts.codeplex.com/SourceControl/latest

Highchart’in kendi metodunun birden çok optionu var. İlerde bu optionları açıklamaya çalışacağım. Tabi highchartı önce referans etmeniz gerekiyor. Higchartın dllerini Bu sayfadaki linklerden indirebilirsiniz.

https://dotnethighcharts.codeplex.com/releases/view/121251

Linkte en son sürüm olarak Dotnet.Highcharts 4.0 sürümü bulunuyor ve bu sürümü .Net Framework 4.0 ve .Net Framework 4.5 destekliyor.

Highchartlar browserlarla gayet uyumlu çalışır ve pluginlere ihtiyaç duymaz. HTML5te sorunsuz çalışır.

Bu makalemde genel olarak higchartsın özelliklerine değindim. İlerdeki makalelerimde biraz daha teknik olarak highchartın optionlarının ne anlama geldiğini ve ne işe yaradıklarından bahsedeceğim.

 

Asp.net MVC Jquery ile Ajax Post İşlemi

Bilindiği üzere Jquery artık web uygulamalarında sıklıkla kullanılan bir kütüphane. Sayfa tasarıma harika bir görsellik ve efektler katmasından dolayı, kullanıcı arayüzlerine olumlu yöndeki etkilerinden dolayı programcıların ve tasarımcıların olmazsa olması haline geldi. Bu yazımda jquery ile ajax işlemlerinin nasl gerçekleştirildiğini anlatacağım.

AJAX işlemlerini yapabilmek için jqueryde ajax isimli bir method bulunur.  Bu metodun bazı propertyleri bulunur:

Type : Metodun GET veya POST olarak gönderileceğini belirler.

Url : Hangi Controller sınıfının hangi metodunda işlem yapılacağını belirtir.

Data : Belirlediğimiz urlye hangi dataların parametre olarak gönderileceği belirtilir.

Succcess : Server-side kısmından gelen response’nun client tarafında herhangi bir hatayla karşılaşmadan elde edildikten sonra çalışacak olan fonksiyondur.

Error : Server-side kısmından gelen response’nun client tarafında elde edilirken hata oluşması durumunda çalışacak olan fonksiyondur.

Load : Server-side kısmından gelen response’nun client tarafında elde edilirken yani yüklenirken çalışacak olan fonksiyondur.

Örnek olarak bir ajax metodu tanımlamak istersek şu şekilde ajax metodunu oluşturabilirz:

ajax

Yukarıdaki kod satırında, bir müşteriye ait şubeleri elde etmek için Branchs adlı controller sınıfının içindeki GetBranchs metoduna müşteri numarası gönderilmiş ve ajax işlemi tamamlanıp şubeler elde eldilmiştir. DataType json olarak tanımlanmıştır. Çünkü GetBranchs metodundan json tipinde data dönecektir. Bu methodunun kodları aşağıda gösterilmiştir. success fonksiyonunda ise BranchId isimli dropdowna ajax ile elde json tipinde elde ettiğimz result dataları yüklenir. GetBranchs metodu ise şu şekildedir:

GetBranchs

JsonResult tipinde bir methoddur ve Json tipinde veri döndürür. Burada dikkat ediceğimiz nokta ise json datasına sorgudaki bütün columnları değil, hangilerini client tarafında elde etmek istiyorsak o columnları göndermemizdir. Yoksa istediğimiz datayı ajaxla almamız mümkün değildir. İşte jquery ile ajax işlemi bu kadar basittir.

ViewBag – ViewData – TempData Kullanımı

Controller sınıfları ve View sayfaları arasında veri taşımamıza yardımcı olacak nesneler vardır. Bunlardan en önemlisi ViewData, ViewBag ve TempData nesneleridir. Öncelikle kısaca tanımlama yapalım, ardından aralarındaki farkları ve ne zaman kullanılacağı konusunda tartışalım.

ViewData: Teknik olarak veri Controller sınıfından View sayfalarına ViewDataDictionary (ViewData) sınıfı ile taşınmaktadır. ViewData nesnesine veri aktarabilir ve bu veriyi okuyabiliriz.

    ViewData[“CurrentTime”] = DateTime.Now;
 
ViewBag: ViewBag ise ASP.NET MVC 3 te C# 4 ile gelen dynamic anahtar kelimesinin getirdiği bir yeniliktir. ViewData nın dinamik (run time binding) halidir. Söz dizimi de daha iyidir.
    ViewBag.CurrentTime = DateTime.Now;
 
TempData: Bu nesne de diğer ikisinin yaptığı işi yapar.TempData[“CurrentTime”] = DateTime.Now;Bu üç nesne arasında küçük ve kritik farklar vardır. Örneğin ViewBag nesnesi dynamic tipinde bir nesne olduğundan bununla alakalı hatalar compile time da değil run time da yakalanır. Teknik anlamda ViewData nesnesinden farkı yoktur. Söz dizim olarak farklıdır.

En büyük ve önemli fark TempData ile diğer ikisi arasındadır. ViewData ve ViewBag nesnesi o anki HTTP istek içerisinde geçerlidir. Yaşam döngüsü bir sonraki isteğe kadardır. Ama TempData bir alt HTTP istek içinde geçerlidir. Yaşam döngüsü o anki ve bir sonraki HTTP istek içerinde geçerlidir. Daha iyi anlamak için farklı bir kaç örnek üzerinde görelim;

ÖRNEK 1

Üç nesnenin örnek kullanımı ve çıktısı.

Controller

public ActionResult Index()
{
    ViewBag.Message1 = "ViewBag mesaj!";
    ViewData["Message2"] = "ViewData mesaj!";
    TempData["Message3"] = "TempData mesaj!";
    return View();
}

View

<h2>@ViewBag.Message1</h2>
<h2>@ViewData["Message2"]</h2>
<h2>@TempData["Message3"]</h2>

Çıktı

ViewBag mesaj!ViewData mesaj!TempData mesaj!

ÖRNEK 2

TempData nesnesinin farklı özelliği.

Controller/Index

public ActionResult Index()
{
    ViewBag.Message1 = "ViewBag mesaj!";
    ViewData["Message2"] = "ViewData mesaj!";
    TempData["Message3"] = "TempData mesaj!";
    return RedirectToAction("About");
}

Contoller/About

public ActionResult About()
{
    var message = TempData["Message3"];
    return View();
}

Index metodu içerisinde oluşturduğumuz TempData About metoduna aktarılır ama diger iki nesne debug ta baktığımızda null olacaktır. TempData ile geçirdiğimiz veriyi About.cshtml içerisinde bir önceki örnekteki gibi kullanabiliriz.

TempData için sakıncalı bir durum yönlendirdiğimiz About sayfası içerisindeyken sayfası yenilediğimiz zaman veriyi kaybederiz. Bundan dolayı TempData yerine bu işlemleri daha sonra göreceğimiz ViewModel mantığıyla halletmeliyiz. İpucu olması açısından aynı işi yapan ViewModel mantığını da kodla örnekleyelim.

Controller/Index

public ActionResult Index()
{
    // veriyi veri tabanına kaydettikten sonra id sini alıyoruz
    var id = Repository.SaveData("foo");
    // diger sayfaya parametre olarak, veri tabanına son kaydettiğimiz kayıtın id sini veriyoruz.
    return RedirectToAction("About", "Home", new { id = id });
}

Contoller/About

// Index metodundan gelen id değerini alıyoruz.
public ActionResult About(string id)
{
    // gelen id değerinden tekrar kayıtı veri tabanından çekiyoruz.
    var model = new MyViewModel
    {
        Foo = Repository.GetData(id)
    };
    return View(model);
}

Neden veritabanına kayıt yapıp tekrar diğer sayfadan bu kayıta ulaşmaya çalışan bir örneği, önceki TempData örneğinin alternatifi olarak verdik. Çünkü gerçek hayatta aslında bir metottan diger metoda veriyi böyle bir senaryo için aktarmak isteriz. İleride yapaçağımız örneklerle daha da açıklayıcı olacaktır.

Peki bu nesneleri ne zaman kullanmalıyız.

  • Model sınıfımıza ait bir veriyi açılır listeden (drop down list) seçeceksek bu listenin verisi için kullanabiliriz.
  • Küçük ölçekli veriler.
  • Kullanıcıya verilen uyarı mesajları.
  • Örneğin kullanıcı kayıt olduktan sonra kullanıcıya gösterilen profil özeti ekranı.
Kısacası geçici olarak tanımlayabileceğimiz küçük ölçekli verileri içeren bir çok iş için kullanabiliriz.

 

View Tanımlama

Bu yazımda da View dosyaları nasıl tanımlanır ve nasıl kullanılır, bu konular üzerinde duracağım.

Yeni bir proje oluşturduğumuzda projenin dizininde Views klasörü vardır. Dizin yapısını incelersek her Controller sınıfı için Views klasörünün altında o Controller adında bir klasör daha vardır.

Ayrıca her Controller sınıfı için tanımlanan Views klasörünün altında ise, Controller sınıfı içerisindeki her metod için bir .cshtml veya .vbhtml uzantılı Razor sayfaları vardır. Bu razor sayfaları dinamik yapıdadır.

solution explorer

Controller classları ile view razor sayfaları ilişkilidir. Yeni bir proje oluşturulduğunda default olarak razorlar oluşturulmuş halde gelir. Ama yeni bir controller classı oluşturup, içinde herhangi bir method tanımladığımızda herhangi bir razor sayfası kendiliğinden oluşturulmaz. Bunun için sağ tıklayıp Add View deyip bir razor oluşturabiliriz.

AddView

 

Add View tıkladıktan sonra şöyle bir ekran karşımıza çıkacak.

AddViewOptionBu sayfa oluşturucağımız razorun optionlarının seçildiği sayfadır. View Engine olarak Razor veya Asp.net C# veya VB belirleyebiliriz. Ama MVC ile gelen Razor View Engine işlerimizi daha da basitleştirmektedir. Onun için genellikle Razor kullanılır. Hemen altında Create a strongly-typed view seçeneği vardır. Strongly-typed Views’a daha sonradan tekrar değineceğim. Onun altında da Create as partial view seçeneği vardır. Partial View’in Asp.net Web Forms’taki karşılığı User Controller’dir. Herhangi masterpage kullanmazlar. Bundan dolayı da sayfada css, js dosyaları sayfada tutulmaz. Ama Use a Layout or Masterpage seçeneğini tıklarsak herhangi bir Layout sayfası seçmemizi ister. Layout seçtikten sonra oluşan Razor sayfasının içeriği şu şekildedir

@{
ViewBag.Title = “Example”;
Layout = “~/Views/Shared/_LayoutDark.cshtml”;
}

<h2>Example</h2>

Böylece yeni bir View sayfası oluşturma işlemini tamamlamış olduk.