-->

Friday, 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:
Print the asp.net webpage using button

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.

Wednesday, June 17, 2015

ToolTip on specific DropdownList item in asp.net c#

Today i am talking about tooltip, First of all i introduce you , what is tooltip? When our mouse cursor move over the object then appear a rectangle shape with text this things known as tooltip. When we work with particular item then easy set the tooltip on it. But when we work on collection then we put some ideas on it. Like first to access each item from the collection then apply tooltip on each accessed item. Today, i want to give a simple example on it. I have a database table with three columns, see below:


 Database table(country table)

CREATE TABLE [dbo].[country] (
    [CountryId]    INT            IDENTITY (1, 1) NOT NULL,
    [CountryName]  NVARCHAR (MAX) NULL,
    [Countryimage] NVARCHAR (MAX) NULL,
    PRIMARY KEY CLUSTERED ([CountryId] ASC)
);

First to add some item in the table after then you have to access items. If you want to add items in the table by the help visual studio server explorer then do the following.

Right click on your table name --> Select show table data

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>


</head>
<body>
    <form id="form1" runat="server">
    <div>
<asp:DropDownList ID="DropDownList1" runat="server"  Height="26px" OnDataBound="DropDownList1_DataBound" Width="142px" DataSourceID="SqlDataSource1" DataTextField="CountryName" DataValueField="CountryId"></asp:DropDownList>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [country]"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

How to design above mentioned code. The answer is :Bind the DropdownList with the SqlDataSource also SqlDataSource Control connect with database table. The above mentioned code automatically generated by the visual studio.

Code Behind Code

protected void DropDownList1_DataBound(object sender, EventArgs e)
    {
        DropDownList ddl = sender as DropDownList;
        if (ddl != null)
        {
            foreach (ListItem li in ddl.Items)
            {
                li.Attributes["title"] = li.Text;

            }
        }
    }

After bind the Dropdownlist you have to access each item from the list by using DataBound event. Use foreach loop to access all item one by one from the list also apply tooltip on each item by the help of Attribute property.

Tuesday, June 16, 2015

How to create array using JQuery also insert item at run time

Array is a collection of similar item in programming language but is case of scripting language all variable treat as a variable type so we don't identify the type of it. In JQuery we have to create array at runtime, like
var array_name=[];
If you want to insert some item in it then use push(var item ) method.



<%@ Page Language="C#" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
$(function(){
var array_name=[];
$('#Button1').click(function(){
var textbox_value=$('#Text1').val();
array_name.push(textbox_value);

for(var i=0;i<array_name.length;i++)
alert(array_name[i])
});
})
</script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    Enter Your name:
<input id="Text1" type="text" value="Jacob" /><br />
<input id="Button1" type="button" value="button" />
    </div>
    </form>
</body>
</html>
When we click on button run JQuery function and insert item in the array.

Friday, June 12, 2015

How to convert decimal number to round off figure using JQuery

If you want to display decimal number to fix digit number. I mean to say i have a decimal number like 123.123 and i want to display round of number then use Jquery round method.


 <%@ Page Language="C#" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
$(function(){
$('#Button1').click(function(){
$('#result').html(Math.round($('#Text1').val()))
});
})
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    Enter Number: <input id="Text1" type="text" value="123.123" />
<input id="Button1" type="button" value="Round Off value" />
<br />
<label id="result" style="font-size:16px" />
    </div>
    </form>
</body>
</html>
When we click on the button , TextBox value will be converted into Round Off value using JQuery method.

Thursday, June 11, 2015

How to get Elements of HTML using id and class in JQuery

How to get the element from the html file using their id and class property. In my previous article we have already get the html element from their id property. But in this article we will get the element from their class name. Lets take a simple example to demonstrate the article.

<%@ Page Language="C#" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
$(function(){
$('#Button1').click(function () {
var firstdiv = $('#first').html();
alert(firstdiv);


var getclass = $('.test').html();

alert(getclass);

});


})
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="first" style="border: 1px solid #009900; padding: 10px">
    Welcome to my website
    </div>

<div style="border: 1px solid #00ffff; padding: 10px" class="test">

Get This Text By class
</div>
<input id="Button1" type="button" value="Get Element By Id" />
    </form>
</body>
</html>
When we click on the button a alert message have to generate with some message. Using html () method we can get the text of the tag.

Sunday, June 7, 2015

Check Whether string match or not using JQuery

If you want to search string from given string then you should use String class. A String class have different methods through them we can search any text from the given Text. In this example, i will take indexOf() method , its a more popular method. Actually This method work when your search characters sequence match with the given text. Now , take a simple example of it.


<%@ Page Language="C#" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<script src="Scripts/jquery-1.10.2.js"></script>

<script>
$(function () {

$('#Button1').click(function () {

if ($('#Text1').val().indexOf('jacob') != -1) {
alert('string match');
return true;
}

else {

alert('string doesnt match');
return false;
}


});

})

</script>
</head>
<body>
    <form id="form1" runat="server">

    <div>
    Example of string , exist or not
    </div>
<input id="Text1" type="text" value="jacob" /><br />
<input id="Button1" type="button" value="button" />

    </form>
</body>
</html>
In this example when we press the button,the entered text in the textbox  match with the 'jacob' string which is defined in the index( ) method. If your entered text match then Jquery Return true other wise else. Here '-1' means , null value search.

Friday, June 5, 2015

How to remove content from division also remove it using Jquery methods

Remove content from the division or remove complete div from the page. In these types of problem you can use JQuery. In Jquery we have a empty( ) and remove( ) function. Both functions are used easily. Ok, let take a simple example , in which we have a division with border style and text. If i want to remove content of the div then first to find the division using JQuery by this method.
$('# id of the division')
After find the division you can use empty method, Through this method we can remove content of the division.


<%@ Page Language="C#" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
$(function(){

$('#Button1').click(function(){
$('#contentdiv').empty();
});


$('#Button2').click(function(){
$('#contentdiv').remove();

});

})

</script>
</head>
<body>
    <form id="form1" runat="server">

<div id="contentdiv" style="border: thick solid #FF0000"> Welcome to http://dotprogramming.blogspot.com</div>
    <div>
<input id="Button1" type="button" value="Empty Division" />
<input id="Button2" type="button" value="Remove Division" />
    </div>
    </form>
</body>
</html>

Here,
We have a three element in the body section, first one is division with Text, second and third are buttons. First to place the ".js" file in the head section from script folder of your visual studio's solution or you can use "http://code.jquery.com/jquery-1.8.2.js" . Now, start the script block. In the script block start JQuery with the function. Inside the function, first of all get the first button by their id property then perform click operation on it. On the click event , generate function , in it you can get the division by also their id property then you can use empty ( ) function. Similarly do all these things with the second button.
© Copyright 2013 Computer Programming | All Right Reserved