Social Links

Entries in javascript (10)


jQuery to ship with ASP.NET MVC and Visual Studio

from: Scott Hanselman's Computer Zen - jQuery to ship with ASP.NET MVC and Visual Studio

Microsoft is going to make jQuery part of the official dev platform. JQuery will come with Visual Studio in the long term, and in the short term it'll ship with ASP.NET MVC. We'll also ship a version includes Intellisense in Visual Studio.

The Announcement Blog Posts

This is cool because we're using jQuery just as it is. It's Open Source, and we'll use it and ship it via its MIT license, unchanged. If there's changes we want, we'll submit a patch just like anyone else. JQuery will also have full support from PSS like any other Microsoft product, starting later this year. Folks have said Microsoft would never include Open Source in the platform, I'm hoping this move is representative of a bright future.

This is really good news for jQuery users.  It means that it will just be there all the time and there will be a stable, supported reference to use when debating the reasons to use it to management.

jQuery makes developing with Javascript much easier and does wonders for manipulating CSS at runtime.


Atlas Project

Scott Guthrie sheds some light on the Atlas Framework that will allow for easier creation of XMLHTTP enabled applications.

Hopefully this will make the difficulties associated with Behaviors, Ajax.NET and all the other techniques as simple as did for making Weservices easy to use.

As we move closer to Indigo, this all might be just a transitional methodology, but one that will allow us to do things for current production applications that we have a desperate need for in a disconnected internet world. It also is a must if you need to render portions of complex pages without relying on caching and postbacks.

Behaviors are dead

Recently, Microsoft decided to retire

This was a bit devastating for a couple of my intranet applications which are dependent on the technology.

Not to worry, The successor to this is WSE2 which is a much more secure and capable solution.  It is also a fully supported product that does not expire until 9/30/2008.  This makes it a viable solution for long term design and I am sure it will be superseded by WSE3 in time, so buying into this tech is not as big a risk as was.

Christian Weyer has a few articles about how what's in the SDK and how the programming model is going to change in the near future.  If you haven't started transitioning over to WSE2 yet, now is the time.  It's time because the last windows security update rendered certain parts of useless.  I used to tie multiple behaviors to the <body> tag in javascript and that is now not allowed, you will get “object is null” errors if you use this technique now.

I am in the midst of converting all my Client Calling methods over to WSE2 (which, by the way, has been put off long enough).  I had always intended to do it, but was following the “If it ain't broke, don't fix it“ adage, now it's broken and I must.  A warning from Microsoft would have been nice...  Perhaps its time to start reading the fine print of those security updates.

As things progress, I will be posting articles about how I am using them.  There is a pretty significant lack of HOWTO articles on accessing WSE2 from javascript for client offloading.  This is something I am debating whether or not is still useful because the way I use the browser as a client would need a complete rewrite of some applications to change the architecture.

Not wanting to really do this, I would prefer to just create some javascript code that will replace the way I used for loading XML tables into a <DIV>.  When I get this first step accomplished I will surely post it here.


__doPostBack and an interesting hack.

I was working on a piece of code today, sort of as an experiment since it was an interim patch, but I discovered an interesting use for __doPostBack; Calling a Server Side VB Function indirectly from javascript.

I haven't seen this documented anywhere as I am sure its not a great practice, but is sometimes useful when there is no other method to get the job done quickly.

I have a WebForm with a Submit button on it that allows inplace cell editing.  This is not in a Datagrid, but rather it is in a <DIV> by way of my XSLTPager.  Since I already had the Submit button commited on the form and I was only loading the data in the

    If Not IsPostback Then

block in my OnLoad Event, I needed a way to send a Page Number back to the server and refresh the data with a new page.

I could have used some odd Viewstate things to make it happen, but I thought of another way.

In my XSLTPager, I support a javascript function that is called when you click on a page, normally this is the function I use to call a Webservice.  In this particular case I didn't need to call a Webservice, I just wanted to reload the page with the new page of data.

So in my javascript function I put:

    __doPostback(“GetPage“, p);

where p is the page number.

Then in my OnLoad event (in the else part of the If Not IsPostBack) I put:

    If Request.Form("__EVENTTARGET") = "GetPage" Then
LoadPage(Request.Form("__EVENTARGUMENT") )
End If

This fires my LoadPage Function with the appropriate Page Number.

Its an easy way to call a function on the Server Side directly from a javascript function without resorting to more hidden fields, Viewstate or for use when AutoPostBack isn't available, like when you set a value from javascript.



ClientID and Encapsulated Objects

I was working on a couple things for a User control that were absolutely making me nuts...

