25.06.2010 13:02:01
Gridview İle Modal Popup Extender Kullanımı
Modal Popup Extender bir ajax uygulamasıdır. Kullanıcıya mesaj vermek istediğimizde, gridview üzerinde edit işlemi yapmak istediğimizde kullanabileceğimiz güzel ve kullanışlı bir nesnedir. “Ne gerek var ki canım bunu kullanmaya? Kullanıcıya bir uyarı bir mesaj vermek için javascript’ in alert metodunu kullanırım, gridview üzerindeki bir kaydı da güncellemek için popup pencere açarım.” diyebilirsiniz. Evet bunlar da doğru ve geçerli yöntemlerdir. Alert metodu ile karşımıza çıkan pencerenin görüntüsü beni rahatsız ediyor, bence sizde bu görüntüden rahatsız oluyorsunuzdur ve maalesef bunu değiştirme gibi bir şansımız yok. Fakat Modal Popup Extender nesnesini css kullanarak tasarlama şansımız var. Gelelim gridview üzerindeki güncelleme işlemine ; güncellemek istediğimiz kayda tıkladık, popup penceremiz açıldı( bazen açılmayabiliyor ). Üzerinde değişiklikler yaptık ve popup penceremizi kapattık. Şimdi yapmamız gereken gridview’ı refresh edip değişiklikleri görmek(sayfa postback olmadan). Bunu yapmak için birkaç takla atmamız gerekiyor. E Ajax Control Toolkit içerisinde bunları daha kolay yapmam için geliştirilmiş bir nesne varken niye onu kullanmayayım ki?
Neden bu nesneyi kullanmamız gerektiğini, bize ne faydası olacağını anladığınızı umuyorum ve artık nasıl kullanılır kısmına geçiyorum. İlk yapmanız gereken Ajax Control Toolkit’i buradan indirip kurmak.
Senaryomuz şöyle olsun : Veritabanımızda kişinin ad ve soy ad bilgilerini tutan tablomuz var. Biz bu tablodaki bilgileri sayfamızda bir gridview ile göstereceğiz ve düzenle butonuna basınca modal popup extender yardımıyla açılan pencerede değişikliklerimizi yapacağız. Bunu yaparken farklı yöntemler kullananlar da var. Ben aptal buton yöntemini kullanacağım, yani grid dışına bir buton koyarak Modal Popup Extender’ın hata vermesini engelleyeceğim.
Öncelikle açılacak Modal Popup’ın stilini ve gridview’ımızı düzenliyoruz.
Stil kodlarımız :
<style>
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
</style>
Sayfamıza ajax nesnelerinin çalışması için bir de Ajax Script Manager ekliyoruz.
Gridview’ın kodları :
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
EnableModelValidation="True" ForeColor="#333333" GridLines="Vertical" Width="491px">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="Ad">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Ad") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Soyad">
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Soyad") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Edit">
<ItemTemplate>
<asp:LinkButton ID="btn" runat="server" CommandArgument='<%# Eval("ID") %>' OnClick="LinkButton1_Click"
Text='Edit'></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
</asp:GridView>
</div>
Gridview’ı da düzenledikten sonra sayfamıza 1 adet buton ve Modal Popup Extender ekliyoruz.
<div>
<asp:Button ID="btnAptal" runat="server" />
<cc1:ModalPopupExtender ID="btnAptal_ModalPopupExtender" runat="server"
TargetControlID="btnAptal" BackgroundCssClass="modalBackground"
PopupControlID="pnlPopup">
</cc1:ModalPopupExtender>
</div>
Şimdi sıra geldi düzenle butonuna tıkladığımızda açılacak olan Modal Popup’a. Bunun için bir tane Panel ve onun içerisinde de bir tane Update Panel kullanıyorum. Burada dikkat edilmesi gereken yer
Panelin style’ından display özelliğini none yapıyorum ki sadece butona tıklandığında gözüksün.
Bunlarda Modal Popup’ın kodları :
<asp:Panel ID="pnlPopup" runat="server" Width="500px" Height="400px" style="display:none">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:HiddenField ID="HiddenField2" runat="server" />
<table>
<tr>
<td style="width:100px">
Ad
</td>
<td style="width:10px">
:
</td>
<td style="width:200">
<asp:TextBox ID="txtAd" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width:100px">
Soyad
</td>
<td style="width:10px">
:
</td>
<td style="width:200">
<asp:TextBox ID="txtSoyad" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="3">
<asp:Literal ID="ltlMesaj" runat="server"></asp:Literal>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<div align="right" style="width:95%">
<asp:Button ID="btnSave" runat="server" Text="Save" Width="50px" />
<asp:Button ID="btnClose" runat="server" Text="Close" Width="50px" />
</div>
</asp:Panel>
Html tarafının tamamı şu şekilde oldu :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
EnableModelValidation="True" ForeColor="#333333" GridLines="Vertical" Width="491px">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="Ad">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Ad") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Soyad">
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Soyad") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Edit">
<ItemTemplate>
<asp:LinkButton ID="btn" runat="server" CommandArgument='<%# Eval("ID") %>' OnClick="LinkButton1_Click"
Text='Edit'></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#2461BF" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
</asp:GridView>
</div>
<div>
<asp:Button ID="btnAptal" runat="server" />
<cc1:ModalPopupExtender ID="btnAptal_ModalPopupExtender" runat="server"
TargetControlID="btnAptal" BackgroundCssClass="modalBackground" PopupControlID="pnlPopup">
</cc1:ModalPopupExtender>
</div>
<asp:Panel ID="pnlPopup" runat="server" Width="500px" Height="400px" style="display:none">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:HiddenField ID="HiddenField2" runat="server" />
<table>
<tr>
<td style="width:100px">
Ad
</td>
<td style="width:10px">
:
</td>
<td style="width:200">
<asp:TextBox ID="txtAd" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width:100px">
Soyad
</td>
<td style="width:10px">
:
</td>
<td style="width:200">
<asp:TextBox ID="txtSoyad" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="3">
<asp:Literal ID="ltlMesaj" runat="server"></asp:Literal>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<div align="right" style="width:95%">
<asp:Button ID="btnSave" runat="server" Text="Save" Width="50px" />
<asp:Button ID="btnClose" runat="server" Text="Close" Width="50px" />
</div>
</asp:Panel>
</form>
</body>
</html>
Bütün bu düzenlemeleri yaptıktan artık sonra artık kod tarafına geçebiliriz.
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
DataClassesDataContext db = new DataClassesDataContext(MyCOnnection.GetConstr());
protected void Page_Load(object sender, EventArgs e)
{
//panel içerisindeki Kaydet ve Kapat butonlarını tetikliyoruz.
btnClose.Click += new EventHandler(btnClose_Click);
btnSave.Click += new EventHandler(btnSave_Click);
if (!Page.IsPostBack)
{
//Gridview'ımızı dolduruyoruz.
Fill();
}
}
void btnSave_Click(object sender, EventArgs e)
{
//Kaydet tuşuna bastığımızda güncelleme işlemi yapılır.
Guncelle(Convert.ToInt32(HiddenField2.Value),txtAd.Text,txtSoyad.Text);
}
void btnClose_Click(object sender, EventArgs e)
{
//Gridview doldurulur ve modal popup gizlenir.
Fill();
btnAptal_ModalPopupExtender.Hide();
}
private void Fill()
{
//Linq kullanarak doldurma işlemi yapıyoruz.
var dt = from b in db.TblModalPopUps
select new
{
b.Ad,
b.Soyad,
b.ID
};
GridView1.DataSource = dt;
GridView1.DataKeyNames=new string[]{"ID"};
GridView1.DataBind();
}
protected void LinkButton1_Click(object sender, EventArgs e)
{
//Gridview içerisindeki düzenle butonuna tıklayınca panel içerisindeki alanları dolduruyoruz.
//Paneli update ediyoruz ve modal popup'ı gösteriyoruz
LinkButton btn = sender as LinkButton;
GridViewRow row = (GridViewRow)btn.NamingContainer;
string id = this.GridView1.DataKeys[row.RowIndex].Value.ToString();
HiddenField2.Value = id;
FillDetay();
UpdatePanel1.Update();
btnAptal_ModalPopupExtender.Show();
}
private void FillDetay()
{
int ID = Convert.ToInt32(HiddenField2.Value);
var tbl = db.TblModalPopUps.First(i=>i.ID==ID);
this.txtAd.Text = tbl.Ad;
this.txtSoyad.Text = tbl.Soyad;
}
private void Guncelle(int id,string ad,string soyad)
{
//güncelleme işlemini yapıyoruz.
var tbl = db.TblModalPopUps.First(i => i.ID == id);
tbl.Ad = ad;
tbl.Soyad = soyad;
try
{
db.SubmitChanges();
Fill();
}
catch (Exception)
{
}
}
}
Eminim ki sizde benim gibi her projede bu nesneyi kullanacaksınız bundan sonra:)