[asp .net] AJAX Control Toolbox (english)

English | Indonesia

we can use the AJAX Control Toolkit plugins on ASP.NET. library (.dll) can be downloaded at:
http://ajaxcontroltoolkit.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=27326#ReleaseFiles

To apply / use the AJAX Control Toolkit project, as follows:

With IDE : Microsoft Visual Web Developers

- In the Toolbox, select the General category

- Right Click on the Toolbox and select Add Tab

- name it, ex: AJAX Control Toolbox

- Right-click on the category and select Choose Items

- Browse to the location where you store downloaded AJAX Control .dll, etc. AJAX Control Toolkit and select the saved AjaxControlToolkit.dll

Some features of the AJAX Control Toolkit that will used on the project are :

Password Strength

In the Ajax Control Toolbox, we can use the Password Strength Toolbox to check whether the length of the password is strong enough or not. The length of a strong password can be defined by the developers.

For example on the web page is to check whether the user password is strong enough / not:

We have a Default.aspx file as below:

For example we have a Default.aspx file as below:

<form id="form1" runat="server">
…
<asp:TextBox ID="TextBox4" runat="server" MaxLength="32" TextMode="Password"></asp:TextBox>
<asp:Label ID="helpLabel" runat="server"></asp:Label>
…
</form>

Description:

+ TextBox4 for input password
+ HelpLabel for show password strength

to Add Password Strength Toolbox, :

1. drag and drop > PasswordStrength from the toolbox, or
2. add Add Extender > PasswordStrength by clicking on the triangle button on the right TextBox4, or
3. typing code  below :

<cc1:PasswordStrength ID="p1" runat="server" Enabled="True" TargetControlID="TextBox4" HelpStatusLabelID="helpLabel" PreferredPasswordLength="15"></cc1:PasswordStrength>

Description :

+ Cc1: namespace for the AJAX Control Toolbox, usually AJAXControlToolbox

+ TargetControlID, the textbox that will checked for password strength

+ HelpStatusLabelID, the label will indicated the password Strength

+PreferedPasswordLength, show minimum length of password as strength password

Extender passwordStrength needs script to undertake the  string input, then we need to add  ToolKitScriptManager before TextBox4 code.

<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">                                    </cc1:ToolkitScriptManager>
</code>

script used for passwordStrength is javascrpt :

<script type="text/javascript" id="PS">
// Script objects that should be loaded before we run

var typeDependencies = ['AjaxControlToolkit.PasswordStrengthExtenderBehavior'];

// Test Harness

var testHarness = null;

// Controls in the page

var tb1 = null;

var tb1_indicator = null;

var tb1_helpLabel = null;

// Ensure the textbox and strength indicator is in its empty/initial state

function checkEmptyState() {

testHarness.assertEqual('', tb1_helpLabel.innerHTML, "TextBox1's Strength help text should be an empty string instead of '" + tb1_helpLabel.innerHTML + "'");

testHarness.assertTrue(tb1_indicator.style.display == '' || tb1_indicator.style.display == 'none', "TextBox1's Strength Indicator display style should be 'none' instead of '" + tb1_indicator.style.display + "'");

testHarness.assertEqual('hidden', tb1_indicator.style.visibility, "TextBox1's Strength Indicator visibility style should be 'hidden' or an empty string instead of '" + tb1_indicator.style.visibility + "'");

}

// Reset the controls to their initial state

function resetControlState() {

tb1.value = '';

tb1.readOnly = false;

tb1_helpLabel.innerHTML = '';

tb1_indicator.style.display = 'none';

tb1_indicator.style.visibility = 'hidden';

testHarness.fireEvent(tb1, 'onBlur');

}

// Test the initial state of the control

function testInitialState() {

checkEmptyState();

}

// Test entering some data (not a strong password) into the control for a textual indicator

