24 Eylül 2009 Perşembe

Bu yazıda Ajax Kontrollerinden CascadingDropDown'un nasıl kullanıldığını, web site olarak açılan proje içerisinde xml veri dosyasının nasıl oluşturulduğunu yaptığımız örnekle anlamaya çalışacağız.

Makale5_0

Çalıştığımız Visual Studio içinde Ajax Control Toolkit Web Site seçeneği mevcut değilse --------- linkinden indirip kurabilirsiniz

İlk olarak App_Data dosyasının içine yeni ekle deyip XMLFile ekliyoruz. Bu aynı zamanda proje içindeki veri kaynağı olarak kullanılacak veri dosyası olma özelliğini de taşıyor. Aşağıdaki gibi bir liste hazırlamayı uygun gördüm.

<?xml version="1.0" encoding="utf-8" ?>

<KitapDukkani>

<turu name="Roman">

<yazar name="George Orwel">

<kitap name="1984" />

<kitap name="Hayvan Çiftliği" />

<kitap name="Papazın Kızı" />

</yazar>

<yazar name="Dostoyevski">

<kitap name="Karamazof Kardeşler"/>

<kitap name="Suç ve Ceza"/>

<kitap name="Budala"/>

</yazar>

<yazar name="Tolstoy">

<kitap name="Anna Karanina" />

<kitap name="Savaş ve Barış" />

<kitap name="Diriliş" />

</yazar>

</turu>

<turu name="Şiir">

<yazar name="Turgut Uyar">

<kitap name="Dünyanın En Güzel Arabistanı" />

<kitap name="Kayayı Delen İncir" />

<kitap name="Dün Yok mu" />

</yazar>

<yazar name="Oruç Aruoba">

<kitap name="İle" />

<kitap name="Yürüme" />

<kitap name="De ki İşte" />

</yazar>

<yazar name="Can Yücel">

<kitap name="Sevgi Duvarı" />

<kitap name="Gökyokuş" />

<kitap name="Beşibiyerde" />

</yazar>

</turu>

</KitapDukkani>

Koda dikkat edersek basit bir mantıkla yazılmıştır. Tür, birçok kitabı kapsadığı için en dışta. Yazar, kendi içinde seçenekler sunduğu için kısımsal. Kitap, kendine özel olduğu için tek satırda.

Projemize yeni bir web servis ekleyerek devam ediyoruz.

Makale5_1

Bu servis içerisin de yapmak istediğimiz, xml dosyasının içindeki verileri, yolunu göstererek web servis içindeki kontrollere bağlamak. Başlangış olarak isim alanımızın üzerine [ScriptService] ekleyerek Script servis çağırma işlemini yapıyoruz. Bunu ekledikten sonra alt+shift+f10 yaparak using alanına using System.Web.Script.Services eklenmesini unutmamak gerekir. Aynı işlemi aşağıdaki XmlDocument i ekledikten sonrada tekrarlayarak using System.Xml ifadesinin projeye dahil olmasını sağlıyoruz. Bu xml veri dosyasındaki bilgilerin web servis üzerinden erişilebilirliğini sağlayacak. Ayrıca object olarak tanımladığımız _lock dikkatinizi çekmiştir. Get bloğu altındaki lock fonksiyonunun görevi blok içindeki görev bitmeden dışarıdan “KitapService.xml” dosyası nı kilitleyerek üzerinde herhangi bir işlem yapılmasını engellemek.

// uye degiskenler

private static XmlDocument _dokuman;

private static object _lock = new object();

// disariden cagirabilmek icin public static olusturduk

public static XmlDocument Dokuman

{

get

{

lock (_lock)

{

if (_dokuman == null)

{

// xml veri okunur

_dokuman = new XmlDocument();

_dokuman.Load(HttpContext.Current.Server.MapPath("~/App_Data/KitapService.xml"));

}

}

return _dokuman;

}

}

public static string[] Hierarchy

{

get

{

return new string[] { "turu", "yazar" };

}

}

Görünşü bu şekilde olacaktır. Yine aynı isim alanı içine aşağıdaki methodu yazıyoruz.

[WebMethod]

public AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category)

{

// Kategorisi bilinen degerler / veri çiftleri

StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);

// veri dosyası içinde karşılaştırma sorgusu

return AjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocument(Dokuman, Hierarchy, knownCategoryValuesDictionary, category);

}

Burada amaç, proğramın çalışması sırasında seçilen değerlerin dosya içinde sorgulanarak ilişkisel olanların önümüze getirilebilmesi.

