ASP.NET MVC Design Gallery and Upcoming View Improvements with the ASP.NET MVC Release Candidate

Today we launched a new ASP.NET MVC Design Gallery on the www.asp.net site.  The design gallery hosts free HTML design templates that you can download and easily use with your ASP.NET MVC applications.  Included with each design template is a Site.master file, a CSS stylesheet, and optionally a set of images, partials, and helper methods that support them. 

The gallery allows you to preview each of the designs online, as well as download a .zip version of them that you can extract and integrate into your site.  The gallery allows anyone to create and submit new designs under the creative commons license.  Visitors to the gallery can vote to provide feedback on them (thumbs up/thumbs down).  The most popular designs show up at the top of the gallery. 

We think this will provide a useful way for developers to more easily create attractive, standards compliant, sites.  It will also hopefully encourage folks to create and share designs that can be easily re-used by others.

Upcoming View Improvements with the Release Candidate

While on the topic of UI, I thought I'd also share a few details about some of the View-related improvements that are coming with the new ASP.NET MVC Release Candidate (RC) build that will be shipping shortly.  In addition to bug fixes, the release candidate incorporates a number of view-specific feature additions and community suggestions.

Views without Code-Behind Files

Based on feedback from a lot of people, we've decided to make a change so that MVC view files by default do not have code-behind files. This change helps to reinforce the purpose of views in a MVC world (which are intended to be purely about rendering and to not contain any non-rendering related code), and for most people eliminates unused files in the project:

With the ASP.NET MVC Beta, developers could eliminate the code-behind file by using the CLR syntax for generic types in a view's inherits attribute, but that CLR syntax is (to put it mildly) pretty undiscoverable and hard to use.  The ASP.NET MVC team was able to combine a few extensibility features already in ASP.NET to now enable the standard VB/C# language syntax within the inherits attribute with the ASP.NET RC build:

One other nice benefit of not using a code-behind file is that you'll now get immediate intellisense when you first add them to the project.  With the beta you had to do a build/compile immediately after creating a view in order to get code intellisense within it.  The RC makes the workflow of adding and immediately editing a view compile-free and much more seamless.

Top-Level Model Property on Views

With previous builds of ASP.NET MVC, you accessed the strongly typed model object passed to the view using the ViewData.Model property:

The above syntax still works, although now there is also a top-level "Model" property on ViewPage that you can use:

This property does the same thing as the previous code sample - its main benefit is that it allows you to write the code a little more concisely.

HTML/AJAX Helpers Now Enable Expression Syntax

One of the requests a few people have asked for is the ability to use strongly-typed expression syntax (instead of using strings) when referring to the Model when using a View's HTML and AJAX helper objects.

With the beta build of ASP.NET MVC this wasn't possible, since the HtmlHelper and AjaxHelper helper classes didn't expose the model type in their signature, and so people had to build helper methods directly off of the ViewPage<TModel> base class in order to achieve this.  The ASP.NET MVC RC build introduces new HtmlHelper<TModel> and AjaxHelper<TModel> types that are exposed on the ViewPage<TModel> base class.  These types now allow anyone to build strongly-typed HTML and AJAX helper extensions that use expression syntax to refer to the View's model.

For example, I could build a (very simple) strongly-typed "TextBox" helper method using the code below:

And then use it within any of my views to bind against a Product model object like so:

Visual Studio will provide full intellisense for the strongly-typed expression syntax when working against the View's model in the source editor in this way:

 

Note: the HTML helper extensions in the core ASP.NET MVC V1 assembly will still use the existing (non-expression based) syntax.  We are then planning to add expression-based versions to the MVCFutures assembly. You can of course also add your own helper methods (using either strings or strongly-typed expressions).  All of the built-in helper methods can also optionally be removed (because they are extension methods) if you want to replace or override them with your own.

Scaffolding Support

The ASP.NET MVC RC build includes automatic "UI scaffolding" support when creating views using the new ASP.NET MVC "Add View" command inside Visual Studio.  The scaffolding support enables the automatic generation of views against any .NET type or object - meaning it can work against POCO classes, LINQ to SQL, LINQ to Entities, NHibernate, SubSonic, LLBLGen Pro, or any other object model. The scaffolding engine uses reflection to retrieve the public shape of a View's model type, and then passes it to a scaffolding template to populate appropriate markup based on it within the view being created.