function testPartialKeyPress() {

tb1.value = '123';

testHarness.fireEvent(tb1, 'onkeyup');

testHarness.assertNotEqual('', tb1_helpLabel.innerHTML, "TextBox1's Strength help text should NOT be empty instead of '" + tb1_helpLabel.innerHTML + "'");

testHarness.assertNotEqual('none', tb1_indicator.style.display, "TextBox1's Strength Indicator display style should NOT be 'none'");

testHarness.assertNotEqual('', tb1.value, "TextBox1's value should NOT be an empty string");

testHarness.assertEqual('visible', tb1_indicator.style.visibility, "TextBox1's Strength Indicator visibility style should be 'visible' instead of '" + tb1_indicator.style.visibility + "'");

}

function testPartialEntryBlur() {

testHarness.fireEvent(tb1, 'onblur');

testHarness.assertNotEqual('', tb1_helpLabel.innerHTML, "TextBox1's Strength help text should NOT be an empty string instead of '" + tb1_helpLabel.innerHTML + "'");

testHarness.assertTrue(tb1_indicator.style.display == '' || tb1_indicator.style.display == 'none', "TextBox1's Strength Indicator display style should be 'none' or an empty string instead of '" + tb1_indicator.style.display + "'");

testHarness.assertEqual('hidden', tb1_indicator.style.visibility, "TextBox1's Strength Indicator visibility style should be 'hidden' or an empty string instead of '" + tb1_indicator.style.visibility + "'");

}

function testCompleteEntryBlur() {

testHarness.fireEvent(tb1, 'onblur');

testHarness.assertNotEqual('', tb1_helpLabel.innerHTML, "TextBox1's Strength help text should NOT be an empty string instead of '" + tb1_helpLabel.innerHTML + "'");

testHarness.assertTrue(tb1_indicator.style.display == '' || tb1_indicator.style.display == 'none', "TextBox1's Strength Indicator display style should be 'none' or an empty string instead of '" + tb1_indicator.style.display + "'");

testHarness.assertEqual('hidden', tb1_indicator.style.visibility, "TextBox1's Strength Indicator visibility style should be 'hidden' or an empty string instead of '" + tb1_indicator.style.visibility + "'");

}

// Test entry into the textbox with a strong password for the textual indicator

function testCompleteKeyPress() {

tb1.value = '123456789%66_Th';

testHarness.fireEvent(tb1, 'onkeyup');

testHarness.assertEqual('', tb1_helpLabel.innerHTML, "TextBox1's Strength help text should be empty instead of '" + tb1_helpLabel.innerHTML + "'");

testHarness.assertNotEqual('none', tb1_indicator.style.display, "TextBox1's Strength Indicator display style should NOT be 'none'");

testHarness.assertNotEqual('', tb1.value, "TextBox1's value should NOT be an empty string");

testHarness.assertEqual('visible', tb1_indicator.style.visibility, "TextBox1's Strength Indicator visibility style should be 'visible' instead of '" + tb1_indicator.style.visibility + "'");

}

// Test entry into the textbox with a strong password for the bar indicator

// Test removing focus from the control with a complete set of characters (strong password) entered for a textual indicator

function testCompleteEntryBlur() {

testHarness.fireEvent(tb1, 'onblur');

testHarness.assertEqual('', tb1_helpLabel.innerHTML, "TextBox1's Strength help text should be an empty string instead of '" + tb1_helpLabel.innerHTML + "'");

testHarness.assertTrue(tb1_indicator.style.display == '' || tb1_indicator.style.display == 'none', "TextBox1's Strength Indicator display style should be 'none' or an empty string instead of '" + tb1_indicator.style.display + "'");

testHarness.assertEqual('hidden', tb1_indicator.style.visibility, "TextBox1's Strength Indicator visibility style should be 'hidden' or an empty string instead of '" + tb1_indicator.style.visibility + "'");

}

// Test removing focus from the control with a complete set of characters (strong password) entered for a bar indicator

// Test entering some data (not a strong password) into the control for a textual indicator

function testReadOnlyTextBox() {

tb1.readOnly = true;

testHarness.fireEvent(tb1, 'onkeyup');

testHarness.assertTrue(tb1_indicator.style.display == 'none' || tb1_indicator.style.display == '', tb1_indicator.style.display, "TextBox1's Strength Indicator display style SHOULD be 'none' instead of " + tb1_indicator.style.display);

testHarness.assertEqual('hidden', tb1_indicator.style.visibility, "TextBox1's Strength Indicator visibility style should be 'hidden' instead of '" + tb1_indicator.style.visibility + "'");

}

