Archive

Archive for the ‘Javascript’ Category

How to implement Password validation in ASP.Net/C# OR Implement Password strength using Jquery in ASP.Net

October 10, 2012 1 comment

 

DOWNLOAD SOURCE CODE FOR PASSWORD STRENGTH CHECKER

How to show Password Strength image to user in ASP.Net

Register/change password pages on most of the application showing password strength information to user while entering password in the textbox. It allows to user to enter a strong password for register the pages. We can implement Password Strength Checker in different methods in ASP.Net application. Its better to do it in the client side itself so that user doesn’t feels post back in the page.

Implement Password Strength Checker using Jquery

Here we are going to demonstrate a sample application to implement Password Strength Checker using Jquery. The application shows the status of entered password by each alphabet changes in the textbox such as Week, Good, Strong etc..

Password_Strength_Checker

ASPX/HTML Page for Password Strength Checker  

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>jQuery Validation Plugin Password Extension demo</title>
 <link rel="stylesheet" type="text/css" media="screen" href="../jquery.validate.password.css" />
 <script type="text/javascript" src="../lib/jquery.js"></script>
 <script type="text/javascript" src="../lib/jquery.validate.js"></script>
 <script type="text/javascript" src="../jquery.validate.password.js"></script>
 <script id="demo" type="text/javascript">
 $(document).ready(function () {
 $("#register").validate();
 $("#password").valid();
});
</script>
 <style>
 label, input
 {
 float: left;
 }
 input
 {
 margin-left: 1em;
 }
 label.error
 {
 display: none !important;
 }
 .password-meter
 {
 float: left;
 }
 </style>
</head>
<body>
 <form id="register">
 <div>
 Password Strength Checker Demo Using JQuery.. 
powered by <a href="http://tuvian.con">
 tuvian</a>
 </div>
 <br />
 <br />
 <label for="password">
 Password:</label>
 <input class="password" name="password" id="password" />
 <div class="password-meter">
 <div class="password-meter-message">
 &nbsp;</div>
 <div class="password-meter-bg">
 <div class="password-meter-bar">
 </div>
 </div>
 </div>
 </form>
</body>
</html>

 

DOWNLOAD SOURCE CODE FOR PASSWORD STRENGTH CHECKER

 

How to create a drag able and resizable div in ASP.Net/C# OR How to make a div Dragable and Resizable using Jquery in ASP.Net/C#

September 27, 2012 1 comment

                                    DOWNLOAD SOURCE CODE FOR DAG ABLE AND RE-SIZABLE DIV  

Resize and drag a div in ASPX page/HTML Page

Here we are going to demonstrate making a div that can be drag and resize by users. We are achieving this drag and resize of div functionality using Jquery files. We already posted some article related with Jquery and Javascript. Here we are again demonstrating a detailed post regarding Draggable and Resizable div using Jquery files.

Drag able Re-sizable Div in HTML/ASPX Page

Drag able and Resizable Div using Jquery in HTML/ASPX Page

For implementing drag and resize Div, we need to download following jquery and css files and included in the ASPX/HTML page.

1. jquery.min.js          – Download from here 

2. jquery-ui.min.js    – Download from here 

3. jquery-ui.css          – Download from here 

After downloading above files we need to create a HTML/ASPX Page and include above files as mentioned below.

<script src="jquery.min.js" type="text/javascript"></script>
 <script src="jquery-ui.min.js" type="text/javascript"></script>
 <link rel="stylesheet" href="jquery-ui.css"
 type="text/css" media="all" />

HTML/ASPX Page for creating drag able and re sizable div

<!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>
 <title>Untitled Page</title>
 <script src="jquery.min.js" type="text/javascript"></script>
 <script src="jquery-ui.min.js" type="text/javascript"></script>
 <link rel="stylesheet" href="jquery-ui.css"
 type="text/css" media="all" />
 <style type="text/css">
 #resizediv
 {
 width: 150px;
 height: 150px;
 padding: 0.5em;
 background: #EB5E00;
 color: #fff;
 }
 </style>
 <script type="text/javascript">
$(document).ready(function () {
$("#resizediv").resizable();
$("#resizediv").draggable();
});
</script>
</head>
<body>
 <form id="form1" runat="server">
 <div id="resizediv">
 Drag me ... or Resize me....<br />
 This is a Div that can be Drag and Resize by you.. .
 </div>
 </form>
