Web Development: March 2012

Thursday, March 22, 2012

Chart in Asp.net

In this example i am going to show how to generate charts in Asp.net using C#

First you have to Download Chart.dll a third party control.

after download.

1 open/create new website in asp.net application.
2. Add referance of chart.dll into application.
    right click on solution explorer>> add reference>>browse>>browse & select    chart.dll then click add.
3. create new file. default.aspx
4. register webchart into default.aspx (html) page

<%@ Register TagPrefix="Web" Namespace="WebChart" Assembly="WebChart" %>

5.
add control into page.

<Web:ChartControl runat="server" ID="ChartControl3" Height="400" Width="350" GridLines="none" Legend-Position="Bottom" />

6. goto default.aspx.cs page & add namespace
   using System.Drawing;
using System.Data.SqlClient;
using WebChart;

7.

protected void Page_Load(object sender, EventArgs e)
    {
CreateChart();
}

void CreateChart() {
    PieChart chart = new PieChart();
    chart.DataSource = GetDataSet().Tables[0].DefaultView;
    chart.DataXValueField = "Title";
    chart.DataYValueField = "Price";
    chart.DataLabels.Visible = true;
    chart.DataLabels.ForeColor = System.Drawing.Color.Blue;
    chart.Shadow.Visible = true;
    chart.DataBind();
    chart.Explosion = 10;
    ChartControl1.Charts.Add(chart);
    ChartControl1.RedrawChart();
}

DataSet GetDataSet() {
    DataSet ds = new DataSet();
    DataTable table = ds.Tables.Add("My Table");
    table.Columns.Add(new DataColumn("Title"));
    table.Columns.Add(new DataColumn("Price", typeof(int)));

    Random rnd = new Random();
    for (int i = 0; i < 10; i++) {
        DataRow row = table.NewRow();
        row["Title"] = "Title:" + i.ToString();
        row["Price"] = rnd.Next(1, 100);
        table.Rows.Add(row);
    }
    return ds;
}

Java Script Events and there Descriptions

Event	Description	Applicable on Controls
onAbort	When user cancel image loading	Image
onBlur	When control lost its Focus	Button, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, TextArea, Window
onChange	Combo index change/Textbox data change	Text, TextArea, Select
onClick	Most useful event. Occur when user click on a button	Button, Checkbox, Link, Radio, Submit
onDblClick	When user double click on a Link	Link
onFocus	When an object get focus	Button, Checkbox, Radio, Reset, Select, Submit, Text, TextArea
onKeyDown	When the key is down means pressing time	Link, TextArea
onKeyPress	When user presses/holds a key	Link, TextArea
onKeyUp	When user release a key	Link, TextArea
onLoad	After completion of loading a page	Window, Image
onMouseDown	When mouse presses	Link, Button, Document
onMouseMove	When user moves the mouse	Link, Button, Document
onMouseOut	When user moves the mouse away from a object	Image, Link
onMouseOver	When user moves the mouse over a object	Image, Link
onMouseUp	When user release mouse	Document, Button, Link
onMove	When user moves the browser window or a frame	Document, Button, Link
onReset	By clicking on reset Button	Form
onResize	When user resizes the browser window or a frame	Window
onSelect	When user select text	Text, TextArea
onSubmit	When user clicks the submit button	Form
onUnload	When user leaves the page/close the browser	Window

Example onClick Event:

function clck()
{
// Code goes here
alert("Click event fired");
// Return false never make a post back to server.
// so one can add validation by using this concept. If return true then the page will be post back to server
return false;
}

Add the handler:

<asp:button runat="server" id="cmdOnClick" text="OnClientClick" onclientclick="return clck();">
<asp:button runat="server" id="cmdOnClick" text="OnClientClick" onclientclick="return clck();">
<input type="button" name="cmdHTML" value="HTML onClick" onclick="return clck();">

Tuesday, March 20, 2012

Using javascript check uploaded file size for (Internet Explorer)

Note:- Only working with Internet explorer
for FireFox,Crome,Safari,Opera check this page

Monday, March 19, 2012

Image Uploading validation using Javascript

JavaScript Function Code:-

<script language="javascript" type="text/javascript">
            function validate() {
                var result = false;
                var upfile = document.getElementById("FileUpload1").value;
                if (upfile != "") {
                    var accept = "png,gif,jpg,jpeg,PNG,GIF,JPG,JPEG".split(',');
                    var getExtention = upfile.split('.');
                    var extention = getExtention[getExtention.length - 1];
                    for (i = 0; i < accept.length; i++) {
                        if (accept[i] == extention) {
                            result = true;
                            break;
                        }
                    }
                    if (!result) {
                        alert("allowed file extetions are png,gif,jpg,jpeg");
                    }

                }
                else {
                    alert("select image to Upload");
                }
                return result;
            }
        </script>

write this javascript function then use this function as given below code in your button or any other control as per use.

<INPUT TYPE=FILE NAME="FileUpload1"><BR>
<INPUT TYPE=SUBMIT VALUE="Submit" onClick="return validate();">