// Register the tests

function registerTests(harness) {

testHarness = harness;

// Get the controls from the page

tb1 = testHarness.getElement('ctl00_ContentPlaceHolder1_TextBox1');

tb1_helpLabel = testHarness.getElement('ctl00_ContentPlaceHolder1_helpLabel');

tb1_indicator = testHarness.getElement('ctl00_ContentPlaceHolder1_TextBox1_PasswordStrength');

var test = testHarness.addTest('Initial');

test.addStep(resetControlState);

test.addStep(testInitialState);

test = testHarness.addTest('TextIndicator InValid Entry');

test.addStep(resetControlState);

test.addStep(testInitialState);

test.addStep(testPartialKeyPress);

test.addStep(testPartialEntryBlur);

test = testHarness.addTest('TextIndicator Valid Entry');

test.addStep(resetControlState);

test.addStep(testInitialState);

test.addStep(testPartialKeyPress);

test.addStep(testPartialEntryBlur);

test.addStep(testCompleteKeyPress);

test.addStep(testCompleteEntryBlur);

test = testHarness.addTest('BarIndicator InValid Entry');

test.addStep(resetControlState);

test.addStep(testInitialState);

test.addStep(testPartialKeyPress2);

test.addStep(testPartialEntryBlur2);

test = testHarness.addTest('BarIndicator Valid Entry');

test.addStep(resetControlState);

test.addStep(testInitialState);

test.addStep(testPartialKeyPress2);

test.addStep(testPartialEntryBlur2);

test.addStep(testCompleteKeyPress2);

test.addStep(testCompleteEntryBlur2);

test = testHarness.addTest('Text Input set to READONLY');

test.addStep(resetControlState);

test.addStep(testInitialState);

test.addStep(testReadOnlyTextBox);

}
<pre></script>

Calendar Extender

In the Ajax Control Toolbox, we can use the  CalendarExtender Toolbox, so User will input a valid date format.

we have code for TextBox bellow :

<form id="form1" runat="server">
…
<asp:TextBox ID="TextBox6" runat="server></asp:TextBox>
…
</form>

to add Toolbox CalendarExtender,

1. drag and drop > CalendarExtender from toolbox, or
2. Add Extender > CalendarExtender by clicking triangle button on the right of  TextBox6, or
3. typing code bellow

<cc1:CalendarExtender runat="server" Enabled="True" TargetControlID="TextBox6" BehaviorID="Calendar">
</cc1:CalendarExtender>

Description:

+ cc1:namespace for AJAX Control Toolbox, usually AJAXControlToolbox

+ TargetControlID, textbox for date input

+ BehaviourID, Behaviour untuk TextBox6

this CalendarExtender need Script for run calendar  input, script used for control CalendarExtender :

<script type="text/javascript">

var typeDependencies = ['AjaxControlToolkit.CalendarBehavior'];

function registerTests(harness) {

var text = harness.getElement('ctl00_ContentPlaceHolder1_Text');

var calendar = harness.getObject('Calendar');

var button = harness.getElement('ctl00_ContentPlaceHolder1_Button');

var test = null;

test = harness.addTest('Show on focus');

test.addStep(function() {

harness.fireEvent(text, "onfocus");

harness.assertTrue(calendar._isOpen);

});

test = harness.addTest('Hide on blur');

test.addStep(function() {

harness.fireEvent(text, "onfocus");

harness.fireEvent(text, "onblur");

}, 100, function() { return !calendar._isOpen; });

test = harness.addTest('Parse date');

test.addStep(function() {

text.value = '15-1-2000';

harness.fireEvent(text, "onfocus");

harness.fireEvent(text, 'onchange');

harness.assertEqual('15-1-2000', calendar.get_selectedDate().format("d-M-yyyy"));

});

test = harness.addTest('set_firstDayOfWeek typo');

test.addStep(function() {

calendar.set_firstDayOfWeek(AjaxControlToolkit.FirstDayOfWeek.Default);

});

}

</script>

related – articles

[root] ASP .Net

[asp .net] Auto generated Form

[asp .net] Input Validation