Sermin'in Bilgi Paylaşı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ü :

 

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