Aspdotnet Studio: Javascript

Showing posts with label Javascript. Show all posts

Wednesday, 1 January 2014

Working with label Control and its Properties in Asp.net

01:33 Asp.Net Basic, CSS, HTML, Javascript, Standard Controls No comments

 



Description:- A Label is used to display the text on the Page.Using TextBox and Button we can display the text from textbox into Label control.The properties of labels are as follows


AccessKey,Attributes,BackColor ,BorderColor,BorderStyle,BorderWidth,CssClass,Enabled,Font,EnableTheming,ForeColor,Height, IsEnabled,SkinID,Style,TabIndex,ToolTip,Width,EnableViewState,Visible,
Now in this Example we need one Text Box,one Button and one Label to display the Text.





Demo:- 











Design Code:-

Code Behind:-

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void BtnlblText(object sender, EventArgs e)
    {
        lbltext.Text = TxTLabel.Text;
    }

}

Change Menu Hover Styling in Asp.net

02:57 Asp.Net Basic, CSS, HTML, Javascript No comments

Description:- In Previous articles We have learned Range Validator Email and Phone Number , Web Url Address Validation. Now in this Article We Describe How to use Range Validator Between Two values.Now in this article we learn How to change Menu Style on hover.

Demo:-

Coding:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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>
<style type="text/css">

#mnuMyWeb
{
background:darkgreen;
border:groove 3px darkblue;
}

#mnuMyWeb a
{
border-right:solid 1px lightyellow;
color:lightyellow;
padding:5px 8px 5px 8px;
display:inline-block;
}

#mnuMyWeb a:hover
{
background:lightyellow;
color:darkgreen;
}

