A Dynamic Menu For Your Dynamic Data

Posted on August 27, 2008 by Matt Berseth.
Categories: ASP.NET, Contributors, Dynamic HTML.

So I am still playing around with building a Northwind Dynamic Data web site. Tonight I thought it would be interesting to see what it would take to create a menu for navigating the tables in the site. I was particularly interested in seeing if I could get some grouping or categorization to the metadata so I could create a multi-leveled menu. It turns out it wasn't too difficult at all (see the screen shot below - the menu is on the left). I have my tables organized into 4 categories: Sales, People, Products and Reports. And the cool thing is that this menu is completely dynamic. You can add, remove or reorganize the categories without touching the UI. And depending where you are keeping your metadata you could even do this without recompiling your app. The grouping is automatically discovered from the metadata and the menu is built solely off the it so everything 'just works'.

Besides adding the grouping information, I also tagged each of my tables with a custom description that I am displaying under the grids title. Nothing too complicated, but still interesting. Read on if you are curious how I did this and don't forget to check out the download.

Download

image

Adding Category and Description

When MetaTable objects are created, the Dynamic Data components automatically populate the the MetaTable's DisplayName property from the DisplayNameAttribute that is hanging off the metadata class (if you are using the default metadata provider). This is why you see the nice 'Products By Category' title in the screen shot above. I have specifically told Dynamic Data to use this value because I tagged my metadata class with the DisplayName attribute and given it a value of 'Products By Category'. Below this metadata ...

  1. [MetadataType(typeof(ProductByCategoryMetadata))]
  2. public partial class Products_by_Category { }
  3.  
  4. [DisplayName("Products By Category")]
  5. public class ProductByCategoryMetadata
  6. {
  7.     [ScaffoldColumn(false)]
  8.     public object Discontinued { get; set; }
  9. }

To add a category and description to the metadata, I just used the existing Category and Description attributes and added them to the metadata class as well. So now we have ...

  1. [MetadataType(typeof(ProductByCategoryMetadata))]
  2. public partial class Products_by_Category { }
  3.  
  4. [Category("Products")]
  5. [Description("You can use this page to view your products by category")]
  6. [DisplayName("Products By Category")]
  7. public class ProductByCategoryMetadata
  8. {
  9.     [ScaffoldColumn(false)]
  10.     public object Discontinued { get; set; }
  11. }

The Category and Description attributes don't directly map to any properties on the MetaTable type. But, any extra custom attributes that are applied to in the metadata are passed through to the Attribute collection that hangs off the MetaTable class. So with a couple of pretty simple extensions methods I can add them myself (ignoring error handling for now) ...

  1. public static class MetaTableExtensions
  2. {
  3.     /// <summary>
  4.     /// Gets the description for the MetaTable
  5.     /// </summary>
  6.     public static string GetDescription(this MetaTable table)
  7.     {
  8.         return ((DescriptionAttribute)table.Attributes[typeof(DescriptionAttribute)]).Description;
  9.     }
  10.  
  11.     /// <summary>
  12.     /// Gets the category for the MetaTable
  13.     /// </summary>
  14.     public static string GetCategory(this MetaTable table)
  15.     {
  16.         return ((CategoryAttribute)table.Attributes[typeof(CategoryAttribute)]).Category;
  17.     }
  18. }

... and now to get at the MetaTable's description or category I can just go through these methods. So I updated the List template and added a little bit of code that generates a simple title bar generated from the MetaTables DisplayName and Description attributes.

image

and now our List pages have a nice dynamic title bar ...

image

Building the Menu

To build the menu, I am using a ListView tied to a LinqDataSource that uses a Linq query to create a 2 level object structure that I can bind to. First, I wired the LinqDataSource's Selecting event to the following bit of code that groups my tables by their category ...

  1. protected void LdsMenu_Selecting(object sender, LinqDataSourceSelectEventArgs e)
  2. {
  3.     e.Result =
  4.         from vt in MetaModel.Default.VisibleTables
  5.         //  use the category to group the tables
  6.         group vt by vt.GetCategory() into groups
  7.         select new
  8.         {
  9.             CategoryName = groups.Key,
  10.             Tables = groups
  11.         };
  12. }