</body>
</html>

------

                        DOWNLOAD SOURCE CODE FOR DAG ABLE AND RE-SIZABLE DIV  

Disable right click on a web page in asp.net/C# using Jquery/Javascript

March 20, 2012 2 comments

How to disable right click functionality from the asp.net web page

In some of the web page has the requirement to protect source code from the users. Users can right click the page and take the source code. In order protect right click functionality on the web page we can implement javascript functionality to prevent user’s right click on the web page. So user not able to access features available on the right click menus.

By implementing javascript method we can identify the right click event from the user by checking the button code and prevent if the user clicks right click. Below mentioned web page prevented to click right click by the user. When the user trying to right click it will return warning message to user and return the action.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DisableRightClick.aspx.cs"
 Inherits="ExperimentLab.DisableRightClick" %>
<!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 id="Head1" runat="server">
 <title>Sample to Disable Right Click of Page</title>
 <script language="JavaScript" type="text/javascript">
 //Message to display whenever right click on website
 var message = "Sorry, Right Click have been disabled.";
 function click(e) {
 if (document.all) {
 if (event.button == 2 || event.button == 3) {
 alert(message);
 return false;
 }
 }
else {
 if (e.button == 2 || e.button == 3) {
 e.preventDefault();
 e.stopPropagation();
 alert(message);
 return false;
 }
 }
 }
if (document.all) {
 document.onmousedown = click;
 }
else {
 document.onclick = click;
 }
</script>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 In this page right click not allowed.
 </div>
 </form>
</body>
</html>

Disable copy paste on textbox in the ASP.Net/C# using javascript/Jquery

March 15, 2012 2 comments

Very simple method to disable copy paste in the textbox without any extra script

To achieve some requirements like disable copy paste functionalities in the textbox in aspx page, commonly we need to write some additional javascript functionalities in the aspx page. We can achieve this features using very simple methods.

First Method to disable Ctrl Key and right click on textbox

This method is very simple method and here we don’t need to include any javascript methods or files. We are having oncopy and onpaste event for the textboxes and can call return false for this both event.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="disableCopyPaste.aspx.cs"
 Inherits="ExperimentLab.disableCopyPaste" %>
<!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 id="Head1" runat="server">
 <title>Sample to Disable Copy, Cut and Paste Options in textbox</title>
</head>
<body>
 <form id="form2" runat="server">
 <div>
 <strong>First Method To disable copy, cut and paste options in textbox</strong><br />
 <asp:TextBox ID="TextBox2" runat="server" oncopy="return false" oncut="return false"
 onpaste="return false"></asp:TextBox>
 </div>
 </form>
</body>
</html>

Second method to prevent copy paste feature in the aspx texbox

In this option, we are calling a javascript function on any key press. This function checks whether user press ctrl key or right click using e.keyCode and e.button variable. If the user press ctrl key or right click, from the javascript function call return false

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="disableCopyPaste.aspx.cs"
 Inherits="ExperimentLab.disableCopyPaste" %>
<!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 id="Head1" runat="server">
 <title>Sample to Disable Copy, Cut and Paste Options in textbox</title>
 <script language="javascript" type="text/javascript">
//Function to disable Cntrl key/right click
function DisableControlKey(e) {
// Message to display
var message = "Cntrl key/ Right Click Option disabled";
// Condition to check mouse right click / Ctrl key press
if (e.keyCode == 17 || e.button == 2) {
alert(message);
return false;
}
}
</script>
</head>
<body>
 <form id="form2" runat="server">
 <div>
 <strong>Second Method to Disable copy, cut and paste options in textbox</strong><br />
 <asp:TextBox ID="TextBox3" runat="server" onKeyDown="return DisableControlKey(event)"
 onMouseDown="return DisableControlKey(event)"></asp:TextBox>
 </div>
 </form>
</body>
</html>


Create water mark text box in asp.net/C# using javascript within a single step

February 23, 2012 3 comments

How to create a water mark text box in asp.net/C# using javascript 

In some scenario in the project, we need to implement water mark text for each textboxes in the form. It will help user to give right direction to enter proper and valid entries for each textboxes. We can achieve this water mark text boxes easily by using javascript methods.

Javascript method to create water mark text boxes in ASP.Net/C# using javascript

