In this asp.net tutorial you will learn how to call javascript function from c# code behind. While using asp.net with c# sometimes you may need to call javascript function from c# code behind. Let’s look over how to do this.
I am going to develop a web page in which I will have a form that contains two form fields, one will be asp textbox and other will be asp button. Let’s look over the code of that webpage.
Calling_javascript_Function.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="MainFolder_SubFolder_Default" %>
<html>
<head runat="server">
<title>Calling javascript function from c# code behind
</title>
<script language="javascript" type="text/javascript">
function getAlert()
{
var firstname;
firstname=document.getElementById("<%=txt_Firstname.ClientID %>").value;
alert(firstname);
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="100%" cellpadding="2" cellspacing="2" border="0" class="fontclass">
<tr>
<td width="20%"> </td><td><h2>Signup Form</h2></td>
</tr>
<tr>
<td><strong> First Name</strong></td><td><asp:TextBox ID="txt_Firstname" runat="server" EnableTheming="false" Width="150px" Text="Adeel Fakhar"></asp:TextBox> </td>
</tr>
<tr>
<td> </td><td><asp:Button ID="btn_Signup" runat="server" EnableTheming="false" Text="Register"/> </td>
</tr>
</table>
</div>
</form>
</body>
</html>
Now let’s have a look over its c# code behind file. You just have to put single line of code in Page_Load() function and that’s it.
Calling_javascript_Function.aspx.cs
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
public partial class MainFolder_SubFolder_Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
btn_Signup.Attributes.Add("onClick", "return getAlert()");
txt_Firstname.Focus();
}
}
I just wanted to call the javascript function which is in mycase getAlert() from asp button’s onClick client side event and for this I use this line of code
btn_Signup.Attributes.Add("onClick", "return getAlert()");
btn_Signup is the id of asp button that I am using in my form. After this I used c# built in method Focus() so that when page loads focus must goes to the asp textbox.
So this is the way to call the javascript function from c# code behind.
Happy Coding, Kepp coding.
Read more...
Query to find the second lowest column value in a table
In this ms sql server tutorial you will learn query to find the second lowest column value in a table. Let’s have a look over the query that will give you second lowest column value in a table.
SELECT ColumnName FROM TableName WHERE ColumnName =
( SELECT MIN(ColumnName) FROM TableName WHERE
ColumnName>(SELECT MIN(ColumnName) FROM TableName))
Replace ColumnName with the Name of your table’s column and replace TableName with the name of your table.
So this is the query to find the second lowest column value in a table. Read more...
SELECT ColumnName FROM TableName WHERE ColumnName =
( SELECT MIN(ColumnName) FROM TableName WHERE
ColumnName>(SELECT MIN(ColumnName) FROM TableName))
Replace ColumnName with the Name of your table’s column and replace TableName with the name of your table.
So this is the query to find the second lowest column value in a table. Read more...
Labels: ms sql server
Query to find the second highest column value in a table
In this ms sql server tutorial you will learn query to find the second highest column value in a table. Let’s have a look over the query that will give you second highest column value in a table.
SELECT ColumnName FROM TableName WHERE ColumnName =
( SELECT MAX(ColumnName) FROM TableName WHERE
ColumnName<(SELECT max(ColumnName) FROM TableName))
Replace ColumnName with the Name of your table’s column and replace TableName with the name of your table.
So this is the query to find the second highest column value in a table. Read more...
SELECT ColumnName FROM TableName WHERE ColumnName =
( SELECT MAX(ColumnName) FROM TableName WHERE
ColumnName<(SELECT max(ColumnName) FROM TableName))
Replace ColumnName with the Name of your table’s column and replace TableName with the name of your table.
So this is the query to find the second highest column value in a table. Read more...
Labels: ms sql server
Print using javascript
In this programming tutorial we will learn how to print using javascript with print preview window using javascript. We will also learn how to print the whole web page and how to print the specific area of a web page using javascript. So let’s start.
Print using javascript
If you want to give your user the functionality to print the whole webpage then it is better approach to use built-in print function window.print() of javascript. Let’s have a look over how to use this function for hyperlink and for input button.
For Hyperlink:-
For Button:-
The javascript code will execute when you use the command "javascript:" inside the hyperlink’s href attribute.
print() is a built-in method of window object. The interesting thing of this window.print() command is that it doesn’t immediately fire the print, it actually brings the print dialog and then its depend upon user to continue with print or not.
Printing the specific area of a web page using javascript
Now let’s suppose we have some useful information and we want user to print only that information like product receipt, result card, secret information etc rather than printing the whole web page. Let’s have a look over example given below
I just want to print the content inside the table having id="tbl_display" rather than printing the whole web page that’s why I have given a unique id to that table. We have placed the print button in other table rather than tbl_display so that print button should not be visible during print preview and when we get printed table content.
Now let’s have a look over the javascript code of tablePrint() function.
The scope of the tablePrint() function is not limited to the table, actually it can print div, table etc; it totally depend upon you that which part of web page you want to print by giving the id of that html element to the javascript function.
I declare a variable which is display_setting that contains the attributes of popup window, will appear in front of user, containing the content user wants to print.
The variable content_innerhtml contains the whole innerHtml of tbl_display table so that content inside the table must be printed in proper format.
Using variable document_print I open the popup window that will contain the whole content of the table tbl_display. This popup window will appear in front of user and show the content. Actually this popup window will behave like a print preview window. The print dialog will come immediately after this print preview window, if user continue to print then the print command will go to the printer and then print preview window will be closed but if user don’t want to continue then this print preview window will be self closed because I am using self.close(); function right after self.print();
Case Study:-
Now let's suppose we have a case in which we want to print the specific table but most important thing is that we have some content such as logo of the company inside that specific table, which is invisible to the user but we want to make the logo visible during print preview and printing process and after print preview that logo will again invisible to the user in the web page. Now let’s have a look over example given below.
Here’s the html code.
Now In this html code you can see that it is 99% same as the html code before this example, the only change that I made in this html code is the inclusion of company logo that I don’t want user to see when he visits web page but that logo should be visible while print preview and printing process.
To invisible the logo in web page, I applied the inline css to the image logo which is style="display:none;" and assigned an id to the logo image so that it can be appear during print preview window and printing process, this can be possible using ID attribute of the <img/> in javascript.
Now let's have a look over the javascript code that will make visible the image logo during the print preview and printing process. This javascript code is again 99% same as the javascript code before this example.
Now let's understand the javascript code. In this tablePrint() function, two steps are new. In the first step which is
I am checking through document.getElementById() that if image is invisible then make it visible. And in the second step which is
again I am going to invisible the image so that after performing print preview and printing process, the image must not be visible to the users of the web page.
I try my level best to teach you how to print using javascript with different examples.
Thanks for reading such a lengthy article. Keep in-touch with our programming tutorials.
Happy Coding
If you want to give your user the functionality to print the whole webpage then it is better approach to use built-in print function window.print() of javascript. Let’s have a look over how to use this function for hyperlink and for input button.
For Hyperlink:-
<a href= "javascript:window.print();"> Print this web page</a>
<input type="button" value="Print in javascript" onclick="window.print();">
print() is a built-in method of window object. The interesting thing of this window.print() command is that it doesn’t immediately fire the print, it actually brings the print dialog and then its depend upon user to continue with print or not.
Printing the specific area of a web page using javascript
Now let’s suppose we have some useful information and we want user to print only that information like product receipt, result card, secret information etc rather than printing the whole web page. Let’s have a look over example given below
<html> <head> <title> Print using javascript </title> </head> <body> <p> Some text…………………</p> <p> Some text………………..</p> <p> Some text………………..</p> <p>Some more text…………..</p> <table id="tbl_display" style="text-align:left;" width="100%" cellpadding="2" cellspacing="2" border="0"> <tr> <td align="left"> <p> Thank you valuable user for signing up.</p> <p> We think you’ve made a bold decision, and look forward to a productive meeting.</p> <p> Please print out a copy of this invitation - it will serve as your boarding pass on this tour. </p> <p> For additional information, you can email <a href="mailto:someone@someone.com">someone@someone.com</a> or call - xxx-xxx-xxxx, xxx-xxx-xxx and look for Mr. Someone.</p> </td> </tr> </table> <table style="text-align:left;" width="100%" cellpadding="2" cellspacing="2" border="0"> <tr> <td align="left"> <input type="button" value="Print" onclick="tablePrint();"> </td> </tr> </table> </body> </html>
Now let’s have a look over the javascript code of tablePrint() function.
<script language="javascript" type="text/javascript">
function tablePrint()
{
var display_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";
display_setting+="scrollbars=yes,width=750, height=600, left=100, top=25";
var content_innerhtml = document.getElementById("tbl_display").innerHTML;
var document_print=window.open("","",display_setting);
document_print.document.open();
document_print.document.write('<html><head><title>Print using javascript </title></head>');
document_print.document.write('<body style="font-family:verdana; font-size:12px;" onLoad="self.print();self.close();" >');
document_print.document.write(content_innerhtml);
document_print.document.write('</body></html>');
document_print.print();
document_print.document.close();
return false;
}
</script>
I declare a variable which is display_setting that contains the attributes of popup window, will appear in front of user, containing the content user wants to print.
The variable content_innerhtml contains the whole innerHtml of tbl_display table so that content inside the table must be printed in proper format.
Using variable document_print I open the popup window that will contain the whole content of the table tbl_display. This popup window will appear in front of user and show the content. Actually this popup window will behave like a print preview window. The print dialog will come immediately after this print preview window, if user continue to print then the print command will go to the printer and then print preview window will be closed but if user don’t want to continue then this print preview window will be self closed because I am using self.close(); function right after self.print();
Case Study:-
Now let's suppose we have a case in which we want to print the specific table but most important thing is that we have some content such as logo of the company inside that specific table, which is invisible to the user but we want to make the logo visible during print preview and printing process and after print preview that logo will again invisible to the user in the web page. Now let’s have a look over example given below.
Here’s the html code.
<html> <head> <title> Print using javascript </title> </head> <body> <p> Some text…………………</p> <p> Some text………………..</p> <p> Some text………………..</p> <p>Some more text…………..</p> <table id="tbl_display" style="text-align:left;" width="100%" cellpadding="2" cellspacing="2" border="0"> <tr> <td align="left"> <img src="images/company_logo.gif" id="company_logo" style="display:none;"/> <p> Thank you valuable user for signing up.</p> <p> We think you’ve made a bold decision, and look forward to a productive meeting.</p> <p> Please print out a copy of this invitation - it will serve as your boarding pass on this tour. </p> <p> For additional information, you can email <a href="mailto:someone@someone.com">someone@someone.com</a> or call - xxx-xxx-xxxx, xxx-xxx-xxx and look for Mr. Someone.</p> </td> </tr> </table> <table style="text-align:left;" width="100%" cellpadding="2" cellspacing="2" border="0"> <tr> <td align="left"> <input type="button" value="Print" onclick="tablePrint();"> </td> </tr> </table> </body> </html>
To invisible the logo in web page, I applied the inline css to the image logo which is style="display:none;" and assigned an id to the logo image so that it can be appear during print preview window and printing process, this can be possible using ID attribute of the <img/> in javascript.
Now let's have a look over the javascript code that will make visible the image logo during the print preview and printing process. This javascript code is again 99% same as the javascript code before this example.
<script language="javascript" type="text/javascript">
function tablePrint()
{
var display_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";
display_setting+="scrollbars=yes,width=750, height=600, left=100, top=25";
if(document.getElementById("company_logo").style.display=="none")
{
document.getElementById("company_logo").style.display="inline";
}
var content_innerhtml = document.getElementById("tbl_display").innerHTML;
var document_print=window.open("","",display_setting);
document_print.document.open();
document_print.document.write('<html><head><title>print using javascript
</title></head>');
document_print.document.write('<body style="font-family:verdana; font-size:12px;" onLoad="self.print();self.close();" >');
document_print.document.write(content_innerhtml);
document_print.document.write('</body></html>');
document_print.print();
document_print.document.close();
if(document.getElementById("company_logo").style.display=="inline")
{
document.getElementById("company_logo").style.display="none";
}
return false;
}
</script>
if(document.getElementById("company_logo").style.display=="none")
{
document.getElementById("company_logo").style.display="inline";
}
if(document.getElementById("company_logo").style.display=="inline")
{
document.getElementById("company_logo").style.display="none";
}
I try my level best to teach you how to print using javascript with different examples.
Thanks for reading such a lengthy article. Keep in-touch with our programming tutorials.
Happy Coding
Labels: javascript
Subscribe to:
Posts (Atom)