Then I bound this data source to my ListView ...

image

And that's all it took to build my 2 level menu. Awesome!

image

Conclusion

Can Dynamic Data be used for more than admin screens and prototyping? I think it might. What about you?

That's it. Enjoy!

no comments yet.

How to respond with code 404 (Not Found) in ASP.NET

Posted on August 26, 2008 by (author unknown).
Categories: Contributors, Dynamic HTML.
Suppose you configured custom 404 page in web.config file in the customErrors section. So whenever user requests non-existent aspx page, ASP.NET run-time returns well formatted message to the user. Also you have a page that shows articles from a database according to article ID passed in the url (for example: article.aspx?id=345). But if user passes article ID that doesn't exists the page must return code 404 (Not Found) and show the custom 404 page like in the previous situation. Fortunately you don't need to parse the customErrors section to get name of the custom 404 page. Just throw HttpException:
throw new HttpException(404, "Article not found");
ASP.NET run-time will catch the exception and will redirect to the custom 404.

no comments yet.

Chain.js - data binding for jQuery

Posted on August 22, 2008 by Jason Striegel.
Categories: Contributors, Dynamic HTML.

chain_js_20080821.jpg

Rizqi Ahmad, a high-school student in Germany, created a pretty useful data binding service for jQuery called Chain.js. It allows you to easily manipulate data driven content from javascript by directly manipulating the DOM, without resorting to templates or a lot of complicated code. You create the markup the way you want the data to display, give class names to DOM elements that should have their content substituted, and pass an associative array containing the variable data to the chain() method.

There is also support for managing lists of elements, allowing you to add and remove elements dynamically inside the defined markup. Rizqi also created the Interaction library that works on top of the data binding library to provide drag, drop, and sort support for lists.

Make sure to check out his demos. They show off some of the flexibility of the library and they're easy to tweak for your own needs.

Data Binding Solution for jQuery
Chain.js - Data Binding Service for jQuery
Interaction.js - drag/drop/sort support for Chain.js

no comments yet.

Cross-browser rounded vector corners

Posted on August 20, 2008 by Jason Striegel.
Categories: Contributors, Dynamic HTML.
vectorcorners_20080819.jpg As a web developer, I've been patiently waiting for the designer community to finally decide that rounded corners and drop shadows are out of style. I've been waiting since about 1999 so, uh, you know, any day now guys. I'll just be waiting here in web developer hell trying to construct a cubic igloo. There are a number of tricks for creating roundtangles, from nesting a bunch of divs with background images, to jQuery scripts that will dynamically build successive 1-pixel-thick divs to render the corners. Today, I came across another method which simulates the CSS 3 border-radius vector corner effect in most browsers, using a little bit of conditional HTML and a bunch of browser-specific CSS properties. You'll have to check the source on the linked page below to see how it's done, but basically VML is used for IE support, and the -moz-border-radius and -webkit-border-radius properties are applied for Firefox and Safari users. It wouldn't be a difficult task to simplify this a bit with jQuery and roll all of the necessary markup and css tweaks inside a single class target. HTML/CSS Vector Corners

no comments yet.

Passing data using AJAX

Posted on October 31, 2007 by ZDima.
Categories: Dynamic HTML.

The XML data is not the only way how to pass data from the server to browser. The data can be passwd as XML, HTML, just a string, or JSON.

What is JSON?

JSON is JavaScript Object Notation. It is much easy to work with JSON then parse XML data.

When you receive JSON data from the server you will need to evaluate the data into variable and access the data as structure or an array.

This is JSON data:

  1. [ { author: 'name a', title: 'title #1' },
  2.   { author: 'name b', title: 'title #2' },
  3.   { author: 'name b', title: 'title #3' } ]

This is how to access this data:

  1. var books = reval( req.responseText );
  2. element.innerHTML = books[0].author;

This is how to modify and produce JSON stream:

  1. books[0].author = "me";
  2. String newJSONstream = books.toJSONString();

This is simple. Enjoy!

no comments yet.