For example, assume we have a ProductsController class and want to create an "Edit" action on it to display an edit view of a particular Product.  Using the RC build we can right-click within our "Edit" action method and choose the "Add View" context menu command like so:

Within the "Add View" dialog we can then indicate that we are passing a "Product" type to our View:

We can indicate that we want an "Empty" view template created (like above), or indicate that we want VS to automatically scaffold a form "Edit" view for the Product object we are supplying:

If we choose the "Edit" template VS will automatically generate a file for us that has the appropriate HTML and validation helpers to create an editable form view:

We can then run the application and immediately get edit UI:

We can then go in and change the generated edit.aspx file however we want to tweak/customize it. 

One of the really nice things about the scaffolding system we are shipping is that it is implemented using Visual Studio's built-in T4 code generation system (Scott Hanselman has a nice post about this here).  The "List", "Edit", "Create" and "Details" templates we ship with ASP.NET MVC can all be completely customized or replaced with T4 templates of your own (or downloaded from the ASP.NET MVC Design Gallery). So if you have your own particular way of creating HTML, or want to use custom HTML helpers (for example: strongly-typed expression based ones) you can update the default templates and the scaffolding system will use them going forward. 

We are planning to enable the templates to be overriden both on a machine-wide level, as well as on a per-project level (so that you can check-in application-specific scaffolding templates under source control and share them across a team).

MSBuild Task for Compiling Views

By default when you do a build on an ASP.NET MVC project it compiles all code within the project, except for the code within view files.  With the ASP.NET MVC Beta you had to roll your own MSBuild task if you wanted to compile the views.  The ASP.NET MVC RC build now includes a built-in MSBuild task that you can use to include views as part of the project compilation process.  This will verify the syntax and code included inline within all views and master pages for the application, and give you build errors if it encounters any problems.

For performance reasons we don't recommend running this for quick compiles during development, but it is convenient to add to particular build configuration profiles (for example: staging and deployment) and/or for use with Build or CI (continuous integration) servers.

Other ASP.NET MVC Release Candidate features coming

Above is a short list of some of the view-specific functionality coming with the release candidate build. 

There are many other features and requests coming with the RC as well including: IDataErrorInfo support to enable models to surface validation error messages, as well as richer error validation extensibility to enable you to use your own approach to surface model validation errors to ModelBinders (the IDataErrorInfo support is built on top of this); new FileResult and JavaScriptResult ActionResult types (allowing you to more easily download files as well as executable JavaScript to browsers); built-in jQuery -vsdoc intellisense support; refactored AccontController support to enable easier unit testing and extensibility with form login scenarios; a variety of project template improvements, more extensibility everywhere; lots of bug fixes; and a few other cool features I'll blog about later once the RC is out.

We'll be releasing the ASP.NET MVC Release Candidate in January.  Our plan is to have that build be ASP.NET MVC V1 API and feature-complete and have zero known bugs.  We'll give people a short period to upgrade to it, give it a good tire-kicking, and report any last minute issues they find.  We'll then ship the official V1 release shortly after that (so not far off now).

Hope this helps,

Scott

