JavaScript

Thursday, February 4, 2016

In this article, I will explain you, How to use JavaScript code in ContentPlaceHolder of Master page. If your web page (Web Form=.aspx page) is inherit from master page then you must to use ClientID of the control to get the value. Like

document.getElementById("<%=Label1.ClientID%>");

By using above mentioned code we want to retrieve inner html text of the label. If you are using java script in simple web form which is not inherit from master page then you can use simple id of the control as parameter. Like

document.getElementById("Label1");

How to use JavaScript in Master page's Content PlaceHolder

Step-1 : Add a Master page also add web form.
Step-2 : Do Inherit web form from master page.
Step-3 : Write the below mentioned code in the content place holder of the web form.

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<input id="Button1" type="button" value="button" onclick = "check()"/>
<script type = "text/javascript">
function check()
{
var label = document.getElementById("<%=Label1.ClientID%>");
var textbox = document.getElementById("<%=TextBox1.ClientID%>");
alert("Label Value " + label.innerHTML + "TextBox Value " + textbox.value);

}
</script>
</asp:Content>

Note: Please mentioned javascript code at last position of the page.

Friday, June 19, 2015

ASP.NET JavaScript

June 19, 2015

Print the asp.net webpage using button

Introduction

Today i am talking about printing, and how to print the content or you can say selected content in asp.net. If you have a webpage and you want to print this then you have to choose command key (ctrl+p) for that. Also you want to print the selected part then you have to select the text first then you have to use command key. But sometimes your selected page could not printed. So many websites provide the printing facilities on the webpage. Today i am talking about the same topics here.
Lets take a simple example to demonstrate the topic.

Source code:

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
function printpage() {

var getpanel = document.getElementById("<%= Panel1.ClientID%>");
var MainWindow = window.open('', '', 'height=500,width=800');
MainWindow.document.write('<html><head><title>Print Page</title>');
MainWindow.document.write('</head><body>');
MainWindow.document.write(getpanel.innerHTML);
MainWindow.document.write('</body></html>');
MainWindow.document.close();
setTimeout(function () {
MainWindow.print();
}, 500);
return false;

}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Panel ID="Panel1" runat="server">

<table style="width: 100%;">
<tr>
<td>English Marks</td>
<td>Social Marks </td>
<td>Science Marks</td>
</tr>
<tr>
<td>60</td>
<td>56</td>
<td>23</td>
</tr>
<tr>
<td>56</td>
<td>12</td>
<td>23</td>
</tr>
</table>
</asp:Panel>
<asp:Button ID="Button1" runat="server" OnClientClick="return printpage();" Text="Print Page" />
</form>
</body>
</html>
Code generate the following output:

In this example i have a panel control with table. Table contains data. Also i have a button control in the page . When we click on it, a javascript function will raised. In this function, first of all get the panel with their id property. Create a window with the help of window.open( ) method also set the width and height of it. Now, write the html code in the window by using write method also write the panel contents in the body section. After that print the window.

Monday, April 6, 2015

JavaScript

April 06, 2015

Collapse or Expand slide using Java Script

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#box1
{
background-color : Gray;
height:200px;
width : 200px;
overflow : hidden ;
}

</style>
<script type ="text/javascript">
function slideopen(ele) {
var elem = document.getElementById(ele);
elem.style.transition = "height 0.2s linear 0s";
elem.style.height = "200px";
}
function slideclose(ele) {
var elem = document.getElementById(ele);
elem.style.transition = "height 0.2s linear 0s";
elem.style.height = "0px";
}

</script>

<title>Change Background color</title>
</head>
<body>
<button onclick="slideopen('box1');"> slideopen</button>
<button onclick="slideclose('box1');"> slideclose</button>

<div id="box1">Paste your content here</div>
</body>
</html>

Code generate the following

Collapse or Expand slide using Java Script

JavaScript

April 06, 2015

Element fadeout, FadeIn using Java Script

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#box1
{
background-color : Gray;
height:200px;
width : 200px;
}

</style>
<script type ="text/javascript">
function fadeout(ele) {
var elem = document.getElementById(ele);
elem.style.transition = "opacity 1.0s linear 0s";
elem.style.opacity = 0;
}
function fadein(ele) {
var elem = document.getElementById(ele);
elem.style.transition = "opacity 1.0s linear 0s";
elem.style.opacity = 1;
}

</script>

<title>Change Background color</title>
</head>
<body>
<button onclick="fadeout('box1');"> fadeout</button>
<button onclick="fadein('box1');"> fadein</button>

<div id="box1">Paste your content here</div>
</body>
</html>

Code generate the following output

Element fadeout, FadeIn using Java Script

JavaScript

April 06, 2015

Example of Navigator object in Java Script

<!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>Navigator objects</title>
</head>
<body>
<script type="text/javascript" >
document.write("User Agent Header " + navigator.userAgent +"<br/>");
document.write("Browser Code name: " + navigator.appCodeName + "<br/>");
document.write("Browser name: " + navigator.appName + "<br/>");
document.write("Browser Version: " + navigator.appVersion + "<br/>");
document.write("Cookies Enabled " + navigator.cookieEnabled + "<br/>");
document.write("Platform " + navigator.platform + "<br/>");

</script>
</body>
</html>

Code generate the following Output

JavaScript

April 06, 2015

Required validation in Java Script

<!DOCTYPE html>

<html>
<head>
<title>encode and decode</title>
<script type="text/javascript" >
function validation() {
var val = document.getElementById('in');
if (val.value.length == 0) {
alert("Required");

}
}

</script>
</head>
<body>
<h1>Example of required field validation control</h1>
<input type="text" name="gt" value="" id="in" />
<button onclick="validation();">perform validation</button>
</body>
</html>

Code generate the following output

JavaScript

April 06, 2015

Compare validation using Java Script

<!DOCTYPE html>
<html>
<head>
<title>encode and decode</title>
<script type="text/javascript" >
function validation() {

var firstvalue = document.getElementById('first');
var secondvalue = document.getElementById('second');
if (firstvalue.value != secondvalue.value) {
alert("Password not match");

}

}

</script>
</head>
<body>
<h1>Example of compare field validation control</h1>

Password<input type="password" name="gt" value="" id="first" /><br />
Re-type<input type="password" name="gt" value="" id="second" />
<button onclick="validation();">perform validation</button>

</body>
</html>

Code generate the following output

JavaScript

April 06, 2015

How to add TextBox value in Java Script

<!DOCTYPE html>

<html>
<head>
<title>encode and decode</title>
<script type="text/javascript" >

function validation() {

var firstvalue = document.getElementById('first');
var secondvalue = document.getElementById('second');
var finalvalue = eval((firstvalue.value)+ "+" +( secondvalue.value));
alert(finalvalue);

}

</script>
</head>
<body>
<h1>Addition of two or more number</h1>

Enter Number<input type="text" name="gt" value="" id="first" /><br />
Enter Second<input type="text" name="gt" value="" id="second" />
<button onclick="validation();">Add number</button>

</body>
</html>