In lue of
the off
the official release of ASP.NET MVC 2 RTM, I decided I would put together a quick sample of
the enhanced HTML.Helpers and validation controls.
I am going
to use my sample event site where I will have a form so a user can search for information about a certain events. So when
the Search page loads
the Search action is fired return my strongly typed model.
to the view.
1: [HttpGet]
2: public ViewResult Search(): public ViewResult Search()
3: {
4: IList<EventsModel> result = _eventsService.GetEventList();
5: var viewModel = new EventSearchModel
6: {
7: EventList = new SelectList(result, "EventCode","EventName","Select Event")
8: };
9: return View(viewModel);
10: }
Nothing special here, although I did want
to show how
to load up a strongly typed drop down list because that hung me up for a little bit. So
to that, I am going
to pass
back a SelectList
to the view and my HTML helper should no how
to load this.
So lets take a look at
the mark up for
the view.
1: <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
2: Inherits="System.Web.Mvc.ViewPage<EventsSample.Models.EventSearchModel>" %>
3:
4: <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
5: Search
6: </asp:Content>
7:
8: <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
9:
10: <h2>Search for Events</h2>
11:
12: <% using (Html.BeginForm("Search","Events")) {%>
13: <%= Html.ValidationSummary(true) %>
14:
15: <fieldset>
16: <legend>Fields</legend>
17:
18: <div class="editor-label">
19: <%= Html.LabelFor(model => model.EventNumber) %>
20: </div>
21: <div class="editor-field">
22: <%= Html.TextBoxFor(model => model.EventNumber) %>
23: <%= Html.ValidationMessageFor(model => model.EventNumber) %>
24: </div>
25:
26: <div class="editor-label">
27: <%= Html.LabelFor(model => model.GuestLastName) %>
28: </div>
29: <div class="editor-field">
30: <%= Html.TextBoxFor(model => model.GuestLastName) %>
31: <%= Html.ValidationMessageFor(model =>
model.GuestLastName) %>
32: </div>
33:
34: <div class="editor-label">
35: <%= Html.LabelFor(model => model.EventName) %>
36: </div>
37: <div class="editor-field">
38: <%= Html.DropDownListFor(model => model.EventName, Model.EventList,"Select Event") %>
39: <%= Html.ValidationMessageFor(model => model.EventName) %>
40: </div>
41:
42: <p>
43: <input type="submit" value="Save" />
44: </p>
45: </fieldset>
46:
47: <% } %>
48:
49: <div>
50: <%= Html.ActionLink("
Back to List", "Index") %>
51: </div>
52:
53: </asp:Content>
A nice feature is
the scaffolding that MVC has
to generate code. I simply right clicked inside my Search() action, inside
the EventsController and selected “Add View” and then I selected my strongly typed object that I wanted
to pass
to the view and also selected that I wanted
the content type be “Edit”. With that
the aspx page was completely generated, although I did have
to go
back in and change
the textbox for
the Event Names
to a drop down list of
the names
to select from.
The new feature with MVC 2 are
the strongly typed HTML helpers. So now, my textboxes, drop down list, and validation helpers are all strongly typed
to my model. This features gives you
the benefits of intellisense and also makes it easier
to debug. “The Gu” has a great post about
the feature in case you want more details.
The DropDownListFor function
to generate
the drop down list was a little tricky for me. You first need
to use a Lanbda expression
to pass in
the property you want
the selected value assigned
to in your model, and then you need
to pass in
the list directly from
the model.
Validations
To validate
the form, you can use
the strongly type validation HTML helpers which will inspect your model and return errors if
the validation fails.
The definitions of these rules are set directly on
the Model itself so lets take a look.
1: using System.ComponentModel.DataAnnotations;
2: using System.Web.Mvc;
3:
4: namespace EventsSample.Models
5: {
6: public class EventSearchModel
7: {
8: [Required(ErrorMessage = "Please enter
the event number.")]
9: [RegularExpression(@"\w{6}",
10: ErrorMessage = "
The Event Number must be 6 letters and/or numbers.")]
11: public string EventNumber { get; set; }
12:
13: [Required(ErrorMessage = "Please enter
the guest's last name.")]
14: [RegularExpression(@"^[A-Za-zÀ-ÖØ-öø-ÿ1-9 '\-\.]{1,22}$",
15: ErrorMessage = "
The gueest's last name must 1
to 20 characters.")]
16: public string GuestLastName { get; set; }
17:
18: public string EventName { get; set; }
19: public SelectList EventList { get; set; }
20: }
21: }
Pretty cool!
Okay,
the only thing left
to do is perform
the validation in
the POST action.
1: [HttpPost]
2: public ViewResult Search(EventSearchModel eventSearchModel)
3: {
4: if (ModelState.IsValid) return View("SearchResults");
5: else
6: {
7: IList<EventsModel> result = _eventsService.GetEventList();
8: eventSearchModel.EventList = new SelectList(result, "EVentCode","EventName");
9:
10: return View(eventSearchModel);
11: }
12: }
13: }
If
the form entries are valid, here I am simply displaying
the SearchResult, but in a real world sample I would also go out get
the results first. You get
the idea though. In my case, when
the form is not valid, I also had
to reload my SelectList with
the event names before I loaded
the page again. Remember this is MVC, no _VieState here :)
So that’s it. Now my form is validating
the data and when it fails it looks like this.
