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.

16.06.2013

Yazar: Veysel Uğur KIZMAZ (Google+)

Kategori: ASP.NET

7065

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

Yazar Hakkında

Veysel Uğur KIZMAZ

www.ugurkizmaz.com

YazılımDilleri.Net projesinin lideri olan Veysel Uğur Kızmaz, Gazi Üniversitesi Bilgisayar Mühendisliği bölümü mezunudur. Bir çok projede çalışmış, yazılım alanında birçok eğitimler vermiştir. Şu an özel bir yazılım danışmanlık firmasında Sharepoint proje danışmanlığı ve proje yöneticiliği yapmaktadır. Veysel Uğur Kızmaz, dahil olduğu projelerin çeşitliliği sebebiyle farklı alanlarda uzmanlaşmıştır: .Net, Sharepoint, Java, Php, Javascript, SQL Server, Oracle, MySQL.

Yazar Hakkında

Sosyal Medya

0 Yorum

Yorum Yaz / Soru Sor

Son Yorumlar

En Güncel Sorular

En Son Cevap Verilen Sorular

Twitter

En Çok Okunanlar

Sponsorlar