Here we are going to create a small asp.net application to show example of water mark text box creation. In aspx page we are having a textbox for username and a button. In the textbox it will show ‘Enter username’ as water mark style with gray color. When a user click mouse on to the textbox it will hide. Once the user leave the mouse pointer from the textbox without enter any data, it will display water mark text.

ASPX PAGE WITH JAVASCRIPT FOR WATER MARK TEXTBOX

<!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 id="Head1" runat="server">
 <title>Watermark Textbox Using JavaScript</title>
 <script language="javascript" type="text/javascript">
 function WaterMark(txtName, event) {
 var defaultText = "Enter Username";
 // Condition to check textbox length and event type
 if (txtName.value.length == 0 & event.type == "blur") {
 //if condition true then setting text color 
 //and default text in textbox
 txtName.style.color = "Gray";
 txtName.value = defaultText;
 }
// Condition to check textbox value and event type
 if (txtName.value == defaultText & event.type == "focus") {
 txtName.style.color = "black";
 txtName.value = "";
 }
 }
function WaterMarkPwd(txtName, Password) {
 var defaultText = "Enter Password";
 // Condition to check textbox length and event type
 if (txtName.value.length == 0 & event.type == "blur") {
 //if condition true then setting text color and 
 //default text in textbox
 txtName.style.color = "Gray";
 txtName.value = defaultText;
 }
// Condition to check textbox value and event type
 if (txtName.value == defaultText & event.type == "focus") {
 txtName.style.color = "black";
 txtName.value = "";
 }
 }
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <b>UserName:</b>
 <asp:TextBox ID="txtUserName" runat="server" Text="Enter Username" ForeColor="Gray"
 onblur="WaterMark(this, event);" onfocus="WaterMark(this, event);" />
 <asp:Button runat="server" ID="btnLogin" Text="Login" />
 </div>
 </form>
</body>
</html>

How to calculate difference between two dates in javascript/jquery

February 16, 2012 1 comment

Simple steps to calculate difference between two date fields using JavaScript/JQuery 

In some scenario, we need to calculate the difference between two dates from the client side. Here we are going to demonstrate all about date fields using javascript such as Javascript date field validation for different format, difference between two dates in days, hours, minutes, seconds, years and weeks

Very strong and simple Javascript validation for date fields for format dd/mm/yyyy 

Following javascript function simply verify and return result for checking valid date from client side itself. It will automatically validate leap year entries and return correct result. That means if we pass ’29/02/2011′ to the function it will be return false. If we are passing ’29/02/2012′ to the function it will return true. So we don’t need to bother about the leap year or other complex things.

function isValidDate(dateStr) {
// Date validation Function
// Checks For the following valid Date formats:
// DD/MM/YYYY
var re = /^(((0[1-9]|[12]\d|3[01])\/(0[13578]|1[02])\/((19|[2-9]\d)\
d{2}))|((0[1-9]|[12]\d|30)\/(0[13456789]|1[012])\/((19|[2-9]\d)\d{2}))
|((0[1-9]|1\d|2[0-8])\/02\/((19|[2-9]\d)\d{2}))|(29\/02\/((1[6-9]|[2-9]
\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))))$/;
var valid = re.test(dateStr);
if (valid == false) {
alert(dateStr + ' Date is not in a valid format.')
return false;
}
return true;
}

How to calculate the date difference from client side using javascript?

Now we are going to find the difference between two date fields from the client side javascript or jquery. In some of the scenario, we need to find the number of days between two selected dates  like leave applying modules, hotel room booking etc. In this case we can simply calculate the difference between from date and to date using following function in javascript.

Here we are having two date fields for from date and todate. User has to select a from date and to date by using this controls. Todate should be greater than from date. When user select from date or todate we will call javascript function calculate()  and this function finds the difference between two dates and display the difference in the label. Its also validate as todate should be greater than the from date.

