Part 3 - Building a Submission Form that Saves In Progress Drafts (MSFT AJAX)
The adventure continues, and as with trying learn new technology that is not very documented or has been around but one never bothered to ever use...one must navigate brick walls carefully.
In the previous two installments - bunch of code, and techno babble was thrown about - hopefully I was remotely close to making it non technical but technically sound... Perhaps you already have tweaked the code example and have it running? If you did kudos! Myself...well let's talk about troubleshooting...and some more code and some more mumbop jumbo.
Web services are a great way exchange information, and while they were primarily designed to provide a communications wrapper so that current technology could still inter op with mainframes or other disparate systems and companies would not lose their huge investment. Web services as they have evloved - have become performant and the differences between hitting a aspx page that talks directly to a database and that of the web service hitting the database is usually no more than 5-15% at 100% CPU load of the server and below the 100% CPU utilization 1-3% of that of the direct mode and WCF will improve that performance mode greatly with Binary transport modes (I said I never actually wrote a web service - didn't say I didn't have alot of experience with them) . It makes sense to expose certain aspects if not all of the business tier logic as WebMethods as in the end - it can lead to greatly scalable code without necessarily having to do COM remoting and it can be just as secure as everywhere else in your application...
Troubleshooting web services however, can sometimes be disguised as Naomi Campbell - sexy on the outside but wait for that ring - err - between the ears cause suddenly she woke you up from that dream throwing her cell phone at your head...In other words troubleshooting is much more time consuming with Ajax and dealing with Web Services...Luckily, we aren't dealing with trying to talk to WebSphere or some other service. All we want is to have is .Net talk to .Net - kinda - because actually we are invoking it through JavaScript - but luckily with a .Net experience. But, get ready for more Sys.Parameter errors, script errors that indicate there is no such method... and more fun...
Again - note this series is to walk you through the actual development and troubleshooting, as I am no Scott Guthrie or anything - they make it look easy and it is once you get past all the baby steps...The issues devs have is 'Hey what does this error mean'... you can have the most perfect code example in front of you but if you do not understand the hows and whys and what to expect when you don't get it right... odds are not a heck of alot of help...
There are a variety of tools you should already be using:
FireFox - Firebug is a excellent debugger as it has a Console Mode which allows you to see the errors scroll by in real time. There is a Debugger mode that allows you to jump directly to the offending error in either the javascript or html., and then an Inspector Mode that lets you see just how the page is constructed on the client side. Personally I find it one of the easiest tools to use. If you are not testing on Firefox you should - as when IE gets memory bound, it will stop reporting debugging errors and you will assume that your code passed which will never be the case. In reality if its not working in one - its not actually working in the other.
You should already know about Fiddler (and it was updated this week) and the WebHelp Developer so I won't cover them as Firebug works better for me in alot of testing scenarios...
Previously we have already developed the WebService, the UI page, and the database. We now have to wire all this up.
First we will need to let the ScriptManager know that we need a reference to a web service.
We do this rather simply actually by merely adding <Services> tags for each service we want the SCM to be aware of.
Example:
<asp:ScriptManager runat="Server" ID="sm">
<Services>
<asp:ServiceReference Path="~/SubmissionThrottle/SubmissionService.asmx" />
</Services>
</asp:ScriptManager>
Troubleshooting tip NUMBER 1: Make sure your Path= Statement is correct...
I stared at code for a good two hours trying to figure out why "SubmissionService" is not a valid method. It wasn't until I drilled into the Source Inspector using Fiddler - did the error message actually state - could not find the SubmissionService.asmx. Instead, I though the issue was with my js code and well - that was frustrating...How did I find out what the real error was... I used FireBug to drill down through the "Inspector" layers as such:
Here is our somewhat working code (the upper portion of the script as from last post - it wqas the only changes I have made: <script type="text/javascript">
//AjaxControlToolkit.SubmissionThrottle = function(element) {
// AjaxControlToolkit.SubmissionThrottle.initializeBase(this, [element]);
// *** global references so we don't get partials
// this.ServicePath = "SubmissionService.asmx";
// this.ServiceMethod = "SaveBackGroundBackup";
var Title = document.getElementById('txtTitle');
var Category = document.getElementById('drpCategory');
var Summary = document.getElementById('txtSummary');
var Keywords = document.getElementById('txtKeywords');
var Article = document.getElementById('txtArticle');
// *** Frequency of updates - 5 seconds
var PingFrequency = 5000;
var LastUpdateCheck = new Date();
var IsMSIE = navigator.userAgent.indexOf('MSIE') > -1 ? true : false;
function WriteMessage()
{
SubmissionService.SaveBackGroundBackup($get(Title,Category,Summary,Keywords,Article,OnWriteCallback));
}
function OnWriteCallback(Result)
{
var Ctl = $get('lblStatus');
Ctl.value = new Date().getTime();
}
function GetMessages(CheckMessageTimeout)
{
// *** Health Checking only fires if no request was fired in PingTimeout period
if (CheckMessageTimeout && new Date().getTime() - PingFrequency < LastMessageCheck.getTime() )
return;
LastMessageCheck = new Date();
SubmissionService.SaveBackGroundBackup($get(Title,Category,Summary,Keywords,Article,OnWriteCallback,OnMessagesError));
}
function GetMessagesCallback(Result)
{
// *** Queue next messages in x Seconds
window.setTimeout("GetMessages()",PingFrequency);
if (Result == null || Result == "")
return;
var Ctl = $get('lblMessages');
var Message = Ctl.innerHTML;
Ctl.innerHTML = Ctl.innerHTML + Result;
$get('divMessages').scrollTop = 999999;
}
Sys.ParameterCountException: Parameter count mismatch.Eh...You'll get this out of the ScriptResource.axd. The ScriptResource.axd much like the WebResource.axd will be you enemy and foe. You'll wonder why such things as Images are part of a WebResource.axd and ultimately be responsible for a slew of errors if they are not found... Personally, I don't understand why Ajax and the SCM handle these situations in the manner they do but as of Beta2.. they still do.... However, in our scenario we are basically in the mode - this means that an element is null but not really... And everything on our form is null when it first loads. Which means that we will need to the Parameter count mismatch could be any number of things actually because we have several problems with our code. Remember the SCM - Ajax Beta 2 - much better error reporting than Atlas or even Beta 1 - but its not necessarily a one to one mapping. None the less.. in the dev world this akin to tracing a circular reference... Hate to put it that way because we program against the oddities and error conditions but in some cases we simply can not... and the debugger and associated other tools we have don't work as expected in the Ajax environment...when we assume - we make coding asses out out of ourselves (sorry I am not a fan of Fox news or anything - but they have no problem with that lingo..)
For instance - I know that we are going to have a third error here shortly because I haven't properly addressed any images. Images not found cause Sys.Parse errors and subsequent input string of the Wrong Format....errors........But for now let's get something written to the database. We'll deal with the fact you just have to trust me a image not found will break your application.........
1. Our database code performs an update - since we haven't addressed ever inserting a record so we can't exactly do a update. So - one explanation for the error, we have several options:
- Insert a new record as soon as part of the page_load event for the aspx page.
- Use the same WebService call - and first try to do a update if it fails do the insert instead.
- pass a timer count and if its < 1 then we know its an insert...
I am sure there are other ways to handle this - we'll do the update and if it fails then we merely do the insert. The notion is less noise as we are not passing a count variable, and the update should always work less the first time. Additionally, we need to make sure none of the variables are null. Its better on the db side that they be empty strings versus a null value. The reason: Null values in the database are treated as white space. In other words SQL will fill whatever the limit is for the SqlDBType to the maximum length - which is excessive use of space.
2. We have no idea at this point the javascript code is correct and works. We know the timer is, as we are getting the polling messages (and subsequent error). But I suspect my definition for the variable is correct. Some examples show grabbing the Element, others by Document, and others two phase commit to grab by document via the element and then the inner property. Confusing huh...
So thats were we stand at right now....
Next installment - more of the same....Don't worry when I (we--actually, cause your suffering through this thinking I have magic solution...) get it actually running - I'll streamline it to a just code edition....