asp net 2b assignment 5: atlas #2 - saddleback.edu · notes 1. the following items ... a. note the...

ASP Net 2B Assignment 5: Atlas #2

1. AutoComplete: Working with a web service. A. Create new AJAX Website called Autocomplete. B. To AppData folder Add existing Words.txt you downloaded from our

website. C. Add new web service called AutoCompleteWebService

1. Your choice of code behind or code beside…. Will not make a difference 2. It will create the App_Code folder with the appropriate class definition.

a) If you choose code behind. D. Modify the web method as shown in the example at the END of these

notes 1. The following items can trip you up. 2. The ScriptService must be added (this is NEW!)

3. Function name is optional but the argument names are NOT… must be

correct case sensitive name.

4. Must have a return value of string array.

5. Cost me hours…. But that is why you come to class.!

E. Set the webservice as the start page and see if it works!

F.


G. H. Add a textbox and drag on a AutoCompleteExtender and modify the

source as shown below.

I. And test it

J.

2. Working with the new MaskedEdit… two controls per textbox A. MaskedEditExtender: extends the text box to include a GUI mask B. MaskedEditValidator hooks to that extender AND textbox to validate

values. C. Create a new (optional) AJAX project called Mask D. Add a text box and drag on a MaskedEditExtender.

1. See below for example


2.

E. Run and note this does NOT attempt to determine if values are valid…only helps user with data input.

F. Drag on a MaskedEditValidator and hook to both textbox and Extender as shown below

G. Test the following: Empty

1. H. Leave off Year…. It will insert it for you I. Too Late; Too early J. Bad Date

1. K. Formatting…. Note…the style names are hardcoded….

1. You can’t change these… so you just code for them.

2. L. Add a style sheet with these styles…choose your own colors


M.

N. O. Working with code behind… add the following in page load to make dates

variable based upon today.

1. And show that it works 2. +1 extra credit it. Do this all in the source view… not necessarily better

but good exercise.

P.


Q. Working with numbers 1. Add Textbox txtNumbers with maskedit as shown

2. Test to make sure the mask works… unique behavior with RightToLeft 3. Now add a maskvaliadtor to set max/min values

4. I allowed negative to show how the style sheet changes appearance if it’s

a negative number… 5. Test and screen print to prove it works


R. Working with Time 1. Add txtTime as shown below and a Masked Edit as shown.

2. Test to make sure it works…. Then hook up a validator to limit times.

3. Note that you get AM or PM by typing an A or P


S. Work with patterns (ie SSN) +2 points to get this working 1. I want to accept a proper SSN with the correct number of digits 2. And give them an error message if they leave digits out. 3. Here was my attempt but you can do better


3. Working with Tabs A. Note the new Office 2007 standard is tabs (replaces menus… ouch). B. Create a new AJAX web site called Tabs C. On Default.aspx page drag on a Tab Container D. Drag in 4 Tab Panels E. In each panel put a header template and content template F. Configure as shown below

G. Run and flip through panels to prove it works H. Add handler for ClientTabChange as follows


I. Write a Javascript function to catch the Tab change and populate the label at the bottom.

J. Run to prove it works

K. L. Modify First Panel as follows

M. And add a function to hide tab 3

N. And prove it works

O. Goal now is to flesh out the tabs to collect data then show it on the

summary page.


P. Finish coding out the tabs as shown below… Use tables to format.

Q.

R.

S. T. Modify the tab change event handler as follows:

1. Note the “names”may differ depending on how you named your controls

2. this works because a label creates a <div> and a textbox creates an input

control.


U. Test and your summary tab should look like this… with no postbacks.

V. Hook up the save button to server side event handler so you can “write to

disk”

W. In Code behind simulate writing to disk but instead just populate session

variables as shown… saves time 1. hint… you may have to initialize these in the Global.asax…

2.

X. Then send them to a ThankYou.aspx page 1. (tip… you already built the table in the summary tab!)

a)


4. Collapsible Panel Control A. Create a new AJAX Web Site CollapsiblePanel B. Open the following web page (or one of simple make up)

1. This is a Microsoft security newsletter http://www.microsoft.com/athome/security/secnews/newsletters/Security_07_0109.aspx

C. Carefully copy the Announcement section into Design view of default.aspx

D. View your source and you should have a div with two tables

1. But it should look the same

E. F. Create a folder called images and Add Existing Collaspe.jpg and

Expand.jpg from the AJAX samples website.

G.

http://www.microsoft.com/athome/security/secnews/newsletters/Security_07_0109.aspx


H. Wrap up Announcement header in a Standard panel control as shown. Note the image is just a place holder.

I. Wrap up the content (tables) in another panel… I have collapsed the

copied tables for clarity.

J. Drag on a CollapsiblePanelExtender as shown below K. CAREFUL note the opposites on Expand & Collapse properites


L. Run to prove it works

Click on image….way cool

M. Repeat the process for the Security updates section of the news letter N. PRINT is all working both expanded and collapsed


AutoCompleteWebService 'note <System.Web.Script.Services.ScriptService()> must be added; cost me hours! <WebService(Namespace:="http://tempuri.org/")> _ <WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _ <System.Web.Script.Services.ScriptService()> _ Public Class AutoCompleteWebService Inherits System.Web.Services.WebService Private Shared autoCompleteWordList As String() 'prefixText and count are case sensitive reserved words. <WebMethod()> _ Public Function GetWordList(ByVal prefixText As String, ByVal count As Integer) _ As String() 'given prefixText & max count will return count or less matches in a string array 'if first time opening list... read it. If autoCompleteWordList Is Nothing Then 'temp holds sorted word list read into auto array. Dim temp As String() = System.IO.File.ReadAllLines( _ Server.MapPath("~/App_Data/words.txt")) 'sort temp NOT case sensitive Array.Sort(temp, New CaseInsensitiveComparer()) 'now autocompleteWordList is sorted autoCompleteWordList = temp End If 'search the array for first match with given text Dim index As Integer = Array.BinarySearch(autoCompleteWordList, _ prefixText, New CaseInsensitiveComparer) 'returns a negative number of "ordinal position" of first match. 'Abs makes it positive so we can use it as a counter and index '-1 to convert the ordinal position into the zero based array index index = System.Math.Abs(index) - 1 Dim matchingCount As Integer = 0 'loop starting with first match and count the number that match 'stop if exceed max count from arguments or run out of matches. Do While ((matchingCount + index) < autoCompleteWordList.Length) _ And (matchingCount < count) 'does this one start with same text as provided? If autoCompleteWordList(index + matchingCount). _ StartsWith(prefixText, StringComparison.CurrentCultureIgnoreCase) Then matchingCount = matchingCount + 1 Else Exit Do End If Loop 'create the return array same size as number found 'arrays are zero based so -1


Dim returnValue(matchingCount - 1) As String 'copy from wordlist array to returnValue array If matchingCount > 0 Then Array.Copy(autoCompleteWordList, index, returnValue, 0, matchingCount) End If 'this must! return a string array. Return returnValue End Function

End Class 1.

asp net 2b assignment 5: atlas #2 - saddleback.edu · notes 1. the following items ... a. note the...

Documents