Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

October 15, 2013

ASP.NET Web API w/ASP.NET Client & Supporting IE 8

Filed under: ASP.NET,ASP.NET Web API @ 4:35 pm

Last week, I deployed (to test) my first "real" ASP.NET Web API service with a JQuery / ASP.NET client. The deployment ran into some minor difficulties, but no major issues. At least not until the testers decided to run it with IE 8. Then it was one thing after another after another.

I thought it would be useful to document all of the issues that we ran into for future reference.

Subdirectory

The very first problem that we ran into was the web site subdirectory. The existing site was deployed under a subdirectory, so it was accessed something like this:

http://<siteName>/OnlinePayment/CustomerPayment.aspx

Where "OnlinePayment" was the subdirectory name.

When running from localhost, there really is no concept of a subdirectory. So "it worked fine from my machine". But when the testers tried the first version of the test deployment, the Web API call kept returning "Not Found".

If I added the subdirectory to the path on the Web API call, then I could no longer run the application from localhost.

I ended up adding code something like that shown below in order to get the code to run either from localhost or from the site with a subdirectory:

var baseUrl = ‘http://’ + $(location).attr(‘host’);
var apiUrl;

($(location).attr(‘href’).toLowerCase().indexOf(‘onlinepayment’) > 0) {
        baseUrl += ‘/OnlinePayment’
}
apiUrl = baseUrl + ‘/API/Customer/’;

This code retrieves the current URL. If the current URL contains the subdirectory name, then it appends the subdirectory name to the url used in the Web API call.

Domain Services

After getting the subdirectory code in place, our next error was "Internal Error". We were able to use the F12 tools to determine more specifically what the "internal error" was. It turned out that the code needed the domain services dlls!

System.ServiceModel.DomainServices.*

I assume this is because our business objects are shared with our Silverlight project which uses Domain Services.

I had to set a reference to the two files so they would be included with the deployment.

That did it! We finally have our page loading on the test server!

NOTE: As soon as we included these domain service DLLs, our deployment suddenly included separate folders for each language … really slowing down our deployment process.

‘JSON’ is undefined

Then it was time to deal with IE8. The page would not even load with the tester’s IE 8. Bummer!

On IE 10 (and any other browser/device they tried) the page worked. But not in IE 8.

The error was "’JSON’ is undefined. jquery-2.0.3.js Line: 349.

I found this link:

http://stackoverflow.com/questions/5339232/json-is-undefined-error-in-javascript-in-internet-explorer

So added the following:

<script src="Scripts/jquery-2.0.3.js"></script>
<script src="Scripts/jquery.validate.js"></script>
<script src="Scripts/json2.min.js"></script>

‘JSON’ is undefined

Well, that still didn’t work. Seems I needed them in order?

<script src="Scripts/json2.min.js"></script>
<script src="Scripts/jquery-2.0.3.js"></script>
<script src="Scripts/jquery.validate.js"></script>

OK, that got us a little further.

Object does not support this property or method

But then IE 8 displayed "Object does not support this property or method" line 834.

Alas, why didn’t I know (or maybe nuget could have told me?) that jQuery 2+ does not support IE 6, 7 or 8?

So spent a bit of time uninstalling the nuget packages I had for jQuery. Then I found out that I could not install an older version from nuget. That seemed odd.

I found Tools | Library Package Manager | Product Manager Console. This allowed me to use a command line within Visual Studio to install an older version of jQuery (1.10.2):

>Install-Package jQuery –Version 1.10.2

And we got the page to come up!

$(location).attr(‘href’)

But as jquery code was executed, IE 8 threw another error.

Remember this line from the code above that we added to handle the subdirectory?

$(location).attr(‘href’)

Well IE 8 does not like that code. I had to change it to the non-JQuery version:

window.location.pathname

Document Mode

Still … no go on IE 8. This time it is a problem with the validation … I’m using jquery-validate.

One of these days I need to set up some VM’s so I have a test system with IE 8. In the mean time, with the help of some very smart MVPs, I found that I could use the F12 tools to emulate IE 8 with IE 10. If I set IE 8 Quirks, I could see the same error that the testers were seeing. If I set to IE 8 Standard, the page would come up.

So I  added the following line at the top of the page. The page would then default to standards mode:

<!doctype html>
<html>
<head>

That was better! The validation would work, even on IE 8.

Accessing an Element

The page worked in all cases, except on IE 8 when there was a message returned from the service. The message would not appear on the page in IE 8.

The jquery code was simple:

$(‘#paymentAmountMessage’).text(returnData.CurrentOperationResult.Messages);

And the HTML:

<td style="max-width: 160px; text-wrap: normal;>
    <div>
        <label id="paymentAmountValidationMessage" class="validationMessage" />
    </div>
    <div>
        <label id="paymentAmountMessage" class="validationMessage" />
    </div>
</td>

After a SIGNIFICANT amount of work … it turned out to be nothing wrong with the service or the message or the jQuery. In IE 8 *only*, it could not find the paymentAmountMessage element.

I changed the HTML as follows:

<tr>
    <td style="max-width: 160px; text-wrap: normal;>
        <label id="paymentAmountValidationMessage" class="validationMessage" />
    </td>
</tr>
<tr>
    <td style="max-width: 160px; text-wrap: normal;">
        <label id="paymentAmountMessage" class="validationMessage" />
    </td>
</tr>

By replacing the two div tags with two separate rows, the code now appears to work in IE8.

I would add my standard "Enjoy" here at the end. But this was not enjoyable at all. 🙂

Hope you have had better luck!

1 Comment

  1.   Todd — October 17, 2013 @ 9:19 am    Reply

    As you mentioned, there is a jQuery1 package that is compatible with IE8 (and even IE6). Sadly there isn’t a jQueryUI1 that matches. If you install jQuery UI, it is going to also install the 1.6.4 version of jquery and won’t let you uninstall it. Very frustrating. Here is some quick info:

    Documentation for IE6 compatible version of jqueryUi: http://api.jqueryui.com/1.9/

    (from the nuget command prompt)

    Install-Package jQuery.UI.Combined -Version 1.9.2
    Uninstall-Package jQuery -Version 1.6.4 -Force

    (the packages.config file)

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2021 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs