Showing posts with label ITSchool. Show all posts

ASP.NET : ValidationSummary

ValidationSummary
This control use to show error messages of each Validation as a List or MessageBox.

ValidationSummary Properties
DisplayMode: Type of display error massage as a List, Bullet List or Single paragraph.
ShowMessageBox: Select "True" Display error massage as a MessageBox.
ShowSummary: Select "True" Display error massage as List at bottom of the page.

Other Validator Properties
Display: Select "None" to not display error message except in ValidationSummary.

Example
1. Create a ASP.NET website then add Standard TextBox, Validator and ValidationSummary. Need 2 or above Validation (See Example in Figure 1).

Figure 1: Example

2. Select your ValidationSummary and set some properties that you want (This Example will show error message only in MessageBox (see Figure 1))

ValidationSummary Properties	Value
DisplayMode	List
ShowMessageBox	True
ShowSummary	False

Other Validator Properties	Value
Display	None

Table 1: Example Properties

3. Test your application you will see error message only in MessageBox (Figure 2).

Figure 2: Example Application

##############################

RequiredFieldValidator << Previous Chapter

ASP.NET : RequiredFieldValidator

RequiredFieldValidator
This control not allow user skip an entry.

Example
1. Create a ASP.NET website then add Standard TextBox and RequiredFieldValidator.
2. Select your RangeValidator and set require properties for validate (see Table 1).

Properties	Value
ControlToValidate	TextBox1
ErrorMassage	Please Input Name !!

Table 1: Require Properties for RequiredFieldValidator

3. Test your application you will see error message when you don't entry anything in TextBox1 (Figure 1).

Figure 1: Require Check Example

##############################

RangeValidaton << Previous Chapter || Next Chapter >> ValidationSummary

ASP.NET : RangeValidator

RangeValidator
Check a number ranges with minimum and maximum number, alphabetic and Date.

Properties
Maximum Value: Highest value that you want to check.
Minimum Value: Lowest value that you want to check.
Type: Which Data Type that you want to check.

Example
1. Create a ASP.NET website then add Standard TextBox and RangeValidator.
2. Select your RangeValidatorand set require properties for validate (see Table 1).

Properties	Value
ControlToValidate	TextBox1
ErrorMassage	You are not 18-50 years old !!
MamimumValue	50
MinimumValue	18
Type	Integer

Table 1: Require Properties for RangeValidator

3. Test your application you will see error message when you input value that not in range (Figure 1).

Shorty Bluejova, Open Learning, Programming

Figure 1: Range Check Example

##############################

CustomValidator << Previous Chapter || Next Chapter >> RequiredFieldValidator

ASP.NET : Custom Validator

Custom Validator
Checks the user's entry using validation logic that you write yourself. This type of validation enables you to check for values derived at run time.

Properties
ClientValidationFunction: Which JavaScript function that you want to check.

Example
1. Create a ASP.NET website then add Standard TextBox and CustomValidator.
2. Create your JavaScript Function for validate (For this example will check about input digits).

<! Example !!>
<head> <title>Test Validate</title>
  <script language="JavaScript">
    function checkDigit(source, agrs) {
        if(agrs.Value.length < 8 || agrs.Value.length > 12)
        args.IsValid = false;
        else
        args.IsValid = true;
       }
  </script></head>

3. Select your CustomValidator and set require properties for validate (see Table 1).

Properties	Value
ClientValidationFunction	checkDigit
ControlToValidate	TextBox1
ErrorMassage	Please input 8-12 characters

Table 1: Require Properties for CustomValidator

4. Test your application you will see error message when you input wrong condition (Figure 1).

Figure 1: Custom Check Example

##############################

CompareValidator (Check Data Type) << Previous Chapter || Next Chapter >> RangeValidator

ASP.NET : CompareValidator (Check Data Type)

Compare Validator
Compare a specify data type or Compare a user's entry value between two controls.

Properties (Data Type Checked)
Operator : Choose "DataTypeCheck"
Type : Which Data Type that you want to check.

Example Data Type Checked
1. Create a ASP.NET website then add Standard TextBox and CompareValidator.
2. Select your CompareValidator and set require properties for validate (see Table 1).

Properties	Value
ControlToValidate	TextBox1
ErrorMassage	Wrong !!
Operator	DataTypeCheck
Type	Integer

Table 1: Require Properties for Compare

3. Test your application you will see error message when you input wrong data type (Figure 1).

Figure 1: Data Type Check Example

##############################

CompareValidator (Check Equal) << Previous Chapter || Next Chapter >> CustomValidator

