Geliştirmekte olduğum bir projede kullanıcının linke tıklaması sonucu popup pencere açıp; sonrasında popup içerisindeki dropdownlist’den bir değer alıp; kullanıcının butona tıklaması neticesinde popup’ın kapanması ve bir önceki yani geldiği sayfanın yenilenmesi gerekiyordu.
Örnek projemdeki mantık kısaca şöyle: Bir portal uygulaması ve bu portal içerisinde üyelerimiz mevcut. Üyelerin kendi alanları var ve bu alanlar için ziyaretçiler yorum yapabilmekteler. Eğer üyeler isterlerse kendi yönetim panellerinden bu yorum eklenebilme özelliğini aktif ya da pasif yapabilecekler.
Kısaca senaryo bu şekilde fakat biz burada fazla ayrıntısına girmeden sadece asıl olayın uygulanış biçimini göreceğiz. Bu yüzden veritabanı ile ilgili kısımlara burada değinmeyeceğim asıl işi yapan javascript kısmını anlatacağım.
Öncelikle iki sayfamız olacak. Birincisi üyelerin yönetim panelinin olduğu sayfa ikincisi de popup penceresini açtığımız sayfa.
UyePanel.aspx
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<!--
Evet belirlenen boyutlarda popup açmamızı sağlayan OpenDetailWindow isimli javascript
fonksiyonumuz. Burada window.open() yeni bir pencere açmamızı sağlayan metod.
Açılacak olan pencerenin ne şekilde açılması gerektiğini de metoda verdiğimiz parametrelerle
sağlamış oluyoruz. Yani kısacası popup dediğimiz olayı gerçekleştirecek fonksiyonumuzu
yazıyoruz. Ben sayfamı masterpage’den türettiğim için javascript fonksiyonumu Content1
arasında yazdım. Siz duruma göre <head></head> tag’ları arasına koyabilirsiniz.
-->
<script language="javascript" type="text/javascript">
function OpenDetailWindow() {
window.open('', 'detailwindow',
'toolbar=no,scrollbars=yes,resizable=yes,width=600,height=300');
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<!--
Burada bağlantımızın onclick özelliğine OpenDetailWindow isimli js fonksiyonumuzu
ve açılacak olan pencerenin ne şekilde açılması gerektiği şartını da target="detailwindow"
diyerek belirtiyoruz ve açmak istediğimiz Popup.aspx sayfasına yönlendiriyoruz.
“CommStatus” ise veritabanımda yorumların aktif/pasif olma durumunu tuttuğum alanım.
Bu değeri kod tarafından alıp literal üzerinde gösteriyorum.
-->
Yorumlar: <a href="../Popup.aspx" onclick="OpenDetailWindow()" target="detailwindow">
<asp:Literal ID="ltlAP" runat="server" Text='<%# Eval("CommStatus") %>'>
</asp:Literal></a></asp:Content>
Şimdi de Popup sayfamızı inceleyelim. Temel olarak projedeki popup sayfası da aşağıdaki gibiydi.
Popup.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<!--
Buradaki fonksiyonumuz işletildiğinde popup kapanacak ve popup'ın
gelmiş olduğu sayfa yenilenecektir.
-->
<script language="javascript" type="text/javascript">
function AppClose() {
self.close();
window.opener.location.reload();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<center>
<font style="font-size: 9pt; font-weight:bold">Firmanız hakkında yapılan
yorumların yayınlanma durumunu seçiniz: </font>
<br />
<asp:DropDownList ID="ddlActivePassive" runat="server">
<asp:ListItem Value="0">Seçiniz</asp:ListItem>
<asp:ListItem Value="1">Aktif</asp:ListItem>
<asp:ListItem Value="2">Pasif</asp:ListItem>
</asp:DropDownList><br /><br />
<asp:Button ID="ButtonActivePassive" runat="server" Text="Güncelle"
onclick="ButtonActivePassive_Click" />
</center>
<!--
Şimdi asıl önemli olan noktalardan birisi de benim bu AppClose fonksiyonumu
butona tıklama sonrasında çalıştırmak isteyişim. Bu sebepten ötürü burada bir
label tanımlıyorum ve kod tarafından butona tıklama olayı gerçekleşince
label'a fonksiyonumu yazdırıyorum.
-->
<asp:Label ID="LabelJs" runat="server"></asp:Label>
</form>
</body>
</html>
Popup.aspx.cs
protected void ButtonActivePassive_Click(object sender, EventArgs e)
{
CommActivePassiveStatus();
}
private void CommActivePassiveStatus()
{
if (ddlActivePassive.SelectedValue != "0")
{
/*
Bu kısımda eğer dropdownlist'den seçilen item "0" value değerine sahip değilse.
Seçilen aktif veya pasif değerlerini veritabanına gönderdiğimiz kod grubu olacak.
*/
/*
Ve bu işlem sonrasında label'ımıza AppClose fonksiyonumuzu <script></script>
tagları arasında yazdırıyoruz. İşin bu kısmı bana göre önemli çünkü çalışmasını
istediğimiz js fonksiyonunun hangi olay sonrasında başlamasını istiyorsak bunu
kod tarafından ayarlamış oluyoruz.
*/
LabelJs.Text = "<script>AppClose();</script>";
}
else
{
// Burda eğer dropdownlist'den seçilen value "0" ise alert ile mesajımızı verdiriyoruz.
// Tabi bunu ScriptManager sınıfı sayesinde yapıyoruz.
ScriptManager.RegisterStartupScript(Page, typeof(Page), "x", "alert('Lütfen seçim yapınız.')", true);
}
}
Evet arkadaşlar uygulamamız bu şekilde. Buradaki yapıyı kendinize göre özelleştirip kullanabilirsiniz. Bu örneğimizde asp.net ile popup sayfası kapandıktan sonra bir önceki sayfanın yenilenmesini ve aynı zamanda da C# kod tarafından asp.net sayfalarına javascript fonksiyonlarının yazdırılmasını görmüş olduk.
Hepinize kolay gelsin. İyi çalışmalar.