Skip to main content

70-562 Microsoft AJAX control toolkit, Client-Side AJAX




The toolkit is opensource on the Codeplex Open Source project community site.
At last count the toolkit contained 40 controls, and control extenders providing controls for dynamic website.

The extenders are not full interface controls, but instead modify the behaviors of existing controls.

There is not much async calls to the server, instead, it makes use of the MS AJAX Control Library the client side Javascript API that provides AJAX, to perform client side work.

Sometime pages have alot of big section, making it a big page even for a wide sceen, if sections are not dependant on each other, the Accordion control is the solution to save space. The accordion provides expandable panels to save space, easier than writting the Javascript.

Like any HTML element, the content of the AccordionPane can be styled. The AccordionPane is a custom control and can be added from the toolbox, modified from the aspx page.

The AutoSize property can constrain the vertical size.
The Limit setting creates a scrollbar when reached.
Fill, keeps the same vertical size, and adjusts the content to keep the same vertical space.

AlwaysVisibleExtender: For floating input form, or buttons, lets you anchor controls anywhere within the browser window to keep them at view at all times. And can be associated with a panel to have mutliple controls that stay in view
HorizontalSide and VerticalSide, let you set where the fixed control should position itself, also the HorizontalOffset.
The extender is linked to the control witht he TargetControlID property, and this is true accross the toolkit, anytime a control extends another control, use the TargetControlID to like the extender and the extended control.
It can be used to always show buttons for a long grid.

AutoCompletExtender: Helps the user make a selection from a long list. Can be set to case sens or insens. This one requires a ServiceMethod and a TargetControlID, and a MinimumPrefixLength. Can also specify the number of items to display. The method has to be decorated with a [System.web.Services.WebMethod()System.web.script.services.scriptmethod()]. It's going to be implemented and exposed as a web method. The ScriptMethod attribute makes it callable from JavaSCript. The method returns a string array. You can implement the function however you want, for example ADO.Net code that sends a query to the database.

FilteredTextBoxExtender: Can mask a textbox, by specifying allowed or forbiden specific characters. To use it you add the extender anywhere in the aspx page, and like any extender, specify set it's TragetControlID, set the FilterMode and the ValidChars attribute. This mode can't allow regular expressions but other modes can.

ListSearchExtender: Displays the typed charcters above the textbox, and moves in the drop down list as the user types. Can specify if the list is sorted or not to use a faster algo.

Validator and MaskedEdit: provides pre-writen characters like (   )   -     for a phone number, it can be set to clear those ClearMaskOnLostFocus. The mast is configured using 9 for number, L for letters, $ can be letter or space.

PagingBulletedListExtender: breaks down the bullets into chuncks, for examle, provides an alphabet and user clicks on the letter to see items starting with this letter, and won't show the letter of it contains no item. It's a paged bulleted list. Can be set to break it down in more letters than just 1st as alphabet, can have blocks of 3 characters.

TextBoxWatermakExtender, when the text box gets focus, the prompt disapears. Faster to use this then implement it in javascript. Just provide css for the text to be light dark.

PasswordStrength: give instant feeback to the user as far as how strong it is. Can display in word or graphic. It's not perfect but better than not having password rating.


Client-Side AJAX: Built in the AJAX toolkit library. Communicates outside of the page cycle model. Very compatible and useable with other frameworks.
When running a project that contains client-side ajax, the documents section of the Solution explorer shows up, and contains axd files, which are virtual script files that can be stepped through in debug mode just like code-behind.
If youhave only one of those virtual files showing, it's the MicrosoftAJAX.debug.js, if you had an UpdatePanel, there would be alteast 2 files showing in the VS doc window.
The library will select it's debug version if it's built on debug setting in vs.
How to make web-service calls directly from the client, using Client-Side AJAX.

The web service can be implemented with an asmx file. The class implemented by the web service needs to have 3 attributes, WebSErvice, WEbsERviceBinding, ScriptService, this last one will create a proxy callable from Javascript.

Note: Using SQL parameters is one way to avoid SQL Injection.

When not using an updtea panel, we set the EnablePartioalRendering attribute to false to avoid loading a script that wouldnt be used.
When adding Client-Side AJAX, the script manager should contain a sub-element called Services and itself should containt an asp:SErviceReference with InlineSCript set to true, and a Path attribute pointing to the asmx file, either a full url or a local path.

The web method called will be provided an ID, a JavaScript callback success and callback fail method.

Call as Service-Seide Page Method. To do so, turn the page method into a proxy web service, it needs to be decorated with the WebMethod attribute, and needs to be a static method. In the aspx page, the ScriptManager will change, it will no longer require the Service element since it's calling a page method. The ScriptManager will now set its EnablePageMethods attribute to true. In the aspx file, the JavaScript calling the WebMethod will use the PageMethods class, like this PageMethods.MyWebMEhtod(arg1, arg2, ...).

Comments

Post a Comment

Popular posts from this blog

Rxjs Forkjoin vs Zip

These Rxjs combination operators are handy to make Rest calls in parallel and combine their results. Both take n observables and will return the results, with the difference that forkJoin will complete even if one of the nested observables errors of completes.
Post a Comment
Read more

React JS Patterns

React JS is always evolving, and evolving quickly. These evolutions can be very significant ones, for example, the addition of hooks. React has a lot of code patterns, often these patterns are motivated by the DRY and/or the open-close principle. These patterns sometimes come in to replace a previous one, yet the previous ones still stays in use, as a consequence, the list of patterns keep growing. The goal of the next few posts will be to list the patterns commonly used in React JS developpement. Some patterns are more specific to JSX and I will start with these, and maybe add patterns specific to Redux.
4 comments
Read more

Object.create vs. Object.Assign

The two functions return a new Object but with a difference. Object.assign will go through an enumerable and copy it's properties. Object.create will create a new empty object but link it's proto chain to the old object. One way to view this is with JSON.stringify(newCreatedObject) this would return an empty object, since all the properties are not part of the object's own properties, but inherited through prototype inheritance. In both case, the advantage is it allows to extended existing objects without modifying the original. This is particularly important when receiving arguments from a caller, in this case it's better to use these methods instead of modifying the caller's object since he might have planned to use it again later, expecting it to be in it's original state.
Post a Comment
Read more