'Dinamik' Ajax Accordion olusturmak ve icerisine 'dynamic' olarak 'Control'ler eklemek

Uzun bir aradan sonra tekrar merhaba , yazima baslamadan once sunu belirtmeliyimki, cok fazla zamanimi alan bu islemi malesef internette ya eksik yada yanlis kodlarla buldum. Baska birisininde ayni sikintiyi yasamamasi acisindan paylasmak istedim. Neyse hemen konuya geciyorum...

Ajax Accordion bildiniz uzere, web sitemize hem gorsel anlamda guzellik katarken hemde alan kullanimi acisindan cok buyuk kolayliklar saglayabiliyor. Ajax Accoridon 'u ajax toolkit'i indirerek ( buradan indirebilirsiniz...) cok basit bir sekilde kullanabiliyoruz. (Nasil kullanildigina dair video'yu buradan izleyebilirsiniz...)

Fakat mesele, dinamik olarak birseyler kullanmak istedigimizde biraz karisiyor. Bir video paylasim siteniz var. Bu sitede icerik olarak "komedi","Muzik","Spor" gibi farkli kategoriler oldugunu dusunelim. Ve herhangi biri secildiginde onlarla ilgili videolar geliyor diyelim. ( Bu web sitesini ornek olarak soyluyorum, yani binlerce video olan bir site degilde , her kategoride 3 ile 10 arasinda cesitli videolar var farzedelim) Ama hangisinde kactane video geliyor bilmiyorsunuz,cunku dinamik olarak data base'den geliyor videolar. Ve ayni zamanda Accordion kullanmak istiyorsunuz, yani video sayisi kadar accordion pane (Accordion,uzerine tiklandiginda yukari yada asagi dogru kayan tabandir.) olusturulmasini istiyorsunuz. Videolar icin de yine ASP.NET' in media playerini kullaniyorsunuz farzedelim. (Bu sizin kullanidiginiz herhangi bir media player da olabilir. ) Yapmaniz gereken, oncelikle secilen kategoride kac adet video var bunun sayisini almak , ve kod tarafinda dinamik olarak for donguleri icerisinde olusuturulan accordion pane'lerin sayisi olarak almis oldugumuz bu video sayisini fonksiyona gondermek.

Buna gore fonksiyonumuz kac adet accordion pane (kayan taban) olusturacagini bilecek ve ona gore dinamik olarak olusturacak.

Burdan oyle kod kismina gecerek devam ediyorum ,

Ilk olarak Media Playeri olusturan kodumuzu veriyorum;

Control MediaPlayer_Create(string videoUrl, int idChanger)

//videoUrl==> Bu playerin hangi videoyu oynatacigini belirtiyor,,

//idChanger==> Her seferinde yeni bir mediaplayer olusturuldugundan,bunlarin ID leri ayni

//olamayacagindan, "MediaPlayer" yazip sonuna yollamis IdChanger'i ekliyor, IdChanger //degerini Accordion Pane olusturdugum yerden yolluyorum.Yani 5 tane //olusturucaksam,idChanger'i 5 olarak yolluyorum.

{

ASPNetVideo.WindowsMedia x = new WindowsMedia();

x.ID = "MediaPlayer" + idChanger;

x.AutoPlay = false;

x.Height = 300;

x.VideoURL = videoUrl;

x.Width = 600;

return x;

}

Ust kisimda dinamik olarak MediaPlayeri olusturuyoruz, Kac defa olusturulacagini ise AccordionPane'leri olusturdugumuz yerden halledicez. Yani bu fonksiyonumuzu orada kullanicaz...

Accordion Paneleri olusturmadan once, bize media playerin oynatacagi videolar lazim. Dogal olarak bu videolarin URL 'i lazim. Bu URL' leri getirmek icin bir fonksiyon daha yazdim,

Yazmis oldugum bi Store Procedure ile vermis oldugum kategorilerin Videolarini bulup , bana URL(Oynatacagi Adres) lerini donduruyor...

O fonksiyonumuz ise soyle ;

public List < string > getVideoURLs(string prm_CategoryCode )

{

//Kisaca fonksiyonun islevine deginirsek , bir string tipinde bir List olusturdum, bana data //baseden gelen video adreslerini biriktirip dondursun diye.Daha sonra ben bu adresleri tek tek //media player olusturuken kullanicam ve olusturdugum media player hangi videoyu //oynatacagini bu adreslere gore belirleyecek...

if (string.IsNullOrEmpty( prm_CategoryCode ))

return null;

List < string > sListVideoURLs = new List(0);

using (SqlConnection xSqlConnection = new SqlConnection(sConnectionString))

{

try

{

SqlCommand xSqlCommand = new SqlCommand();

xSqlCommand.CommandType = System.Data.CommandType.StoredProcedure;

xSqlCommand.CommandText = "BSC_OLC_SP_GetVideoURL";

xSqlCommand.Parameters.Add(new SqlParameter("@ prm_CategoryCode",prm_CategoryCode));

xSqlCommand.Connection = xSqlConnection;

xSqlCommand.Connection.Open();

SqlDataReader xSqlDataReader = xSqlCommand.ExecuteReader();

while (xSqlDataReader.Read())

{

sListVideoURLs.Add(xSqlDataReader[0].ToString());

}

xSqlCommand.Connection.Close();

return sListVideoURLs;

}

catch

{

xSqlConnection.Close();

return null;

}

}

}

Hemen AccordionPane olusturmaya geciyorum ;

void createAjaxAccordion(int prm_videoNumber, List < string > prm_videoURLs)

{

AjaxControlToolkit.Accordion genelAccordion = new AjaxControlToolkit.Accordion();

List < AjaxControlToolkit.AccordionPane > paneList = new List();

List < Literal > literalListHeaders = new List();

List < Literal > literalListContents = new List();

for (int i = 0; i < prm_videoNumber ; i++)

{

paneList.Add(new AjaxControlToolkit.AccordionPane());

paneList[i].ID = "Pane" + i;

}

for (int i = 0; i < prm_videoNumber ; i++)

{

literalListHeaders.Add(new Literal());

literalListHeaders[i].ID = "headerContent" + i;

literalListHeaders[i].Text = "--->" + "Category" + (1 + i);

}

for (int i = 0; i < prm_videoNumber ; i++)

{

literalListContents.Add(new Literal());

literalListContents[i].ID = "Content" + i;

literalListContents[i].Text = "--->" + " Category " + (1 + i);

}

genelAccordion.ID = "myAccordion";

genelAccordion.FadeTransitions = true;

genelAccordion.FramesPerSecond = 40;

genelAccordion.TransitionDuration = 500;

for (int i = 0; i < prm_videoNumber ; i++)

{

paneList[i].HeaderContainer.Controls.Add(literalListHeaders[i]);

paneList[i].ContentContainer.Controls.Add(MediaPlayer_Create(prm_videoURLs[i],i));

}

for (int i = 0; i < prm_videoNumber ; i++)

{

genelAccordion.Panes.Add(paneList[i]);

}

form1.FindControl("Panel2").Controls.Add(genelAccordion);

}

Yukarida Panel2 dedigim, ASP tarafinda olusturmus oldugum Panel'in ID'si. Siz kendi olusturdugunuz panelin ID'sini vermelisiniz.

Yukaridaki kisimda ozetle,

Ilk olarak genel bir Accordion olusturuyoruz,

Sonrasinda Kactane Video Adresi Gelmisse elimize, o kadar Accordion Pane Olusturuyoruz..

Her olusturdugumuz accordion pane'in birer header ve content i oldugu icin, onlari da for dongusu icerisinde olusturuyorz. Zaten Accordion Pane sayisi ile, content ve headar sayisi esit olucak.Hepsi icin bir for donugusude kullanilabilirdi, acik olmasi acisindan bu sekilde yazdim.

Sonrasinda mediaplayer olusturan fonksiyonumuzu cagirip, kacinci accordion pane i olusturuyosak onun degerini ve oynatilacak videonun URL si ni gonderiyoruz.

Hepsi bu, umarim isinize yarar. Benim bi gece sabahlamama sebep oldu :)

Takildiginiz yer yada yardimci olabilecegim baska bir yer olursa yazabilirsiniz...

Sende Yaz Farkin Olsun!!!

Berkan Bilgin