Default.aspx sayfası üzerine gelerek, 3 tane Label, 3 tane drop down list, 1 tane update Panel ve panel içine 1 tane daha label sürükleyelim.

Makale5_2

Bunlar türü, yazarı, kitabı seçmemizi sağlayacaklar. Kitap seçtirecek olan DropDownList3 ün özelliklerinden otomatik postback olma özelliğini (Enable AutoPostBack) açıyoruz. Label’in altına 3 tanede Cascading Drop Down sürüklüyoruz. Tetikleme kontrolünü, kategorisini, istek metnini ve yükleme sırasındaki metni taımlıyoruz. Kod bloğu aşağıdaki gibi görünüyor.

<ajaxToolkit:CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID="DropDownList1"

Category="turu" PromptText="Tür Seçiniz.." LoadingText="[seçiliyor..]"

ServicePath="KitapService.asmx" ServiceMethod="GetDropDownContents" />

<ajaxToolkit:CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID="DropDownList2"

Category="yazar" PromptText="Lütfen yazar seçiniz" LoadingText="[seçiliyor...]"

ServiceMethod="GetDropDownContentsPageMethod" ParentControlID="DropDownList1" />

<ajaxToolkit:CascadingDropDown ID="CascadingDropDown3" runat="server" TargetControlID="DropDownList3"

Category="kitap" PromptText="Lütfen Kitap seçiniz" LoadingText="[seçiliyor...]"

ServicePath="KitapService.asmx" ServiceMethod="GetDropDownContents"

ParentControlID="DropDownList2" />

Update panelin tetikleme kolleksiyonuna en son seçtirilecek olan kitap menüsünü tanımlıyoruz.

Makale5_3

Default.aspx dizayn sayfası üzerindeki DropDown3 üzerinde çift tıklayarak Default.aspx.cs sayfası üzerine seçim indexi değiştiğinde gerçekleşmesini istediğimiz olayların yazıldığı kod bloğunun oluşmasını sağlıyoruz.

protected void DropDownList3_SelectedIndexChanged(object sender, EventArgs e)

{

string tur = DropDownList1.SelectedItem.Text;

string yazar = DropDownList2.SelectedItem.Text;

string kitap = DropDownList3.SelectedItem.Text;

if (string.IsNullOrEmpty(tur))

{

Label1.Text = "Lütfen tur seçiniz..";

}

else if (string.IsNullOrEmpty(yazar))

{

Label1.Text = "Lütfen yazar seçiniz.";

}

else if (string.IsNullOrEmpty(kitap))

{

Label1.Text = "Lütfen kitap seçiniz.";

}

else

{

Label1.Text = string.Format("Seçtiginiz Kitap {1} turunde yazilmis, {2} tarafindan kaleme alinmis {0}. Iyi okumalar.", kitap, tur, yazar);

}

}

[WebMethod]

[System.Web.Script.Services.ScriptMethod]

public static CascadingDropDownNameValue[] GetDropDownContentsPageMethod(string knownCategoryValues, string category)

{

return new KitapService().GetDropDownContents(knownCategoryValues, category);

}

Düzenlemeleri yaptıktan sonra proğramı çalıştırabiliriz.

Makale5_4

Bu yazımızda beraberce yaptığımız örnekle Axaj kontrollerinde Cascading Drop Down Listi nerde kullanabileceğimizi, xml olarak hazırlanan bir veri dosyasını proje içinde nasıl kullanabileceğimizi kavramaya çalıştık. Umarım sizin için yararlı olmuştur.

kaynak: http://www.asp.net/

Sermin Yağcı

22 Eylül 2009 Salı

kim

Hep yalnız, hep yalnız, hep yalnız, yalnızlık, yalnız, tek başına. Şimdi, sindir içine, sindir, sindir, sindir, kalk.. Artık koşabilirsin...

bu ne..

Çok zamandır kağıt kalem almıyorum elime. Yazmaya başlayınca eskiden yazdıklarımı yazacakmışım gibi geliyor. Hemen vaz geçiyorum. Yapacak başka bir şeyimde hep oluyor zaten. İyiki kızım var.
İçimdeki, yeni tutkusumu desem, eski korkusu mu desem anlayamıyorum. İlk defa dinlediğim bir müzik beni nasıl mutlu ediyor. İlk kez okuduğum kitap nasıl sürüklüyor. İlkler insana eskiyi hatırlatmıyor belki sevmem ondandır.
Yeniden başlamak çok korkutucu eski içinde, başlayınca heyecan verici, ilerlerken zor ama sindirirken içine acı verici, güvenmek çok eğreti. Bunlar kısır döngü. Kader mi, tercih mi yoksa aptallık mı.Tek gerçek şu ki devam etmek her zaman başlamaktan zor. Sonra evreler var; herşey yolunda giderken, birden fırlayan tümsekler. Direnmek lazım çünkü geçiyor, yenisi çıkana kadar en azından. Ayrıntılara takmadan, kalıp uydurmaya çalışmadan, kendi deviniminde müdahale etmeden, ayak uydurmaya çalışmak en az zarar vereni...