69 Comments

  • I just wish you would just jump the RC phase already!!!

  • Thanks and Great work

  • Will the release candidate default VB.Net Project compile regardless of my 'option' options..

    The previous version failed to compile as I use Option Strict|Explicit On and I had to correct a fair few things before every time I created a new project.... didn't exactly enthuse my involvement. Haven't tried again since the day after the release of beta2 ( I Think)

  • Great Scott. Thanks for the information.
    We are excited about the ASP.NET MVC and waiting for Release Candidate.
    Thanks a lot for the new ASP.NET MVC framework.

  • Scott,

    This is good stuff. From a productivity perspective the scaffolding will speed things up immensley when building out CRUD heavy applications. We tend to find that even if the main purpose of a system is not CRUD (a classifieds search site for example) then you still need an admin suite behind it to manage all the users and data. We've looked at DynamicData for this but this looks to be a nice light way of getting a lot of the boilerplate in place ready to be tweaked.

    We can sit down with the designers at the start of a project and agree on the structure and css class names they'd like on the forms, draw up a template for the project and this should not only increase speed but help to maintain consistency as things get built out.

    Not to mention that putting the basics of a form in place is also low value, dull work!

    Thanks,

    Bob

  • Scott,
    congratulations to entire DevDiv and to MVC team. All these topic you covered in this blog post are awesome!
    1. So , can we expect to have MVC V1 around MIX timeframe?
    2. Although code-behind files will be obsolete starting from this release, will it be possible for developers to include them if they find a good reason. I ask this for no particular reason, just to be clear about those options.

  • Hey Scott

    I think the MVC is a great step in the right direction. However ... the idea of code intertwined in the markup is a really bad idea. I think the Xaml model is a much better model in that the separation between design and developer is reinforced. Are there any plans in place to look at a more declarative markup model for the MVC framework instead of the old classic ASP approach.

    Thanks for all your time and good work.

    Darrel

  • That TextBox extension method looks like it has an XSS flaw in it. Is there some protection I am not seeing? If not, are there any plans to replace System.String with a SafeString like Django templates use?

  • @Rory

    >>>>>> Will the release candidate default VB.Net Project compile regardless of my 'option' options..

    Good question - I just sent mail to the team asking them about this.

    Thanks,

    Scott

  • @Panjkov,

    >>>>> congratulations to entire DevDiv and to MVC team. All these topic you covered in this blog post are awesome!

    Glad you like it!

    >>>>> 1. So , can we expect to have MVC V1 around MIX timeframe?

    We are shooting to RTM hopefully a little before MIX.

    >>>>> 2. Although code-behind files will be obsolete starting from this release, will it be possible for developers to include them if they find a good reason. I ask this for no particular reason, just to be clear about those options.

    Yes - you can still add code-behind based views to the project.

    Hope this helps,

    Scott

  • @Darrel,

    >>>>>> I think the MVC is a great step in the right direction. However ... the idea of code intertwined in the markup is a really bad idea. I think the Xaml model is a much better model in that the separation between design and developer is reinforced. Are there any plans in place to look at a more declarative markup model for the MVC framework instead of the old classic ASP approach.

    One of the things the team has done with ASP.NET MVC is to make sure you can use any type of "view engine" you want with it. This provides a lot of flexibility to customize the rendering engine however you want.

    We are going to be investigating some more declartive view engines in the future - although nothing specifically planned just yet.

    Hope this helps,

    Scott

  • @Brandon,

    >>>>>>> That TextBox extension method looks like it has an XSS flaw in it. Is there some protection I am not seeing? If not, are there any plans to replace System.String with a SafeString like Django templates use?

    The TextBox extension above is pulling its data from a model objects populated from the database, so in theory for this scenario you'd be in pretty bad shape if your database was already polluted. Having said that, I just updated the code to HtmlEncode anyway to be sure. ;-)

    One of the security features in the ASP.NET RC is by default xss filtering of inputs. We'll recommend people html-encode their strings just to be safe anyway - but this adds some degree of automatic protection.

    Hope this helps,

    Scott

  • "... This will verify the syntax and code included inline within all views and master pages for the application, and give you build errors if it encounters any problems. ..."

    Is this something we can do now in MSBuild with *regular* ASP.NET Web Applications? What's the magic incantation? Is it something to do with aspnet_compiler?

  • I'd love to see an official XsltResult built in.. a bit late I guess. I've put one together in my series of posts on implementing a RESTful web service using MVC.

  • Very grand to hear ASP.NET RC is coming, and has so many good improvement.

  • Hi Scott,

    Love the sound of the new features you've talked about today.

    Re the t4 based templating for scaffolding, you specifically mention
    "List", "Edit", "Create" and "Details" templates. Will it also be possible to us create other company/app specific templates and have them integrate with the 'Add View' feature? That would be awesome.

    Kind regards,

    Paul

  • Always happy to see how close the team is keeping its ear to the community.

  • Nice! Two more questions:

    What about application areas?
    What's the story with validation, especially client side?

    Thanks!

  • The vs "scaffolding" for adding views may seem like a simple add on, but that is going to be a huge improvement/convenience for those of us doing a lot of ui(view) work.

    Keep up the good work Gu + team. It's definitely appreciated.

  • You see? This is why people are so excited (and sometimes overly passionate) about this new product. These new features are very nice (well, except for maybe the scaffolding, which I don't see myself using outside of a demo.) It's great to see feedback being incorporated into "our" MVC framework.

  • The Scaffolding Support is something really usefull to increase productivity in MVC with Visual Studio, impressive job.

    I think it will be even a most handy feature if we have some snippets for server side data validation support and the post actions, wich was not mentioned.

    One usefull Idea is to have a snippet reffering Product class, I mean, I snippet that supports gennerics and reflection in VS like :

    EditPost snippet + (tab tab) -> Transforms into somethng like:

    public ActionResult Edit(Product p)
    {
    //here I can have some of p properties,that the IDE took from reflection discovery
    //(may be decorated ones, dunno)
    p.Id
    p.Name
    p.Job
    }

    May be a VS2010 feature or we can have it by MVC Framework? :-)











  • Microsoft is showing that they really are understanding what the community wants. This is all terrific news!

  • Shouldn't the scaffolding templates be strongly typed as per the new Html/Ajax Helpers

  • Is it just me or is that TextBox helper method pretty useless? It just gives you a input with the value of the property ProductName, since you compile the lambda and run the function it will output a , it's equivalent to a helper that just took in a string Html.TextBox(Model.ProductName), instead shouldn't it analyze the expression tree and use the name of the property accessed in the lambda? so the output is

    I thought that was the point of doing expression based helpers :)

  • Hello Scott,

    A little slip of pen "refactored AccontController support to enable easier unit testing". AccountController (???).

    Nice post.
    Thanks.

  • These are some great changes, Scott. I'm a particularly big fan of removing the code-behind files by default. One comment, though, shouldn't '...' (shown in two of the above screenshots, including the Edit scaffold) be '...'? It is best to use our corresponding HTML elements when possible.

  • Great stuff

  • "The TextBox extension above is pulling its data from a model objects populated from the database, so in theory for this scenario you'd be in pretty bad shape if your database was already polluted."

    Scott,

    I know you know, but so that it's mentioned in the record here, there are perfectly valid values that may be in the database that need to be encoded, like quotes.

  • Thanks for the update - can't wait for the RC!

  • "The ASP.NET MVC team was able to combine a few extensibility features already in ASP.NET to now enable the standard VB/C# language syntax within the inherits attribute with the ASP.NET RC build:"

    Would be really nice to get some early info about this (such as how to implement it ourself), so that i dont have to rework my views when its fixed :-)

  • "This will verify the syntax and code included inline within all views and master pages for the application, and give you build errors if it encounters any problems." -- WOW... this is huge!!!

  • Would you guys consider adding some built-in SEO features?
    such as having page title in the url and using dash to seperate words like you have with this blog?
    With a little bit of work, this would make a huge difference with SEO

  • :O cool stuff :)
    will there be channel9 videos? :)

  • Scott - will the inherits in the markup support generics ?

    ie. inherits="System.Web.Mvc.ViewPage<IList>”

  • @Duncan,

    >>>>>>> Is this something we can do now in MSBuild with *regular* ASP.NET Web Applications? What's the magic incantation? Is it something to do with aspnet_compiler?

    Yep - this should work for all ASP.NET projects once we ship it. In the meantime, you might want to look at the VS Web Deployment project - that enables you to compile check your ASP.NET pages today.

    Hope this helps,

    Scott

  • @pierslawson

    >>>>>>> I'd love to see an official XsltResult built in.. a bit late I guess. I've put one together in my series of posts on implementing a RESTful web service using MVC.

    Unfortunately this won't be built-into V1. But you can definitely add it yourself!

    Hope this helps,

    Scott

  • @PaulBlamire,

    >>>>>> "List", "Edit", "Create" and "Details" templates. Will it also be possible to us create other company/app specific templates and have them integrate with the 'Add View' feature? That would be awesome.

    I'm hoping we can enable that - although I'm not sure what the status is for V1 (it might be post V1). The scaffolding work just came online recently, so they are pretty busy finalizing it and fixing last minute bugs.

    Hope this helps,

    Scott

  • @Elijah,

    >>>>>>>> Are there plan to provide a way to provide client-side validation based on rules on the model or will this be up to the developer?

    We won't have this built-in with V1, although it is possible to build a library that adds it. We are going to look into enabling some scenarios involving this in the future.

    Hope this helps,

    Scott

  • @Mike,

    >>>>>> What about application areas?

    This won't be built-in with V1. But you can implement areas today using it. Phil has a good blog post on this here: http://haacked.com/archive/2008/11/04/areas-in-aspnetmvc.aspx

    >>>>>>> What's the story with validation, especially client side

    We have a pretty rich server-side validation story in V1. We won't have automatic client-validation in V1 - although you can implement it using jQuery or ASP.NET AJAX.

    Hope this helps,

    Scott

  • @Olavo,

    >>>>>> I think it will be even a most handy feature if we have some snippets for server side data validation support and the post actions, wich was not mentioned.

    We are also going to enable Controller scaffolding - and will have an option to create the appropriate action methods and basic code to enable these scenarios when you create new controllers.

    Hope this helps,

    Scott

  • @Torkel,

    >>>>>>>> Is it just me or is that TextBox helper method pretty useless? It just gives you a input with the value of the property ProductName, since you compile the lambda and run the function it will output a , it's equivalent to a helper that just took in a string Html.TextBox(Model.ProductName), instead shouldn't it analyze the expression tree and use the name of the property accessed in the lambda? so the output is

    My simple helper was indeed not super useful - although hopefully illustrated the basic concepts of how to build one. What you do inside your helper method is up to you. :-)

    Thanks,

    Scott

  • @Jahedur,

    >>>>> A little slip of pen "refactored AccontController support to enable easier unit testing". AccountController (???).

    Yep - sorry about that. I meant AccountController. :-)

    Thanks,

    Scott

  • @Troy,

    >>>>>> These are some great changes, Scott. I'm a particularly big fan of removing the code-behind files by default. One comment, though, shouldn't '...' (shown in two of the above screenshots, including the Edit scaffold) be '...'? It is best to use our corresponding HTML elements when possible.

    Thanks for the suggestion - I'll forward it along to the team.

    Thanks,

    Scott

  • @Kevin,

    >>>>>>> There's one feature I have mixed feelings about however - does the internal scaffolding feature imply that we won't see a "Dynamic Data for MVC" project type (or however Dynamic Data would have been presented for MVC)?. For CRUD applications (especially those data administration tools that people always forget to include in requirements) Dynamic Data is a great time saver (and its configurability does save it from being just demoware,which was always a risk), especially with its ability to generate appropriate UI (dropdowns with sensible values for instance) from relationships.

    We are also working on Dynamic Data for MVC. That will be showing up in the future, and should complement the scaffolding work we are doing in V1 nicely.

    Thanks,

    Scott

  • @Sol,

    >>>>>> Would you guys consider adding some built-in SEO features? such as having page title in the url and using dash to seperate words like you have with this blog? With a little bit of work, this would make a huge difference with SEO

    The good news is that the routing mechanism built-into ASP.NET MVC enables SEO pretty nicely. It should make it pretty easy to add SEO features to any site.

    Hope this helps,

    Scott

  • @Steve,

    >>>>>>> Scott - will the inherits in the markup support generics ? ie. inherits="System.Web.Mvc.ViewPage<IList>”

    Yep - it will definitely support those scenarios.

    Hope this helps,

    Scott

  • Thanks Scott for the update, this is incredible stuff. I never liked the ViewPage code-behind file since there was never any code put in it.

  • great stuff, really keen to try this on a project. now i just have to convince my employer about how good this would be to use instead of all that Java/Oracle nastiness =)

  • Another feature that would be very very useful if integrated into MVC is paging support and paging html helper

  • Hey Scott, nice stuff.

    I'd like to ask about the MS Build task, how would the story be for integrating MVC into existing ASP.NET projects? One thing I like about the ASP.NET Extensions (AJAX, MVC, Dynamic Data) is how they all play together like plug-ins you configure in web.confg, global.asax, etc... Modifying those is relatively easy (although arguable), sure much easier than modifying VS Project files for example.

    Will the intellisense and related issues be different between Website Projects and Web Application Projects? I hope you are pushing Web Application Projects more (in general I mean), you know, because of all those build issues :).

  • Please add Html.ViewToString()

    so we can capture the output of the view to a string! so we can easily use the same viewengine for email templates....

  • Looking forward to the new View feature.

  • It's nice to have no code behind.
    But how will I be able to pass an object to the view?

    public partial class Index : ViewPage { }


    Thank you.
    I wish you a merry Christmas and a happy new year.

  • When I call a PartialView (for example with an Ajax.ActionLink), ASP.NET doesn't evaluate Javascript functions on this page. I fact, I would like to have the same behaviour than the Prototype framework, with the Ajax.Updater function (evalScripts: true). For the moment I have created my owns helpers, but could we have a solution in the MVC project?

    Thanks

  • Thanks for this xmas gift! happy new Year!

  • Hi,
    thanks for it.
    I have one idea about improvement of MVC.
    When I have basic action, query parameters and form values are binded to my parameters of action function.
    Is it possible to bind uploaded files from form too? I can use Controller.Request.Files["name"] but something like this looks much better in concept of MVC actions for me:


    Description of file:





    and then action:

    public void UploadFile(string fileDescription, HttpPostedFileBase fileUpload)
    {
    ...
    }

  • Thanks for the info, Scott!
    Btw, Happy new year :)

  • Thanks for sharing very important information online.

    Regards,
    Prepare UK Test
    life in the uk test

  • Excellent article, Scott! I am truly impressed with your great work and please keep it up. I had the MVC hosting with asphostdirectory.com and I had a chance to actually practice it. Everything works beautifully.

    Two thumbs up to you again, Scott!

  • oops, mea culpa: I missed this sentence in ScottGu's last paragraph:

    "We'll be releasing the ASP.NET MVC Release Candidate in January."

    {no excuse, not even blindness, for not being able to find this pitchfork in its haystack}

    B-(

  • Scott,

    The current implementation of JsonResult does not load custom converters for the JavaScriptSerializer that are specified in the web.config file jsonSerialization section.

    Anyway to get that fixed?

    Brian

  • You can view my entry to the design gallery here: http://www.asp.net/mvc/gallery/View.aspx?itemid=71

  • I am using MVC in my production but i wish before shipping i can actually use the RC version rather then Beta as it includes few changes that may give a sigh of relief to us.

  • Hi Scott,
    Regarding validation when using form post and model binding: Validation messages are often formatted with the label in the message. In your example from the Beta 1 blog, you have a validation message "The value '33abc' is invalid." but this would be better as "The value '33abc' is an invalid Age." Properties are never the right identifier, especially when a product supports a multi-lingual user interface but in any case so as not to expose the internals to the user. The problem is the View knows about the label and the Model or Controller Action knows about the error. A simple solution would be to extend the Html helper methods to take a label and for error messages to provide a {0} that gets replaced with the label in the View. However, UI's are often more complex than this and need seperation of the label and control. Perhaps a label ID could be provided as a parameter to the Html.TextBox and related methods?
    Also related to validation, Html.TextBox doesn't have a specific "maxlength" parameter (although you can add it in the attributes). This is just the tip of the problem though as database meta data is not available in a standard way in the ViewData or Controller Actions. It would be great if the Html methods supported binding to meta data in the same way they bind to values... or am I asking for too much?
    Thanks and all the best,
    Richard.

  • Hi Scott,

    has there been any work done on performance of expression syntax helpers (e.g ActionLink)? We had to remove them from our app as they were slowing the site considerably, making it CPU bound. If I remember correctly, each call took a millisecond or so if we used non-constant parametres.

  • Any word on whether this release is still happening in Jan?

  • Hey Scott, Thats a great information shared by you.
    The good thing in that will be gallery allows us to create and submit the new designs.

  • this is good and nice information shared by you .its simply superb

  • Hi Scott, looking to the future of developing for the web I keep wondering why you are not putting the output data eg. Model.ProductName in a control that has different templates (Content, None, Trailer, etc) as we do in CommunityServer?

Comments have been disabled for this content.