Bu makalede amacım; GridView içerisinde Popup ekranı çırarıp nasıl güncelleyeceğimizi ğöstereceğim. Panel modalextender (ajax) ile çıkacaktır, GridView kolonları içerisindeki detaylar PopupPanel içinde çıkacaktır. Güncelle Butonuna ( ID : show) basılınca GridView’ın RowCommand olayı çalışacaktır.
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Select")
{
Session["id"] = e.CommandArgument.ToString();
ShowPopUp(GridView1.FindControl("show"), e);
}
}
Yukarıdaki kod Güncelle butonuna basılınca çalışacaktır. ShowPopup() fonksiyonu devreye girecektir:
protected void ShowPopUp(object sender, EventArgs e)
{
string str = Session["id"].ToString();
DataTable dt = GetData("sp_GetDataSearchUser", int.Parse(str));
TextBox1.Text = dt.Rows[0]["ad"].ToString();
TextBox2.Text = dt.Rows[0]["soyad"].ToString();
TextBox3.Text = dt.Rows[0]["adres"].ToString();
TextBox4.Text = dt.Rows[0]["telefon"].ToString();
TextBox5.Text = dt.Rows[0]["email"].ToString();
mdlPopup.Show();
}
Güncelle butonu yukarıdaki kodu devreye sokacaktır. Ana ekranda bir panel gelecektir ID ile veritabanından o kayıtla ilgili bilgiler gelecektir.
Yukarıdaki Ekle butonuna basılınca:
<asp:Button ID="Button_Update" runat="server" Text="Ekle" OnClick="Update" />
C# kısmı:
protected void Update(object sender, EventArgs e)
{
string str = Session["id"].ToString();
UpdateData("sp_GetDataUpdate", int.Parse(str), TextBox1.Text, TextBox2.Text, TextBox3.Text, TextBox4.Text, TextBox5.Text);
Timer2.Enabled = true;
mdlPopup.Hide();
}
Kayıt Güncelleme Paneli çalışacaktır. ModalPoup Saklanır ve Timer saymaya başlar iki saniye sonra Timer Ontick eventini çalıştırır.
public void RefreshGridView(object sender, EventArgs e)
{
GridView1.DataSource = GetData("sp_GetData", -1);
GridView1.DataBind();
Timer2.Enabled = false;
Veritabanı güncellenir. RefreshGridView (Timer Tick Event ) ile GridView güncellenir. Timer durdurulur.
Burda dikkat edilmesi gereken bir nokta var belkide Makalenin en güzel tarafı burası. Grid içerisinde Güncelle Butonunun ID değerine Ajax ile ulaşamayız. Bunun için bir adet html button kullanırız. Buna ButtonDummy diyeceğim ve ModalPopUp’da TargetId değerine html buton ID si verilir. Vermezsek hata alırız çünkü TargetId kısmını boş bırakılamaz. ButtonDummy visible değeri false yapılır böylelikle kullanıcı butonu göremez. Peki popup nasıl ekrana getirilir : RowCammand eventi tetiklenince ShowPopup çalışacaktır.
Source Kısmına bakalım:
<ajaxToolkit:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="btnDummy"
PopupControlID="pnlPopup" BackgroundCssClass="modalBackground" OkControlID="btnDummy"
DropShadow="false">
ajaxToolkit:ModalPopupExtender>
<input id="btnDummy" runat="server" type="button" style="display: none;" />
<asp:Panel ID="pnlPopup" runat="server" Style="display: inline;
width: 600px; left: 50%; top:25%; font-family: 'Trebuchet MS', Verdana, Arial;
font-size: 16px; text-align: left; background: #fff; border: 2px solid #336699;"
CssClass="Panel">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="modalCloseX modalClose"
OnClientClick="$find('mdlPopup').hide(); return false;">xasp:LinkButton>
<div width="100%" class="header">Kayıt Güncelleme Panelidiv>
<div class='buttons' align="left" style="width: 100%; padding-top: 25px">
<table>
<tr><td>Adtd><td>:td><td><asp:TextBox ID="TextBox1" runat="server"
Width="200px">asp:TextBox>td>tr>
<tr><td>Soyadtd><td>:td><td><asp:TextBox ID="TextBox2" runat="server"
Width="200px">asp:TextBox>td>tr>
<tr><td valign="top">Adrestd><td valign="top">:td><td>
<asp:TextBox ID="TextBox3" runat="server" TextMode="MultiLine" Height="199px"
Width="300px">asp:TextBox>td>tr>
<tr><td>Telefontd><td>:td><td><asp:TextBox ID="TextBox4" runat="server"
Width="200px">asp:TextBox>td>tr>
<tr><td>Emailtd><td>:td><td><asp:TextBox ID="TextBox5" runat="server"
Width="200px">asp:TextBox>td>tr>
<tr><td>td><td>td><td align="right"><asp:Button ID="Button_Update" runat="server" Text="Ekle" OnClick="Update" />td>tr>
table>
<br /><br />
<div>
div>
ContentTemplate>
asp:UpdatePanel>
asp:Panel>
Bir makale burdada bitti.
SOURCE (HEPSİ) :
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
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>ModalPopUptitle>
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=50);
opacity: 0.7;
}
.header
{
height: 30px;
width: 100%;
background: url(_assets/img/header.gif) repeat-x;
color: #fff;
font-size: 1.1em;
font-weight: bold;
line-height: 30px;
}
.message
{
color: #333;
text-align: center;
margin: 0;
padding: 12px 4px;
font-size: 1em;
}
a.modalCloseX:link, a.modalCloseX:active, a.modalCloseX:visited
{
text-decoration: none;
font-weight: bold;
font-size: 1.1em;
position: absolute;
top: -1px;
left: 580px;
color: #ddd;
}
a.modalCloseX:hover
{
color: #9bb3b3;
}
style>
head>
<body>
<form id="form1" runat="server">
<div style="width:100%">
<asp:ScriptManager ID="ScriptManager1" runat="server">
asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" Width="75%" OnRowCommand="GridView1_RowCommand"
AutoGenerateColumns="false" >
<HeaderStyle BackColor="Silver" />
<AlternatingRowStyle BackColor="CornflowerBlue" />
<Columns>
<asp:TemplateField HeaderText="id" Visible="false">
<ItemTemplate>
<%#Eval("id") %>
ItemTemplate>
asp:TemplateField>
<asp:TemplateField HeaderText="Ad">
<ItemTemplate>
<%#Eval("ad") %>
ItemTemplate>
asp:TemplateField>
<asp:TemplateField HeaderText="Soyad">
<ItemTemplate>
<%#Eval("soyad") %>
ItemTemplate>
asp:TemplateField>
<asp:TemplateField HeaderText="Adres">
<ItemTemplate>
<%#Eval("adres") %>
ItemTemplate>
asp:TemplateField>
<asp:TemplateField HeaderText="Telefon">
<ItemTemplate>
<%#Eval("telefon") %>
ItemTemplate>
asp:TemplateField>
<asp:TemplateField HeaderText="Email">
<ItemTemplate>
<%#Eval("email") %>
ItemTemplate>
asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="show" runat="server" Text="Güncelle" CommandName="Select" CommandArgument='<%#Eval("id") %>' />
ItemTemplate>
asp:TemplateField>
Columns>
asp:GridView>
ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer2" />
Triggers>
asp:UpdatePanel>
<asp:Timer ID="Timer2" runat="server" Enabled="false" OnTick="RefreshGridView" Interval="2000">
asp:Timer>
<%--
DisplayModalPopupID="mdlPopup">
--%>
<ajaxToolkit:ModalPopupExtender ID="mdlPopup" runat="server" TargetControlID="btnDummy"
PopupControlID="pnlPopup" BackgroundCssClass="modalBackground" OkControlID="btnDummy"
DropShadow="false">
ajaxToolkit:ModalPopupExtender>
<input id="btnDummy" runat="server" type="button" style="display: none;" />
<asp:Panel ID="pnlPopup" runat="server" Style="display: inline;
width: 600px; left: 50%; top:25%; font-family: 'Trebuchet MS', Verdana, Arial;
font-size: 16px; text-align: left; background: #fff; border: 2px solid #336699;"
CssClass="Panel">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" CssClass="modalCloseX modalClose"
OnClientClick="$find('mdlPopup').hide(); return false;">xasp:LinkButton>
<div width="100%" class="header">Kayıt Güncelleme Panelidiv>
<div class='buttons' align="left" style="width: 100%; padding-top: 25px">
<table>
<tr><td>Adtd><td>:td><td><asp:TextBox ID="TextBox1" runat="server"
Width="200px">asp:TextBox>td>tr>
<tr><td>Soyadtd><td>:td><td><asp:TextBox ID="TextBox2" runat="server"
Width="200px">asp:TextBox>td>tr>
<tr><td valign="top">Adrestd><td valign="top">:td><td>
<asp:TextBox ID="TextBox3" runat="server" TextMode="MultiLine" Height="199px"
Width="300px">asp:TextBox>td>tr>
<tr><td>Telefontd><td>:td><td><asp:TextBox ID="TextBox4" runat="server"
Width="200px">asp:TextBox>td>tr> <tr><td>Emailtd><td>:td><td><asp:TextBox ID="TextBox5" runat="server"
Width="200px">asp:TextBox>td>tr>
<tr><td>td><td>td><td align="right"><asp:Button ID="Button_Update" runat="server" Text="Ekle" OnClick="Update" />td>tr>
table>
<br /><br />
<div>
div>
ContentTemplate>
asp:UpdatePanel>
asp:Panel>
div>
form>
body>
html>
-------------------------------------------------------------------------------------------------
C# :
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.Web.Configuration;
namespace WebApplication1
{
public partial class WebForm2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
GridView1.DataSource = GetData("sp_GetData", -1);
if (Session["id"] == null)
Session["id"] = "";
if (!IsPostBack)
{
GridView1.DataBind();
}
}
public void RefreshGridView(object sender, EventArgs e)
{
GridView1.DataSource = GetData("sp_GetData", -1);
GridView1.DataBind();
Timer2.Enabled = false;
}
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Select")
{
Session["id"] = e.CommandArgument.ToString();
ShowPopUp(GridView1.FindControl("show"), e);
}
}
protected void ShowPopUp(object sender, EventArgs e)
{
string str = Session["id"].ToString();
DataTable dt = GetData("sp_GetDataSearchUser", int.Parse(str));
TextBox1.Text = dt.Rows[0]["ad"].ToString();
TextBox2.Text = dt.Rows[0]["soyad"].ToString();
TextBox3.Text = dt.Rows[0]["adres"].ToString();
TextBox4.Text = dt.Rows[0]["telefon"].ToString();
TextBox5.Text = dt.Rows[0]["email"].ToString();
mdlPopup.Show();
}
protected void Update(object sender, EventArgs e)
{
string str = Session["id"].ToString();
UpdateData("sp_GetDataUpdate", int.Parse(str), TextBox1.Text, TextBox2.Text, TextBox3.Text, TextBox4.Text, TextBox5.Text);
Timer2.Enabled = true;
mdlPopup.Hide();
}
public DataTable GetData(string sp, int id)
{
SqlConnection con = new SqlConnection(WebConfigurationManager.ConnectionStrings["conn"].ToString());
SqlCommand cmd = new SqlCommand(sp, con);
try
{
con.Open();
if (id > -1)
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@id", id);
}
else
cmd.CommandType = CommandType.StoredProcedure;
SqlDataReader dr = cmd.ExecuteReader();
DataTable dt = new DataTable();
dt.Load(dr);
return dt;
}
finally
{
con.Dispose();
cmd.Dispose();
}
}
public void UpdateData(string sp, int id, string ad, string soyad, string adres, string telefon, string email)
{
SqlConnection con = new SqlConnection(WebConfigurationManager.ConnectionStrings["conn"].ToString());
SqlCommand cmd = new SqlCommand(sp, con);
try
{
con.Open();
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@id", id);
cmd.Parameters.AddWithValue("@ad", ad);
cmd.Parameters.AddWithValue("@soyad", soyad);
cmd.Parameters.AddWithValue("@adres", adres);
cmd.Parameters.AddWithValue("@telefon", telefon);
cmd.Parameters.AddWithValue("@email", email);
cmd.ExecuteNonQuery();
}
finally
{
con.Dispose();
cmd.Dispose();
}
}
}
}
0 yorum:
Yorum Gönder