14 Eylül 2009 Pazartesi

AJAX’ta Web Servis ile Çalışmak

Bu yazıda ASP.NET Ajax uygulamasında Web Servislerin nasıl çalıştırıldığını küçük bir örnekle anlamaya çalışacağı.

Visual Studio içinden açacağımız AJAXEnabledWebApplication içinden projeye 1 tane WebService ekleyerek başlıyoruz.

Makale4_01

WebService1.asmx.cs içindeki HelloWorld metodunun altına kendi metodumuzu oluşturalım .

[WebMethod]

public string Takimim(string hangiTakim)

{

return "En Büyük "+ hangiTakim;

}

İsterseniz Debug ederek çıkan ekranı görebilirsiniz. Default.aspx sayfası içine 1 tane Input (Button) ve 1 tane de Input (Text) sürüklüyoruz.

Makale4_02

Butonun üzerine 2 kez tıkladığımızda title tagi altına

<script language="javascript" type="text/javascript">

// <!CDATA[

function Button1_onclick() {

}

// ]]>

</script>

Kod bloğu gelir. WebService1.asmx.cs içine giderek pulic class üstüne ;

[ScriptService()] yazdıktan sonra alt+shift+f10 yaparak using alanına

using System.Web.Script.Services;

alanının referans edilmesini sağladıktan sonra . Default.aspx içindeki asp:ScriptManager tagi içine

<asp:ScriptManager ID="ScriptManager1" runat="server">

<Services>

<asp:ServiceReference Path="WebService1.asmx" />

</Services>

</asp:ScriptManager>

Web servisi referans ediyoruz.

function Button1_onclick() {

donecek = AJAXEnabledWebApplication1.WebService1.Takimim(document.getElementById('Text1').value, Tamamlandi, ZamanAsimi, HataOlustu);

return true;

}

function Tamamlandi(arg) {

alert(arg);

}

function ZamanAsimi(arg) {

alert("zaman doldu");

}

function HataOlustu(arg) {

alert("hata oldu");

}

JavaScript fonksiyonlarını yazdıktan sonra Web Servisimiz çalışmaya hazır. Sizin için yararlı olduğunu umuyorum. Kolay gelsin.

12 Eylül 2009 Cumartesi

Ajax Update Panel Kullanımı

Asp.Net’te Ajax Kontrollerinden Update Panel kulanım alanı bakımından çok önemli bir kontroldür. ScriptManeger kontrolü ile beraber sayfayı kısmi olarak yönetmeyi sağlar. Web sayfasında istenilen alanın yenilenmesine olanak sağladığından zaman ve .... bakımından kullanılması önemlidir.Şimdi basit bir örnekle genel olarak Update Panel ile neler yapabileceğimize bakalım.

Visual Studio içinden AJAXEnabledWebApplication bir proje açalım. Default.aspx Designer içine 3 tane label 1 tanede buton sürükleyelim. Button üzerine 2 kez tıklayarak Default.aspx.cs sayfası içine buttonClick eventi için kod bloğu oluşmasını sağlayalım. PageLoad eventi içine

protected void Page_Load(object sender, EventArgs e)

{

Label1.Text = "1.Zaman : " + DateTime.Now.ToString();

Label2.Text = "2.Zaman : " + DateTime.Now.ToString();

Label3.Text = "3.Zaman : " + DateTime.Now.ToString();

}

kod parçacığını yazıp çalıştırdığımız zaman

Makale3-1

Şeklinde bir ekran görüyoruz bu bizim sistem saatimiz.

Defaul.aspx designer sayfasına gelip 1. ve 2. Labeller arasına 1 tane UpdatePanel sürükleyelim ve Label2 ile Button1 i bu panel içine taşıyalım. Proje çalıştırıldığında 1inci 2inci ve 3üncü zamanların aynı olduğunu görürüz. Ama 2. Zaman altındaki butonu tıklatığımız da artık 2. Zaman’ımızın butona tıklanma anı olduğunu göreceğiz. Burdan şu sonuç çıkartılıyor: Panel içine taşıdığımız kısım sayfa bütününden asenkron olarak postback oluyor.

