こんにちは Abdul は完全なデモです - 私がテストしました - 100% 正常に動作します。
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="ModalPopupExtenderAJAXToolkitWebApp._Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<style type="text/css">
.searchButton
{
left: 319px;
position: absolute;
top: 145px;
width: 27px;
}
</style>
<link href="Styles/jquery.tooltip.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//Hiding Table Available inside div #dvDetails
// $('#dvDetails').hide();
/* Binding click event to each imagebutton inside GridView1
* which is taking value from current row and assigning
* to controls inside table
*/
$("#<%=GridView1.ClientID %> input[name*='imgbtn']").each(function (index) {
$("#<%=GridView1.ClientID %> input[name*='imgbtn']").bind('click', function (e) {
var id = $(this).closest('tr').find("span[id*='lblUserId']").text();
var username = $(this).closest('tr').find("input[name*='txtUserName']").val();
var firstname = $(this).closest('tr').find("input[name*='txtFirstName']").val();
var lastname = $(this).closest('tr').find("input[name*='txtLastName']").val();
var city = $(this).closest('tr').find("input[name*='txtCity']").val();
var designation = $(this).closest('tr').find("input[name*='txtDesignation']").val();
$('#<%=lblID.ClientID %>').text(id);
$('#<%=lblusername.ClientID %>').text(username);
$('#<%=txtfname.ClientID %>').val(firstname);
$('#<%=txtlname.ClientID %>').val(lastname);
$('#<%=txtCity.ClientID %>').val(city);
$('#<%=txtDesg.ClientID %>').val(designation);
});
});
/* Binding click event to each selected radiobutton inside GridView1
* which is taking value from current row and assigning
* to controls inside table
*/
$('input[value=Remove]').click(function () {
$('#dvDetails').show();
var id = $(this).closest('tr').find("span[id*='lblUserId']").text();
var username = $(this).closest('tr').find("input[name*='txtUserName']").val();
var firstname = $(this).closest('tr').find("input[name*='txtFirstName']").val();
var lastname = $(this).closest('tr').find("input[name*='txtLastName']").val();
var city = $(this).closest('tr').find("input[name*='txtCity']").val();
var designation = $(this).closest('tr').find("input[name*='txtDesignation']").val();
$('#<%=lblID.ClientID %>').text(id);
$('#<%=lblusername.ClientID %>').text(username);
$('#<%=txtfname.ClientID %>').val(firstname);
$('#<%=txtlname.ClientID %>').val(lastname);
$('#<%=txtCity.ClientID %>').val(city);
$('#<%=txtDesg.ClientID %>').val(designation);
});
var $fieldRevItems = $("#dvDetails");
$('#<%=btnClose2.ClientID %>').click(function (e) {
$('#<%=txtSearch.ClientID %>').val('');
// $fieldRevItems.hide('slow');
$fieldRevItems.slideUp(600);
e.preventDefault();
});
});
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
Welcome to ASP.NET!
</h2>
<asp:ToolkitScriptManager ID="ScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div id="dvMain" style="height: 341px; width: 928px">
<div id="dvFirst">
Search user Details : <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
<asp:ImageButton ID="imgSearch" CssClass="searchButton" title="Search data for this id"
ImageUrl="~/search2.jpg" runat="server" OnClick="imgSearch_Click" />
<asp:Button ID="btnShowPopup2" runat="server" Style="display: none" />
<br />
<br />
<asp:ModalPopupExtender ID="ModalPopupExtender2" runat="server" TargetControlID="btnShowPopup2"
PopupControlID="pnlpopup2" CancelControlID="btnClose" BackgroundCssClass="modalBackground">
</asp:ModalPopupExtender>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlpopup2" runat="server" BackColor="Green" Height="269px" Width="600px"
Style="display: none; top: 191px;width: 780px;">
<asp:GridView runat="server" ID="GridView1" DataKeyNames="UserId"
AutoGenerateColumns="false">
<rowstyle backcolor="#EFF3FB" />
<footerstyle backcolor="#507CD1" font-bold="True" forecolor="White" />
<pagerstyle backcolor="#2461BF" forecolor="White" horizontalalign="Center" />
<headerstyle backcolor="#507CD1" font-bold="True" forecolor="White" />
<alternatingrowstyle backcolor="White" />
<columns>
<asp:TemplateField HeaderText="UserId">
<ItemTemplate>
<asp:Label ID="lblUserId" style="width:100px;" runat="server" Text='<%# Eval("UserId") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="lblUserId" style="width:100px;" runat="server" Text='<%# Eval("UserId") %>'></asp:Label>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="UserName">
<ItemTemplate>
<asp:TextBox ID="txtUserName" style="width:100px;" CssClass="css2" runat="server"
Text='<%# Eval("UserName")%>'></asp:TextBox>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtUserName" CssClass="css2" runat="server"
Text='<%# Eval("UserName")%>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="FirstName">
<ItemTemplate>
<asp:TextBox ID="txtFirstName" style="width:100px;" CssClass="css2" runat="server"
Text='<%# Eval("FirstName")%>'></asp:TextBox>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtFirstName" style="width:100px;" CssClass="css2" runat="server"
Text='<%# Eval("FirstName")%>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="LastName">
<ItemTemplate>
<asp:TextBox ID="txtLastName" style="width:100px;" CssClass="css2" runat="server"
Text='<%# Eval("LastName")%>'></asp:TextBox>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtLastName" style="width:100px;" CssClass="css2" runat="server"
Text='<%# Eval("LastName")%>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="City">
<ItemTemplate>
<asp:TextBox ID="txtCity" style="width:100px;" CssClass="css2" runat="server"
Text='<%# Eval("City")%>'></asp:TextBox>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtCity" style="width:100px;" CssClass="css2" runat="server"
Text='<%# Eval("City")%>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Designation">
<ItemTemplate>
<asp:TextBox ID="txtDesignation" style="width:100px;" CssClass="css2" runat="server"
Text='<%# Eval("Designation")%>'></asp:TextBox>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtDesignation" style="width:100px;" CssClass="css2" runat="server"
Text='<%# Eval("Designation")%>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Close">
<ItemTemplate>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Select">
<ItemTemplate>
<asp:RadioButton ID="rbSelectUserId" runat="server" Checked="false" value="Remove"
AutoPostBack="true" CausesValidation="false"
/>
<asp:ImageButton ID="imgbtn" ImageUrl="~/Edit.jpg" runat="server" Width="25" Height="25"/>
</ItemTemplate>
</asp:TemplateField>
</columns>
</asp:GridView>
<asp:Button ID="btnClose" runat="server" Text="Cancel" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
</div>
<div id="dvDetails">
<table id="tblDetails" width="30%" style="border: Solid 3px #D55500; height: 100%"
cellpadding="0" cellspacing="0">
<tr style="background-color: #D55500">
<td colspan="2" style="height: 10%; color: White; font-weight: bold; font-size: larger"
align="center">
User Details
</td>
</tr>
<tr>
<td align="right">
UserId:
</td>
<td>
<asp:Label ID="lblID" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td align="right">
UserName:
</td>
<td>
<asp:Label ID="lblusername" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td align="right">
FirstName:
</td>
<td>
<asp:TextBox ID="txtfname" runat="server" />
</td>
</tr>
<tr>
<td align="right">
LastName:
</td>
<td>
<asp:TextBox ID="txtlname" runat="server" />
</td>
</tr>
<tr>
<td align="right">
City:
</td>
<td>
<asp:TextBox ID="txtCity" runat="server" />
</td>
</tr>
<tr>
<td align="right" style="width: 100%">
Designation:
</td>
<td>
<asp:TextBox ID="txtDesg" runat="server" />
</td>
</tr>
<tr>
<td align="center" style="width: 100%">
<asp:Button ID="btnClose2" runat="server" Text="Close" />
</td>
</tr>
</table>
</div>
</div>
</asp:Content>
//================================================ =================================== ここにコードビハインドファイルがあります。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Drawing;
using System.Configuration;
namespace ModalPopupExtenderAJAXToolkitWebApp
{
public partial class _Default : System.Web.UI.Page
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["conString"].ToString());
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridData();
}
}
protected void BindGridData()
{
con.Open();
using (SqlCommand cmd = new SqlCommand("Select * from Employee_Details", con))
{
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
da.Fill(dt);
GridView1.DataSource = dt;
GridView1.DataBind();
UpdatePanel1.Update();
}
}
protected DataTable SearchDetails(string id)
{
DataTable dt = new DataTable();
con.Open();
using (SqlCommand cmd = new SqlCommand("Select * from Employee_Details where UserId=@UserId", con))
{
cmd.Parameters.Add(new SqlParameter("@UserId",Convert.ToInt32(id)));
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
}
return dt;
}
protected void imgSearch_Click(object sender, EventArgs e)
{
string id = txtSearch.Text;
if (id != null)
{
DataTable dt = new DataTable();
dt = SearchDetails(id);
GridView1.DataSource = dt;
GridView1.DataBind();
UpdatePanel1.Update();
this.ModalPopupExtender2.Show();
}
}
}
}
