Question

I am trying to put a checkboxlist onto a simple form in asp.NET MVC 2. This is the code for it:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <% using (Html.BeginForm("HandSurvey", "Resources", FormMethod.Post, new { runat="server" }))
        { %>
            <asp:CheckBoxList id="chkListChemical" runat="server">
                <asp:ListItem>Fiberglass & resins</asp:ListItem>
                <asp:ListItem>Heavy duty oil paints & stains</asp:ListItem>
                <asp:ListItem>Mechanics - tools, grease/oil</asp:ListItem>
                <asp:ListItem>Metalworking fluids</asp:ListItem>
                <asp:ListItem>Paint & Stains in use</asp:ListItem>
                <asp:ListItem>Exposure to solvents</asp:ListItem>
                <asp:ListItem>Difficult soils</asp:ListItem>
                <asp:ListItem>Hydrocarbons</asp:ListItem>
            </asp:CheckBoxList>
        <% } 
    %>
</asp:Content>

When I hit this page it gives this error:

Control ‘ctl00_MainContent_chkListChemical_0’ of type ‘CheckBox’ must be placed inside a form tag with runat=server.

I thought I was specifying the runat attribute correctly. Or is there something else that I am missing here? If I don’t use the helper class and just use a regular form tag, it works.

Answer 1

In ASP.NET MVC you should avoid using server controls. Basically everything that has the runat="server" should not be used (except the content placeholder in WebForms view engine). In ASP.NET MVC you design view models:

public class MyViewModel
{
    [DisplayName("Fiberglass & resins")]
    public bool Item1 { get; set; }

    [DisplayName("Heavy duty oil paints & stains")]
    public bool Item2 { get; set; }

    ...
}

then you have controller actions that manipulate the view model:

// Action that renders the view
public ActionResult Index()
{
    var model = new MyViewModel();
    return View(model);
}

// Handles the form submission
[HttpPost]
public ActionResult Index(MyViewModel model)
{
    // TODO: Process the results
    return View(model);
}

and finally you have a strongly typed view:

<% using (Html.BeginForm("HandSurvey", "Resources")) { %>
    <div>
         <%= Html.CheckBoxFor(x => x.Item1) %> 
         <%= Html.LabelFor(x => x.Item1) %>
    </div>
    <div>
         <%= Html.CheckBoxFor(x => x.Item2) %> 
         <%= Html.LabelFor(x => x.Item2) %>
    </div>

    ...

    <p><input type="submit" value="OK" /></p>
<% } %>

---

UPDATE:

As requested in the comments section in order to have those checkboxes dynamically generated from a database it is a simple matter of adapting our view model:

public class ItemViewModel
{
    public int Id { get; set; }
    public string Text { get; set; }
    public bool IsChecked { get; set; }
}

and now we will have our controller action to return a list of this view model:

public ActionResult Index()
{
    // TODO: obviously those will come from a database
    var model = new[]
    {
        new ItemViewModel { Id = 1, Text = "Fiberglass & resins" },
        new ItemViewModel { Id = 2, Text = "Heavy duty oil paints & stains" },
    };
    return View(model);
}

and the view will now simply become:

<% using (Html.BeginForm("HandSurvey", "Resources")) { %>
    <%= Html.EditorForModel() %>
    <p><input type="submit" value="OK" /></p>
<% } %>

and the last part would be to define an editor template for our view model (~/Views/Shared/EditorTemplates/ItemViewModel.ascx):

<%@ Control 
    Language="C#"
    Inherits="System.Web.Mvc.ViewUserControl<AppName.Models.ItemViewModel>" 
%>
<div>
    <%= Html.HiddenFor(x => x.Id) %>
    <%= Html.CheckBoxFor(x => x.IsChecked) %>
    <%= Html.DisplayFor(x => x.Text) %>
</div>