Butonu panel içine taşımadan da böyle bir kontrol yapabilirmiyiz ona bakalım. Update Panel özellilerine baktığımız da Triggers diye bir özellik görüyoruz bu tetikleyici bize panel içini eventlerle kontrol edebilme özgürlüğü sağlıyor. Butonu dışarı aldıktan sonra UpdatePanel1 in özelliklerinden Triggers (Collection)’a tıkladığımızda karşımıza çıkan pecereden önce Add daha sonra ControlID den Button1’i seçiyoruz.

Makale3_2

Tamam diyerek projemizi çalıştırdığımızda arada fark olmadığını görürüz. Default.aspx designer içine 1 tane daha UpdatePanel sürükleyerek 3. Zaman labelimizi içine taşıdıktan sonra da çalıştırdığımızda güncellenen satırların 2. Ve 3. Zaman olduğuna dikkat çekmek istiyorum. Sayfa içindeki UpdatePanellerden herhangi birisi için yazdığımız tetikleyici sayfa içindeki tüm update paneller üzerinde etkili olur. Buna müdahale etmek için UpdatePanel2 nin özelliklerinden seçili Always gelen UpdateMode’u Conditional olarak değiştiriyoruz. Artık Button1 e bastığımızda 3. Zaman sekmesi değişmeyecek. Son olarak UpdatePanel2 içine 1 tane daha buton sürükleyerek projeyi çalıştırdığımızda Button2 ye tıklandığında 2. Ve 3. Sekmelerin değiştiğini Button1 e basıldığında ise sadece 2. Sekmenin değiştiği görülür.

Bu yazımızda Ajax Kontrollerinde Update Panel’in genel kullanımını öğrenmeye çalıştık. Umarım size faydalı olmuştur.

11 Eylül 2009 Cuma

Modal Popup Extender Kullanımı

 

Bu yazımızda Asp.Net üzerindenki Ajax Kontrollerinden ModalPopupExtender üzerinde duracağız. Boş bir sayfaya yazdığımız metnin görünüşünü seçim yapmamız için fırlayacak bir popup yardımıyla değiştireceğiz. Değişik senaryolarda , farklı görünüşler yaratmak yaratıcılığınıza kalmış.

Başlangıç olarak VisualStudio muzu açarak AJAXEnabledWebApplication projemizi başlatıyoruz. Default.aspx sayfaındaki ScriptManeger in altındaki div tagına bir tane LinkButton sürüklüyoruz. Text’ine “ Stil seçmek için tıklayın” yazıyoruz. Hemen altına paragrafımızı ekliyoruz.

<p id="Paragraph1">

“Bir sabah tedirgin düşlerden uyanan Gregor Samsa, devcileyin bir böceğe dönüşmüş buldu kendini. Bir zırh gibi sertleşmiş sırtının üzerinde yatıyor, başını biraz kaldırınca yay biçiminde katı bölmelere ayrılıp bir kümbet yapmış kahverengi karnını görüyordu; bu karnın tepesinde yorgan, her an kayıp tümüyle yere düşmeye hazır, ancak zar zor tutunabilmekteydi. Vücudunun kalan bölümüne oranla acınacak kadar cılız bir sürü bacakçık, ne yapacaklarını şaşırmış, gözlerinin önünde aralıksız çakıp sönüyordu.”<br />

Franz Kafka<br />

Değişim

</p>

Stil seçmek için tıklandığında çalışması için gereken fonksiyonu yazmayıda unutmuyoruz.

<script type="text/javascript">

var styleSec;

function buDur() {

document.getElementById('Paragraph1').className = styleSec;

}

</script>

Projemize bir tane de Style Sheet ekliyoruz içine stillerimizi yazıyoruz:

.popupControl {

background-color:#AAD4FF;

position:absolute;

visibility:hidden;

border-style:solid;

border-color: Black;

border-width: 2px;

}

.modalBackground {

background-color:Purple;

filter:alpha(opacity=70);

opacity:0.7;

}

.modalPopup {

background-color:#ffffdd;

border-width:3px;

border-style:solid;

border-color:Lime;

padding:3px;

width:250px;

}

.StyleA {

background-color:#FFF;

}

.StyleB {

background-color:#FFF;

font-family:Comic Sans MS;

font-size:12pt;

font-weight:bold;

}

.StyleC {

background-color:#ddffdd;

font-family:Arial;

font-size:10pt;

font-style:italic;

}

.StyleD {

background-color:Fuchsia;

color:White;

font-family:Consolas;

font-size:12pt;

font-weight:bold;

font-style:italic

}

Eklediğimiz Stylesheet i Default.aspx sayfasına enteğre etmek için

