Sunday, June 29, 2008 9:07 AM
rrobbins
Custom Web Service Test Page Design
You can customize the design of a web service's test page with a single line of code in the web.config file. But like most things in ASP.NET it is not that easy if you actually try it!
Although you can find instructions on how to specify a custom wsdlHelpGenerator page it does not seem as if any developer has gone through with it and actually customized the design. They just tell you about the obscure web.config tag and leave it at that. This reflects the typical programmer's indifference to design. Although, to be honest, you really don't need to customize the design of the web service's test page because this is rarely exposed to the public.
The first thing you should do is copy the default wsdlHelpGenerator template which is buried in the framework's CONFIG folder. On my system I found it at: C:\WINNT\Microsoft.NET\Framework\v2.0.50727\CONFIG\DefaultWsdlHelpGenerator.aspx
When you have a copy of that file in your web root, edit your web.config file so your ASP.NET site will use your copy of the template page instead of the default template:
1: <configuration>
2: <system.web>
3: <webServices>
4: <wsdlHelpGenerator href="WSHelpPage.aspx"/>
5: </webServices>
6: </system.web>
7: </configuration>
The DefaultWsdlHelpGenerator.aspx page is coded in C# using a script block marked runat=server so don't try this with a VB.NET project. This is one of those cases where VB.NET developers are really treated like second class citizens of the .NET Framework world because there is no VB.NET version and you would have a tough time converting the code. It is a lot of code.
However, if you just want to do something simple like change the color of the heading then you can leave the code alone and just edit the CSS. But even this is not that easy. The actual style for the heading appears to be coming from a default local resource. I was unable to figure out exactly where the string is coming from. Maybe some ASP.NET guru can enlighten us on that.
1: .heading1 { <%#GetLocalizedText("Styleheading1")%> }
But a simple solution to this problem is to look at the HTML source in the browser, copy the actual CSS generated, and then edit that for the color. Replace the localized text string with this CSS:
1: .heading1 { 2: color: #ffffff;
3: font-family: Tahoma;
4: font-size: 26px;
5: font-weight: normal;
6: background-color: #A10D0D;
7: margin-top: 0px;
8: margin-bottom: 0px;
9: margin-left: -30px;
10: padding-top: 10px;
11: padding-bottom: 3px;
12: padding-left: 15px;
13: width: 105%;
14: }
15:
Now let's get really ambitious and apply a Master Page and theme to the web service's test page. You definitely don't want to try this with a VB.NET project because the C# code will cause you a lot of problems. First create a new content page with your selected master page. Copy all the HTML in the DefaultWsdlHelpGenerator.aspx page between <div id="content"> and the last </span> into the appropriate ContentPlaceHolder. Add the missing closing </div>. Add every using directive from the DefaultWsdlHelpGenerator.aspx file to the content page's code behind file and the content page itself. Copy all the C# code from the script block into the code file. Change the access modifier of every method and property in the code to public. I was lazy and made everything in sight public. You can take the time to figure out which properties really need to be public if you like. The title of the content page is a bit tricky but it can be specified using single value data binding:
1: Title='<%#ServiceName + " " + GetLocalizedText("WebService")%>'
As an example of how beautiful you can make your web service test page, I've used the Commerce template from the ASP.NET Master Pages Template Set to apply a really fancy design to my file downloader web service's test page. Click the image to see the larger image.
Filed under: CSS, Design Templates, Web Services, ASP.NET 2.0