Question

I am creating an edit form for an Event data model in which the input elements are populated with the Event properties for editing. After I finished populating the fields and formatting the page, I realised I had forgotten the form tags. After adding them in, my Razor code completely stops working, leaving all of the input elements empty. I have tried disabling various parts of the code, including all javascript and css and nothing seems to re-populate the fields except removing the form tags.

Here is the code:

@model Objects.Models.Event.Event

@using EventSignup.Extensions

@{
    ViewBag.Title = "Edit";
}

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.22.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Javascript/jquery-ui-timepicker-addon.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Javascript/Edit.js")" type="text/javascript" ></script>

<h2>Edit</h2>

<div class="hero-unit">
<form action="" id="event_form" method="post">
    <label for="name">Event Name:</label>
    <input type="text" name="name" id="name" value="@Model.EventName" /><br />

    <label for="tickets"># of Tickets:</label>
    <input type="text" name="tickets" id="tickets" value="@Model.Tickets" /><br />

    <label for="location">Location:</label>
    <select name="location" id="location">        
        @foreach (var Element in ViewBag.Buildings as List<EventSignup.ViewModels.SelectElement>)
        {
            <option value="@Element.ID" @((Model.TicketsLocation.ID == @Element.ID) ? "selected='selected'" : "")>@Element.DisplayName</option>
        }
    </select><br />

    <label for="dates">Dates/Times:</label>
    @foreach (var EventInfo in Model.Dates)
    {
        <input type="text" class="date" name="dates" id="dates@(Model.Dates.IndexOf(EventInfo)+1)" value="@EventInfo.DateTime.ToDateTimePickerString()"/><br />
        if (EventInfo != Model.Dates.Last())
        {
            <label></label>
        }
    }
    <div id="date_inputs">
    </div>
    <label></label>
    <span id="new_date" class="fauxlink" onclick="newDate()">New Date/Time</span><br /><br />
    <input type="hidden" id="num_dates" value="@Model.Dates.Count" />

    <input type="submit" id="submit" value="Submit" /><br />
</form>
</div>

Answer 1

Don’t use form elements directly – use the BeginForm HTML helper:

@using (Html.BeginForm())
{

}

You should also be using the template editors for the different model properties:

@Html.EditorFor(model => model.EventName)

---

Update:

I normally find that Visual Studio/Razor will stop working (no intellisense for instance) if the markup is not valid (missing " at the end of an attribute, elements that are not properly closed etc…). Check your markup carefully to see where your have such an error.