Using Trace Viewer for WCF Services

Just wanted to write about a great tool for assisting in debugging issues with a WCF service…and that’s Trace Viewer…some more info about Trace Viewer can found here.

Note: On my machine…running Win7 Ultimate, the exe (SvcTraceViewer.exe) was located in the C:\Program Files\Microsoft SDKs\Windows\v6.0A\Bin folder.

We couldn’t determine why a certain request to the service would not complete and Trace Viewer showed us the following:

There was an error while trying to serialize parameter http://tempuri.org/:GetDailyDetailsResult. The InnerException message was ‘Maximum number of items that can be serialized or deserialized in an object graph is ’65536′. Change the object graph or increase the MaxItemsInObjectGraph quota. ‘. Please see InnerException for more details.

We increased the MaxItemsInObjectGraph by following the answer from Daniel Bergsten here

…and voila!…we get data back from the service now!

Here’s part of the relevant client config section.

<system.serviceModel>
    <client>
<endpoint address="http://localhost:3379/ServiceViewEvent.svc" behaviorConfiguration="ServiceViewEventBehavior"
        binding="wsHttpBinding" bindingConfiguration="WSHttpBinding_IServiceViewEvent"
        contract="ServiceReferenceViewEvent.IServiceViewEvent" name="WSHttpBinding_IServiceViewEvent">
        <identity>
          <dns value="localhost" />
        </identity>
      </endpoint>
</client>
<behaviors>
      <endpointBehaviors>
        <behavior name="ServiceViewEventBehavior">
          <dataContractSerializer maxItemsInObjectGraph="2147483647"/>   
        </behavior>
      </endpointBehaviors>
</behaviors>
  </system.serviceModel>

Note the

<dataContractSerializer maxItemsInObjectGraph="2147483647"/>

section in both config files

Here’s part of the service config

<system.serviceModel>    
   <services>
      <service behaviorConfiguration="Umea.se.EventReactor.ServiceTier.ServiceViewEventBehavior"
       name="Umea.se.EventReactor.ServiceTier.ServiceViewEvent">
        <endpoint address="" binding="wsHttpBinding" contract="Umea.se.EventReactor.ServiceTier.IServiceViewEvent">
          <identity>
            <dns value="localhost" />
          </identity>
        </endpoint>
        <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" />
      </service>
    </services>
    <behaviors>
      <serviceBehaviors>
        <behavior name="Umea.se.EventReactor.ServiceTier.ServiceViewEventBehavior">
          <serviceMetadata httpGetEnabled="true" />
          <serviceDebug includeExceptionDetailInFaults="false" />
          <dataContractSerializer maxItemsInObjectGraph="2147483647" />
        </behavior>
      </serviceBehaviors>
    </behaviors>
  </system.serviceModel>

Debugging a WCF Service

Start an instance of Visual Studio

Open the WCF solution and run the service

Open another instance of Visual Studio

Open a WCF client project…add the WCF service project to the solution

Add this to the client’s .config file…whether it be the web.config or the app.config

<system.web>
  <compilation debug="true" />
<system.web>

Set the client project as the start-up project

Set a breakpoint in the WCF client app and start the WCF client app

You should now be able to step into the code in the WCF service

Here’s the MS article on how to debug a WCF service

Deploying VSTO applications

Today we needed to deploy an Excel VSTO (Visual Studio Tools for Office) application that we wrote in Excel.

We used the excellent guide that’s on MSDN here.

What’s not clear is that when a user runs the setup.exe…since we’re in a enterprise/intranet situation, we deploy it to a webserver and give the user a link to the setup.exe file…is that the xlsx file does not come along for the ride with the setup…

So…pro-tip…when deploying a project using the instructions from the MSDN guide..be sure to:

1. give the user a link and instructions to run the setup.exe file
2. give the user a link to the .xlsx file…once the VSTO application is installed on the user’s machine…they can download the .xlsx file, save it to their local machine and then they can happily run your application.