<asp:Button ID="btnUploadImage" runat="server" Text="Upload Image"
OnClientClick="return validate();" onclick="btnUploadImage_Click" />

Numeric key validation using JavaScript

we can check entered keyis numeric or not using javascript coding in our web page.

check example given below:-

Only Numeric key can be Entered :

html code for this:-

<html>
<head>
<script type = "text/javascript">
    function isNumeric(keyCode)
    {
        if (keyCode!=8) //if the key is the backspace key
         {
        if ((keyCode<48||keyCode>57) && (keyCode<96||keyCode>105))          return false;
    else
            return true;
    }
    }
    </script>
</head>
<body>
Only Numeric key Entered In text Box :
<input type="text" id="txtBox1" onkeydown = "return isNumeric(event.keyCode);"/>
</body>
</html>

Note:
          ASCII code for integers 0-9 is 48-57.
          ASCII code for extra numeric key pad's integers 0-9 is 96-105.

How to Add Flying Twitter Bird to Blog/Website

follow these steps to add Flying twitter bird

Goto DASHBOARS>>DESIGN-->EDIT HTML

then ctrl+f for find </body>
and paste given code below </body>

<!-- Twitter Bird start Techblaster.net -->
<script src='http://yourjavascript.com/1523826141/Flying twitter bird.js' type='text/javascript'>

</script>
<script type='text/javascript'>
var twitterAccount = "Add your Twitter name here";
var tweetThisText = " <data:blog.pageTitle/>: <data:blog.url/> ";
tripleflapInit();
</script>
<span style='font-size:11px;position:absolute;'/><a href='http://www.techblaster.net' target='_blank'>Twitter Bird Gadget</a>
<!-- Twitter Bird end Techblaster.net -->

showing classical clock using JavaScript in html/asp.net

classical clock using JavaScript

code :-

<html >
<head>
<script type="text/javascript">

var H='....';

var H=H.split('');

var M='.....';

var M=M.split('');

var S='......';

var S=S.split('');

var Ypos=0;

var Xpos=0;

var Ybase=8;

var Xbase=8;

var dots=12;



function clock(){

var time=new Date ();

var secs=time.getSeconds();

var sec=-1.57 + Math.PI * secs/30;

var mins=time.getMinutes();

var min=-1.57 + Math.PI * mins/30;

var hr=time.getHours();

var hrs=-1.57 + Math.PI * hr/6 + Math.PI*parseInt(time.getMinutes())/360;

for (i=0; i < dots; ++i){

document.getElementById("dig" + (i+1)).style.top=0-15+40*Math.sin(-0.49+dots+i/1.9).toString() + "px";

document.getElementById("dig" + (i+1)).style.left=0-14+40*Math.cos(-0.49+dots+i/1.9).toString() + "px";

}

for (i=0; i < S.length; i++){

document.getElementById("sec" + (i+1)).style.top =Ypos+i*Ybase*Math.sin(sec).toString() + "px";

document.getElementById("sec" + (i+1)).style.left=Xpos+i*Xbase*Math.cos(sec).toString() + "px";

}

for (i=0; i < M.length; i++){

document.getElementById("min" + (i+1)).style.top =Ypos+i*Ybase*Math.sin(min).toString() + "px";

document.getElementById("min" + (i+1)).style.left=Xpos+i*Xbase*Math.cos(min).toString() + "px";

}

for (i=0; i < H.length; i++){

document.getElementById("hour" + (i+1)).style.top =Ypos+i*Ybase*Math.sin(hrs).toString() + "px";

document.getElementById("hour" + (i+1)).style.left=Xpos+i*Xbase*Math.cos(hrs).toString() + "px";

} 

setTimeout('clock()',50);

}
</script>
<style type="text/css">

div.dig, div.hour, div.min, div.sec

{

position:absolute;

}

div.hour, div.min, div.sec

{

width:2px;

height:2px;

font-size:2px;

}

div.dig

{

width:30px;

height:30px;

font-family:arial,verdana,sans-serif;

font-size:10px;

color:#000000;

text-align:center;

padding-top:10px

}

div.min

{

background:#0000FF;

}

div.hour

{

background:#000000;

}

div.sec

{

background:#FF0000;

}

</style>
</head>
<body >
    <form name="form1" >
    
    <div style="width:120px;height:100px;position:relative;left:58px;top:50px;" >

 <div id="dig1" class="dig">1</div>

 <div id="dig2" class="dig">2</div>

 <div id="dig3" class="dig">3</div>

 <div id="dig4" class="dig">4</div>

 <div id="dig5" class="dig">5</div>

 <div id="dig6" class="dig">6</div>

 <div id="dig7" class="dig">7</div>

 <div id="dig8" class="dig">8</div>

 <div id="dig9" class="dig">9</div>

 <div id="dig10" class="dig">10</div>

 <div id="dig11" class="dig">11</div>

 <div id="dig12" class="dig">12</div>
 
  <div id="hour1" class="hour"></div>

 <div id="hour2" class="hour"></div>

 <div id="hour3" class="hour"></div>

 <div id="hour4" class="hour"></div>

 <div id="min1" class="min"></div>

 <div id="min2" class="min"></div>

 <div id="min3" class="min"></div>

 <div id="min4" class="min"></div>

 <div id="min5" class="min"></div>

 <div id="sec1" class="sec"></div>

 <div id="sec2" class="sec"></div>

 <div id="sec3" class="sec"></div>

 <div id="sec4" class="sec"></div>

 <div id="sec5" class="sec"></div>

 <div id="sec6" class="sec"></div>

