Showing posts with label Jquery. Show all posts
Showing posts with label Jquery. Show all posts

Saturday, January 11, 2014

ASP.NET Session Timeout Control + jQuery Dialog

web.config
-----------
 <system.web>
  <sessionState mode="InProc" stateConnectionString="tcpip=127.0.0.1:42424" sqlConnectionString="data source=127.0.0.1;Trusted_Connection=yes" cookieless="false" timeout="2"/>
  </system.web>


 Site1.master
  ----------------
  <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="ASPNET_jQueryUI_Dialog_Timeout.Site1" %>
<%@ Register Assembly="TSC.Timeout" Namespace="TSC.Timeout" TagPrefix="tsc" %>
<!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></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body style="font-size: 75%;">
    
    <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="scripts/jquery-ui-1.7.0.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.bgiframe-2.1.1.pack.js"></script>
    
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
        </asp:ScriptManager>        
    <div>
        <tsc:Timeout ID="Timeout1" runat="server" title="Session Expiring" Enabled="true" TimeoutURL="~/TimeOut.aspx" DisplayButton="false">
            <Template>                                       
                <p>
                    <span class="ui-icon ui-icon-alert" style="float:left; margin: 1px 10px 20px 0;"></span>
                    Your session is about to Expire.
                </p>
                <br style="font-size:x-small;" />
                <p>Click <b>OK</b> to continue your session.</p>                  
            </Template>
        </tsc:Timeout>    
            
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>


Site1.master.cs
------------------
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ASPNET_jQueryUI_Dialog_Timeout
{
    public partial class Site1 : System.Web.UI.MasterPage
    {
        public bool TimeoutControlEnabled
        {
            get { return Timeout1.Enabled; }
            set { Timeout1.Enabled = value; }
        }
        protected void Page_Load(object sender, EventArgs e)
        {
            Timeout1.TimeoutMinutes = HttpContext.Current.Session.Timeout;
            Timeout1.AboutToTimeoutMinutes = HttpContext.Current.Session.Timeout - 1;
        }
    }
}


Download:



https://skydrive.live.com/redir?resid=CA4A7B09B8F914E8!110&authkey=!AM5pQYejq5hv6YI&ithint=file%2c.zip

Asp.net jquery image slider

Here you will see a jQuery image sliders control that is very useful for displaying images and photos and making the viewing of images more pleasant and intuitive on our website. In this article we make an auto-playing image slider. Users can also manually select content to see or have them rotated automatically.

Use the following simple procedure to create a sample.

Step 1:  Create a simple application in Visual Studio.

Step 2: Now add the references of CSS and js files in the head section. 

<head runat="server">

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<link href="Styles/nivo-slider.css" rel="stylesheet" type="text/css" />

<link href="Styles/Default.css" rel="stylesheet" type="text/css" />

<script src="Scripts/Demo.js" type="text/javascript"></script>

<title></title>

</head>

These files above are attached in the Zip file. You can download these files from the attached file.

Step 3:  Now add the following code to the body section that contains four images on the page.

<body>

<form id="form1" runat="server">

<div class="slider-wrapper theme-default">

<div id="nivo-slider" class="nivoSlider" style="width: 960px">

<img src="1.jpg" alt="" />

<img src="2.jpg" alt="" />

<img src="3.jpg" alt="" />

<img src="4.jpg" alt="" />

</div>

</div>

</form>

</body>

Step 4: Now add the following .js code to the body section.

<script type="text/javascript">

    $(window).load(function () {

        $('#nivo-slider').nivoSlider();

    });

</script>

Step 5: Default.ASPX code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!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></title>

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

<link href="Styles/nivo-slider.css" rel="stylesheet" type="text/css" />

<link href="Styles/Default.css" rel="stylesheet" type="text/css" />

<link href="Styles/nivo-slider.css" rel="stylesheet" type="text/css" />

<script src="Scripts/Demo.js" type="text/javascript"></script>

</head>

<body>

<form id="form1" runat="server">

<div class="slider-wrapper theme-default">

<div id="nivo-slider" class="nivoSlider">

<img src="1.jpg" alt="" />

<img src="2.jpg" alt="" />

<img src="3.jpg" alt="" />

<img src="4.jpg" alt="" />

</div>

</div>

<script type="text/javascript">

        $(window).load(function () {

            $('#nivo-slider').nivoSlider();

        });

</script>

</form>

</body>

</html>

Step 6: Now run the application.

Image Slider

We can manually select an image from the Slider.

Select Image from Slider

Reference : http://www.c-sharpcorner.com/uploadfile/rohatash/jquery-image-slider-in-asp-net/

Download :

https://skydrive.live.com/redir?resid=CA4A7B09B8F914E8%21106