title: How does MVC populate the model when data is posted back
body: <p>MVC is very clear on how data is sent to the browser.  You go to a URL, it runs code to create a model, passes that typed model into a view, which then renders HTML based on the state of the model.</p>
  
  <p>What I'm not finding so clear however is when a user submits a form on the page, how does MVC map that form post back to the model for use in the controller?</p>
  
  <p>I'm guessing the magic happens somewhere in:</p>
  
  <pre><code>@Html.EditorFor(model =&gt; model.Title)
  </code></pre>
  
  <p>But I'm not understanding why....</p>
  
  <p>I'm following <a href="http://www.asp.net/mvc/overview/getting-started" rel="nofollow">Getting started with ASP.NET MVC 3</a>.  Which is where the code below is from for easy reference.</p>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>public ActionResult Edit(int id) 
  {
      Movie movie = db.Movies.Find(id);
      return View(movie);
  }
  
  [HttpPost]
  public ActionResult Edit(Movie movie)
  {
      if (ModelState.IsValid) 
      {
          db.Entry(movie).State = EntityState.Modified;
          db.SaveChanges();
          return RedirectToAction("Index");
      }
      return View(movie);
  }
  </code></pre>
  
  <p><strong>View:</strong></p>
  
  <pre><code>@model MvcMovie.Models.Movie
  
  @{
      ViewBag.Title = "Edit";
  }
  
  &lt;h2&gt;Edit&lt;/h2&gt;
  
  &lt;script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  
  @using (Html.BeginForm()) {
      @Html.ValidationSummary(true)
      &lt;fieldset&gt;
          &lt;legend&gt;Movie&lt;/legend&gt;
  
          @Html.HiddenFor(model =&gt; model.ID)
  
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.Title)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.Title)
              @Html.ValidationMessageFor(model =&gt; model.Title)
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.ReleaseDate)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.ReleaseDate)
              @Html.ValidationMessageFor(model =&gt; model.ReleaseDate)
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.Genre)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.Genre)
              @Html.ValidationMessageFor(model =&gt; model.Genre)
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.Price)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.Price)
              @Html.ValidationMessageFor(model =&gt; model.Price)
          &lt;/div&gt;
  
          &lt;p&gt;
              &lt;input type="submit" value="Save" /&gt;
          &lt;/p&gt;
      &lt;/fieldset&gt;
  }
  
  &lt;div&gt;
      @Html.ActionLink("Back to List", "Index")
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Which generates:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Edit&lt;/title&gt;
      &lt;link href="/Content/Site.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="page"&gt;
          &lt;header&gt;
              &lt;div id="title"&gt;
                  &lt;h1&gt;MVC Movie App&lt;/h1&gt;
              &lt;/div&gt;
             ...
          &lt;/header&gt;
          &lt;section id="main"&gt;
  
  
  &lt;h2&gt;Edit&lt;/h2&gt;
  
  &lt;script src="/Scripts/jquery.validate.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;form action="/Movies/Edit/4" method="post"&gt;    &lt;fieldset&gt;
          &lt;legend&gt;Movie&lt;/legend&gt;
  
          &lt;input data-val="true" data-val-number="The field ID must be a number." 
                  data-val-required="The ID field is required." id="ID" name="ID" type="hidden" value="4" /&gt;
  
          &lt;div class="editor-label"&gt;
              &lt;label for="Title"&gt;Title&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              &lt;input class="text-box single-line" id="Title" name="Title" type="text" value="Rio Bravo" /&gt;
              &lt;span class="field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"&gt;&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              &lt;label for="ReleaseDate"&gt;ReleaseDate&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              &lt;input class="text-box single-line" data-val="true" data-val-required="The ReleaseDate field is required." 
                  id="ReleaseDate" name="ReleaseDate" type="text" value="4/15/1959 12:00:00 AM" /&gt;
              &lt;span class="field-validation-valid" data-valmsg-for="ReleaseDate" data-valmsg-replace="true"&gt;&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              &lt;label for="Genre"&gt;Genre&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              &lt;input class="text-box single-line" id="Genre" name="Genre" type="text" value="Western" /&gt;
              &lt;span class="field-validation-valid" data-valmsg-for="Genre" data-valmsg-replace="true"&gt;&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              &lt;label for="Price"&gt;Price&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              &lt;input class="text-box single-line" data-val="true" data-val-number="The field Price must be a number." 
                  data-val-required="The Price field is required." id="Price" name="Price" type="text" value="9.99" /&gt;
              &lt;span class="field-validation-valid" data-valmsg-for="Price" data-valmsg-replace="true"&gt;&lt;/span&gt;
          &lt;/div&gt;
  
          &lt;p&gt;
              &lt;input type="submit" value="Save" /&gt;
          &lt;/p&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;div&gt;
      &lt;a href="/Movies"&gt;Back to List&lt;/a&gt;
  &lt;/div&gt;
  
          &lt;/section&gt;
          &lt;footer&gt;
          &lt;/footer&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>