«
»

13 Jun

[asp .net] AJAX Control Toolbox

Posted by chocobolate in Favourite, Web Technology. Tagged: , , , , , .

English | Indonesia

Pada ASP.NET kita dapat menggunakan plugins AJAX Control Toolkit (dll dapat di download pada :

http://ajaxcontroltoolkit.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=27326#ReleaseFiles

Untuk mengaplikasikan/menggunakan AJAX Control Toolkit pada project kita adalah dengan cara sbb:

Dengan IDE : Microsoft Visual Web Developers

-          Pada Toolbox pilih kategori General

-          Klik Kanan pada Toolbox dan pilih Add Tab

-          Beri nama, ex : AJAX Control Toolbox

-          Klik kanan pada kategori tersebut dan pilih Choose Items

-          Browse pada lokasi dimana letak dll AJAX Control Toolkit disimpan dan pilih AjaxControlToolkit.dll

Beberapa fitur dari AJAX Control Toolkit yang akan kita gunakan salah satunya adalah :

Password Strength

Pada Ajax Control Toolbox kita dapat mengunakan Toolbox Password Strength untuk mengecek apakan panjang dari password sudah cukup kuat atau belum. Panjang dari password kuat dapat di definisikan oleh developers.

Sebagai contoh pada halaman web ini adalah untuk mengecek apakah password user sudah cukup kuat / belum :

Kita punya file Default.aspx seperti dibawah ini :

<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>

Keterangan :

+ TextBox4 untuk menginputkan password

+ HelpLabel untuk manampilkan password strength

Untuk menambahkan Toolbox Password Strength, kita bisa

  1. drag and drop > PasswordStrength dari toolbox, atau
  2. menambahkan Add Extender > PasswordStrength dengan mengklik tombol segitiga pada kanan TextBox4, atau
  3. dengan mengetikan code dibawah ini setelah code diatas :
<cc1:PasswordStrength ID="p1" runat="server" Enabled="True" TargetControlID="TextBox4" HelpStatusLabelID="helpLabel" PreferredPasswordLength="15"></cc1:PasswordStrength>

Ket :

+ cc1:namespace untuk AJAX Control Toolbox, biasanya AJAXControlToolbox

+ TargetControlID, textbox yang akan di cek password strengthnya

+ HelpStatusLabelID, Label yang akan menunjukan password Strengthnya

+PreferedPasswordLength, menunjukan panjang minimum password yang dikenali sebagai strength password

Extender passwordStrength ini memerlukan Script untuk melakukan pengecekan terhadap string inputannya, maka kita perlu menambahkan ToolKitScriptManager sebelum pendeklarasian TextBox4

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

pada kasus web ini script yang digunakan untuk control dari passwordStrength adalah javascript, script ini diletakan setelah pendeklarasian PasswordStrentgh sbb :

<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);

}

</script>

Calendar Extender

Pada Ajax Control Toolbox kita dapat mengunakan Toolbox CalendarExtender untuk menginputkan Tanggal agar User tidak salah dalam hal Format Tanggal.

Kita punya code untuk TextBox seperti dibawah ini :

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

Untuk menambahkan Toolbox CalendarExtender, kita bisa

  1. drag and drop > CalendarExtender dari toolbox, atau
  2. menambahkan Add Extender > CalendarExtender dengan mengklik tombol segitiga pada kanan TextBox6, atau
  3. dengan mengetikan code dibawah ini setelah code diatas :
<cc1:CalendarExtender runat="server" Enabled="True" TargetControlID="TextBox6" BehaviorID="Calendar">
</cc1:CalendarExtender>

Ket :

+ cc1:namespace untuk AJAX Control Toolbox, biasanya AJAXControlToolbox

+ TargetControlID, textbox yang akan di cek password strengthnya

+ BehaviourID, Behaviour untuk TextBox6

Extender CalendarExtender ini memerlukan Script untuk melakukan pengecekan terhadap string inputannya, maka tidak kita perlu menambahkan ToolKitScriptManager sebelumnya, karena sudah didklarasikan diawal (saat membuat PasswordStrength).

Pada kasus web ini script yang digunakan untuk control dari CalendarExtender adalah javascript, script ini diletakan setelah pendeklarasian CalendarExtender sbb :


<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>

artikel terkait :

[root] ASP .Net

[asp .net] Auto-generated-Form

[asp .net] Input Validation

Respond to this post