If you need to get the ClientID of an object (for use with javascript) and you are adding objects Dynamically, you are going to have some less than intuitive things happen...

Here's why:

When ASP.NET creates a page that has an embedded User Control with a Textbox(or anything else, this is for illustrative purposes), it creates unique ClientIDs with the ID of the UserControl followed by a _ followed by the ID of the Textbox, IOW: UserControlID_TextboxID.

For the most part, this is no big deal.  When adding objects dynamically to a User Control, ASP.NET will not know what that this is going to be an embedded object until you actually add it to the UserControl.

I have a TextBox and an Image Control that I want to use to pop up a Calendar, the TextBox/Image may be inserted more than once like a repeater...

Consider the following code:


For iCount = 0 To node.ChildNodes.Count - 1
Dim child As XmlNode = node.ChildNodes(iCount)
If child.Attributes("Type").InnerText = "Date" Then
Dim img As New Web.UI.WebControls.Image
Dim txt As New Web.UI.WebControls.TextBox
txt.ID = "txt" & child.Attributes("Name").InnerText

img.ImageUrl = "/images/calendar.gif"
img.ID = "imgCal"
img.Attributes.Add("onClick", objCal.ClientID & ".select(" & txt.ClientID & ",,'MM/dd/yyyy');")
End If

Unfortunately, that simple bit of code isn't going to work as expected...

The reason being is that the ddesc object has not been added to the UserControl yet.

This may seem like something obvious, but I missed it a couple times and wanted to show you a way to produce the exact reference you will need without alot of fuss...

note: objCal is outside the object we are creating in the loop (in this case a <DD> of a <DL>, Description List)

Revised Code:


For iCount = 0 To node.ChildNodes.Count - 1
Dim child As XmlNode = node.ChildNodes(iCount)
If child.Attributes("Type").InnerText = "Date" Then
Dim img As New Web.UI.WebControls.Image
Dim txt As New Web.UI.WebControls.TextBox
txt.ID = "txt" & child.Attributes("Name").InnerText

Dim tmpName As String = Me.ClientID & "_" & txt.ClientID
img.ImageUrl = "/images/calendar.gif"
img.ID = "imgCal"
img.Attributes.Add("onClick", objCal.ClientID & ".select(" & tmpName & ",,'MM/dd/yyyy');")
End If


tmpName now gives us the right ClientID when we are working inside a UserControl.

Also of note, if you need to control the way that Loops name Controls if you give them unique IDs yourself, then ASP.NET won't go and change them “for you” when the page is created.

Be aware that UniqueID and ClientID are not the Same either, UniqueID will use a ':' for the seperator and be written out to the 'Name' attribute whereas ClientID uses '_' for the seperator and is written to the ID attribute.

The Name attribute is used by some older browsers instead of the ID so be aware of this when you are coding javascript.


Simple Variable Redirects in Javascript

Ever need to redirect a few pages from one server to another and only had access to raw html left on that old server?

Try this:


<script language="JavaScript" type="text/javascript">
var rss = 'q=blog/1';
var qs =;
if(qs == rss) {
} else {

More detailed types of the same thing are found here.


Speaking Engagement

I'll be speaking at AZDNUG - the Arizona Dot Net User's Group on February 17 from 6pm to 9pm.

I am covering how use Webservices and XSLT to offload some processing onto the client.  This can be particularly effective when you need to add searching capabilities to an entry form, or when you need multiple tables on one page and have them operate independently.  I'll also be showing my XSLTPager system, this is a can be a direct replacement for a datagrid if you choose to return HTML, or you can return xml and use it WITH a datagrid to replace the inefficiency of the built-in paging.

Lots of demo code and several downloads will be posted here, as well as the articles and slides.


CSS Stuff and Skinning

I just updated some skinning stuff while I was doing the PNGHack. I'm not sure I like the rss.gifs everywhere, but i'm going to leave it for now. I did manaqe to get them all right justified with a little css trickery.

update - 02/11/2004 I finally got it down to a single pixel width difference between mozilla and IE, boxmodels really need to be the same, this is frustrating. I had to add a <div> in all the <li> elements so width='100%' calculated the same on all browsers, still off by the left border, but it's good enough.

A little more trickery produced the menu effects I was looking for.  This one was somewhat challenging...  I wanted the links to change on mouseover, usually .Text does this with a tag for the Links, however, there are 2 <a> items per line on the lines that have rss feeds.  I wanted it to work on the entire ListItem tag and not wrap.  If I used display: block; as you normally do for this kind of effect, it wrapped the links to a new line and I didn't like that. So I set the <li> tags to a specific class and used a little javascript to swap this.className, the result is precisely what I wanted.

A couple items of note: padding is broken in gecko... list item padding escapes to the right, it's off the screen so I don't care, but it would be nice if they supported it correctly.  rss images all stack up in Konqueror, who cares Konqueror is a pile of ..... use anythingelseinsteadofkonqueror.


Cool Article on PNG

UPDATE! -- I knew someone must have already figured this out... Thank you Sean Michael Foy.

This is a nice article on PNG opacity, too bad we actually need it, I really don't know why Microsoft chose not to include png support in IE6 like they were supposed to, hopefully they are announcing IE7 at PDC.... one can only hope.

I need to implement this here so I can get rid of that lame gif mcp logo, the flat one was bad, the gif a little better, but the png looks great.

p.s. this also serves as a test for blogging to .text with w.bloggar :)


