"/>"/>
Yazılım Dilleri
Asp.Net 4.5 Kitabı
Skip Navigation Links

Asp.Net Popup ile Açılan Sayfadan Veri Alma

Asp.Net projesinde popup ile açılan sayfada girilen değeri alma ve sayfayı kapatma işleminin nasıl yapıldığını öğrenelim.

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

 

Yorumlar (5)

  1. Avatar
    ali demir

    15.06.2013

    Çok faydalı teşekkür ederim, emeğinize sağlık.

  2. Avatar
    Uğur NALBANTOĞLU

    21.07.2013

    Veysel Uğur Bey merhaba Öncelikle Sade anlatımınız için çok teşekkür ederim. Emeğinize sağlık. size sorum şu olacak. Veritabanımdaki kayıtları listelediğim grid sayfam var. Bu sayfada "Rapor Yazdır" butonum var. Kullanıcı bu butona tıkladığı zaman içeriğinde şehirleri listelediğim combobox olan popup ekranı açılıyor. Bu ekranda seçilen veriyi başka bir sayfaya göndermek istiyorum. Bu anlattığınız örnek işimi görür mü acaba?

  3. Avatar

    @Uğur Nalbantoğlu: Sayfaya geri dönüş sağlamanız gerekiyorsa (grid olan sayfaya), bu yapı işinize yarayacaktır. Fakat sayfalar arası (farklı sayfalara) yönlenme var ise doğrudan parametre gönderme işlemini yapmanız daha sağlıklı olacaktır.

  4. Avatar
    Kerim Koral

    28.01.2014

    Yazınız için teşekkürler. Eğer Master Page kullandığımız bir sayfada bu yapı işe yaramıyor. Textbox değeri boş dönüyor. Yardımcı olabilirmisiniz.

  5. Avatar
    Aykut Aydoğan

    24.02.2014

    Teşekkürler hocam yalnız evet masterpage de işe yaramıyor nasıl çözülür bu durum. veya çözen arkadaşlar yazarsa sevinirim.

Yorum Yap

Mail listesine katılmak için tıklayınız

Hakkımdaki son bilgilere anlık erişmek için mail listesine katılabilirsiniz.