Soup to nuts guide to adding jQuery UI’s datepicker to jEditable

Mika has done a fantastic job supplying the jQuery community with his excellent in-place editing add-in jEditable.

He has also graciously provided us with a page explaining how to add custom input types.

But for us jEditable noobs looking to add custom input types to our pages…there was nowhere to go to find out how to tie it all together…that’s what this post will hopefully do.

Since we almost always keep our javascript in a separate file, let’s start with the html…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script src="/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="/scripts/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
    <script src="/scripts/jquery.jeditable.js" type="text/javascript"></script>
    <script src="/scripts/demo.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

You’ll notice that we’ve added four javascript files…jQuery itself…jQuery UI (be sure and select the Datepicker widget when building your jQuery UI download)…the jEditable file and our custom demo file.

Now we’ll just add in some css files and a table…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <link href="/content/Site.css" rel="stylesheet" type="text/css" />
    <link href="/content/ui-lightness/jquery-ui-1.8.1.custom.css" rel="stylesheet" />
    <script src="/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="/scripts/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
    <script src="/scripts/jquery.jeditable.js" type="text/javascript"></script>
    <script src="/scripts/demo.js" type="text/javascript"></script>
</head>
<body>
	<div align="center">
		<table class="checkbookChecksTable centerMyTable">
		    <thead></thead>
		    <tbody>
		        <tr>
		            <td style="width: 70px;">
		                <span class="">A Batch ID1</span>
		            </td>
		            <td style="width: 70px;">
		                <span class="">2010-01-27</span>
		            </td>
		            <td style="width: 70px;">
		                2010-01-20
		            </td>
		            <td style="width: 90px;">
		                An Account Code1
		            </td>
		            <td style="width: 90px;">
		                An Account Code1 Description
		            </td>
		            <td style="width: 90px;">
		                A Vendor 1
		            </td>
		            <td style="width: 70px;">
		                ($114.56)
		            </td>
		            <td style="width: 50px;">
		                <input type="button" class="checkbookButton" value="Save">
		            </td>
		        </tr>
		        <tr>
		            <td style="width: 70px;">
		                <span class="">A Batch ID2</span>
		            </td>
		            <td style="width: 70px;">
		                <span class="">2010-01-01</span>
		            </td>
		            <td style="width: 70px;">
		                2010-01-01
		            </td>
		            <td style="width: 90px;">
		                An Account Code2
		            </td>
		            <td style="width: 90px;">
		                An Account Code 2 Description
		            </td>
		            <td style="width: 90px;">
		                A Vendor 2
		            </td>
		            <td style="width: 70px;">
		                ($55.67)
		            </td>
		            <td style="width: 50px;">
		                <input type="button" class="checkbookButton" value="Save">
		            </td>
		        </tr>
		        <tr>
		            <td style="width: 70px;">
		                <span class="">A Batch ID2</span>
		            </td>
		            <td style="width: 70px;">
		                <span class="">2010-01-01</span>
		            </td>
		            <td style="width: 70px;">
		                2010-01-01
		            </td>
		            <td style="width: 90px;">
		                An Account Code3
		            </td>
		            <td style="width: 90px;">
		                An Account Code 3 Description
		            </td>
		            <td style="width: 90px;">
		                A Vendor 3
		            </td>
		            <td style="width: 70px;">
		                $1,252.90
		            </td>
		            <td style="width: 50px;">
		                <input type="button" class="checkbookButton" value="Save">
		            </td>
		        </tr>
		    </tbody>
		    <tfoot></tfoot>
		</table>
  </div>
</body>
</html>

OK, so now our page looks like this…just a simple table for illustration purposes…

A simple table

Let’s build our demo.js file now…

$(document).ready(function() {
	    $('.editabledatepicker').editable(function(value, settings) {
	        return (value);
	    }, {
	        type: 'datepicker',
	        onblur: 'submit',
	        tooltip: "Click to edit...."
	    });
});

