.Net Programming in Simple

Thursday, 4 July 2013

Dynamic Modal Popup from code-behind

<head id="Head1" runat="server">
<title>Customized Style of Confirmation Box</title>
<style type="text/css">
.modalBackground
{
background-color: Gray;
filter: alpha(opacity=80);
opacity: 0.8;
z-index: 10000;
}

.GridviewDiv {font-size: 100%; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helevetica, sans-serif; color: #303933;}
Table.Gridview{border:solid 1px #df5015;}
.Gridview th{color:#FFFFFF;border-right-color:#abb079;border-bottom-color:#abb079;padding:0.5em 0.5em 0.5em 0.5em;text-align:center}
.Gridview td{border-bottom-color:#f0f2da;border-right-color:#f0f2da;padding:0.5em 0.5em 0.5em 0.5em;}
.Gridview tr{color: Black; background-color: White; text-align:left}
:link,:visited { color: #DF4F13; text-decoration:none }

</style>
<script language="javascript" type="text/javascript">
function closepopup() {
$find('ModalPopupExtender1').hide();
}

</script>

</head>

<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="ScriptManager1" runat="server">
</ajax:ToolkitScriptManager>
<%--<asp:UpdatePanel ID="updatepnl1" runat="server">
<ContentTemplate>--%>
<asp:GridView runat="server" ID="gvDetails" CssClass="Gridview"
DataKeyNames="Id" AutoGenerateColumns="false">
<HeaderStyle BackColor="#df5015" />
<Columns>
<asp:BoundField DataField="Name" HeaderText="UserName" />

<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="btnDelete" ImageUrl="~/Images/Delete.png" runat="server" onclick="btnDelete_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Label ID="lblresult" runat="server"/>
<asp:Button ID="btnShowPopup" runat="server" style="display:none" />
<ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlpopup"
CancelControlID="btnNo" BackgroundCssClass="modalBackground">
</ajax:ModalPopupExtender>
<asp:Panel ID="pnlpopup" runat="server" BackColor="White" Height="100px" Width="400px" style="display:none">
<table width="100%" style="border:Solid 2px #D46900; width:100%; height:100%" cellpadding="0" cellspacing="0">
<tr style="background-image:url(Images/header.gif)">
<td style=" height:10%; color:White; font-weight:bold;padding:3px; font-size:larger; font-family:Calibri" align="Left">Please Confirm</td>
<td style=" color:White; font-weight:bold;padding:3px; font-size:larger" align="Right">
<a href = "javascript:void(0)" onclick = "closepopup()"><img src="Images/Close.gif" style="border :0px" align="right"/></a>
</td>
</tr>
<tr>
<td colspan="2" align="left" style="padding:5px; font-family:Calibri">
<asp:Label ID="lblUser" runat="server"/>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td>
</td>
<td align="right" style="padding-right:15px">
<asp:ImageButton ID="btnYes" OnClick="btnYes_Click" runat="server" ImageUrl="~/Images/btnyes.jpg"/>
<asp:ImageButton ID="btnNo" runat="server" ImageUrl="~/Images/btnNo.jpg" />
</td>
</tr>
</table>
</asp:Panel>
<%--</ContentTemplate>
</asp:UpdatePanel>--%>
</form>
</body>

protected void btnDelete_Click(object sender, ImageClickEventArgs e)
{
ImageButton btndetails = sender as ImageButton;
GridViewRow gvrow = (GridViewRow)btndetails.NamingContainer;
Session["UserId"] = gvDetails.DataKeys[gvrow.RowIndex].Value.ToString();
Session["UserName"] = gvrow.Cells[0].Text;
lblUser.Text = "Are you sure you want to delete " + Session["UserName"] + " Details?";
ModalPopupExtender1.Show();
}

protected void btnYes_Click(object sender, ImageClickEventArgs e)
{
//getting userid of particular row
string str = ConfigurationSettings.AppSettings.Get("Constr");
SqlConnection con = new SqlConnection(str);
int userid = Convert.ToInt32(Session["UserId"]);
con.Open();
SqlCommand cmd = new SqlCommand("delete from UserDetails where UserId=" + userid, con);
int result = cmd.ExecuteNonQuery();
con.Close();
if (result == 1)
{
lblresult.Text = Session["UserName"] + " Details deleted successfully";
lblresult.ForeColor = Color.Green;
BindUserDetails();
}
}

Menu only through css

style.css

/*****FONTS*****/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
/*****DEMO ONLY*****/

* {
/*margin: 0;
padding: 0;
border: 0;*/
}

::selection {
color: #fff;
background: #3b3b3b;
}

::-moz-selection {
color: #fff;
background: #3b3b3b;
}
a {
color: #3b3b3b;
text-decoration: none;
}

a, #navigation li .sub-nav-wrapper .sub-nav li {
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
margin: 0;
padding: 0;
border: 0;
}

#navigation li .sub-nav-wrapper {
pointer-events: none;
opacity: 0;
filter: alpha(opacity=0);
top: 0;

transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-webkit-transition: all 0.35s ease-in-out;
margin: 0;
padding: 0;
border: 0;
}

#navigation li:hover .sub-nav-wrapper {
pointer-events: auto;
opacity: 1;
filter: alpha(opacity=100);
top: 30px;

}

/*****END ANIMATIONS*****/

/*****DROPDOWN*****/

#navigation {
position: relative;
text-align:left;
margin:0 auto;
background-color:Silver;
}

#navigation li {
position: relative;
list-style: none;
display: inline-block;
padding: 5px 5px;

}