<link href="Stylesheet1.css" rel="stylesheet" type="text/css" />

tagının eklenmesi gerekir.

Modal Popup içindeki menüyü hazırlayabilmek için elbetteki bir panel e ihtiyacımız olacak, bu panel içine kaç tane style yaratmayı istiyorsak o kadar RadioButton ve Label ekliyoruz. Bu işlemleri tamamladıktan sonra  benim kodlarım aşağıdaki gibi olmuştur.

<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none"

Width="233px">

<p>

Seç bakalım

</p>

<input id="RadioA" name="Radio" onclick="styleSec ='StyleA';" type="radio" />

<label class="StyleA" for="RadioA">

budur</label><br />

<input id="RadioB" name="Radio" onclick=" styleSec ='StyleB';" type="radio" />

<label class="StyleB" for="RadioA">

budur</label><br />

<input id="RadioC" name="Radio" onclick=" styleSec ='StyleC';" type="radio" />

<label class="StyleC" for="RadioA">

budur</label><br />

<input id="RadioD" name="Radio" onclick=" styleSec ='StyleD';" type="radio" />

<label class="StyleD" for="RadioA">

budur</label><br />

<br />

<div align="center">

<asp:Button ID="OkButton" runat="server" Text="Tamam" />

<asp:Button ID="CancelButton" runat="server" Text="Boşver" />

</div>

</asp:Panel>

<br />

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="LinkButton1"

PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="true"

OkControlID="OkButton" OnOkScript="buDur()" CancelControlID="CancelButton" />

Proğram çalıştırıldığında ekran görüntüsü :

 

Makale2-1

Umarım sizin için yaralı olmuştur.

7 Eylül 2009 Pazartesi

Asp.Net GridView’ da Update Insert Delete İşlemleri

ASP.NET 2.0 Kontrollerinden GridView veri tabanıyla yapılan işlemlerde çok önemli bir yer tutmaktadır. Hatta birincil kontroldür deyebiliriz. GridView'u veri tabanına bağlamak için bir çok yöntem kullanılabilmektedir. Bunlar SqlDataSource, ObjectDataSource, AccessDataSource, EntityDataSource, LinqDataSource, XMLDataSource kontrolleridir. Veri tabanındaki tablomuzu kod yazmadan hatta kolon isimlerini bile yazmadan bu kontroller sayesinde kolayca gridview içinde gösterebiliriz.

Bu yazımızda bir örnek üzerinden veri tabanındaki verileri bir DataTable üzerinde tutarak ihtiyacımız olan insert, update ve delete kontrollerini kod yazarak yaptırmayı anlamaya çalışacağız.

Başlangıç olarak veri tabanı içerisinde kullancağım tablonun senaryosunu vermek istiyorum. Bir personel tablosu oluşturmayı uygun gördüm.

CREATE TABLE [dbo].[Personel](
    [PersonelId] [int] IDENTITY(1,1) NOT NULL,
    [Adi] [nvarchar](50) NOT NULL,
    [Soyadi] [nvarchar](50) NOT NULL,
    [MedeniDurumu] [nvarchar](10) NOT NULL,
    [Sehir] [nvarchar](50) NOT NULL
) ON [PRIMARY]
GO

Veri tabanı içinde tablomuzu oluşturduktan sonra, VisualStudio içinde projemizi ASP.NET AJAX Enabled Website olarak açıyoruz.

Makale1_1

Sonraki adımda yapmamız gereken webcofig’imizin içinde ConnectionString cümlesi tanımlamak. Bu sayede proğram içinde sql bağlantımızı sağlamış olacağız. Onuda Web.config içinde system.web taginin üstüne aşağıdaki şekilde yazabiliriz.

<connectionStrings>
    <add name="PersonelConnectionString" connectionString="Data Source=.; InitialCatalog=Personel;Integrated Security=Yes;" providerName="System.Data.SqlClient"/>
</connectionStrings>

Bu tabiyki Windows Authentication kullanıyorsak eğer SQL Server Authentication kullanıyorsak Login ve Password te belirtmemiz gerekir.
Sonraki adımda Default.aspx sayfasındaki design kısmından ScriptManeger ın altındaki div taginin içine bir tane GridView sürükleyip bırakalım GridView un özelliklerinden AutoGenerateColumns ını false, ShowFooter ını true olarak işaretleyelim. DataKeyNames ini PersonelId olarak verelim. Bu değişiklikleri yapmamızın nedeni yeni kayıt, düzenleme yada silme işlemlerinin PersonelId üzerinden gerçekleştirilmesini sağlayarak herhangi bir yanlışlığa ya da karışıklığa sebep olmamasını sağlamak. Özelliklerinden eventlerini (olaylarını) tıklayarak DataBound, RowCancellingEdit, RowCommand, RowDeleting, RowEditing, RowUpdating seçeneklerinin önlerindeki boş kutulara çift klik yaptığımızda, daha sonradan içini tablomuzdaki bilgilerle doldurduğumuz GridViewumuzun satırlarında, değişiklik yapmamızı sağlayacak kod parçalarını yazacağımız kısımlar Default.aspx.cs içinde bizim için hazırlanmış olacak.

