Asp.Net projelerinizde kullanıcıların (string) veri girişini TextBox vb kontrollerle gerçekleştiriyoruz. Kimi zaman veri girişini ayrı bir sayfadan yapmak isteyebilirsiniz. Örneğin kariyer sitenizde özgeçmiş düzenleme sayfanız olsun. Bu sayfada kullanıcıların meslek bilgilerini açılan bir ekranda girmesini ve girilen bilgileri özgeçmiş düzenleme sayfasına aktarılmasını sağlayabilirsiniz.
Bu işlemi basitçe Javascript Popup ekranlarıyla gerçekleştirebilirsiniz. Örnek uygulamamızda 2 adet sayfamız olsun:
Default.aspx: Bu ekran üzerinden bir butona tıklandığında popup açılacak ve açılan popup içerisinde yer alan TextBox’a girilen veri, Default.aspx üzerindeki TextBox’a aktarılacak.
PopupBilgiAl.aspx: Popup ile açılan sayfadır. İçerisinde bir adet TextBox (ad soyad bilgisinin yazılacağı) ve sonucu geri döndürecek olan buton yer alacaktır.
Default.aspx’i açalım ve bir TextBox ve 2 adet Button yerleştirelim.
btPopup: Popup sayfasını açacak butondur. OnClientClick’te birazdan oluşturacağımız AcPopupAdSoyad isimli javascript fonksiyonunu çağıracağız.
btKaydet: Popup sayfasını açıp bilgiyi aldıktan sonra TextBox’taki veriyi server-side’da görüntüleyeceğimiz butondur.
Default.aspx > Body
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txbAdSoyad" runat="server"></asp:TextBox>
<br />
<asp:Button ID="btPopup" runat="server" Text="Popup Aç" OnClientClick="javascript:AcPopupAdSoyad('txbAdSoyad');" />
<br />
<br />
<asp:Button ID="btKaydet" runat="server" Text="Kaydet" OnClick="btKaydet_Click" />
</div>
</form>
</body>
Default.aspx’in head bölümünde AcPopupAdSoyad javascript fonksiyonunu oluşturalım. Bu fonksiyon içerisinde PopupBilgiAl.aspx sayfasını açıp dönen değeri (adSoyad) txbAdSoyad isimli TextBox kontrolüne atayalım.
Default.aspx > Head
<script type="text/javascript">
function AcPopupAdSoyad(txbAdSoyad) {
adSoyad = window.showModalDialog("PopupBilgiAl.aspx");
document.getElementById(txbAdSoyad).value = adSoyad;
}
</script>
btKaydet’in click olayında ise txbAdSoyad’da alınan değerin doğruluğunu kontrol edebilmek için içindeki değeri string bir değişkene alalım.
Default.aspx.cs
protected void btKaydet_Click(object sender, EventArgs e)
{
string adSoyad = txbAdSoyad.Text;
}
Default.aspx’in kodlamasını tamamladıktan sonra PopupBilgiAl.aspx formunun kodlamasına geçelim. Forma 1 adet TextBox ve 1 adet input > button kontrolü ekleyelim. Input kontrolünün OnClick olayına birazdan yazacağımız GonderAdSoyad isimli javascript fonksiyonunu tanımlayalım.
PopupBilgiAl.aspx > Body
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txbAdSoyad" runat="server"></asp:TextBox><br />
<br />
<input type="button" id="btBilgiyiGonder" value="Bilgiyi Gönder" onclick="GonderAdSoyad();" />
</div>
</form>
</body>
PopupBilgiAl.aspx’in head bölümünde GonderAdSoyad javascript fonksiyonunu oluşturalım. Bu fonksiyon içerisinde, ekranın geri dönüş değerine (window.returnValue) textbox kontrolündeki değeri atayan ve sonrasında ekranı kapatan (window.close) javascript fonksiyonunu oluşturalım..
PopupBilgiAl.aspx > Head
<head runat="server">
<title></title>
<script type="text/javascript">
function GonderAdSoyad() {
var adSoyad = document.getElementById('txbAdSoyad').value;
window.returnValue = adSoyad;
window.close();
}
</script>
</head>
Kodlamayı tamamladıktan sonra projeyi çalıştırıp Default.aspx’i açalım.
Popup Aç butonuna tıklayıp popup sayfasını açalım.
Açılan popup sayfasında TextBox kontrolüne “Veysel Uğur KIZMAZ” değerini yazıp Bilgiyi Gönder butonuna tıkladığınızda değerin Default.aspx > txbAdSoyad kontrolüne atanacaktır.
Kaydet butonuna tıkladığınızda txbAdSoyad kontrolündeki “Veysel Uğur KIZMAZ” değerinin başarıyla server-side tarafından başarıyla alındığını göreceksiniz.
Yepyeni makalelerde görüşmek dileğiyle :)
Veysel Uğur KIZMAZ
Bilgisayar Mühendisi
veysel@ugurkizmaz.com
www.ugurkizmaz.com