function calculate() {
var value1 = document.getElementById('<%=txtDateFrom.ClientID%>')
.value.split("/");
var value2 = document.getElementById('<%=txtDateTo.ClientID%>')
.value.split("/");
if (value1 != "" && value2 != "") {
var day1 = parseFloat(value1[0]);
var month1 = parseFloat(value1[1]);
var year1 = parseFloat(value1[2]);
var day2 = parseFloat(value2[0]);
var month2 = parseFloat(value2[1]);
var year2 = parseFloat(value2[2]);

if ((year2 < year1) || (year2 == year1 && month2 < month1) || 
(year2 == year1 && month2 == month1 && day2 < day1)) {
alert('From Date should greater than Date From');
document.getElementById('<%=txtVacationDays.ClientID%>').innerHTML = "0";
return;
}                    
// The number of milliseconds in one day
var ONE_DAY = 1000 * 60 * 60 * 24
var fromDate = new Date(year1, month1 - 1, day1);
var toDate = new Date(year2, month2 - 1, day2);
// Convert both dates to milliseconds
var dateFrom = fromDate.getTime();
var dateTo = toDate.getTime();
// Calculate the difference in milliseconds
var difference_ms = Math.abs(dateTo - dateFrom)
// Convert back to days and return
var DiffDays = Math.round(difference_ms / ONE_DAY)
document.getElementById('<%=txtVacationDays.ClientID%>').innerHTML 
= parseFloat(DiffDays) + 1;
}
}

In order to call this javascript function on aspx textbox change event, we need to set attributes to the textbox on code behind as follows.

protected void Page_Load(object sender, EventArgs e)
{
    txtFromDate.Attributes.Add("Onchange", "calculate();");
    txtToDate.Attributes.Add("Onchange", "calculate();");
}

ASPX page having two date fields as follows :

<table>
 <tr>
 <td>
 First Date:
 <asp:TextBox runat="server" ID="txtFromDate" />
 (DD/MM/YYYY format)<br />
 Second Date: Date:
 <asp:TextBox runat="server" ID="txtToDate" />
 (DD/MM/YYYY format)<br />
 <center>
 <asp:Button runat="server" ID="btnCheck" Text="Check" 
 OnClientClick="return calculate();" />
 </center>
 </td>
 </tr>
</table>

Collapsible panel extender samples in ASP.Net indifferent scenario

July 25, 2011 3 comments

How to implement collapsible panel extender in ASP.Net/C#?

Ajax collapsible panel extender is a tool used to collapse and expand each section with content or without content with asynchronous javascript, hence there is no postback happening in the middle of collapse/expand process. Dot Net framework helps to create collapse and expand functionalities within easy steps. Ajax tool kit included a control name Ajax Collapsible Panel Extender allows to implement above mentioned process as very easily.  The CollapsiblePanel is a very flexible extender that allows you to easily add collapsible sections to your web page. This extender targets any ASP.NET Panel control. The page developer specifies which control(s) on the page should be the open/close controller for the panel, or the panel can be set to automatically expand and/or collapse when the mouse cursor moves in or out of it, respectively.

Steps to implement Ajax collapsible panel extender in ASP.Net/C#

Here we are going to demonstrate step by step process to implement ajax collapsible panel extender in ASP.Net/C#. In order to implement collapsible panel extender we need to include ajax control toolkit dll as reference to our visual studio.

  1. Register Ajax control toolkit to your aspx page
  2. Drag and drop a <ScriptManager> from the Toolbox to the page
  3. Now add an UpdatePanel to the page. Inside the <ContentTemplate> drag and drop a CollapsiblePanel from the AJAX toolkit. After applying some Css and add properties of the CollapsiblePanel, the mark up will look similar to the following

 

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

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %>

<!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>CollapsiblePanelExtender Tips </title>   
<style type="text/css">
.cpHeader
{
color: white;
background-color: #719DDB;
font: bold 11px auto "Trebuchet MS", Verdana;
font-size: 12px;
cursor: pointer;
width:450px;
height:18px;
padding: 4px;           
}
.cpBody
{
background-color: #DCE4F9;
font: normal 11px auto Verdana, Arial;
border: 1px gray;               
width:450px;
padding: 4px;
padding-top: 7px;
}      
</style>

</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="pHeader" runat="server" CssClass="cpHeader">
<asp:Label ID="lblText" runat="server" />
</asp:Panel>

<asp:Panel ID="pBody" runat="server" CssClass="cpBody">
Here will display our contents or controls
</asp:Panel>

<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
TargetControlID="pBody" CollapseControlID="pHeader" ExpandControlID="pHeader"
Collapsed="true" TextLabelID="lblText" CollapsedText="Click to Show Content.."
ExpandedText="Click to Hide Content.."
CollapsedSize="0">
</cc1:CollapsiblePanelExtender>

</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

 