Makale1_2

Projemizin içine yeni bir class ekleyelim PersonelCls.cs bu class içinde db den verileri getirme, düzenleme, değiştirme ve silme işlemlerini yapacağız.

public void Insert ( string Adi, string Soyadi, string Sehir,string MedeniDurumu)
    {
        // Insert işlemlerinin yapılacağı kod bloğu.
    }
public DataTable Getir()
    {
        // Data Table ile veri getirileceği kod bloğu.
    }
public void Update( string Adi, string Soyadi, string Sehir,string MedeniDurumu)
    {
        // Update işleminin yapıldığı kod bloğu.
    }
public void Delete(int PersonelId)
    {
        // Delete işleminin yapıldığı kod bloğu.
    }

Sonraki adımda tekrar Default.aspx sayfasının Design kısmıma giderek, GridView un Smart Tag ından, EditColumns u seçerek dört tane TemplateField ekleyelim. Bunların HeaderTextlerine sırasıyla Adı, Soyadı, Medeni Durumu ve Şehir diyoruz. Daha sonra CommandField in içinden Edit, Update, Cancel, bir tanede Delete ekliyoruz. Alttaki Auto-generate fields tikini kaldırılmış olmasına dikkat edelim.

Makale1_3

Bu adımda GridView un Smart Navigation Tagına tekrar tıklayarak Edit Template seçiyoruz. Display in içinden kolonlarımız düzenlemeye başlıyoruz.

Makale1_4 Makale1_5

Ad, Soyad ve Şehir kolonlarında aynı işlemleri tekrarlayacağız. ItemTemplate içine bir tane label sürükleyip bırakıyoruz. Label in yanındaki smart tag den Edit Data Bindings te aşağıdaki gibi Custom binding seçip Code expression içine Eval(“Adi”) kod unu yazıyoruz. EditItemTemplate içine 1 tane TextBox sürükleyip önce propertylerinden ID sini txtAdi olarak değiştiriyoruz. Daha önce label a yaptığımız işlemin aynısını burda da yapıyoruz ama burada yazacağımız kod Bind(“Adi”). Eval database üzerinde kayıtlı olan veriyi label üzerinde görmemizi sağlar, Bind ise bizim görmemizi sağladığı gibi üzerinde yaptığımız değişikliği database üzerindede günceller.
FooterTemplate üzerine bir tane TextBox koyuyoruz bunun ID sini de txtYeniAd olarak değiştiriyoruz.

Makale1_6

Medeni Durum kolonuna sıra geldiğinde ItemTemplate içine bir label, EditItemTamplate içine bir tane DropDownList sürükleyip bırakıyoruz. Smart tag den EditItemsi seçerek

Makale1_7

