Articles on .NET Technologies: October 2011

Friday, 14 October 2011

How to use OnTextChanged event in TextBox

TextBoxOnTextChanged.aspx

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

<!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 TextBox1_TextChanged(object sender, System.EventArgs e)
{
TextBox2.Text = TextBox1.Text;
}
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>How to use OnTextChanged event in TextBox</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2 style="color:Red">TextBox Example: OnTextChanged</h2>
<asp:Label
ID="Label1"
runat="server"
Text="Email"
>
</asp:Label>
<asp:TextBox
ID="TextBox1"
runat="server"
AutoPostBack="true"
OnTextChanged="TextBox1_TextChanged"
>
</asp:TextBox>
<br /><br />
<asp:Label
ID="Label2"
runat="server"
Text="Confirm Email"
>
</asp:Label>
<asp:TextBox
ID="TextBox2"
runat="server"
BackColor="LightGoldenrodYellow"
ForeColor="Crimson"
>
</asp:TextBox>
</div>
</form>
</body>
</html>

Click Here!

Thursday, 13 October 2011

Javascript validate positive integer value with decimal places

This javascript function will allow user to enter integer value with decimal places.

This JavaScript function you can all in onkeypress event of the textbox and it will validate the user entered value in client side.

function allowPositiveNumber(e) {
            var charCode = (e.which) ? e.which : event.keyCode
  
            if (charCode > 31 && (charCode < 46 || charCode > 57 )) {
                return false;
            }
            return true;
 
}

And Below is the HTML Text Box code

<input name="myTextBox" onkeypress="return allowPositiveNumber(event);" /><br>

Extended ASCII Codes

ASCII Table and Description

Monday, 10 October 2011

Call Page Method Using Javascript

Hi all,

Try this example to Call Page Method Using Client Side -Javascript in ASP.Net

ASP.Net AJAX ScriptManager allows you to call Server Side ASP.net methods from client side without any PostBack using PageMethods. Actually it is an AJAX call to the server but it allows us to call the method or function defined server side.

Enabling PageMethods
The first thing you need to do is add a ASP.Net AJAX ScriptManager to the page and set itsEnablePageMethods property to true as shown below

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>

HTML Markup :-

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<div>
Your Name :
<asp:TextBox ID="txtUserName" runat="server" ></asp:TextBox>
<input id="btnGetTime" type="button" value="Show Current Time" onclick="ShowCurrentTime()"/>
</div>
</form>

Client Side Method :-

<script type="text/javascript">
function ShowCurrentTime() {
PageMethods.GetCurrentTime(document.getElementById("<%=txtUserName.ClientID%>").value, OnSuccess);
}
function OnSuccess(response, userContext, methodName) {
alert(response);
}
</script>

Server Side Methods :-

[System.Web.Services.WebMethod]
publicstaticstring GetCurrentTime(string name)
{
return"Hello " + name + Environment.NewLine + "The Current Time is: "
        + DateTime.Now.ToString();
}

Hope this helps
Good Luck

Get Value of checked item in CheckListBox

Hi all,
try this example to Get Value of checked item in CheckListBox using Javascript
1) Add this Javascript code :-

<script language="javascript" type="text/javascript">
function CheckItem() {
var tbl = document.getElementById('<%= CheckBoxList1.ClientID %>').childNodes[0];
alert(tbl.childNodes[i].childNodes.length);
for (var i = 0; i < tbl.childNodes.length; i++) {
for (var k = 0; k < tbl.childNodes[i].childNodes.length; k++) {
if (tbl.childNodes[i].childNodes[k].nodeName == "TD") {
var currentTD = tbl.childNodes[i].childNodes[k];
for (var j = 0; j < currentTD.childNodes.length; j++) {
if (currentTD.childNodes[j].nodeName == "SPAN") {
var currentSpan = currentTD.childNodes[j];
for (var l = 0; l < currentSpan.childNodes.length; l++) {
if (currentSpan.childNodes[l].nodeName == "INPUT" && currentSpan.childNodes[l].type == "checkbox") {
var currentChkBox = currentSpan.childNodes[l];

if (currentChkBox.checked) {
alert(currentSpan.alt);
}
}
}
}
}
}
}
}
}
</script>