How to Expand/Collapse the ASP.NET AJAX CollapsiblePanel programmatically using JavaScript?

In above example we looked that how we can implement ajax collapsible panel extender within the aspx page. In some scenario we need to call this functionality on some javscript events. In those scenario, we need to study that how we can call collapse and expand functionalities from javascript. Below is the code for calling ajax collapsible panel extender from javascript.

<asp:Button ID="btnClick" OnClientClick="ExpandCollapse()"
runat="server" Text="Expand/Collapse" />
</ContentTemplate>
</asp:UpdatePanel>
Add JavaScript in the <head> tag as shown below:
<script type="text/javascript">

function ExpandCollapse() {           
var collPanel = $find("CollapsiblePanelExtender1");
if (collPanel.get_Collapsed())
collPanel.set_Collapsed(false);
else
collPanel.set_Collapsed(true);
}      

</script>
 

How we can implement ajax collapsible panel extender from code behind in ASP.Net/C#?

We are going to check how we can call expand/collapse ajax collapsible panel extender from code behind in asp.net/c#. In some scenario we need to call expand/collapse functions in Ajax collapsible panel extender dynamically from asp.net/C#. Below mentioned code helps to dynamically call expand/collapse ajax collapsible panel extender from asp.net/c#

protected void btn_Collapse(object sender, EventArgs e)
    {
        // Expand
        this.CollapsiblePanelExtender1.Collapsed = false;
        this.CollapsiblePanelExtender1.ClientState = "false";
        // Collapse
        // Expand
        this.CollapsiblePanelExtender1.Collapsed = true;
        this.CollapsiblePanelExtender1.ClientState = "true";
    }

How to add an Ajax collapsible panel extender dynamically from code behind in ASP.Net/C#

In some scenario we have to create and implement a ajax collapsible panel extender dynamically as per the data from the database in ASP.Net/C#. We can create and implement ajax collapsible panel extender dynamically from code behind in ASP.Net/C# using below mentioned code.

 

using AjaxControlToolkit;

protected void Page_Load(object sender, EventArgs e)
{        
// Create Header Panel
Panel panelHead = new Panel();
panelHead.ID = "pH";
panelHead.CssClass = "cpHeader";
// Add Label inside header panel to display text
Label lblHead = new Label();
lblHead.ID = "lblHeader";
panelHead.Controls.Add(lblHead);

//Create Body Panel
Panel panelBody = new Panel();
panelBody.ID = "pB";
panelBody.CssClass = "cpBody";
// Add Label inside body Panel to display text
Label lblB = new Label();
lblB.ID = "lblBody";
lblB.Text = "This panel was added dynamically";
panelBody.Controls.Add(lblB);

// Create CollapsiblePanelExtender
CollapsiblePanelExtender cpe =
    new CollapsiblePanelExtender();
cpe.TargetControlID = panelBody.ID;
cpe.ExpandControlID = panelHead.ID;
cpe.CollapseControlID = panelHead.ID;
cpe.ScrollContents = false;
cpe.Collapsed = true;
cpe.ExpandDirection =
CollapsiblePanelExpandDirection.Vertical;
cpe.SuppressPostBack = true;
cpe.TextLabelID = lblHead.ID;
cpe.CollapsedText = "Click to Show Content..";
cpe.ExpandedText = "Click to Hide Content..";

this.UpdatePanel1.ContentTemplateContainer.Controls.Add(panelHead);
this.UpdatePanel1.ContentTemplateContainer.Controls.Add(panelBody);
this.UpdatePanel1.ContentTemplateContainer.Controls.Add(cpe);

}

How to refresh page using javascript freaquently and automatically ?

July 25, 2011 2 comments

Refresh web page using javascript with regular intervals

In some scenario, we need to refresh our web page automatically with some interval of time. The better method to do it is using Javascript function. Then we can set a time interval period and for each interval time page will be refresh without any user interaction with web page.

Using setTimeout() with Javascript

The Javascript setTimeout() function allows code to be executed a set of time after some trigger, such as when the page has loaded or a button is pressed.  That means, the setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.

Syntax of SetTimeOut() in Javascript

setTimeout(code,millisec,lang)

Examples of setTimeout() with Javascript

A simple example of setTimeout() in javascript, below sample function shows alert message with the time interval 3 seconds after click the button.

<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('I am displayed after 3 seconds!')",3000)
}
</script>
</head>
<body>