#mnuMyWeb a.active
{
background:darkblue;
color:Red;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="mnuMyWeb" Orientation="Horizontal" runat="server">
<Items>
<asp:MenuItem Text="Home" Selected="true" NavigateUrl="~/Home.aspx" />
<asp:MenuItem Text="About Us" NavigateUrl="~/AboutUs.aspx" />
<asp:MenuItem Text="Services" NavigateUrl="#" />
<asp:MenuItem Text="Contacts" NavigateUrl="#" />
</Items>
</asp:Menu>
</div>
</form>
</body>
</html>

Allow only Numbers in Textbox Using JavaScript.

09:56 HTML, Javascript 2 comments

Description:- Dear Friends in My some previous article We Learned about Only Alphabets allow in textbox in javaScript, JQuery Javascript Some Tutorial Like as easeOut Effect in JQuery, How To make Slider in JavaScript,Wait for Downloading Counter,Highlight Searched Text in Gridview,Dropdown list atteched with Selection of another DropDown and many more Article on Asp.net,Css,JavaScript,Html,Jquery.Now In this Article We Learn That How to allow only Numbers in textbox Using JavaScript .

Demo:-

Coding:-

<html>
<head>
<title>allwon only numbers in textbox using JavaScript</title>
<script language="Javascript" type="text/javascript">

function NumberOnly(e, t) {
try {
if (window.event) {
var charCode = window.event.keyCode;
}
else if (e) {
var charCode = e.which;
}
else { return true; }
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}
catch (err) {
alert(err.Description);
}
}

</script>
</head>
<body>
<table align="center">
<tr>
<td>
<input type="text" onkeypress="return NumberOnly(event,this);" />
</td>
</tr>
</table>
</body>
</html>

Only Letters allowed in text Box Using JavaScript.

23:21 Asp.Net Basic, Javascript 1 comment

Description:- Dear Friends in My some previous article We Learned about JQuery Javascript Some Tutorial Like as easeOut Effect in JQuery, How To make Slider in JavaScript,Wait for Downloading Counter,Highlight Searched Text in Gridview,Dropdown list atteched with Selection of another DropDown and many more Article on Asp.net,Css,JavaScript,Html,Jquery.Now In this Article We Learn That How to allowed only Alphabets in textbox Using JavaScript .

Demo:-

Coding:-

<%@ 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>Aspdotnet Studio</title>
<script type="text/javascript">
function OnlyAlphabet(){
if (!FrmText.Letters.value.match(/^[a-zA-Z]+$/) && FrmText.Letters.value !="")
{
FrmText.Letters.value="";
FrmText.Letters.focus();
alert("Only Alphabets Allowed");
}
}
</script>

</head>
<body>

<table align=center>
<tr><td><form name="FrmText">
Enter Text: <input type="text" name="Letters" onkeyup="OnlyAlphabet()">
</form><br;>
</td></tr>
<script type="text/javascript">document.onload = ctck();</script>
</td></tr>
</table>
</body>
</html>

Show Hide Image Programmatically in Asp.net.

10:32 Asp.Net Basic, HTML, Javascript No comments

Description:- Dear Friends in My some previous article We Learned about JQuery Javascript Some Tutorial Like as easeOut Effect in JQuery, How To make Slider in JavaScript,Wait for Downloading Counter,Highlight Searched Text in Gridview,Dropdown list atteched with Selection of another DropDown and many more Article on Asp.net,Css,JavaScript,Html,Jquery.Now In this Article We Learn That how to Show hide Image or any other control programmatically in Asp.net.

Demo:-

Coding:-

<%@ 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">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
protected void Button1_Click(object sender, System.EventArgs e)
{
Image1.Visible = false;
}
protected void Button2_Click(object sender, System.EventArgs e)
{
Image1.Visible = true;
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>How to show, hide, visible TextBox programmatically</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2 style=" background-color:orange; color :white; width: 321px; height: 27px;">Show Hide controls in Asp.net </h2>

     

<asp:Image ID="Image1" runat="server" ImageUrl="~/1.jpg" Height="281px"
Width="274px" />
<br /><br />
             
<asp:Button
ID="Button1"
runat="server" BackColor="OrangeRed"
ForeColor="White"
Text="Hide Love"
OnClick="Button1_Click"
Font-Bold="true"
/>
<asp:Button
ID="Button2"
runat="server" BackColor="OrangeRed"
Font-Bold="true"
ForeColor="White"
Text="Show Love"
OnClick="Button2_Click"
/>
</div>
</form>
</body>
</html>

Bouncing Navigation Menu Bar easeOut Effect using Jquery in Asp.net.

05:14 Asp.Net Basic, Javascript No comments

Description:- Dear Friends in my previous Article of Jquery We learn How to Zoom Out & Zoom In Using JQuery in Asp.net and JQuery Show Hide Option Theme Change & Using Buttons,Now in this article we learn How to make Bouncing Navigation Menu Bar easeOut Effect using Jquery in Asp.net.

Demo:-

Coding:-

<%@ 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><title>jQuery Menu with Bounce Effect</title><script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script><script type="text/javascript" src="http://dev.css-zibaldone.com/js/jquery/plugins/jquery.easing.js"></script><script type="text/javascript">$(function () {$('li', '#navigation').each(function () {var $jli = $(this);var $a = $('a', $jli);$a.hover(function () {$a.stop(true, true).animate({height: '3em',lineHeight: '3em',bottom: '1em'}, 'slow', 'easeOutBounce');}, function () {$a.stop(true, true).animate({height: '2em',lineHeight: '2em',bottom: 0}, 'slow', 'easeOutBounce');});});});</script><style type="text/css">#navigation {height: 4em;margin: 0;padding: 0 1em;list-style: none;border-bottom: 2px solid #0270BF;}#navigation li {height: 100%;float: left;margin-right: 0.5em;}#navigation a {float: left;height: 2em;padding: 0 1em;background: #0270BF;color: #fff;line-height: 2;text-transform: uppercase;font-weight: bold;text-decoration: none;margin: 2em 0 0 0;letter-spacing: 0.1em;position: relative;}#navigation a:hover {background: #F86000;}</style></head><body><div><ul id="navigation"><li><a href="#">Asp.Net</a></li><li><a href="#">Jquery</a></li><li><a href="#">CSS</a></li></ul></div></body></html>

How to make A Calculator in JavaScript

10:16 HTML, Javascript No comments

Description:- In My Previous Article I Explained About How To make Slider in JavaScript,Wait for Downloading Counter,Highlight Searched Text in Gridview,Dropdown list atteched with Selection of another DropDown and many more Article on Asp.net,Css,JavaScript,Html,Jquery.Now in this article i will Explain How to create a Calculater using JavaScript,

Demo:-

Coding:-

<html>
<head>
<title>On Page Javascript</title>
<script type="text/javascript" language="javascript">
function calc()
{
var v1 = document.getElementById("txtV1").value;
var v2 = document.getElementById("txtV2").value;
var op = document.getElementById("selOperator");
op = op.options[op.selectedIndex].value;
if(chkNumeric(v1)&&chkNumeric(v2))
{
var lbl = document.getElementById("lblAnswer");
if(op == '+')
lbl.innerHTML = parseFloat(v1) + parseFloat(v2);
else if(op == '-')
lbl.innerHTML = parseFloat(v1) - parseFloat(v2);
else if(op == '*')
lbl.innerHTML = parseFloat(v1) * parseFloat(v2);
else if(op == '/')
lbl.innerHTML = parseFloat(v1) / parseFloat(v2);
}
else
{
if(!chkNumeric(v1) && !chkNumeric(v2)) alert("Please enter Numeric Values in both Boxes.");
else if (!chkNumeric(v1)) alert("Please enter a Numeric Value in First Box.");
else if(!chkNumeric(v2)) alert("Please enter a Numeric Value in Second Box.");
}
}
function chkNumeric(v)
{
var isvalid = true;
var validletters = "0123456789.";
for(i=0;i<v.length;i++)
{
if(validletters.indexOf(v.charAt(i),0)<0)
{
isvalid = false;
break;
}
}
return isvalid;
}
</script>
</head>
<body>
<input type="text" id="txtV1"/> 
<select id="selOperator">
<option selected="selected" value="+">+</option>
<option value="-">-</option>
<option value="*">x</option>
<option value="/">/</option>
</select> 
<input type="text" id="txtV2"/> 
<input type="button" value="=" onclick="calc()"/>  
<label id="lblAnswer"></label>
</body>
</html>

How to make slider in JavaScript with equal time Difference.

00:32 HTML, Javascript No comments

Demo:-

About:- In the previous Article We Learn how Wait time counter in JavaScript And Now in this Article We Learn How to make a simple slider using JavaScript.You can increase or decrease the time to change the speed of Image in the code.Please just change the images and add your image to the coding.

Coding:-

<html>
<head>
<title>Slider</title>
<script type="text/javascript" language="javascript">
function startslider(imgindex)
{
var arrImages = new Array('1.jpg','2.jpg','3.jpg','4.jpg','5.jpg');
var arrAlts = new Array('Alt1','Alt2','Alt3','Alt4','Alt5');
var imge = document.getElementById("imgSlider");
imge.src = 'images/' + arrImages[imgindex];
imge.alt = arrAlts[imgindex];
if(imgindex == 4) imgindex = 0;
else imgindex++;
setTimeout('startslider(' + imgindex +')',1000); }
</script>
</head>
<body onload="startslider(0)">
<img src="" alt="" id="imgSlider" style="width:480px;height:220px;border:solid 2px black;"/>
</body>
</html>

Wait for Downloading Or Click Here To Download Counter in JavaScript.

00:46 Asp.Net Basic, HTML, Javascript No comments

Demo:-

About:- In Previous Article I Write About How to Highlight Searched Text In Gridview . In this Article using JavaScript Learn How to create time wait Counter for downloading anything.

Coding:-

<html>
<head>
<title>Counter Example</title>

<script type="text/javascript" language="javascript">
function startcounter(s)
{
var de = document.getElementById("dCounter");
de.innerHTML = 'Please Wait For<br>' + s + '<br>Seconds';
if(s == 0)
{
document.getElementById("dAd").style.display = 'none';
document.getElementById("dDownload").style.display = 'block';
}
else
{
s--;
setTimeout('startcounter(' + s + ')',500);
}
}
function hidedcounter()
{
document.getElementById("dCounter").style.display = 'none';
}
</script>
</head>
<body onload="startcounter(10)">
<center>
<div id="dCounter" style="font:bold 30px verdana;"></div>
<br><br>
<div id="dAd">
<img src="hydrangeas.jpg" width="300" height="300" border="1" alt="Advertisement"/>
<br><br>
Or <br><a href="#" onclick="startcounter(0),hidedcounter()">Click Here</a>
</div>
<div id="dDownload" style="display:none;">
<input type="button" value="Download"/>
</div>
</center>
</body>
</html>

Drop Down List Attached With Selection Of Another Drop Down Like Country,State,City Selection

01:17 Ado.Net, Asp.Net Basic, Dropdown list, Javascript No comments

Demo:-

Instruction:- To Execute this code first of all make three table in a Database.which are are connected to each other with unique id.Simply make three tables like this..

CountryTable

StateTable

CityTable

And now these are design & code Behind Paste this code in your file

Design Code:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CountryDropdowns.aspx.cs" Inherits="CountryDropdowns" %>
<!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>CasCading Dropdowns Sample</title>
<style type="text/css">
.style1
{
height: 30px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table align="center" cellpadding="10px" cellspacing="5" style="background:skyblue;width:400px;border:solid 2px darkred;padding:8px;">
<tr>
<td colspan="2" valign="bottom" class="style1">
<h3>Drop Down Menu Attached With Selection Of One Another</h3> <hr />
</td>
</tr>
<tr>
<td>
Select Country:
</td>
<td>
<asp:DropDownList ID="ddlCountry" runat="server" AutoPostBack="true"
onselectedindexchanged="ddlCountry_SelectedIndexChanged" Height="16px"
Width="119px"></asp:DropDownList>
</td>
</tr>
<tr>
<td>
Select State:
</td>
<td>
<asp:DropDownList ID="ddlState" runat="server" AutoPostBack="true"
onselectedindexchanged="ddlState_SelectedIndexChanged" Height="18px" Width="122px"></asp:DropDownList>
</td>
</tr>
<tr>
<td>
Select City:
</td>
<td>
<asp:DropDownList ID="ddlRegion" runat="server" Height="19px" Width="125px"></asp:DropDownList>
</td>
</tr>
<tr><td></td><td style="font-size:small" align="right">R.Upadhyay</td></tr>
</table>
</div>
</form>
</body>
</html>

Code Behind:-

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;

public partial class CountryDropdowns : System.Web.UI.Page
{
private String strConnection = "Data Source=IT-HP\\sqlexpress;Initial Catalog=Employee;Integrated Security=True";
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
BindContrydropdown();
}
}
protected void BindContrydropdown()
{
SqlConnection con = new SqlConnection(strConnection);
con.Open();
SqlCommand cmd = new SqlCommand("select * from CountryTable", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
ddlCountry.DataSource = ds;
ddlCountry.DataTextField = "CountryName";
ddlCountry.DataValueField = "CountryID";
ddlCountry.DataBind();
ddlCountry.Items.Insert(0, new ListItem("--Select--", "0"));
ddlState.Items.Insert(0, new ListItem("--Select--", "0"));
ddlRegion.Items.Insert(0, new ListItem("--Select--", "0"));
}
protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)
{
int CountryID = Convert.ToInt32(ddlCountry.SelectedValue);
SqlConnection con = new SqlConnection(strConnection);
con.Open();
SqlCommand cmd = new SqlCommand("select * from StateTable where CountryID="+CountryID, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
ddlState.DataSource = ds;
ddlState.DataTextField = "StateName";
ddlState.DataValueField = "StateID";
ddlState.DataBind();
ddlState.Items.Insert(0, new ListItem("--Select--", "0"));
if(ddlState.SelectedValue=="0")
{
ddlRegion.Items.Clear();
ddlRegion.Items.Insert(0, new ListItem("--Select--", "0"));
}
}
protected void ddlState_SelectedIndexChanged(object sender, EventArgs e)
{
int StateID = Convert.ToInt32(ddlState.SelectedValue);
SqlConnection con = new SqlConnection(strConnection);
con.Open();
SqlCommand cmd = new SqlCommand("select * from CityTable where StateID=" + StateID, con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
ddlRegion.DataSource = ds;
ddlRegion.DataTextField = "CityName";
ddlRegion.DataValueField = "CityID";
ddlRegion.DataBind();
ddlRegion.Items.Insert(0, new ListItem("--Select--", "0"));
}
}

Alert Message Box Using Javascript Codebehind Asp.net.

23:18 Asp.Net Basic, Javascript No comments

Demo:-

Design Code:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableEventValidation="false" %>
<!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>Aspdotnet Studio</title>
<script type="text/javascript">
function Showalert() {
alert('Alert from codebehind');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnS" runat="server" Text="Show alert" onclick="btnS_Click" />
<asp:Button ID="btnC" runat="server" Text="Call JavaScript Function"
onclick="btnC_Click" />
</div>
</form>
</body>
</html>

Code Behind:-

using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
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;
using System.Xml.Linq;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnS_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this,GetType(),"showalert","alert('This is Simple Alert Message');",true);
}
protected void btnC_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, GetType(), "displayalertmessage", "Showalert();", true);
}
}