Project Description
Triad is an application framework for ASP.Net MVC. Based on many of the most highly used jQuery controls on the Net today.

N-Layered Architecture with LINQ to SQL, or Telerik ORM, or Entities Framework, etc.

This is a very large project that enables one to instantly create a web application framework based on standard ASP.Net MVC 1.0 and custom controls. It is not a portal application or CMS. It has been written from the start as a reusable framework for intranet/internet applications to include cohesive notifications, dialog boxes, grids, combo boxes, menuing and more with major amounts of ajax vs. postbacks to the server. A lot of effort was put in to ensure as small ammount of traffic hits the network as possible while efficiently using client side memory and server-side caching.

The included controls are a combination of "best-of" found on the net, based on jQuery, and custom controls/modifications to ensure a seamless integration into the framework.. Bloated code is constantly reworked and if a control isn't good enough/fast enough/or standardized enough, it gets ejected/rewritten.

The VSI and code will be uploaded in the next couple of weeks and will install as a "Template" for C#. Below are some of the major features that are included:

Tim
Updated: Jan 28, 2010

All functionality of these controls is at your disposal, but html “Helpers” were added to the framework, so that the required JavaScript, html, etc is rendered, but you don’t need to worry about all of the nuances for each control. (I.e., a single html.helper method is all that is necessary to code.)


  • jQuery – http://jquery.com/
    • the core library that handles ALL DOM (document object model) manipulation. All controls used in the framework use this library in order to minimize downloaded code to the client
    • jQuery may look complex at first, but when used for awhile, virtually only one/two commands are needed. This library is as powerful as Linq is to Managed Code.
    • Tutorials: http://docs.jquery.com/Tutorials
  • Grid – jqGrid at: http://www.trirand.com/blog/
    • It has been updated to every new version that has come out as long as it doesn’t have breaking changes, so the latest control code is in the jsCore.min.js file.
    • Demos located here: http://trirand.com/jqgrid/jqgrid.html - which are in PHP/Mysql. All functionality for data handling has been converted for ASP.Net/MVC so the demos help with client side configuration/development. Very useful, but don’t worry about the PHP stuff.
    • There are also some MVC integration samples here: http://www.trirand.com/blog/?page_id=247
  • Modal Dialog– jqModal: http://dev.iceburg.net/jquery/jqModal/
    • Very lightweight - does most anything needed. Easily modifiable.
    • slighlty modified standalone version for integration and jQuery 1.4 updates
    • Demos located here: http://dev.iceburg.net/jquery/jqModal/
  • Notifications Dialog – jGrowl: OS X Type notifications http://stanlemon.net/projects/jgrowl.html
    • Very lightweight - used with return Values from form submit, etc. Can be easily called directly.
    • Demos located here: http://stanlemon.net/projects/jgrowl.html
  • ComboBox – Sexy Combo: http://phone.witamean.net/sexy-combo/
    • Unfortunate name – Renamed it to MVCCombo in the jsCore.min.js file
    • This one required some tweaking as it didn’t handle “tabs” all that well, but it does have the latest code.
    • largely modified standalone version for integration and jQuery 1.4 updates
    • The only control with, IMO, issues in its rendering as it just doesn’t handle large amounts of data;.
    • Demos located here: http://phone.witamean.net/sexy-combo/examples/index.html
  • DatePicker - http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/
    • Can use it directly, but a html helper method has been added to the html.TextBox so it will automatically generate the icon/picker based on your selected input type.
    • Demos are located on that page. VERY small/compact in size (18k) comparable Datepicker from JQuery UI required at least 160k of JavaScript
  • TextInput MASK Functions: http://www.meiocodigo.com/projects/meiomask/
    • Very powerful and extensible masking library and small footprint when compressed.
    • Standard masks are defined in jsCore.min.js and are readily available via the Html.TextBox helper method, however, individual masks, etc can be constructed using the documentation from the link above.
  • Accordion - http://bassistance.de/jquery-plugins/jquery-plugin-accordion/
    • This is the LAST standalone release of this accordion, but it was used because it didn’t rely on the jQuery UI library (the 160k unneeded ui code).
    • slighlty modified standalone version for integration and jQuery 1.4 updates
    • Basic accordion, but it was modified a bit to handle a treeview inside so the menu on the left of the framework is very extensible and can hold hundreds of items in a nice hierarchical manner.
  • TreeView - http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
    • Small Footprint and handles large data and asynchronous filling.
    • Demos: http://jquery.bassistance.de/treeview/demo/
  • ToolTips - http://plugins.learningjquery.com/cluetip/
    • Small/medium footprint, but allows for Ajax calls to populate the tooltip with HTML/Text, etc.
    • Can be used manually, but the framework automatically populates tooltips throughout a page if they exist in the database table “MVCToolTips”. By managing the tooltips in this manner, someone other than the developer can “fill them in”.
    • Demos: http://plugins.learningjquery.com/cluetip/demo/
  • AJAX Form Posting - http://malsup.com/jquery/form/
    • All functionality required is taken care of via the framework, but if you needed to override it’s behavior, the documentation for using it is here.
    • The framework also takes care of validation routines if defined via HTML Helpers or manually using the jQuery validate functions below.
  • Form Validation - http://docs.jquery.com/Plugins/Validation
    • Basic form validation is handled via Html.Textbox helper methods based on the type of input field defined.
    • Easily implement own validation using the documentation at this site though.
  • Collapsible Panels
  • Top Page menus
  • Themes (framework adheres to the jQuery UI Theme CSS standards.

Other controls were looked at/tested (such as jqTemplates, which is VERY powerful), but weren’t readily required. The controls above are replaceable within the framework if something better is found – some helper functions would need rewriting, but nothing serious. When you can get to the code – look in the “Helpers\Html” directory and you will see the helper methods that were created. Not much to them at all after data manipulation issues were fixed.


Last edited Jan 28, 2010 at 7:10 PM by _Trip, version 9