<form>
<input type="button" value="Display timed alertbox!" onclick="timedMsg()" />
</form>

</body>
</html>
 

Below mentioned example of setTimeout() in Jvascript will start count down after click the button up to the seconds that we enterd into the text box. It is very simple sample for setTimout(0 in javasscript can be easily understood by beginners also.

 

<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;

function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}

function doTimer()
{
if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }
}
</script>
</head>
 

How to reload web page frequently and automatically using javascript setTimeout() function? Below mentioned function will help to refresh page frequently with the time of interval that we mentioned.  We can done it by two methods

  1. In meta tage we can set time of interval and have to also mention url that we have to load with the time of interval.
<meta http-equiv="refresh" content="30;url=index.html">
  1. 2.  Next option is create a method in javascript and call it in page load as mentioned below.  
<script type="text/javascript">
    window.onload = setupRefresh;

    function setupRefresh() {
      setTimeout("refreshPage();", 30000); // milliseconds
    }
    function refreshPage() {
       window.location = location.href;
    }
  </script>

How to access URL or URL parts using javascript / Get the Website URL using JavaScript

July 14, 2011 20 comments

How To Get URL Parts in JavaScript :: A JavaScript Tutorial For Beginners

In some scenario we need to communicate with website url that seen in address bar of the browser using JavaScript. It’s very easy to access the url using javascript. But in order to get query string from URL, default functions or methods are not available. Using javscript we can access the URL using default method in javascript. We are not able to edit URL in javascript without postback. But we can reload the page from javascript and also we can redirect to other url from javascript. Let’s see all about jaavscript with website URL.

How to get website URL in JavaScript / how do I use javascript to get url of current page

Here we are going to explain how we can use javascript to get the website url of the current page. Lets imagine our current page is http://myexample.com/example/index.html and we need to get each part of the url separately in javascript. We can access the parts of URL using javascript as follows.

window.location.protocol = "http"
window.location.host = " myexample.com "
window.location.pathname = "example/index.html"
window.location.href = "http://myexample.com/example/index.html"

If we want to access the entire website URL of the current page we can use window.location.href as mentioned above. Also we can access part by part of current page URL in javascript using above mentioned options. But there is no default option to get/access the query string values in current page URL in javascript.

 Redirect to another page using JavScript/ JavaScript redirect to a new page

 By using window.location we can redirect to another website page from javascript. So it’s better to use javascript navigation to redirect to another page instead of asp.net response.redirect function. Because Response.Redirect function first send to Server then identifying the web page that we need to navigate and again resend to client. There is a extra round trips will be happen in the case of Response.Redirect method. To avoid this round trips we can use Javascript redirection method as follows.

           window.location = “http://www.supershope.com&#8221;;

 How to access/get query string values in website URL using JavaScript (from client side)

 In order to access the querystring  of the current web page there are no default functions or methods in JavaScript.  To get URL parameters using javascript we are demonstrating a function that is used to get all the URL parameters from website in JavaScript.

 Javascript function to get all URL parameters from Website URL

 function getUrlParams() {
    var params = {};
    window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,
function (str, key, value) {
    params[key] = value;
});
    return params;
}

 var params = getUrlParams();

alert(params.id);

alert(params.name);

 Whenever we want to get querystring values from website URL we can call above function and which returns a object that holds all website URL parameters of the current page as key value pairs.

 How to get a particular querystring value from the URL in JavaScript

 We have noted that we cannot able to get query string from website URL in default methods in JavaScript. So we written a function to get all parameter values in the current page. But if we want to get a particular querystring values from the URL it’s difficult to use above method. That means if I want to get ‘id’ query string from the URL we need to get all parameters from the URL and from that collection get id values. Instead of this we are going to write another function which access the URL parameter name as the function parameter and return value of the particular querystring. If there is no query string in the URL with specified name will return empty string.

 Javascript function to get particular querystring value from the website URL

 function getParam(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regexS = "[\\?&]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec(window.location.href);
    if (results == null)
        return "";
    else
        return results[1];
}
 
var id = getParam('id');
alert(id);
 

By using above function, we can easily get particular query string from client side script. If we send a value to above function and suppose there is no query string with that name, then it will return empty string. Hence we can easily accessing query string from client side using JavaScript.

How to call serverside function from client side javascript in ASP.Net?