Calling Webservices from Javascript


and why would I want to do that?

I have an application that needs to add several database items from the same page. One reason I thought that this was a perfect solutions was this:

I have an unusual Invoice creation form. When that form starts it does some initial default things for inserting a new record, the user fills out some basic stuff, like it adds some dates and a facility for which the Invoice is from. Now that I have entered these, I don't want to loose them, and I don't want to re-order the entry because it has been optimized by watching how our users enter data for several years. Now the user needs to do a lookup for the person/company that is being billed. Sure we could list everyone in a dropdown, but this is a secure internet app and we don't want all that traffic being passed every time the page loads. Besides, it's just a bad way of doing UI to list several thousand entries in a dropdown, so what alternatives do we have? I'll just mention 3 and the reason I chose the last.

  1. You can use some codebehind, do a lookup and reload the page based on the results.
  2. You could use a popup form or a second page to do the lookup then transfer it back over to the main Invoice page.
  3. You can use a webservice called from javascript.

Number 1. will cause a frightening number of problems including wasted traffic reloading list items, hassles with state maintenence, blah, blah... overall just a bad solution for me. It may be the way most people are doing this but think about reloading 6 datagrids(used in place of dropdowns) and the state every time the page refreshes...

Number 2. - this was originally the method I used but it also has lots of problems, like the second page getting hidden behind the main page when a user clicks back on the main page for some reason only known to the user (users are NEVER prdictable in how they traverse documents) and then there is the whole issue of moving all the data from one page to another, sure therre are plenty of methods to do it, but none are really that great.

That leaves Number 3. I need to lookup a Customer based on their Customer ID OR Customer Name OR some other data in their record (3 other fields). This part is fairly simple, we do a sql lookup that can search multiple fields, but what if we get multiple rows as a result, or nothing is found and we want to add the Customer as a new Record?

Handling all this from a single page seems daunting or is it? Actually is really simple and elegant when you can use a webservice to return different types of data depending on what is found during the lookup. So how do we do this?

I am going to give you a whole case scenario in a later article since this was quite profound for me when I got it through testing, and into a production app. For now here are the basics:

Create your Webservice with the methods you want to call and have it return an XML Document. This document is going to be dropped into an empty <div> that we have hidden on the page, can also use IE's popups, but then you are limited to only allowing IE as a browser, same goes for <xml> tags. The xml document should have a basic structure something like this:


Obviously you will be tailoring it to your needs but I wanted to show some ideas of what it is capable of, the next article on this subject will be in MUCH greater detail.

Add an xml tag tou your page body to hold the results.

<xml id="xmlCustomer" />

To call the webservice we add some javascript to our form like this:

// Webservice connection
function initWebservices()
function DoMyLookup(value) {
document.all.body.CallMyWebService.callService(wsResult, "LookupCustomer",value);

function wsResult(result) {
// Insert the result into the div (this method uses IE only for now
if (!result.error) {
// stuff the result into an XML Document
if (document.all.xmlCustomer.documentElement) {
var xslData = new ActiveXObject("Microsoft.XMLDOM");
xslData.async = false;
document.all.divCustomer.innerHTML = document.all.xmlCustomer.transformNode(xslData.documentElement);

In your body's tag call the init script like this:

<body id="body" style="BEHAVIOR: url(../" onload="initWebservices();">

You can do this for several results by using <div>'s and onresult="behavior..." this will also give you several asyncronous areas to pump data into on a single page.

note: You will need to download the behavior for it to be able to function correctly.

Now you can call the webservice from a button like this:

<input onclick="DoMyLookup(document.all.txtSearch.value);return false;" type="button" />

I use the return false so there is no event bubbling from the click.

As I said before, this is a really basic idea of how to call a webservice from javascript and leaves out alot of details, a full article is being prepared.

Have fun.