How can we force clients to refresh JavaScript files?


Q: How can we force web clients to refresh or load latest version javascript files from the web server.

This is the problem most of the web developers facing after deploying their newer versions of javascript files.

We normally ask the customer to hit Ctrl + F5 to ensure that all the latest javascript files loaded from server not from the cache.

But we can solve this in different ways as follows

Solution 1: If you are maintaining javascript versioning

If you are using javascript versions, it’s easy to solve the issue. i.e we just need to add the version to javascript file path as follows

<script src="~/scripts/demojs.js?100"></script>
<script src="~/scripts/demojs.js?version=100"></script>

so If the version of the file changed then the url also change. so if the url is different than the file which is already in cache, the browser (client) will request to get latest file from the server.

So these file will render to clients as follows

Loading from cache

image

Loading from server

image

Solution 2: If you are not using versioning use Asp.Net MVC datetime object ticks

In this case we just use ticks from C# datetime object as follows

<script src="~/scripts/demojs.js?@DateTime.Now.Ticks"></script>
<script src="~/scripts/demojs.js?currentTime=@DateTime.Now.Ticks"></script>

image

Solution 3: Restart application and Recycle Application pool in IIS

Please do following steps after completion of your deployment in IIS

  1. Restart your website

image

2. Then find the applicationpool of your website and recycle it.

image

In case of Microsoft Azure websites

Screenshot_10

Thanks

Happy coding ComputerSmile

Advertisements

How to handle Double click event of asp.net button using JQuery


Subject: Here we can Learn how to Handle Double click event of Asp.Net controls using Jquery, here i will explain with asp.net button control

If you are New to Jquery Start from here.

first take new asp.net empty website and add jquery library to website and add one asp.net webform and write following code

JQuery Script:

<script type="text/javascript">
        $(function () {
            $("input[id$=Button1]").bind({
                click: function (e) {
                    e.preventDefault();
                },
                dblclick: function () {
                    alert("DoubleClick Happed to Button");
                }
            });
        });
    </script>

CompleteCode:

<%@ Page Title="Handling DoubleClick of Asp.Net Button" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="HandlingDoubleClick.aspx.cs" Inherits="HandlingDoubleClick" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script src="Scripts/jquery-1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("input[id$=Button1]").bind({
                click: function (e) {
                    e.preventDefault();
                },
                dblclick: function () {
                    alert("DoubleClick Happed to Button");
                    //write ur code here
                }
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:Button ID="Button1" runat="server" Text="Double click on me" />
</asp:Content>

Explanation:

Here i am explaining Example with Master pages, the reason is, when the asp.net webform renders as html in browser it will assign dynamic ids for asp.net controls while merging master page and content page. Here why asp.net assigning dynamic ids, because to avoid naming collision

so here we have to use

$("input[id$=Button1]")

this statement to get asp.net control with dynamic id

and Bind method will bind events to control, here we are binding click and double click events

Click Event:

click: function (e) {
                    e.preventDefault();
                },

in this click event we are preventing default behavior of asp.net button control, i.e preventing post back

Double click Event:

dblclick: function () {
                    alert("DoubleClick Happed to Button");
                    //write ur code here
                }

in this double click event write your code…

 

Happy Coding….

If u have any drought feel free to contact from AboutMe page

How to Expand or Collapse panel when checkbox is checked or unchecked using JQuery with Asp.Net


Here we can learn how to expand or collapse a panel when user check or uncheck the checkbox using JQuery with asp.net

if you are very new to Jquery start from here.

Take a new website and add one webform(file—> new –> website—> asp.net Empty website—> enter website name—> press Ok—> add one webform to root directory)

then add our JQuery library file to the website as shown below

JQueryScripts

add that jquery-1.7.js file to webform and write following code

JQuery Script:

<script type="text/javascript">
        $(function () {
            $("input[id$=chkCollapseExpand]").click(function () {
                if ($(this).attr("checked")) {
                    $("div[id$=pnlCollapsable]").slideDown('slow');
                }
                else {
                    $("div[id$=pnlCollapsable]").slideUp('slow');
                }
            });
        });
    </script>

Total Code:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script src="Scripts/jquery-1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("input[id$=chkCollapseExpand]").click(function () {
                if ($(this).attr("checked")) {
                    $("div[id$=pnlCollapsable]").slideDown('slow');
                }
                else {
                    $("div[id$=pnlCollapsable]").slideUp('slow');
                }
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:CheckBox ID="chkCollapseExpand" runat="server" Text="Show/Hide" />
    <asp:Panel ID="pnlCollapsable" runat="server" Width="400" BackColor="#FF99FF" BorderColor="Fuchsia" BorderWidth="5" Font-Size="X-Large" EnableViewState="True" style="display:none;">
        This is Jquery example for expand and collapse when user clicks on checkbox from https://chikkanti.wordpress.com
    </asp:Panel>
</asp:Content>

Explanation:

$("input[id$=chkCollapseExpand]")

Reading Checkbox Control of type input

$(this).attr("checked")

checking weather check box is checked or not by reading checked attribute

$("div[id$=pnlCollapsable]").slideDown('slow');

reading panel and expanding by calling slideDown method

slow will add little animation to panel while expanding

$("div[id$=pnlCollapsable]").slideUp('slow');

reading panel and Collapsing by calling slideUp method

slow will add little animation to panel while Collapsing

 

OutPut:

Hide Show

=====================================

Happy Coding………..

Working with JQuery and Asp.Net


Here i would like to talk about JQuery, what is JQuery, how to use it with asp.net

 

We all know what is Javascript and the importance of Javascript while building Dynamic web forms.

JQuery is Javascript library, it contains all predefined code includes animation, UI, and some useful code functionality.

The advantage of JQuery is, it will support almost all browsers(IE,Chrome,Firefox,Safari,Opera..)

we can download JQuery library from here.

and also some CDNs are also available for Jquery, Google and Microsoft are Providing CDNs for JQuery

Google CDN: <script src=”//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js”></script>

Microsoft CDN:

<script src=”http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js”></script&gt;

after completing downloading JQuery Library, start working with asp.net by adding JQuery library to Asp.Net Website.

JQueryINVS

VisualStudio2010 By default include JQuery-1.4.1 in asp.net website and also includes jquery-1.4.1-vsdoc.js file.

This file is for VisualStudio2010 Intellisense. if open this file you can find following content as commented.

/*
* This file has been commented to support Visual Studio Intellisense.
* You should not use this file at runtime inside the browser–it is only
* intended to be used only for design-time IntelliSense.  Please use the
* standard jQuery library for all production use.
*
* Comment version: 1.4.1a
*/

Intellisense works as follows:

VSI

 VSI2

We can use jquery-1.4.1.js file for production use.

Example:

Open VisualStudio and select File –> New –> Website –> ASP.NET Empty Website –> Enter Some name of website—> Ok.

Now Add New folder and name it as Scripts, and add scripts to this folder and add one webform Default.aspx as follows.

JqueryWebsite

open Default.aspx file and add JQuery-1.7.js file to it and write following code

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

<!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.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            alert("Welcome to JQuery");
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

Explanation:

ready function will rise when DOM is ready to use

in that ready function we can write our code.

Output:

Welcome to Jquery