Şeklinde bir düzenleme yapıyoruz. Ayrıca EditDataBindings’ine Bind(“MedeniDurumu”) yazmayı unutmayalım.
Sıra geldi Edit ve Delete kolonlarını düzenlemeye. Edit Kolonunun EditItemTamplate içine 2 tane LinkButton sürüklüyoruz propertylerinden birinci butonu CasusesValidation true, CommandName Update, Text Update olarak düzenliyoruz. İkincisi içinde CasusesValidation False, CommandName Cancel, text Cancel düzenlemelerini yapıyoruz. FooterTemplate içine LinkButton sürüklüyoruz CasusesValidation false, CommandName AddNew, Text AddNew yaptıktan sonra kodlarımızın görünümü aşağıdaki gibi olacak.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="PersonelId"
ShowFooter="True" OnRowCancelingEdit="GridView1_RowCancelingEdit"
OnRowCommand="GridView1_RowCommand" OnRowDeleting="GridView1_RowDeleting" OnRowEditing="GridView1_RowEditing"
OnRowUpdating="GridView1_RowUpdating">
    <Columns>
        <asp:TemplateField HeaderText="Adı" SortExpression="Adi">
            <EditItemTemplate>
                <asp:TextBox ID="txtAdi" runat="server" Text='<%# Bind("Adi") %>'/>
            </EditItemTemplate>
            <FooterTemplate>
                <asp:TextBox ID="txtYeniAd" runat="server"/>
            </FooterTemplate>
            <ItemTemplate>
                <asp:Label ID="Label2" runat="server" Text='<%# Eval("Adi") %>'/>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Soyadı" SortExpression="Soyadi">
            <EditItemTemplate>
                <asp:TextBox ID="txtSoyad" runat="server" Text='<%# Bind("Soyadi") %>'/>
            </EditItemTemplate>
            <FooterTemplate>
                <asp:TextBox ID="txtYeniSoyad" runat="server" />
            </FooterTemplate>
            <ItemTemplate>
                <asp:Label ID="Label3" runat="server" Text='<%# Eval("Soyadi") %>'/>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Medeni Durumu" SortExpression="MedeniDurumu">
            <EditItemTemplate>
                <asp:DropDownList ID="cmbMedeniDurum" runat="server" SelectedValue='<%#Bind("MedeniDurumu") %>'>
                <asp:ListItem Value="Evli" Text="Evli" />
                <asp:ListItem Value="Bekar" Text="Bekar" />
                </asp:DropDownList>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="lblMedeniDurum" runat="server" Text='<%# Eval("MedeniDurumu") %>'/>
            </ItemTemplate>
            <FooterTemplate>
                <asp:DropDownList ID="cmbYeniMedDurum" runat="server" >
                    <asp:ListItem Selected="True" Text="Evli" Value="Evli" />
                    <asp:ListItem Selected="False" Text="Bekar" Value="Bekar" />
                </asp:DropDownList>
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Şehir" >
            <EditItemTemplate>
                <asp:TextBox ID="txtSehir" runat="server" Text='<%# Bind("Sehir") %>' />
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label5" runat="server" Text='<%# Eval("Sehir") %>' />
            </ItemTemplate>
            <FooterTemplate>
                <asp:TextBox ID="txtYeniSehir" runat="server" />
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Edit" ShowHeader="false">
            <EditItemTemplate>
                <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Update"
Text="Update" />               
                <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Cancel"
Text="Cancel" />               
            </EditItemTemplate>
            <FooterTemplate>
                <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="AddNew" Text="Add New" />
            </FooterTemplate>
            <ItemTemplate>
                <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Edit"
Text="Edit" />               
            </ItemTemplate>
        </asp:TemplateField>
        <asp:CommandField HeaderText="Delete" ShowDeleteButton="True" ShowHeader="True" />
    </Columns>
</asp:GridView>


Son adımda yapmamız gereken Default.aspx.cs sayfamızın içine gelerek PersonelCLS.class içinde yazdığımız methodları kullanmak. Daha önceden hazırladığımız bloglar içine gerkli kodları yazacağız.

public class PersonelsCls
{
     private string cnstr = ConfigurationManager.ConnectionStrings["PersonelsConnectionString"].ConnectionString;

     private string sql;

     public void Insert(string Adi, string Soyadi, string Sehir, string MedeniDurumu)
     {
          string sql = "Insert Into Personel (Adi, Soyadi, Sehir, MedeniDurumu) Values ('" + Adi + "','" + Soyadi + "','" + Sehir + "','" + MedeniDurumu + "')";
          SqlConnection conn = new SqlConnection(cnstr);
          conn.Open();
          SqlCommand cmd = new SqlCommand(sql, conn);
          cmd.ExecuteNonQuery();
          conn.Close();
          conn.Dispose();
     }

     public DataTable Getir()
     {
          string sql = "Select * From Personel";
          SqlDataAdapter da = new SqlDataAdapter(sql, cnstr);
          DataTable dt = new DataTable();
          da.Fill(dt);
          return dt;
     }

     public void Update(int PersonelId, string Adi, string Soyadi, string Sehir, string MedeniDurumu)
     {
          string sql = "UPDATE Personel SET Adi ='" + Adi + "', Soyadi ='" + Soyadi + "', Sehir = '" + Sehir + "', MedeniDurumu ='" + MedeniDurumu + "'Where PersonelId=" + PersonelId;
          SqlConnection conn = new SqlConnection(cnstr);
          conn.Open();
          SqlCommand cmd = new SqlCommand(sql, conn);
          cmd.ExecuteNonQuery();
          conn.Close();
          conn.Dispose();
     }

     public void Delete(int PersonelId)
     {
          string sql = "Delete Personel where PersonelId=" + PersonelId;
          SqlConnection conn = new SqlConnection(cnstr);
          conn.Open();
          SqlCommand cmd = new SqlCommand(sql, conn);
          cmd.ExecuteNonQuery();
          conn.Close();
          conn.Dispose();
     }
}

