Yazılım Notları
Bilgi Paylaştıkça Çoğalır...

JavaScript'e bağımlı olmayan, popup açılan mesaj Kutusu

Web tabanlı geliştirilen uygulamalar, gerek görsellik gerekse fonksiyoneliteleri açısından her gün masaüstü uygulamalara biraz daha yaklaşıyor. Bu kapsamda, web tabanlı uygulamaların kullanıcı dostu ara yüzleri sağlaması önemli bir konu olarak karşımıza çıkıyor.Bu makalede, masa üstü (windows tabanlı) uygulamalardan alışık olduğumuz popup açılan pencerelerin web tabanlı uygulamalarda nasıl geliştirilebileceğine bir örnek anlatılacaktır.

Bu örnek uygulamayı 4 adımda gelişitireceğiz. Bunlar:

  1. Öncelikli olarak uygulama arayüzünü geliştireceğiz.
  2. İkinci olarak bu arayüzün arkasında (codebehind) yer alan C Sharp kod dosyasını geliştireceğiz.
  3. Son olarak, mesajGoster(...) (messageBox) şeklinde oluşturacağımız bir prosedürle geliştirmiş olduğumuz bu popup açılan mesaj kutusunu uygulamalarımızda nasıl kullanabileceğimize bakacağız.
  4. Web User Control'de bazı CSS Classları kullanılmıştır. Bu sınıfların nasıl oluşturulduğu, bu makalenin kapsamı dışında ele alınmıştır. Ancak, söz konusu sınıflar da, makalenin en sonunda ayrıca paylaşılacaktır.

Mesaj Kutusu Web User Control' ü:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ucMesajKutusu.ascx.cs" Inherits="myApp.ucMesajKutusu"%>

<!-- Ajax Control Toolkit kullanmamızın sebebi, açılan mesaj Kutumuza bir gölge efekti vermek istememiz. Bu efekti vermek için, user kontrolün en sonunda yer alan DropShadowExtender kontrolü kullanılmıştır. -->

<%@ RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="asp"%>

<link href="css/divTableStyle.css" rel="stylesheet"type="text/css"/>

<link href="css/genel.css" rel="stylesheet" type="text/css" />

<link href="css/genel2.css" rel="stylesheet" type="text/css" />

<center>

<!-- Mesaj Kutusu Background ?zelliği Başlangı? -->

<div id="divMesajKutusuBg"runat="server" style="width:100%; height:100%; position:fixed;left:0px;top:0px;z-index:100; background-color:Black; filter: alpha(opacity=60);opacity: 0.60;color:Black; display:block;" onclick="return false;"></div>

<!-- Mesaj Kutusu Background ?zelliği Sonu -->

<!-- Mesaj Kutusu İ?erik Kısmı Başlangı?-->

<div id="divMesajKutusuContent" runat="server" style="width:100%; height:100%; position:fixed;left:0px; top:0px; z-index:100; display:block;">

<div id="divMesajKutusu" runat="server" class="divTable"

style="width:600px; height:auto; top:38%;

border-radius:8px;

-moz-border-radius:8px;

-webkit-border-radius:8px;

background-color:White; padding:13px" >

<div class="divTableRow" style="padding:3px; height:32px; border-bottom: Dashed 1px Gray; background-image: url('../images/info-bar.png'); background-repeat: no-repeat; background-position: left 3px;" >

<div class="divTableHeaderImg">

<asp:Image ID="imageMersajKutusu" runat="server" ImageUrl="~/images/icons/unlem.png"/>

</div>

<div class="divTableHeaderTxt"style="top:-5px">

<asp:Label ID="lblBaslik" runat="server" Font-Size="16pt" ForeColor ="#444444"></asp:Label>

</div>

</div>

<div class="divTableRow"></div>

<div class="divTableRow" style="height:auto; ">

<asp:Literal ID="lblMesaj" runat="server"></asp:Literal>

</div>

<!-- Mesaj Kutusu İ?erik Kısmı Sonu-->

<div class="divTableRow"></div>

<div class="divTableRow"style="border-top:solid 1pxSilver">

<div class="divTableFooterButtons"style="width:100px">

<div class="divTableFooterButton">

<asp:Button ID="btnMesajKapat"runat="server" Font-Bold="True" ForeColor="White" OnClick="btnMesajKapat_Click" style="cursor:pointer" Text="Tamam" Height="26px" CssClass="butonVazgec"/>

</div>

</div>

</div>

</div>

</div>

</center>
<asp:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="divMesajKutusu" Radius="10" Rounded="true" Opacity="1">
</asp:DropShadowExtender>

Mesaj Kutusu Code Behind(ucMesajKutusu.ascx.cs):

// Bu .cs uzantılı kod dosyamızın property lerinde, mesajBasligi ve mesaj

// bulunmaktadır. ucMesajKutusu.ascx web user control' ?n?, herhangi biraspx

// sayfasından (web form) load ettiğimizde mesaj ve mesajBasligiproperty'lerini

// set ediyoruz. Daha sonra, bu user control y?klenirken, Page_Loadolayında,

// mesajBasligi ve mesaj property'lerinin değerleri, ilgili Label'larayazılır.

using System;

using System.Collections.Generic;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace myApp

{

        public partial class ucMesajKutusu: System.Web.UI.UserControl

        {

                public string mesajBasligi;

                public string mesaj;

                public string MesajBasligi

                {

                        get

                        {

                                return mesajBasligi;

                        }

                        set

                        {

                                mesajBasligi = value;

                        }

                }

                public string Mesaj

                {

                        get

                        {

                                return mesaj;

                        }

                        set

                        {

                                mesaj = value;

                        }

                }

                

                protected void Page_Load(object sender, EventArgs e)

                {

                        lblBaslik.Text =mesajBasligi;

                        lblMesaj.Text = "<spanstyle='max-width:470px'>" mesaj "</span>";

                        Page.Form.DefaultButton= btnMesajKapat.UniqueID;

                        btnMesajKapat.Focus();

                }

      }

}

 

MesajGoster(...) Yordamı

// Şimdi, popup mesaj g?stermek istediğimiz aspx sayfasında bir procedure

// yazalım. Bu yordam ile, ?nce bir placeHolder oluşturuyoruz. BuplaceHolder'ı

// web sayfamızdaki form control'?ne ekliyoruz. Daha sonra,ucMesajKutusu.ascx

// web user control?n? Load edip mesaj ve mesajBasligi property' lerini

// set ediyoruz. En son olarak da bu user control? placeHolder' aekliyoruz.

// pop up a?ılan bir mesaj kutusu ekranda g?r?nt?leniyor.

protected ucMesajKutusu ctl;

public void mesajGoster(Page pageName, string mesajBasligi, stringmesaj)

{
        PlaceHolder ph = new PlaceHolder();

 ph.Controls.Clear();

 pageName.Form.Controls.Add(ph);

 ctl = pageName.LoadControl("ucMesajKutusu.ascx") as ucMesajKutusu;
 ctl.MesajBasligi = baslik;

 ctl.Mesaj = mesaj;
 ph.Controls.Add(ctl);

}

Kullanılan CSS Sınıfları

.divTable

{position:relative;display:block;padding:5px; }

.divTableRow

{clear:both;position:relative;width:98%; display:inline-block; min-height:24px; margin-top:0px; top: 0px; left: 0px; }

.divTableHeaderImg

{position:relative; float:left; width:32px; display:inline-block; padding:4px; }

.divTableHeaderTxt

{position:relative; float:left; left:5px; padding-top:8px; display:inline-block; }

.divTableFooterButtons

{position:relative; float:right; display:inline-block; margin-top:5px; }

.divTableFooterButton

{position:relative; float:right; display:block; text-align:center; padding:8px; }

 

 

Banka Hesap Numaralarınızı, IBAN Numaralarınızı bir kere telefonunuza kaydedin. İhtiyaç duyduğunuzda elinizin altında olsun.

Banka Hesaplarım

En Güzel Sözler Uygulaması İçin


En Çok Rating Alanlar
Ana Sayfa       Arama       Valid CSS!