#navigation li a {
padding: 5px;
display: block;

font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 700;
color: #3b3b3b;
text-align: left;
text-shadow: 1px 1px 0 rgba(255,255,255,0.25);
}

#navigation li:hover .main
{
color: #ee4e1d;/*menu color on mouseover*/
}

#navigation li .sub-nav-wrapper {
display: block;
position: absolute;
z-index: 30;
margin: 0;
padding: 0;
border: 0;
}

#navigation li .sub-nav-wrapper .sub-nav {
width: 150px;
margin-top: 4px;
background: #fff;
border-top: 1px solid #fff;
margin-left:0px;
padding: 0;
border: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

#navigation li:hover .sub-nav-wrapper {
display: block;
}

#navigation li .sub-nav-wrapper .sub-nav li
{
list-style: none;
display: block;
margin: 0;
padding: 0;
text-align: left;
border-bottom: 1px solid #d7d7d7;
}

#navigation li .sub-nav-wrapper .sub-nav li a
{
display: block;
padding: 11px 20px;
font-size: 12px;
font-weight: 600;
text-shadow: 1px 1px 0 rgba(255,255,255,1.0);
box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
-moz-box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
-webkit-box-shadow: inset 0 0 2px rgba(255,255,255,1.0);
}

#navigation li .sub-nav-wrapper .sub-nav li:hover
{
background: #f5f5f5;
border-bottom: 1px solid #3b3b3b;
/*Setting for submenu on Mouseover
}

/*****END DROPDOWN*****/

Inside head

<link href="NewDropDownMenu/style.css" rel="stylesheet" type="text/css"/>

inside body

<table style="width:100%;margin-top:80px">
<tr>
<td width="10%"></td>
<td width="80%" align="left">
<ul id="navigation">
<li>
<a href="Home.aspx" class="main">Home</a>
</li>

<li>
<a href="ManageNewsClippings.aspx" class="main">NewsClipping</a>

</li>

<li>
<a href="ManageNews.aspx" class="main">News</a>

</li>

<li>
<a href="#" class="main">Gallery</a>
<div class="sub-nav-wrapper">
<ul class="sub-nav">
<li><a href="AddImageGallery.aspx">Add Images</a></li>
<li><a href="ManageImageGallery.aspx">Manage Images</a></li>

</ul>
</div>
</li>

</ul>
</td>
<td width="10%"></td></tr>
<tr>
<td width="10%"></td>
<td width="80%">
<asp:ScriptManager ID="Script1" runat="server"></asp:ScriptManager>
<asp:ContentPlaceHolder id="ContentBody" runat="server">

</asp:ContentPlaceHolder>
</td>
<td width="10%"></td></tr></table>