and HTML Code will be :-

<asp:CheckBoxList ID="CheckBoxList1" runat="server"OnDataBound="CheckBoxList1_DataBound" AppendDataBoundItems="true" >
    </asp:CheckBoxList>
     <input id="Button1" type="button" value="button" onclick="javascript:CheckItem();" />

and in code behind :-

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

CheckBoxList1.DataSource = BindUsers();

CheckBoxList1.DataTextField = "User_Name";

CheckBoxList1.DataValueField = "User_ID";

CheckBoxList1.DataBind();

}

protected void CheckBoxList1_DataBound(object sender, EventArgs e)

{

CheckBoxList chkList = (CheckBoxList)(sender);

foreach (ListItem item in chkList.Items)

{

item.Attributes.Add("alt", item.Value);

}

Hope this helps
Good Luck

Validate Number of Checked items in CheckListBox using Javascript

Hi all ,
try this example to Validate Number of Checked items in CheckListBox using Javascript
try this Javascript function :-

<script language="javascript" type="text/javascript">
var atLeast = 1
function Validate() {
var CHK = document.getElementById("<%=CheckBoxList1.ClientID%>");
var checkbox = CHK.getElementsByTagName("input");
var counter = 0;
for (var i = 0; i < checkbox.length; i++) {

if (checkbox[i].checked) {
counter++;

}
}
if (atLeast > counter) {
alert("Please select atleast " + atLeast + " item(s)");
return false;
}
return true;
}
</script>

The HTML Page will be :-

<asp:CheckBoxList ID="CheckBoxList1" runat="server" >
</asp:CheckBoxList>
<input id="Button1" type="button" value="button" onclick="javascript:Validate();" />

Use Required Field Validator for CheckboxList

<script language="javascript" type="text/javascript">
    function ValidateChkList(source, arguments)
    {                                                   
        arguments.IsValid = IsCheckBoxChecked() ? true : false;  

    }

    function IsCheckBoxChecked()
    {   
        var isChecked = false;
        var list =document.getElementById('<%= CheckBoxList1.ClientID %>');
        if(list != null)
        {
         for (var i=0; i<list.rows.length; i++)
         {
          for (var j=0; j<list.rows[i].cells.length; j++)
          {
           var listControl = list.rows[i].cells[j].childNodes[0];                      
           if(listControl.checked)
           {                      
            isChecked = true;
           }
          }
         }
         }
         return isChecked;

    }
    </script>

   <div>
        <asp:CheckBoxList ID="CheckBoxList1" runat="server">
            <asp:ListItem Text="C#" ></asp:ListItem>
            <asp:ListItem Text="VB"></asp:ListItem>
        </asp:CheckBoxList>
        <asp:CustomValidator ID="CustomValidator1" ClientValidationFunction="ValidateChkList"
            runat="server" >Required.</asp:CustomValidator>
    </div>
    <div>
        <asp:Button ID="Button2" runat="server" Text="Submit" OnClick="Button2_Click"  />
    </div>

Friday, 7 October 2011

Using System.Xml, System.Xml.Xsl, System.Xml.XPath Namespace in asp.net

XSLTNamespace.aspx

<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Import Namespace="System.Xml" %>
<%@ Import Namespace="System.Xml.Xsl" %>
<%@ Import Namespace="System.Xml.XPath" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
void Page_Load(object sender, System.EventArgs e)
{
string xmlFilePath = Request.PhysicalApplicationPath + @"App_Data\ITBookList.xml";
string xsltFilePath = Request.PhysicalApplicationPath + @"App_Data\ITBookList.xslt";
XPathDocument xPathDoc = new XPathDocument(xmlFilePath);
XslCompiledTransform transform = new XslCompiledTransform();
transform.Load(xsltFilePath);
transform.Transform(xPathDoc, null, Response.Output);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Using System.Xml, System.Xml.Xsl, System.Xml.XPath Namespace in asp.net</title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>

ITBookList.xslt

<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html"/>

<xsl:template match="/">

<html>

<head>

<title>XSLT document for display book list</title>

</head>

<body>

<h2 style="color:DeepPink; font-style:italic;">How to use System.Xml, System.Xml.Xsl, System.Xml.XPath Namespace in asp.net</h2>

<br />

<td>Name of Author</td>

<td>Book Price</td>

</tr>

<xsl:for-each select="books/book">

<xsl:value-of select="id"/>

</td>

<xsl:value-of select="name"/>

</td>

<xsl:value-of select="author"/>

</td>

<xsl:value-of select="price"/>

</td>

</tr>

</xsl:for-each>

</table>

</body>

</html>

</xsl:template>

</xsl:stylesheet>

ITBookList.xml

<?xml version="1.0" ?>

<books>

<name>Beginning XML Databases</name>

<author>Gavin Powell</author>

</book>

<name>ASP.NET 3.5 Website Programming: Problem - Design - Solution</name>

<author>Chris Love</author>

</book>

<name>jQuery for ASP.NET Developers</name>

<author>Joe Brinkman</author>

</book>

<name>ASP.NET MVC 1.0 Test Driven Development: Problem - Design - Solution</name>

<author>Emad Ibrahim</author>

</book>

<name>Beginning XSLT and XPath: Transforming XML Documents and Data</name>

<author>Ian Williams</author>

</book>

<name>XSLT 2.0 and XPath 2.0 Programmer's Reference, 4th Edition</name>

<author>Michael Kay</author>

</book>

<name>Professional Microsoft SQL Server 2008 Programming</name>

<author>Robert Vieira </author>

</book>

</books>

Tuesday, 4 October 2011

Change label value according to the dynamic radio button values:

Javascript for Maxlength in Textarea

Description: This is a simple but effective script for extending your textarea with a maxlength attribute, so the user's input cannot exceed a certain number of characters. Works with any number of textareas on the page.

Step 1: Add the below script to the <HEAD> section of your page:

<script type="text/javascript">
function ismaxlength(obj){var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""
if (obj.getAttribute && obj.value.length>mlength)
obj.value=obj.value.substring(0,mlength)
}
</script>

Step 2: Inside any textarea you wish to add a "maxlength" attribute to, simply do the following:

<textarea maxlength="40" onkeyup="return ismaxlength(this)"></textarea>

The part in red is what you should add, with "40" obviously being the maximum number of characters accepted by this textarea.

Enjoy!

How to fix maxlength in Multiline Textbox (or) TextArea in asp.net

<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Me.TextBox1.Attributes.Add("onKeyPress", "return textboxMultilineMaxNumber(this,40);")
End Sub

</script>
<script type="text/javascript">
function textboxMultilineMaxNumber(txt,maxLen){
try{
if(txt.value.length > (maxLen-1))
return false;
}catch(e){
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>MaxLength Example</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" Text="Note that you can paste past the limit"
Width="50%" Rows="5" BackColor="#FFFFCC" TextMode="MultiLine">
</asp:TextBox>

<br /><br />
<asp:Button ID="Button1" runat="server" Text="Do Something" />
<br /><br />

<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="TextBox1"
Display="Dynamic" ErrorMessage="Please limit to 40 characters or less."
ValidationExpression="[\s\S]{1,40}"></asp:RegularExpressionValidator>
</div>
</form>
</body>
</html>

Monday, 3 October 2011

HTML changes needed for 508 Compliance

HTML changes needed for

508 Compliance

Following will be the HTML changes that will be required in any web page for making it “508 compliant”. This will be used by JAWS to read out the controls specifically and also to announce the activity done on the control by the users of the web page.

1. Text Inputs

<label for="name">Name:</label>

To make sure JAWS application reads the textbox, we need to add the label tag with “for" attribute.

2. Textarea

<label for="address">Enter your address:</label><br />

To make sure JAWS application reads the textarea, we need to add the label tag with “for" attribute.

3. Checkboxes

<label for="ham">Ham</label><br />

<label for="pepperoni">Pepperoni</label><br />

To make sure JAWS application reads the checkboxes, we need to add the label tag with “for" attribute.

4. Radio Button

<label for="overnight">Overnight</label><br />

<label for="twoday">Two day</label><br />

To make sure JAWS application reads the Radio Button, we need to add the label tag with “for" attribute.

5. Dropdown List

<label for="favcity">Choose your favorite city?</label>

<option value="1">Amsterdam</option>

<option value="2">Buenos Aires</option>

<option value="3">Delhi</option>

</select>

To make sure JAWS application reads the DropDown List, we need to add the label tag with “for" attribute.

6. Buttons

The buttons will be accessible as long as you use a standard button that has a descriptive value. The value attribute will be read by screen readers when the button is accessed.

7. Image Button

To make sure JAWS application read the image, we need to add the “alt” attribute.

8. Skip Navigation

People using screen readers are often forced to listen to a long list of navigation links, sub-lists of links, corporate icons, site searches, and other elements before ever arriving at the main content.

Provide a link at the top of the page which jumps the user down to the main content.

9. Designing for Color-blindness

When designing web content for people who are color-blind you do NOT have to convert all of your images to black and white or get rid of your images entirely.

Make sure that colors are not your only method of conveying important information.

10. Frames

The proper frameset doctype lets screen readers(JAWS) and other browsers know that the document consists of multiple frames.

Notice the proper doctype and descriptive, yet brief frame titles in this example code of an accessible frame.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<head>

<title>A page that contains
frames</title>

</head>

<frameset cols="15%,
85%">

<frame src="menu.html" title="Navigation menu" name="menu">

<frame
src="content1.html"

title="Main content"


name="content">

<noframes>

<p>This frameset document
contains:</p>

<ul>

<li><a
href="menu.html">Page navigation</a></li>

<li><a
href="content1.html">Main content</a></li>

</ul>
</noframes>
</frameset>
</html>

11. Making up of DataTables

In order for a data table to be accessible, it must have the proper markup in the HTML. When the proper HTML markup is in place, users of screen readers(JAWS) can navigate through data tables one cell at a time, and they will hear the column and row headers spoken to them.

Shelly's Daughters
Name	Age	Birthday
Jackie	5	April 5
Beth	8	January 14

<table border="1"
align="center">

<caption>Shelly's
Daughters</caption>

<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Birthday</th>
</tr>

<tr>
<th scope="row">Jackie</th>
<td>5</td>

<td>April
5</td>

</tr>

<tr>
<th scope="row">Beth</th>
<td>8</td>

<td>January
14</td>

</tr>

</table>

The scope attribute tells the browser and screen reader that everything under the column is related to the header at the top, and everything to the right of the row header is related to that header.

The header and id attribute

Another way to accomplish the same purpose is to use the headers and id attributes. This method is NOT recommended for simple tables.

Shelly's Daughters
	Name	Age	Birthday
by birth	Jackie	5	April 5
by birth	Beth	8	January 14
by marriage	Jenny	12	Feb 12

The markup looks like this:

<table border="1">

<caption>Shelly's
Daughters</caption>

<tr>
<td> </td>
<th id="name">Name</th>
<th id="age">Age</th>
<th id="birthday">Birthday</th>
</tr>

<tr>
<th rowspan="2" id="birth">by birth</th>
<th id="jackie">Jackie</th>
<td headers="birth jackie age">5</td>
<td headers="birth jackie birthday"

>April
5</td>

</tr>

<tr>
<th id="beth">Beth</th>
<td headers="birth beth age">8</td>
<td headers="birth beth birthday"

>January
14</td>

</tr>

<tr>
<th id="step">by marriage</th>
<th id="jenny">Jenny</th>
<td headers ="step jenny age">12</td>
<td headers="step jenny birthday"

>Feb
12</td>

</tr>

</table>

Again, it should be emphasized that this method is more complex. It should be used with tables of a more complex nature, where the scope attribute will not work.

Pages

Friday, 14 October 2011

Thursday, 13 October 2011

Monday, 10 October 2011

Friday, 7 October 2011

Tuesday, 4 October 2011

Monday, 3 October 2011