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.
