Show warning in popup just before Session Ends

On many websites we see some popup like you your session will end in 2 mins, specially in Banking website we see this kind of popup. So lets see how can we implement this functionality.

Step 1: Set Timeout in SessionState tag in Web.Config file.

<sessionState mode=”InProccustomProvider=”DefaultSessionProvidertimeout=”3>

Step 2: Add a key in Web.Config in AppSetting for Warning time, time after which you want to show popup.

<appSettings>
    <add key=”SessionTimeOutWarningTimevalue=”2/>
 </appSettings>

Step 3: In your master page, write below script code. The key this of this approach is, as soon as you load a page it sets a Timeout function, so if you are ideal for that much time then it’ll prompt you. And when you reload the page or move to some other page then master page also reloads so it’ll reset the whole code, so whatever time you spent on previous page will not impact on new page. Whole thing will start from zero.

<script type=“text/javascript”>
var sessionTimeOut = <%= Session.Timeout %>;

var sessionWarningTime = “<%=

ConfigurationManager.AppSettings[“SessionTimeOutWarningTime”] %>”;

var timeOutInMiliSeconds = (parseInt(sessionWarningTime ) * 60 * 1000);

setTimeout(“sessionTimeOutShowPopup()”, timeOutInMiliSeconds);

function sessionTimeOutShowPopup() {

alert(“Session will expire in “ +

                       (parseInt(sessionTimeOut) – parseInt(sessionWarningTime ))

          );

};
</script>

Read web.config file in jQuery

In my web.config file there is one key that I need to access to perform some operations on my page. I want to do it using Javascript or jQuery. Below is the sample of key that I’ve in web.config file.

Web.config:

<configuration>
<appSettings>
<add key=”OperationType” value=”ADD” />
</appSettings>
</configuration>

 

Code:

<head runat=”server”>
<title></title>
http://code.jquery.com/jquery-1.9.1.js