See the selector referencing the class editabledatepicker…that’s just normal jEditable syntax right?…so let’s go ahead and add that class to the appropriate cells in our table…

Here’s what one of the rows looks like now with the editabledatepicker class added…

		        <tr>
		            <td style="width: 70px;">
		                <span class="">A Batch ID1</span>
		            </td>
		            <td style="width: 70px;">
		                <span class="editabledatepicker">2010-01-27</span>
		            </td>
		            <td style="width: 70px;">
		                2010-01-20
		            </td>
		            <td style="width: 90px;">
		                An Account Code1
		            </td>
		            <td style="width: 90px;">
		                An Account Code1 Description
		            </td>
		            <td style="width: 90px;">
		                A Vendor 1
		            </td>
		            <td style="width: 70px;">
		                ($114.56)
		            </td>
		            <td style="width: 50px;">
		                <input type="button" class="checkbookButton" value="Save">
		            </td>
		        </tr>

Here’s where the real magic comes into play…notice in our first run at our javascript file, we specified a type when setting up our editabledatepicker

type: 'datepicker',

so now we have to let jEditable know about our datepicker type with this little bit of javascript…

	    jQuery.editable.addInputType('datepicker', {
	        element: function(settings, original) {

	            var input = jQuery('<input size=8 />');

	            // Catch the blur event on month change
	            settings.onblur = function(e) {
	            };

	            input.datepicker({
	                dateFormat: 'yy-mm-dd',
	                onSelect: function(dateText, inst) {
                            // you may want to remove this or 
                            // change it to 
                            // jQuery(this).submit(); 
                            // see GamB's comments below
	                    jQuery(this).parents("form").submit();
	                },
	                onClose: function(dateText, inst) {
                            // you may want to change this to 
                            // jQuery(this).submit(); 
                            // see GamB's comments below
	                    jQuery(this).parents("form").submit();
	                }
	            });

	            input.datepicker('option', 'showAnim', 'slide');

	            jQuery(this).append(input);
	            return (input);
	        }
	    });

…see the addInputType?

That’s how we add a custom input type to jEditable!

Now our js file looks like this…

    $(document).ready(function() {
	    jQuery.editable.addInputType('datepicker', {
	        element: function(settings, original) {

	            var input = jQuery('<input size=8 />');

	            // Catch the blur event on month change
	            settings.onblur = function(e) {
	            };

	            input.datepicker({
	                dateFormat: 'yy-mm-dd',
	                onSelect: function(dateText, inst) {
	                    jQuery(this).parents("form").submit();
	                },
	                onClose: function(dateText, inst) {
	                    jQuery(this).parents("form").submit();
	                }

	            });

	            input.datepicker('option', 'showAnim', 'slide');

	            jQuery(this).append(input);
	            return (input);
	        }
	    });

	    $('.editabledatepicker').editable(function(value, settings) {
	        return (value);
	    }, {
	        type: 'datepicker',
	        onblur: 'submit',
	        tooltip: "Click to edit...."
	    });
    });

and…when we click in the date cell…we’ll see this…

the calendar

When we choose a date, it’s written back to the table cell…works just as we’d expect!

Really diggin’ jqGrid

We’ve been using jqGrid to prototype a CRUD (Create…Update and Delete) app and I am really digging some of the features…yeah, it’s got a bit of a learning curve and I’m still using plain old tables for some stuff, but there are some things about it I really like…for instance this…

Screenshot of Row Data - in VS 2008's javascript debugger

That’s data from a row after the user double-clicked the row…isn’t that nice?
So now when I go

var acctCode = rowData["AccountCode"]

I would see 000-10300 as the value for the variable acctCode

Verrrrryyy niiice…

