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.