$(document).ready(function () {
$(‘#btnCompute’).on(‘click’, function () {
var firstNumber = parseFloat($(‘#txtFirstNumber’).val());
var secondNumber = parseFloat($(‘#txtSecondNumber’).val());
var operationType = ”;
switch (operationType) {
case ‘ADD’: alert(firstNumber + secondNumber); break;
case ‘SUB’: alert(firstNumber – secondNumber); break;
case ‘MUL’: alert(firstNumber * secondNumber); break;
case ‘DIV’: alert(firstNumber / secondNumber); break;
}
});
});

</head>
<body>
<form id=”form1″ runat=”server”>
First Number:
<input type=”text” id=”txtFirstNumber” />
<br />
Second Number:
<input type=”text” id=”txtSecondNumber” />
<br />
<input type=”button” name=”Compute” value=”Compute” id=”btnCompute” />
</form>
</body>

Alert once Page Load is completed in Asp.Net

My friend asked me to alert user once page load is done. There is a simple way to do so, just write a JavaScript function and call it on “onload” of body tag. “onload” will be triggered after all the images and associated resources are loaded completely, that means after whole page load and that’s what we want to do. See below code, how to do it:

xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<title>Test Page</title>
<script type=”text/javascript”>
function onLoadClicked() {
alert(‘Page load is done.’);
}
</script>
</head>
onLoadClicked()”>
<!– HTML CODE –>
</body>
</html>

Item Swapping between Listboxes using jQuery

Hi All, in this article I’ll show how to swap item of listboxes.
1

Code Behind Page:

protected void Page_Load(object sender, EventArgs e)
{
LoadLB();
}

private void LoadLB()
{
for (int i = 0; i < 26; ++i)
{
if (i < 13)
{
lb1.Items.Add(new ListItem(Convert.ToString((char)(65 + i)), (i + 1).ToString()));
}
else
{
lb2.Items.Add(new ListItem(Convert.ToString((char)(65 + i)), (i + 1).ToString()));
}
}
}

Aspx Page:

<asp:Content ID=”Content1″ ContentPlaceHolderID=”HeadContent” runat=”Server”>
Item Swaping from ListBoxes
<style type=”text/css”>
.lb {
min-height: 250px;
min-width: 100px;
float: left;
}

.div {
width: 300px;
}

.div div {
width: 100px;
float: left;
text-align: center;
}

#divBtn {
width: 40px;
float: left;
text-align: center;
}

.button {
width: 30px;
height: 30px;
}
</style>
<script type=”text/javascript”>
$(document).ready(function () {
$(‘[id$=btnAllForward]’).click(function () {
var lb1 = $(‘[id$=lb1]’);
var lb2 = $(‘[id$=lb2]’);
$(lb1).children(‘option’).each(function (index) {
lb2.append(‘<option value=”‘ + $(this).val() + ‘”>’ + $(this).text() + ‘</option>’);
});
lb1.find(‘option’).remove();
});
});

$(document).ready(function () {
$(‘[id$=btnSingleForward]’).click(function () {
var lb1 = $(‘[id$=lb1]’);
var values = lb1.val();
var text = lb1.find(‘option:selected’).text();
var lb2 = $(‘[id$=lb2]’);
for (var i = 0; i < values.length; ++i) {
lb2.append(‘i] + ‘”>’ + text[i] + ”);
}
lb1.find(‘option:selected’).remove();
});
});

$(document).ready(function () {
$(‘[id$=btnSingleBackward]’).click(function () {
var lb2 = $(‘[id$=lb2]’);
var values = lb2.val();
var text = lb2.find(‘option:selected’).text();
var lb1 = $(‘[id$=lb1]’);
for (var i = 0; i < values.length; ++i) {
lb1.append(‘<option value=”‘ + values[i] + ‘”>’ + text[i] + ‘</option>’);
}
lb2.find(‘option:selected’).remove();
});
});

$(document).ready(function () {
$(‘[id$=btnAllBackward]’).click(function () {
var lb1 = $(‘[id$=lb1]’);
var lb2 = $(‘[id$=lb2]’);
$(lb2).children(‘option’).each(function (index) {
lb1.append(‘<option value=”‘ + $(this).val() + ‘”>’ + $(this).text() + ‘</option>’);
});
lb2.find(‘option’).remove();
});
});
</script>
</asp:Content>
<asp:Content ID=”Content2″ ContentPlaceHolderID=”MainContent” runat=”Server”>

Item Swaping from ListBoxes

<hr />
<div>
<div>
<asp:ListBox ID=”lb1″ runat=”server” SelectionMode=”Multiple” CssClass=”lb”>
</div>
<div id=”divBtn”>
<input type=”button” id=”btnAllForward” value=”>>” />
<input type=”button” id=”btnSingleForward” value=”>” />
<input type=”button” id=”btnSingleBackward” value=”<” />
<input type=”button” id=”btnAllBackward” value=”<<” />
</div>
<div>
<asp:ListBox ID=”lb2″ runat=”server” SelectionMode=”Multiple” CssClass=”lb”>
</div>
</div>
</asp:Content>

 

Email Send through Asp.Net C#

.aspx page:

<asp:Content ID=”Content1″ ContentPlaceHolderID=”HeadContent” runat=”Server”>
<title>E-Mail Send through Asp.Net C#</title>
</asp:Content>
<asp:Content ID=”Content2″ ContentPlaceHolderID=”FeaturedContent” runat=”Server”>
<style>
.SingleNewLine {
clear: both;
width: 100%;
height: 10px;
}
</style>
<script type=”text/javascript”>
var arr = [];
$(document).ready(function () {
$(‘[id$=btnSend]’).click(function () {
$.ajax({
type: “POST”,
url: “SendMail_WithOutAttachment.aspx/SendEMail”,
data: “{‘from’:'” + $(‘[id$=txtFrom]’).val() + “‘,’password’:'” + $(‘[id$=txtPassword]’).val() + “‘,’to’:'” + $(‘[id$=txtTo]’).val() + “‘,’subject’:'” + $(‘[id$=txtSubject]’).val() + “‘,’message’:'” + $(‘[id$=txtMessage]’).val() + “‘}”,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: function (msg) {
cleareAll();
alert(‘Success-‘ + msg);
},
error: function (msg) {
cleareAll();
alert(‘Error-‘ + msg);
}
});
});
});
function GetFileName() {
arr.push($(‘[id$=FileUploader1]’));
}

function cleareAll() {
$(‘[id$=txtFrom]’).val(”);
$(‘[id$=txtPassword]’).val(”);
$(‘[id$=txtTo]’).val(”);
$(‘[id$=txtSubject]’).val(”);
$(‘[id$=txtMessage]’).val(”);
}
</script>
</asp:Content>
<asp:Content ID=”Content3″ ContentPlaceHolderID=”MainContent” runat=”Server”>
<h1>E-Mail Send through Asp.Net C#</h1>
<div>
</div>
<table style=”width: 100%”>
<tr>
<td>From</td>
<td>
<input type=”text” id=”txtFrom” runat=”server” maxlength=”100″ />
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input type=”password” id=”txtPassword” runat=”server” maxlength=”20″ />
</td>
</tr>
<tr>
<td>To</td>
<td>
<input type=”text” id=”txtTo” runat=”server” maxlength=”100″ />
</td>
</tr>
<tr>
<td>Subject</td>
<td>
<input type=”text” id=”txtSubject” runat=”server” maxlength=”100″ />
</tr>
<tr>
<td>Message</td>
<td>
<input type=”text” id=”txtMessage” runat=”server” maxlength=”100″ />
</tr>

<tr>
&nbsp;
<td>
<input type=”button” value=”Send” id=”btnSend” />
</td>
</tr>
</table>
</asp:Content>

Code behind page:

[System.Web.Services.WebMethod]
public static int SendEMail(string from, string password, string to, string subject, string message)
{
SmtpClient sClient = new SmtpClient(“smtp.gmail.com”, 587);
sClient.EnableSsl = true;
sClient.Credentials = new System.Net.NetworkCredential(from, password);
MailMessage mMessage = new MailMessage(from, to, subject, message);
mMessage.IsBodyHtml = true;
try
{
sClient.Send(mMessage);
return 1;
}
catch (Exception ex)
{
return 0;
}
}

Show Gridview Row details in ToolTip.

/* Here I will demonstrate how to show grid view row details in tool-tip. */

BlogPost

<%@ Page Title=”jQuery Show Gridview Row Details in Tooltip on MouseHover” Language=”C#”
MasterPageFile=”~/Site.master” AutoEventWireup=”true” CodeFile=”ToolTipRowDetails.aspx.cs”
Inherits=”ToolTipRowDetails” %>

<asp:Content ID=”Content1″ ContentPlaceHolderID=”HeadContent” runat=”Server”>
jQuery Show Gridview Row Details in Tooltip on MouseHover
// <!–[CDATA[–>
src=”http://code.jquery.com/jquery-1.8.2.js&#8221; type=”text/javascript”>
// ]]>
<script src=”Scripts/jquery.tooltip.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
function InitializeToolTip() {
$(“.gridViewToolTip”).tooltip({
track: true,
delay: 0,
showURL: false,
fade: 100,
bodyHandler: function () {
return $($(this).next().html());
},
showURL: false
});
}
</script>
<script type=”text/javascript”>
$(function () {
InitializeToolTip();
})
</script>
<style type=”text/css”>
#tooltip
{
position: absolute;
z-index: 3000;
border: 1px solid #111;
background-color: #FEE18D;
padding: 5px;
opacity: 0.85;
}
#tooltip h3, #tooltip div
{
margin: 0;
}
</style>
</asp:Content>
<asp:Content ID=”Content2″ ContentPlaceHolderID=”MainContent” runat=”Server”>
<asp:GridView ID=”grdDetails” AutoGenerateColumns=”false” CellPadding=”5″ runat=”server”>
<Columns>
<asp:TemplateField HeaderText=”UserId”>
<ItemStyle Width=”30px” HorizontalAlign=”Center” />
<ItemTemplate>
<a href=”#”>
<%# Eval(“Id”)%></a>
<div id=”tooltip” style=”display: none;”>
<table>
<tr>
nowrap;”>
Name:&nbsp;
</td>
<td>
<%# Eval(“Name”)%>
</td>
</tr>
<tr>
nowrap;”>
Age:&nbsp;
</td>
<td>
<%# Eval(“Age”)%>
</td>
</tr>
<tr>
nowrap;”>
City:&nbsp;
</td>
<td>
<%# Eval(“City”)%>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText=”Name” DataField=”Name” />
<asp:BoundField HeaderText=”Age” DataField=”Age” />
<asp:BoundField HeaderText=”City” DataField=”City” />
</Columns>
<HeaderStyle BackColor=”#df5015″ Font-Bold=”true” ForeColor=”White” />
</asp:GridView>
</asp:Content>

 

Code Behind:

using System;
using System.Web.UI;

public partial class ToolTipRowDetails : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
LoadData();
}
}