So…just wanted to show you guys how nicely jqGrid returns it data and makes it really easy to work with…
And for some background…here’s how I got to the screenshot above…note the ondblClickRow event handler jqGrid provides

    jQuery("#filteredAccounts").jqGrid({
        url: '/CRUDApp/GetAccounts/?id=' + id,
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Account', 'Description'],
        colModel: [
                        { name: 'AccountCode',
                            index: 'AccountCode',
                            width: 200
                        },
                        { name: 'Description', index: 'Description', width: 200 }
                      ],
        sortname: 'Description',
        sortorder: "asc",
        rowNum: 10,
        viewrecords: true,
        pager: 'pagerFilteredAccounts',
        height: '100%',
        ondblClickRow: function(rowid) {
            setAcctFromGrid(rowid);
        },
        autowidth: true
    }).navGrid('#pagerFilteredAccounts', { edit: false, add: false, del: false, search: false, refresh: false });

    function setAcctFromGrid(rowid) {        
        var rowData = jQuery("#filteredAccounts").getRowData(rowid);
    }

Hey I like Linq…really I do!!

We’re trying to retrieve a distinct list of pay check dates from a table that contains multiple records per pay check…like so

employee_hour
employee_Id	some_column	some_other_column	check_date
00001	foo	bar	01/01/2010
00001	foo	bar	01/01/2010
00001	foo	bar	02/01/2010
00001	foo	bar	02/01/2010

But sometimes it seems like you’ve got to go around your elbow to get to yer…..

In t-sql we would write:

select distinct check_date from employee_hour where employee_Id = anEmployeeId order by check_date desc

but in Linq, we came up with this:

var empHr = employee_hour.Where(z => z.employee_Id == anEmployeeId )
                         .Select(eh => eh)
                         .GroupBy(e =>e.check_date)
                         .Select(x => x.FirstOrDefault())
                         .ToList()
                         .OrderByDescending(y => y.check_date);

According to LinqPad, awesome product BTW, the sql emitted by Linq looks like this:

SELECT 
[Limit1].[employee_Id] AS [employee_Id], 
[Limit1].[some_column] AS [some_column], 
[Limit1].[some_other_column] AS [some_other_column], 
[Limit1].[check_date] AS [check_date]
FROM   (SELECT DISTINCT 
	[Extent1].[check_date] AS [check_date]
	FROM employee_hour AS [Extent1]
	WHERE N'anEmployeeId' = [Extent1].[employee_Id] ) AS [Distinct1]
OUTER APPLY  (SELECT TOP (1) 	
	[Extent2].[employee_Id] AS [employee_Id], 
	[Extent2].[some_column] AS [some_column], 
	[Extent2].[check_date] AS [check_date], 
	[Extent2].[some_other_column] AS [some_other_column]	
	FROM employee_hour AS [Extent2]
	WHERE (N'anEmployeeId' = [Extent2].[employee_Id]) AND (([Extent2].[check_date] = [Distinct1].[check_date]) OR (([Extent2].[check_date] IS NULL) AND ([Distinct1].[check_date] IS NULL))) ) AS [Limit1]

Bottom line…Linq’s not always easier…but the advantages of using Linq…especially the ability to query objects…still outweighs the disadvantages…despite it’s occasional verboseness.

Use a C# const in javascript

I’ve got some purposely misnamed objects (SQL Server Reporting Services reports in this case) in a project and I want to refer to them, both server-side and client-side, from the same place so that when I get ready to change the names of the objects to their real/final names I’ll only have to change them in one place…

In a public static class, set the names of the reports/objects to a const like so…

public static class MyStaticClass
{
    public const string FoobarReportName = "foobar";
}

In an aspx page, in the case of this particular ASP.Net MVC project I used the Site.Master page, enter a script tag with a javascript global declaration like so…

        <script type="text/javascript">
            var foobarReportName = '<%= MyStaticClass.FoobarReportName %>';
        </script>

Now you can use foobarReportName in your javascript like so…

function SubmitThisForm(reportName) {
    if (foobarReportName == reportName) {
        alert('foobarReportName is ' + foobarReportName);
    }
}