GridView1_RowCommand içinde yeni satır eklerken kullanıcıdan aldığımız verileri FindControlle yakalayarak tablomuzun içine ekleyeceğiz.
GridView1_RowCancelingEdit içinde satır üzerinde yapılan değişikliğin iptal edilmesini sağlayacağız.
GridView1_RowUpdating içinde satır üzerinde yapılan değişikliğin database üzerindeki tablo içine kaydedilmesini sağlayacağız.
GridView1_RowDeleting içinde tablo üzerindeki satırı silme işlemi yapacağız.
Sonuç olarak namespace imiz böyle olacaktır.

namespace Ajax_GridView_UpdateInsertDelete
{
    public partial class _Default : System.Web.UI.Page
    {
        PersonelsCls personel = new PersonelsCls();
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
                 PersonelleriGrideDoldur();
        }

        private void PersonelleriGrideDoldur()
        {
            DataTable dtpersonel = personel.Getir();
            if (dtpersonel.Rows.Count > 0)
            {

                GridView1.DataSource = dtpersonel;
                GridView1.DataBind();
            }
            else
            {
                dtpersonel.Rows.Add(dtpersonel.NewRow());
                GridView1.DataSource = dtpersonel;
                GridView1.DataBind();

                int TotalColumns = GridView1.Rows[0].Cells.Count;
                GridView1.Rows[0].Cells.Clear();
                GridView1.Rows[0].Cells.Add(new TableCell());
                GridView1.Rows[0].Cells[0].ColumnSpan = TotalColumns;
                GridView1.Rows[0].Cells[0].Text = "Kayıt Bulunamadı";
            }
        }

        protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
        {
            if (e.CommandName.Equals("AddNew"))
            {
                TextBox txtYeniAd = (TextBox)GridView1.FooterRow.FindControl("txtYeniAd");
                TextBox txtYeniSoyad = (TextBox)GridView1.FooterRow.FindControl("txtYeniSoyad");
                DropDownList cmbYeniMedDurum = (DropDownList)GridView1.FooterRow.FindControl("cmbYeniMedDurum");
                TextBox txtYeniSehir = (TextBox)GridView1.FooterRow.FindControl("txtYeniSehir");
                personel.Insert(txtYeniAd.Text, txtYeniSoyad.Text, txtYeniSehir.Text, cmbYeniMedDurum.SelectedValue);
                PersonelleriGrideDoldur();
            }
        }

        protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
        {
            GridView1.EditIndex = -1;
             PersonelleriGrideDoldur();
        }

        protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
        {
            GridView1.EditIndex = e.NewEditIndex;
            PersonelleriGrideDoldur();
        }

        protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
        {
            TextBox txtAdi = (TextBox)GridView1.Rows[e.RowIndex].FindControl("txtAdi");
            TextBox txtSoyadi = (TextBox)GridView1.Rows[e.RowIndex].FindControl("txtSoyad");
            DropDownList cmbMedeniDurum = (DropDownList)GridView1.Rows[e.RowIndex].FindControl("cmbMedeniDurum");
            TextBox txtSehir = (TextBox)GridView1.Rows[e.RowIndex].FindControl("txtSehir");
            personel.Update(Convert.ToInt32(GridView1.DataKeys[e.RowIndex].Values[0].ToString()), txtAdi.Text, txtSoyadi.Text, txtSehir.Text, cmbMedeniDurum.SelectedValue);

            GridView1.EditIndex = -1;
            PersonelleriGrideDoldur();
        }

        protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
        {
            personel.Delete(Convert.ToInt32(GridView1.DataKeys[e.RowIndex].Values[0].ToString()));
            PersonelleriGrideDoldur();
        }

    }
}

Sonuç olarak bu yazımızda ASP.NET GridView kontrolü üzerinden Select, Insert, Update, Delete işlemlerini kod yardımı ile nasıl yapabileceğimizi detaylı bir şekilde incelemeye çalıştık.

Umarım sizin için yararlı olmuştur.

Sermin YAĞCI
http://serminyagci.blogspot.com

6 Eylül 2009 Pazar

ASP.NET te veri tabanı işlemleri yaparken Label üzerinde veriyi sadece okumamız gerekiyorsa Eval("Name") komutunu kullanıyoruz. Genel kullnımı:
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
Okumanın yanı sıra değişiklik yapmamızda gerkiyorsa Bind("Name") kullanıyoruz. Genel kullanımı :
<asp:TextBox ID="txtName" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>