private void LoadData()
{
System.Data.DataTable dt = new System.Data.DataTable();
dt.Columns.Add(“Id”, typeof(Int32));
dt.Columns[“Id”].AutoIncrement = true;      // Auto increment Id
dt.Columns[“Id”].AutoIncrementSeed = 1;
dt.Columns[“Id”].AutoIncrementStep = 1;
dt.Columns.Add(“Name”, typeof(string));
dt.Columns.Add(“Age”, typeof(Int32));
dt.Columns.Add(“City”, typeof(string));

// Bind data to rows
System.Data.DataRow dtrow = dt.NewRow();    // Create New Row
dtrow[“Name”] = “Sunil Kumar”; //Bind Data to Columns
dtrow[“Age”] = “24”;
dtrow[“City”] = “Rajasthan”;
dt.Rows.Add(dtrow);

dtrow = dt.NewRow();    // Create New Row
dtrow[“Name”] = “Teena Singh”; //Bind Data to Columns
dtrow[“Age”] = “25”;
dtrow[“City”] = “Delhi”;
dt.Rows.Add(dtrow);

dtrow = dt.NewRow();    // Create New Row
dtrow[“Name”] = “Aksham Gupta”; //Bind Data to Columns
dtrow[“Age”] = “28”;
dtrow[“City”] = “MP”;
dt.Rows.Add(dtrow);

dtrow = dt.NewRow();    // Create New Row
dtrow[“Name”] = “Deepak Sharma”; //Bind Data to Columns
dtrow[“Age”] = “28”;
dtrow[“City”] = “Mumbai”;
dt.Rows.Add(dtrow);

grdDetails.DataSource = dt;
grdDetails.DataBind();
}
}