Hi *.*,
Before v start building this I prefer u to go through this link.some of common events of this controls are
- TargetControlID - The ID of the element that activates the modal popup
- PopupControlID - The ID of the element to display as a modal popup
- BackgroundCssClass - The CSS class to apply to the background when the modal popup is displayed
- DropShadow - True to automatically add a drop-shadow to the modal popup
- OkControlID - The ID of the element that dismisses the modal popup
- OnOkScript - Script to run when the modal popup is dismissed with the OkControlID
- CancelControlID - The ID of the element that cancels the modal popup
- OnCancelScript - Script to run when the modal popup is dismissed with the CancelControlID
- PopupDragHandleControlID - The ID of the embedded element that contains the popup header/title which will be used as a drag handle
- X - The X coordinate of the top/left corner of the modal popup (the popup will be centered horizontally if not specified)
- Y - The Y coordinate of the top/left corner of the modal popup (the popup will be centered vertically if not specified)
- RepositionMode - The setting that determines if the popup needs to be repositioned when the window is resized or scrolled.
DEMO
HTML side
Add this at Top
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="asp" %>
After that code moves in this way
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ajax ModalPopupExtender Demo by Simplyasp.blogspot.com</title>
<link rel="stylesheet" type="text/css" href="Css/StyleSheet.css" />
<style type="text/css">
.style1
{
color: #FF0000;
font-style: italic;
font-weight: bold;
}
.style3
{
color: #FFFFFF;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<span class="style1">Ajax ModalPopupExtender Demo by
Simplyasp.blogspot.com</span>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<asp:Label ID="lblErr" runat="server"></asp:Label>
<asp:GridView ID="GridView1" runat="server" Width="400px"
AutoGenerateColumns="false" ShowHeader="true">
<Columns>
<asp:BoundField DataField="id" HeaderText="ID" HeaderStyle-Width="100px" />
<asp:BoundField DataField="Name" HeaderText="Name" HeaderStyle-Width="100px" />
<asp:BoundField DataField="Location" HeaderText="Location"
HeaderStyle-Width="100px" />
<asp:BoundField DataField="Hobbies" HeaderText="Hobbies"
HeaderStyle-Width="100px" />
<asp:TemplateField HeaderText="Details">
<ItemTemplate>
<asp:LinkButton ID="lnk" runat="server" Text="Details"
OnClick="lnk_Click" CommandArgument='<% #Eval("id") %>'></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<%-- For ModelPop Start here--%>
<asp:Button ID="btnPop" runat="server" Style="display: none" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID="btnPop"
OkControlID="btnOk" X="200" Y="30" PopupControlID="pnlPop"
BackgroundCssClass="modelpop">
</asp:ModalPopupExtender>
<asp:Panel ID="pnlPop" runat="server" Width="325px" Height="180px">
<table width="325px">
<tr style="border-bottom-width:0">
<td bgcolor="black" style="border-right-width:0;width:300" align="center" >
<span class="style3">Demo By Simplyasp.net</span>
</td>
<td style="border-left-width:0;width:25;margin-left:0" >
<asp:ImageButton ID="btnOk" ImageUrl="~/Image/close-button.png" Width="25px" Height="30px"
runat="server" />
</td>
</tr>
<tr bgcolor="gray" style="border-top-width:0" >
<td>
ID:
<asp:Literal ID="LtrId" runat="server"></asp:Literal><br />
Name:
<asp:Literal ID="LtrName" runat="server"></asp:Literal><br />
Location:
<asp:Literal ID="LtrLocation" runat="server"></asp:Literal><br />
Hobbies:
<asp:Literal ID="LtrHobbies" runat="server"></asp:Literal><br />
</td>
</tr>
</table>
</asp:Panel>
<%-- For ModelPop Ends here--%>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
On server Side
public partial class _Default : System.Web.UI.Page
{protected Data dte = new Data();
protected void Page_Load(object sender, EventArgs e)
{ GridView1.DataSource = dte.table(); GridView1.DataBind(); }protected void lnk_Click(object sender, EventArgs e)// getting details from
a particular ID {LinkButton lnkbtn = sender as LinkButton;
int _Id = Convert.ToInt32(lnkbtn.CommandArgument.ToString().Trim());
// lblErr.Text = _Id.ToString();
DataTable dt = new DataTable();
dt = dte.table();LtrName.Text= dt.Rows[_Id]["Name"].ToString();
LtrId.Text = dt.Rows[_Id]["id"].ToString();
LtrLocation.Text = dt.Rows[_Id]["Location"].ToString();
LtrHobbies.Text = dt.Rows[_Id]["Hobbies"].ToString();
ModalPopupExtender1.Show(); }} Download Sample from here It's very simple if u have any problem contact me, i will guide u with a smile.:)Stay tune....
Have a nice day... 'N happy Coding :)
No comments:
Post a Comment