JavaScript : Array Object [2/2]

Method Name	Description
concat()	Joins two or more arrays, and returns a copy of the joined arrays
join()	Joins all elements of an array into a string
pop()	Removes the last element of an array, and returns that element
push()	Adds new elements to the end of an array, and returns the new length
reverse()	Reverses the order of the elements in an array
shift()	Removes the first element of an array, and returns that element
slice()	Selects a part of an array, and returns the new array
sort()	Sorts the elements of an array
splice()	Adds/Removes elements from an array
toString()	Converts an array to a string, and returns the result
unshift()	Adds new elements to the beginning of an array, and returns the new length
valueOf()	Returns the primitive value of an array

Example concat()
var color1 = ["Red", "Green"];
var color2 = ["Blue", "Yellow"];
var color3 = ["Black"];
var color = color1.concat(color2,color3);
document.write(color);

Example pop()
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits.pop() + "<br/>");
document.write(fruits);

Example sort()
var ele = ["Dark", "Water", "Fire", "Holy"];
document.write(ele.sort());

Example sort() (Number)

function sortNumberASC(a,b) {
return a - b;
}
function sortNumberDESC(a,b) {
return a - b;
}
var n = ["30", "19", "50", "7"];
document.write(n.sort(sortNumberASC));
document.write(n.sort(sortNumberDESC));

##############################

JavaScript : Array Object [1/2] << Previous Chapter

JavaScript : Array Object [1/2]

An array is a special variable, which can hold more than one value, at a time. You can refer to a particular element in an array by referring to the name of the array and the index number.

Syntax 1
ArrayName = new Array();
ArrayName [0] ="value1";
ArrayName [1] ="value2";
...
ArrayName [N] ="valueN";

