TexasJetter

The CODE Framework is an extensive set of utilities that can make your life easier. The tool I want to talk about today is the AsyncWorker. This little gem can be found in the CODE.Framework.Wpf.Mvvm name space and provides a convenient way to execute code on a background thread without having to recall the syntax required to go through the application dispatcher to invoke and control a background thread.

While working on a recent WPF project I came across a situation where I need to filter a collection based on user input. Additionally this project used the MVVM methodology, so the desire was to have as much as possible in the view model, not in the XAML or in the code behind. When faced with this situation normally you would just take the filtering criteria and apply a LINQ query on the collection to return a new list to base your display on. However in this case the collection was an Observable one and I needed to edit the filtered result and maintain the notify change event. These requirements ruled out the new list technique, and lead me to discover the CollectionViewSource. I asked around the office, and not many people had seen its use in a view model setting, so I thought I would do a quick post to document it.

So fire up Visual Studio and start a new WPF project and let’s get started.

This will be a short and simple post dealing with an improvement on the traditional display and editor templates normally found for MVC date display. If you are not familiar with the issue, normally a DateTime field will display the full information, including the time. Commonly this is not the desired display, we only want the date part. While you can format the display on each view, that becomes cumbersome, and it is easy to miss one. MVC has a great solution for that, called DisplayTemplates. Located in the \Views\Shared\DisplayTemplates folder they will apply to that data type site wide. So creating a DateTime.cshtml file here will be used for the display anytime the @Html.DisplayFor helper is used (the same is applied for the @Html.EditorFor and the EditorTemplates folder).

Commonly the contents of the DateTime.cshtml file is simple:

This partial view simply formats the DateTime values using the ShortDate pattern. Simply create the file, and you are ready to do… But what if the field is initialized, but has no value? I recently had a case where the field was not null, but contained the default date of 01/01/0001. Obviously this was not the desired display. Continue on to find out the simply solution.

Last time we looked at getting DataTables to work with AJAX to retrieve just the records we are interested in viewing. This allowed us to minimize the traffic sent across the wire to our client. It also increased the responsiveness of our UI. But data is seldom static, so we need a way to create/update/ delete our information. All together now, say ‘aw CRUD!'

If you look at the DataTable documentation is has a sample (not MVC) showing how to use jEditable for in place updating. This technique essentially allows you to click on any “cell” and edit it. I wanted to go a different route and have a “pop-up” editing form displayed. To accomplish this I utilized the jQuery Form plug-in. This plug-in allows us to define an edit and delete form which is initially hidden, and only displayed when we are performing a create/update/delete action. There will be a fair amount of code when we are done, so this may take a couple of posts. The first thing to do is fire up Visual Studio and get coding!

(If you can't wait until the end you can download the code here)

In the first posting (MVC and DataTables) in this series we got a simple DataTables page up and running in MVC. But we are not done yet!

It’s worth noting that there are several options you can pass to the DataTables constructor. If you want more than just the Previous/Next pagination you can pass “sPaginationType”: “full_numbers”. If you want the layout to follow your jQuery UI theme pass “bJWueryUI”: true. See http://www.datatables.net/usage/options for more details on the options DataTables supports.

If you have a limited number of records you are dealing with this simple process works ok, however if you have a large number of records performance starts to degrade, and you will get a "Flash of Uninitialized JavaScript UI," or FOUJUI as my friend Todd Anglin would call it. Basically you will momentarily see the HTML table in its raw format before the JavaScript kicks in and applies its layout. Try changing the number of records being returned in the controller to a higher value to see this effect.

One of the first things that Web Forms developers notice when starting to use MVC is the Model View Controller paradigm. The second thing (followed by a high shrill screech) is the absence of Controls. Followed by the incredulous question ‘what do you mean there is no GridView?’ I have to admit when I first started looking at MVC this bothered me a bit as well. Using a @foreach loop to build an HTML table gave me flashbacks to Classic ASP development. Eventually I accepted it as just another way that MVC departed from the Web Form way of development.

As I continue to explore MVC and its capabilities I am constantly impressed with how flexible MVC really is. In my exploration of the MVC ethos I have come across a couple gems, the jQuery DataTables plug-in and T4 Templates. I wondered why someone hadn’t created a T4 template using a jQuery table, and further thought that a well implemented T4 Template using DataTables might be a good rebuttal to the no GridView ‘problem’.

Covering this will take several posts, in the first one we will get DataTables hooked in our view. Then we will explore some T4 templating to easily implement our custom view.

So if you are interested read on…

Having a mobile version of your site is quickly become a requirement, not an optional request. Being able write a project once and display your information on multiple platforms is the quest of all developers these days. There are a lot of frameworks and development platforms that promise the developer they can do just that. Some work, some don’t, but in my mind the most promising is HTML5 applications.

After finishing up a nice new MVC site I want to look at a mobile version. I came across a new (in beta) framework called jQueryMobile. One of the attractions of this framework is that they utilize HTML5 markup, and have a pretty impressive support matrix.

So armed with my MVC project I downloaded jQueryMobile and began my quest for a cross mobile site.

 jQuery is a fantastic way to interject dynamic content and actions into your web pages. MVC is Microsoft’s cutting edge data driven web technology. More and more we are seeing the two technologies 'married' together to give the user a very interactive, high scalable experience. Recently I had an inventory system that I wanted to allow the customer to input the product id, or partial product name and quickly navigate to the details of that product. In another area I wanted to allow the population of a form based on previous data entry, so again a lookup of data was desired. The autocomplete feature of jQuery proved to be the tool for both of these tasks.

I found a couple of post by Mr. James that gave me a great head start.

For this exercise I created a simple 3 page MVC project that used the Northwind Customers table. I also elected to use the EntityFramework to manage the connection to the database.

Everything is sharper now that Texas Jetter is using MVC3 Razor script! I started development on Texas Jetter late last year, and before I could publish it, Microsoft introduced MVC3 and it's Razor scripting. I decided to go ahead and post what I had, and began the process of converting (and a little refactoring, since you can't do something the same way twice). Things have been a little busy, but finally I was at the point where I could post the Razor version of Texas Jetter.  The conversion was not bad, but I did find a couple of items that gave me,,, um topics to research?

Recently I had the need to export a grid from my ASP.NET page to an Excel spreadsheet. While searching for solutions I came across a post by Erika Ehrli titled How to Export Data to Excel from an ASP.NET Application + Avoid the File Format Differ Prompt. This article is well written and as the title suggests talks about the pesky prompt you receive when exporting an ASP.NET view to a spreadsheet. It also outlines 4 different approaches to exporting to Excel, I highly recommend you check it out.

For my purpose I settled on generating the spreadsheet from a GridView. This is a common technique and very simple to implement. However I wanted a little more control over the formatting of the resultant spreadsheet, and this was a limitation Erika listed. So with a little more research here is how I managed to exercise formatting control of the spreadsheet while still using simple ASP.NET techniques.

Congratulations to me! It’s my birthday and this is the first post to my blog. While it may not seem like much, this is my first public facing MVC based website. Hopefully in the months to come I will have time to add some real topics of interest. Most likely the first one will be an example on how to export an ASP.NET Datagrid to Excel. This may not sound like a topic worthy of a post, but I will show you a secrete on how to control the formatting of the Excel spreadsheet so that it more closely matches that of your website.