</div>
<input type="button" value="click to run "   onclick="clock()"/>

    
    </form>
</body>
</html>

digital clock using javascript

we can create digital clock using javascript using given code

example:-

Digital Clock By Critical Codes

code:-

<html>
<head>
</head>
<body>
<script language="javascript">
function func()
{
mydate=new Date();
h=mydate.getHours();
m=mydate.getMinutes();
s=mydate.getSeconds();
document.f.h.value=h;
document.f.m.value=m;
document.f.s.value=s;
}
window.setInterval("func()",1000)
</script>
<h3 align="center">Digital Clock By Critical Codes</h3>
<br><br>
<center>
<form name="f"> <font color="green">
hour : <input type="text" name="h" size="2">
minute : <input type="text" name="m" size="2">
sec : <input type="text" name="s" size="2"></font>
</form>
</center>
</body>
</html>

Thursday, March 15, 2012

Css for Ajax tab Container

Download Images: Ajax_tab_Images.rar

add this css code to between <head></head> tag of page
then add class="tab" to your ajax tab container tag. like this

<ajaxToolkit:TabContainer ID="TabCon1" runat="server" ScrollBars="Auto" CssClass="Tab">

Friday, March 2, 2012

Visible,Show,Hidden,Hide Controls using JavaScript ASP.NET

when we want to use this functionality we have to find control id in Javascript

step 1 for find control id --------

var e = document.getElementById('rw1');

step 2 then we use control_id.style property for this-------

for visibility of control

e.removeAttribute("style");

we can use e.style.display='block'; in place of e.removeAttribute("style");
but can disturb structure of page.
so we should use e.removeAttribute("style");

for hide control

g.style.display='none';

Example:-
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>

<!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>Untitled Page</title>
     <script language="javascript" type="text/javascript">

     function toggle_v(me) {
      var e = document.getElementById('rw1');
      var f = document.getElementById('rw2');
      var g = document.getElementById('rw3');
      if(me.value=='4K')
      {
      e.removeAttribute("style");//e.style.display='block';
      f.style.display='none';
      g.style.display='none';
      }
      else if (me.value=='4J')
      {
      e.removeAttribute("style");
      f.removeAttribute("style");
      g.style.display='none';
      }
      else if(me.value=='4M')
      {
      e.style.display='none';
      f.style.display='none';
      g.removeAttribute("style");
      }
      else
      {
      e.style.display='none';
      f.style.display='none';
      g.style.display='none';
      }

   }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    <b>PG Officer Action </b>
                </td>
                <td >
                    <asp:DropDownList ID="select" runat="server" onchange="toggle_v(this);">
                        <asp:ListItem Text="-- PLEASE SELECT --" Value="XX" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Aditya Pratap Singh" Value="4K"></asp:ListItem>
                        <asp:ListItem Text="Akhilesh Gupta" Value="4J"></asp:ListItem>
                        <asp:ListItem Text="Abhishek Kumar Rai" Value="4M"></asp:ListItem>
                     </asp:DropDownList>
                </td>
            </tr>

            <tr id="rw1" style="display: none">
                <td>
                    <b>Address </b>
                </td>
                <td>
                    <asp:TextBox ID="TxtLetterContNTS" runat="server" BorderStyle="Solid" BorderWidth="1px"
                      TextMode="MultiLine" height="200px" Width="350px"   ></asp:TextBox>
                </td>
            </tr>
            <tr id="rw2" style="display: none">
                <td>
                    <b>Do you want to send Address ? </b>
                </td>
                <td style="margin-left: 20px;">
                    <asp:RadioButtonList ID="rdb" runat="server" RepeatDirection="Horizontal">
                        <asp:ListItem Selected="True" Text="Yes" Value="Y"></asp:ListItem>
                        <asp:ListItem Text="No" Value="N"></asp:ListItem>
                    </asp:RadioButtonList>
                </td>
            </tr>
            <tr id="rw3" style="display: none">
                <td>
                    <b>Remarks </b>
                </td>
                <td style="margin-left: 20px;">
                    <asp:TextBox ID="txtremarks" runat="server" BorderStyle="Solid" BorderWidth="1px"
                      TextMode="MultiLine" height="200px" Width="350px"></asp:TextBox>
                </td>
            </tr>

        </table>
    </div>
    </form>
</body>
</html>

Thursday, March 22, 2012

Tuesday, March 20, 2012

Monday, March 19, 2012

Thursday, March 15, 2012

Friday, March 2, 2012

Pages