June 10, 2011 26 comments

Call ASP.Net/C# function using Javscript

Usually in ASP.net platform, server side functions (all codes written in asp.net,C#) are executing from the server side and all client side funtions (javascript,jquery,ajax) are executing from the client side. Obviously client side functions are too faster than the server side because there is no need to go upto server, will running from the browser itself.

But we are unable to written all functions in client side to get good performance. But for this technique, there is some tips can be used. What we are going to do is, we are writing a server side code in ASP.Net,C# and call these functions from client side using javascript and ajax.

Steps to Calling ServerSide method from javscript

  1. Create a aspx page with three textboxes and a button control.
  2. User enter two numbers in first two textboxes and press calculate button.
  3. We are fetching entered values and calling a serverside funtion by passing this values.
  4. In the server side function find the sum and return the result.
  5. In client side’s succes event, getting result from the server and displayed to third textbox.

Step 1 :

 Create a aspx page with controls, two textboxes for entering the numbers, one button for find the sum of number and a one more text box to display the result.

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Result.aspx.cs" Inherits="testWebApp.Result" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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>
</head>
<body>
    <form id="form1" runat="server">
      <asp:ScriptManager ID="sm" runat="server" EnablePageMethods="true">
    </asp:ScriptManager>
    <div>
        <table>
            <tr>
                <td>
                    Number1:
                </td>
                <td>
                    <asp:TextBox ID="txt1" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Number2:
                </td>
                <td>
                    <asp:TextBox ID="txt2" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Sum:
                </td>
                <td>
                    <asp:TextBox ID="txtSum" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Button ID="btnSum" runat="server" Text="Sum" OnClientClick="CallSum();return false;" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Step 2  

In code behind, write a web method to access two parameters and return the result. In the function we added parameters and return the result.

protected void Page_Load(object sender, EventArgs e)
        {

        }

        /// <summary>
        /// Server side function Sum
        /// </summary>
        /// <param name="arg1">arg1</param>
        /// <param name="arg2">arg2</param>
        /// <returns>result(sum)</returns>
        [System.Web.Services.WebMethod]
        public static int Sum(int arg1, int arg2)
        {

            /* On server side we can do any thing. Like we can access the Session.
             * We can do database access operation. Without postback.
             */
            try
            {
                return arg1 + arg2;
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }

Step 3

 Create a javscript method in aspx page to get input textboxes values and call serverside function. Here itself we decalre a success and failure event, for getting the event from the server after the current function executed.

 <script language="javascript" type="text/javascript">
    <!--

        // Javascript function
        function CallSum() {
            //Get the controls
            var txt1 = $get("txt1");
            var txt2 = $get("txt2");
            var txtresult = $get("txtSum");

            //Call server side function
            PageMethods.Sum(txt1.value, txt2.value, OnCallSumComplete, OnCallSumError, txtresult);

            /*Server side function get the 2 arguments arg1 and arg2. We are passing txt1.value and txt2.value
            for that. OnCallSumComplete is callback function for complete successfully. OnCallSumError is callback
            function on error. txtresult is usercontext parameter.

            OnCallSumComplete,OnCallSumError,txtresult are optional parameters.

            If server side code executed successfully then OnCallSumComplete will call.
            If server side code do not executed successfully then OnCallSumError will call.

            */
        }

        // Callback function on complete
        // First argument is always "result" if server side code returns void then this value will be null
        // Second argument is usercontext control pass at the time of call
        // Third argument is methodName (server side function name) In this example the methodName will be "Sum"
        function OnCallSumComplete(result, txtresult, methodName) {
            //Show the result in txtresult
            txtresult.value = result;
        }

        // Callback function on error
        // Callback function on complete
        // First argument is always "error" if server side code throws any exception
        // Second argument is usercontext control pass at the time of call
        // Third argument is methodName (server side function name) In this example the methodName will be "Sum"
        function OnCallSumError(error, userContext, methodName) {
            if (error !== null) {
                alert(error.get_message());
            }
        }

    // -->
    </script>

Project is ready for call server sided functions from client side using javascript. Run the application and enter two numbers in first and second textboxes then press calculate button, the we can show that result is displayed in third box without any page postback. If we enterd alphabets instead of numbers, from the server it will happening error and ‘failure’ event occurred in the javascript will alert the details of the error.

%d bloggers like this: