www.necmettindemir.com

MAKALELER

Ajax ModalPopupExtender ile MessageBox (10.06.2011)

Ajax ModalPopupExtender ile MessageBox

Windows masaüstü programlama ortamından web programlamaya geçen herkesin ilk ihtiyaçlarından biri Windows uygulamalarda kullanılan messagebox benzeri bir yapıdır.
Bunun için kullandığınız Visual Studio versiyonuna uygun ilgili ajax kütüphanesini kurmuş olmamız gerekir. Şekilde Vs2010 ile kurulu gelen Ajax kütüphanesi görülmektedir.

Resim 1 : Visual Studio 2010 üzerine kurulmuş Ajax Kütüphanesi

Yapmamız gereken projemize bir adet MessageBox adında (adını istediğimiz gibi belirtebiliriz) bir “web user control” eklemek.

Resim 2 : Web Site projemize web user control eklemek

Ajax bileşenlerini kullanabilmek için projemize Toolbox’tan bir adet “ScriptManager” ekliyoruz.
Tüm projede ajax kütüphanesinin kullanılabilmesi için bir tane “ScriptManager” yeterlidir.

Resim 3 : Ajax kütüphanesini kullanabilmek için ScriptManager kullanmak gerekir

Şimdi message box olarak kullanmak istediğimiz bileşenimizi tasarlayalım.

RResim 4 : MessageBox görünümü

Toolbox üzerinden bir adet “ModalPopupExtender” ”MessageBox user control” üzerine sürükleyip bırakalım.
Daha sonra bileşenleri aşağıdaki gibi isimlendirelim.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MessageBox.ascx.cs" Inherits="MessageBox" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>

<asp:Button ID="btnNewMsg" runat="server" Text="Yeni" />

</div>

<asp:ModalPopupExtender

ID="ModalPopupExtenderMsg" runat="server"

PopupDragHandleControlID="PanelHeaderMsg"

DynamicServicePath=""

BackgroundCssClass="modalBackground"

Enabled="True"

TargetControlID="btnNewMsg"

PopupControlID="PanelMsg">

</asp:ModalPopupExtender>

<asp:Panel ID="PanelMsg" runat="server" Width="580px" BackColor="#D3DEEF" BorderWidth="1px" BorderColor="Black">

<asp:Panel ID="PanelHeaderMsg" runat="server" BackColor="#8080FF" Height="30px"

Width="580px">

<tr>

 <asp:Label ID="LabelTitle" runat="server" Font-Bold="True" ForeColor="White"

Text="Bilgi"></asp:Label>

</td>

<td align="right"><asp:Button ID="ButtonMsgClose" runat="server" Text="[x]"

</td>

</tr>

</table>

</asp:Panel>

<tr>

<asp:Label ID="LabelMsg" runat="server"></asp:Label><br /> <br />

</td>

</tr>

<tr>

</td><td width="33%"> </td>

</tr>

</table>

<br />

</asp:Panel>

Resim 5 : MessageBox html kodu

MessageBox icinde show adında bir metod ekliyoruz.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

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

{

protected void Page_Load(object sender, EventArgs e)

{}

public void show(string title, string msg)

{

LabelTitle.Text = title;

LabelMsg.Text = msg;

ModalPopupExtenderMsg.Show();

}

Resim 6 : MessageBox için cSharp kodu

Şimdi Default.aspx üzerine bir adet “TextBox” ve bir adet “Button” sürükleyip bırakalım.
Burada örnek olması açısından textbox’a girilen bir eposta adresinin geçerli olup olmadığını 
.NET ortamında regular expression ile kontrol edecek mini bir kod yazalım. 

Eğer eposta kurallara uygun ise “messagebox” ile uygundur, değilse yine “messagebox” 
ile uygun değildir diyelim.

Bunun için  aşağıdaki gibi bir görüntü elde edelim.

Resim 7 : Default.aspx sayfasının görüntüsü

Şimdi de “messagebox user control”u sürükleyip Default.aspx sayfamızda herhangi bir yere bırakarak aşağıdaki gibi bir görüntü elde edelim.

Resim 8 : Default.aspx sayfasının MessageBox içeren halinin tasarım anındaki görüntüsü

Formumuzdaki “btnCheck” adlı tek botunun “click” olayına aşağıdaki kodu ekleyelim.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Text.RegularExpressions;

public partial class _Default : System.Web.UI.Page

{

protected void btnCheck_Click(object sender, EventArgs e)

{

string validEmailPattern =

@"^(([\w-]+\.)+[\w-]+|([a-zA-Z]{1}|[\w-]{2,}))@"

+ @"((([0-1]?[0-9]{1,2}|25[0-5]|2[0-4][0-9])\.([0-1]?[0-9]{1,2}|25[0-5]|2[0-4][0-9])\."

+ @"([0-1]?[0-9]{1,2}|25[0-5]|2[0-4][0-9])\.([0-1]?[0-9]{1,2}|25[0-5]|2[0-4][0-9])){1}|"

+ @"([a-zA-Z]+[\w-]+\.)+[a-zA-Z]{2,4})$";

if (TBEmail.Text.Trim() != null)

{

if (Regex.IsMatch(TBEmail.Text.Trim(), validEmailPattern))

MessageBox1.show("Bilgi", "Eposta adresi uygundur!");

else

MessageBox1.show("opps!", "Eposta adresi uygun değildir!");

}

else

MessageBox1.show("!", "Eposta adresi giriniz!");

}

Resim 9 : MessageBox’ı kullanmak için örnek kod

Projemizi çalıştırıp Default.aspx’i incelediğimizde tasarım anında görünen messagebox1 in çalışma anında görünmediği fark edilecektir.

Geçersiz bir eposta adresi ile test edelim.

Resim 10 : Geçerli olmayan eposta adresi

Geçerli bir eposta adresi ile test edelim.

Resim 11 : Geçerli eposta adresi

Kaynak kod

YORUMLAR

Cemal GÜNEŞ, 10.06.2011

Mühendis Hocam on numara hap çözüm olmuş.

Kıdemli Yazılım Mimarı/Eğitmeni

MAKALELER

Ajax ModalPopupExtender ile MessageBox (10.06.2011)

YORUMLAR

Cemal GÜNEŞ, 10.06.2011