9 Aralık 2009 Çarşamba

ASP.NET Web Sayfasında Popup Pencere Açmak

Bu yazımızdaki örneğimizde ana sayfamız olan aspx sayfasından javascript ve ASP.NET Methodlarından ClientScript.RegisterStartupScript kullanarak  popup penceresi açmayı ve ana sayfamızda yaptığımız güncellemenin açılan popup penceresinde nasıl yenilendiğini beraberce öğreneceğiz.

Daha önceki yazılarımıda Ajax kontrollerinden ModalPopupExtender kullanarak popup menü açmayı ele almıştık. Burda farklı olarak popup penceresini ana pencereye bağlı başka bir child (alt) sayfa üzerinden açmayı öğreneceğiz.

Başlangıç olarak Default.aspx sayfamıza popup penceresinin açılmasını sağlayan butonu sürüklüyoruz. Güncellenecek bilgileri göstermek içinde iki tane label. Kod bloğumuz aşağıdaki gibidir.

<div>
    Adı :
    <asp:Label ID="lblAdi" runat="server" Text=" E. Yeşim">
    </asp:Label><br />
    <br />
    Soyadı :
    <asp:Label ID="lblSoyadi" runat="server" Text="Yağcı">
    </asp:Label><br />
    <br />
    <asp:Button ID="btnPop" runat="server" Text="Bilgileri Güncelleyin" />
</div>

Daha sonra Default.aspx sayfasının baş tarafına aşağıdaki java script kodunu ekleyelim. Burada amacımız alınan değerleri popup sayfası içine geçişi sağlamak.

<script type="text/javascript">
    function openPopUp() {
        var popUrl = 'PopUp.aspx?fn=' + document.getElementById('<%= lblAdi.ClientID %>').innerHTML + '&ln=' + document.getElementById('<%= lblSoyadi.ClientID %>').innerHTML;
        var name = 'popUp';
        var appearence = 'dependent=yes,menubar=no,resizable=no,' +
                            'status=no,toolbar=no,titlebar=no,' +
                            'left=5,top=280,width=230px,height=140px';
        var openWindow = window.open(popUrl, name, appearence);
        openWindow.focus();
    }
</script>

Sonraki adımda Default.aspx.cs içindeki Page_Load methodu içine
protected void Page_Load(object sender, EventArgs e)
{
    string updateValuesScript = @"function updateValues(popupValues)
                {
                document.getElementById('lblFirstName').innerHTML=popupValues[0];
                document.getElementById('lblLastName').innerHTML=popupValues[1];
                }";

    this.ClientScript.RegisterStartupScript(Page.GetType(), "UpdateValues", updateValuesScript.ToString(), true);
    btnPop.Attributes.Add("onclick", "openPopUp('PopUp.aspx')");
}
protected void btnPop_Click(object sender, EventArgs e)
{

}

Şimdi projemize yeni bir Web Form ekleyerek devam ediyoruz. Bu form bizim güncelleme yapmak için açacağımız PopUp sayfamız olacak. Sayfa içerisine

<div>
    First Name :
    <asp:TextBox ID="txtPopAdi" runat="server" Width="113px">
    </asp:TextBox><br />
    <br />
    Last Name:<asp:TextBox ID="txtPopSoyAdi" runat="server" Width="109px">
    </asp:TextBox><br />
    <br />
    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</div>


protected void Page_Load(object sender, EventArgs e)
{
    string updateParentScript = @"function updateParentWindow()
                {
                var adi=document.getElementById('txtPopAdi').value;
                var soyadi=document.getElementById('txtPopSoyadi').value;
                var arrayValues= new Array(adi,soyadi);
                window.opener.updateValues(arrayValues);
                window.close();
                }";
    this.ClientScript.RegisterStartupScript(this.GetType(), "UpdateParentWindow", updateParentScript, true);
    if (!IsPostBack)
    {
        txtPopFName.Text = Request["fn"];
        txtPopLName.Text = Request["ln"];
    }
    Button1.Attributes.Add("onclick", "updateParentWindow()");
}
protected void Button1_Click(object sender, EventArgs e)
{

}



1 yorum:

Hakkı KARAHAN dedi ki...

Bakalim asp.net e yeni basliyorum. Bu iş javascript harici ajax yada bunlarin 2sinide kullanmadan yapilamaz mi?
Bu arada rss beslemelerini kontrol et istersen..