One approach we could use to generate our
dropdowns would be to manually create our own <% %> for-loop containing
if/else statements within the HTML. This would give us total control over
the HTML - but would make the HTML messy.
A much cleaner approach that you can
alternatively use is to take advantage of the "Html" helper property
on the ViewPage base class. This is a convenient object that exposes a
set of HTML Helper UI methods that automate HTML UI generation. For
example, earlier in this post we used the Html.ActionLink helper method to
generate <a href=""> elements:
Figure 21
The HtmlHelper object (as well as the AjaxHelper object -
which we'll talk about in a later tutorial) have been specifically designed to
be easily extended using "Extension Methods" - which is a new language feature
of VB and C# in the VS 2008 release. What this means is that anyone can
create their own custom helper methods for these objects and share them for you
to use.
We'll have dozens of built-in HTML and AJAX helper methods
in future previews of the ASP.NET MVC Framework. In the first preview
release only the "ActionLink" method is built-into
System.Web.Extensions (the assembly where the core ASP.NET MVC framework is
currently implemented). We do, though, also have a separate
"MVCToolkit" download that you can add to your project to obtain
dozens more helper methods that you can use with the first preview
release.
To install the MVCToolkit HTML Helper methods, simply add
the MVCToolkit.dll assembly to your project references:
Figure 22
Re-build your project. And then the next time you type
<%= Html. %> you'll see many, many more additional UI helpers that you
can use:
Figure 23
To build our HTML <select> dropdowns we could use the
Html.Select() method. Each method comes with overloaded method versions -
all with full intellisense inside our views:
Figure 24
We could update our "New" view to use the
Html.Select options to display dropdownlists that use the CategoryID/SupplierID
properties as the values and CategoryName/SupplierName as the display text
using the code below:
Figure 25
This will generate the appropriate <select> HTML
markup for us at runtime:
Figure 26
And give end-users an easier way to pick the Product
Category and Supplier on our /Products/New screen:
Figure 27
Note: because we are still posting a CategoryID and
SupplierID value to the server, we do not need to update our ProductsController
Create Action at all to support this new drop-downlist UI - it will just work.