Syntax 2
ArrayName  = new Array( value1",value2" ... ,valueN");

Syntax 3
   ArrayName   = [value1",value2" ... ,valueN"];

Retrieve Value 1
ArrayName = ArrayName[0];
ArrayName += ArrayName[1];
...
ArrayName += ArrayName[N];

Retrieve Value 2
for (variableName in ArrayName ) {
  ArrayName[variableName];
}

Example with Date
<script language="JavaScript">
var DayName = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var d = new Date();
var output = "Today is " + DayName[d.getDay()] + " ";
output += d.getDate()+ "/";
output += (d.getMonth() + 1) + "/";
output += d.getYear() + " ";
output += d.getHours() + ":";
output += d.getMinutes() + ":";
output += d.getSeconds();
document.write(output);
</script>

figure 1 : Sample with Date

##############################

JavaScript : Date Object << Previous Chapter || Next Chapter >> JavaScript Array Object [2/2]

JavaScript : Date Object

The JavaScript Date object is used to work with dates and times. This object provide any unit of time such as Date, Month, Year, Hours, Milliseconds and etc.

Syntax
variableName = new Date();
variableName.methodName();

Method Name	Description
getDate()	Returns the day of the month (from 1-31)
getDay()	Returns the day of the week (from 0-6)
getMonth()	Returns the month (from 0-11)
getYear()	Returns the year (four digits)
getHours()	Returns the hour (from 0-23)
getMinutes()	Returns the minutes (from 0-59)
getSeconds()	Returns the seconds (from 0-59)
getMilliseconds()	Returns the milliseconds (from 0-999)

Example
<script language="JavaScript">
var d = new Date();
var output = "Today : " + d.getDate()+ "/";
output += (d.getMonth() + 1) + "/";
output += d.getYear() + " ";
output += d.getHours() + ":";
output += d.getMinutes() + ":";
output += d.getSeconds();
document.write(output);
</script>

figure 1: Example

If you want to show the day of the week such as Monday, Tuesday and etc.
You should using Array() because getDay() will return only a number.

##############################

Next Chapter >> JavaScript : Array Object

JavaScript : Countdown Example

To following this step, you should know about "setTimeout()", if statement and JavaScript Object first. This example will create an Countdown timer that you can set minutes and seconds by yourself. You can start or stop Countdown or Timing event anytime by using "clearTimeout()".

Syntax clearTimeout()

variableName = setTimeout("MethodName", DelayTime);

clearTimeout(variableName);

Example Countdown

JavaScript : Clock Example

To following this step, you should know about "setTimeout()" methods and JavaScript DateTime objects. "setTimeout()" is look like recursive function (recursion) that allowed add delay before it action. "setTimeout()" is required Method's name that you want to repeat and delay time (millisecond).

Syntax

setTimeout("MethodName()","DelayTime")

Example Clock

This example used to create interactive clock on your webpage by using setTimeout() and show output on <div id="divOutput">. You can move this tag everywhere to show your clock on your webpage.

var d = new Date();

var result = d.getDate()+"/";
result += (d.getMonth()+1)+"/";
result += d.getYear() + " ";
result += d.getHours() + ":"
result += d.getMinutes() + ":";
result += d.getSeconds();

document.getElementById("divOutput").innerHTML = result;
setTimeout("callTime()", 1000);
}
</script>

<body onload="callTime();">
<div id="divOutput"> </div>
</body>

##############################

Reference : http://www.w3schools.com/

ASP.NET : Page Life Cycle

Page Life Cycle

ASP.NET is a dynamic webpage that following sequential process steps include initialization, instantiating controls, restoring and maintaining state, running event handler code, and rendering. ASP.NET allowed you to write code at the appropriate Page Life Cycle stage for the effect you intend.

Figure 1: ASP.NET Page Life Cycle

See full step process here >> http://i.msdn.microsoft.com/dynimg/IC386473.png

Page Events
To manage your Page Life Cycle state, You should know some basic event first.

- Page_Init() is the first occurs when an ASP.NET page is execute.

- Page_Load() will occurs when all the objects on the page have been created and are available for use.
- Page_Unload() will occurs after everything else happens.

Post Back Events

Post Back event will occur only when a page is processed as a postback (When you click a button or something that send a data to server, postback will active and response a webpage to client again). You can check an postback with "if(Page.IsPostBack)" then it will return "true" if the page is being loaded in response to a client postback. Otherwise, if you just visit the page, a postback data is unknown or empry and it will return "false".

Example Postback (Code Behind Page)
Create a ASP.NET webpage and add one standard button for call postback.

protected void Page_Load(object sender, EventArgs e) {
if (Page.IsPostBack)
Response.Write("This is postback !!");
else
Response.Write("This is first time visit !!");
}

Figure 2: Example Result

##############################

Web Server Control << Previous Chapter || Next Chapter >> Validation Control

Reference : http://msdn.microsoft.com/en-us/library/ms178472.aspx

ASP.NET : Web Server Control

Web Server Controls
Like HTML server controls, Web server controls are also created on the server and they require a runat="server" attribute to work. However, Web server controls do not necessarily map to any existing HTML elements and they may represent more complex elements.

Figure 1: Web Server Control

Syntax

<asp:controlname id="id" runat="server" />

Example

Show ID and Name on the Label when click at the button

Figure 2: Webpage

Figure 3: Source code HTML

Figure 4: C# Code Behind Page

Code Behind Page

- The code-behind page model allows you to keep the markup in one file—the .aspx file—and the programming code in another file. The name of the code file varies according to what programming language you are using

- For example, if you are working with a page named SamplePage, the markup is in the file SamplePage.aspx and the code is in a file named SamplePage.aspx.cs (for C#), and so on

figure 4: Single and Separate File

Figure 5: Relation between HTML and Code Behind Page

##############################

HTML Server Control << Previous Chapter || Next Chapter >> Page Life Cycle

Reference : http://msdn.microsoft.com/en-us/library/zsyt68f1.aspx

ASP.NET : Master and Child Page

Master Page

Acts as a template and merging container for pages that are composed only of Content controls and their respective child controls.

Figure 1: Master Page concept

How to Create Master Page (Visual Studio 2010)

"Add new items" to your project and following this step.

Figure 2: Create Master Page

Figure 3: Source Code in Master Page

Child Page

Act as a content of pages that use same design form Master Page.

How to Create Child Page (Visual Studio 2010)

"Add new items" to your project and following this step. (If you see "Web Form using Master Page" you can selected then choose your Master Page.)

Figure 4: Create Child Page

Figure 5: Source Code in Child Page

##############################

Reference : http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx

ASP.NET : HTML Server Control

HTML Server Control

- HTML elements in ASP.NET files are, by default, treated as text. To make these elements programmable, add a runat="server" attribute to the HTML element. This attribute indicates that the element should be treated as a server control.

- All HTML server controls must be within a <form> tag with the runat="server" attribute!

- ASP.NET requires that all HTML elements must be properly closed and properly nested.

Figure 1: HTML Control

Syntax

Example

Figure 2: Implement with C# script inline code

Example II

1. Create Textbox and Password Textbox to receive Student ID and Password data from users.
2. Crate Division tag to show result of program at the end of HTML document.
3. Create Button to execute program.
4. If password is “BC” or “IT”, Response write text “Hello Student ID” and “Password Correct” in Division tag.
5. If not, write “Password is not Correct” in Division tag.

Figure 3: Implement with C# script inline code

Example III

Design and Program webpage to find net price (Vat 7%)

Figure 4: Webpage

Figure 5: Implement with C# script inline code

##############################

Introduction << Previous Chapter || Next Chapter >> Web Server Control

Reference : http://msdn.microsoft.com/en-us/library/zsyt68f1.aspx

CSS : Implement with JavaScript

Change CSS style with JavaScript
JavaScript can control CSS with "style" attribute and set "ID" to HTML element that you want to change. One thing that use should know is CSS syntax may not the same JavaScript. For Example:" background-color: Red;" to control them with JavaScript you must to change to "backgroundColor = Red;"

Syntax JavaScript
document.getElementById("tagID").style.cssattribute = cssvalue;

Example (Change BGColor)

<script language="JavaScript">
function ChangeBgColor(color) {
document.getElementById('testbody').style.backgroundColor = color; }
</script>
<body id="testbody"> <center><br><br>
<input type="button" value="Red" onclick="ChangeBgColor('Red');">
<input type="button" value="Green" onclick="ChangeBgColor('Green');">
</center>
</body>

Figure 1: Example Result

Example (Change Visibility and Display)

function removeElement() {

document.getElementById("D1").style.display="none";

}

function changeVisibility() {

document.getElementById("D2").style.visibility="hidden";

}

function resetElement() {

document.getElementById("D1").style.display="block";

document.getElementById("D2").style.visibility="visible";

}

</script>

Figure 2: Example Result

CSS : Position << Previous Chapter

Refference : http://www.w3schools.com/

CSS : Position

CSS Position
The position attribute specifies position that used for an element.

position : fixed || static || absolute || relative;
- fixed can make the elements always show on a web page (following the document flow).
- static is default position.
- absolute can make an elements in any position on a web page. If absolute position overlapped the other element, the high level position will on the top.
- relative is a normal position but add 20 pixel to the left element.

z-index : auto || number ;
- specify level of an elements (High level will on the top).

Example Position

figure 1: Example Position

top : auto || pixels || cm || point ;
right : auto || pixels || cm || point ;
left : auto || pixels || cm || point ;
bottom : auto || pixels || cm || point ;
- set an element's distance between edge and elements.

overflow : auto || visible || hidden || scroll ;
overflow-x : auto || visible || hidden || scroll ;
overflow-y : auto || visible || hidden || scroll ;
- set scroll bar on the x, y or both.

Example (Fixed Header)
.divHead {
position: fixed;
top: 0px; left: 0px;
width: 100%; height: 50px;
padding: 5px 5px 5px 5px;
text-indent: 50px;
color: lightblue;
}

Example (Fixed Footer)
.divFoot {
position: fixed;
bottom: 0px; left: 0px;
width: 100%; height: 50px;
padding: 5px 5px 5px 5px;
text-align: center;
color: gold;
}

CSS : Basic Attribute << Previous Chapter || Next Chapter >> CSS : Implement with JavaScrpt

Reference : http://www.w3schools.com/

CSS : Selector

CSS Selector
CSS allow to specify selector HTML element, "ID" and "Class"
- Selector HTML element is used to specify all of the HTML element (one write, all effected)
- Selector ID is used to specify a unique ID of the HTML element (one webpage, one id)
- Selector Class is used to specify group of the HTML element that select a specify Class (one write, use anywhere)

Example Selector ID

figure 1: CSS Implementation (Test Selector ID)

Example Selector Class

figure 2: CSS Implementation (Test Selector Class)

Group Selector

If an element has the same style, it can grouped selectors separate by ,

Example Group Selector

div, p { color: green; }

Introduction << Previous Chapter || Next Chapter >> Basic Attribute

Reference : http://www.w3schools.com/

Open Learning by Shorty Bluejova

Open Learning !!

ASP.NET : ValidationSummary

ASP.NET : RequiredFieldValidator

ASP.NET : RangeValidator

ASP.NET : Custom Validator

ASP.NET : CompareValidator (Check Data Type)

JavaScript : Array Object [2/2]

JavaScript : Array Object [1/2]

JavaScript : Date Object

JavaScript : Countdown Example

JavaScript : Clock Example

ASP.NET : Page Life Cycle

ASP.NET : Web Server Control

ASP.NET : Master and Child Page

ASP.NET : HTML Server Control

CSS : Implement with JavaScript

CSS : Position

CSS : Selector