title: MVC 4 Modal window, partial view and validation
body: <p>I'm using MVC4 &amp; Entity Framework to develop a web application. I have a table which enumerates all the persons I have in my DB. For each of them, I can edit their info throught a modal window which is a Partial View. However, when I put some wrong information, my application redirects me to my partial view. What I wanted to do is to display the errors <strong>into</strong> my modal window.</p>
  
  <p>My action : </p>
  
  <pre><code>[HttpGet]
  public ActionResult EditPerson(long id)
  {
      var person = db.Persons.Single(p =&gt; p.Id_Person == id);
  
      ViewBag.Id_ProductPackageCategory = new SelectList(db.ProductPackageCategories, "Id_ProductPackageCategory", "Name", person.Id_ProductPackageCategory);
  
      return PartialView("_EditPerson", person);
  }
  
  [HttpPost]
  public ActionResult EditPerson(Person person)
  {
  
      ViewBag.Id_ProductPackageCategory = new SelectList(db.ProductPackageCategories, "Id_ProductPackageCategory", "Name", person.Id_ProductPackageCategory);
  
      if (ModelState.IsValid)
      {
          ModelStateDictionary errorDictionary = Validator.isValid(person);
  
          if (errorDictionary.Count &gt; 0)
          {
              ModelState.Merge(errorDictionary);
              return PartialView("_EditPerson", person);
          }
  
          db.Persons.Attach(person);
          db.ObjectStateManager.ChangeObjectState(person, EntityState.Modified);
          db.SaveChanges();
          return View("Index");
      }
  
      return PartialView("_EditPerson", person);
  }
  </code></pre>
  
  <p>My partial view : </p>
  
  <pre><code>@model BuSIMaterial.Models.Person
  
  &lt;div class="modal-header"&gt;
  &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
      &lt;h3 id="myModalLabel"&gt;Edit&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div&gt;
  
  @using (Ajax.BeginForm("EditPerson", "Person", FormMethod.Post,
                      new AjaxOptions
                      {
                          InsertionMode = InsertionMode.Replace,
                          HttpMethod = "POST",
                          UpdateTargetId = "table"
                      }))
  {
  
      @Html.ValidationSummary()
      @Html.AntiForgeryToken()
  
      @Html.HiddenFor(model =&gt; model.Id_Person)
  
      &lt;div class="modal-body"&gt;
         &lt;div class="editor-label"&gt;
              First name :
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.TextBoxFor(model =&gt; model.FirstName, new { maxlength = 50 })
              @Html.ValidationMessageFor(model =&gt; model.FirstName)
          &lt;/div&gt;
          &lt;div class="editor-label"&gt;
              Last name :
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.TextBoxFor(model =&gt; model.LastName, new { maxlength = 50 })
              @Html.ValidationMessageFor(model =&gt; model.LastName)
          &lt;/div&gt;
          &lt;div class="editor-label"&gt;
              National number :
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.NumNat, new { maxlength = 11 })
              @Html.ValidationMessageFor(model =&gt; model.NumNat)
          &lt;/div&gt;
          &lt;div class="editor-label"&gt;
              Start date :
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.TextBoxFor(model =&gt; model.StartDate, new { @class = "datepicker", @Value = Model.StartDate.ToString("yyyy/MM/dd") })
              @Html.ValidationMessageFor(model =&gt; model.StartDate)
          &lt;/div&gt;
          &lt;div class="editor-label"&gt;
              End date :
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @if (Model.EndDate.HasValue)
              {
                  @Html.TextBoxFor(model =&gt; model.EndDate, new { @class = "datepicker", @Value = Model.EndDate.Value.ToString("yyyy/MM/dd") })
                  @Html.ValidationMessageFor(model =&gt; model.EndDate)
              }
              else
              {
                  @Html.TextBoxFor(model =&gt; model.EndDate, new { @class = "datepicker" })
                  @Html.ValidationMessageFor(model =&gt; model.EndDate)
              }
          &lt;/div&gt;
          &lt;div class="editor-label"&gt;
              Distance House - Work (km) :
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.HouseToWorkKilometers)
              @Html.ValidationMessageFor(model =&gt; model.HouseToWorkKilometers)
          &lt;/div&gt;
          &lt;div class="editor-label"&gt;
              Category :
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.DropDownList("Id_ProductPackageCategory", "Choose one ...")
              @Html.ValidationMessageFor(model =&gt; model.Id_ProductPackageCategory) &lt;a href="../ProductPackageCategory/Create"&gt;
                  Add a new category?&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="editor-label"&gt;
              Upgrade? :
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.Upgrade)
              @Html.ValidationMessageFor(model =&gt; model.Upgrade)
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button class="btn btn-inverse" id="save" type="submit"&gt;Save&lt;/button&gt;
      &lt;/div&gt;
  }
  
  &lt;/div&gt;
  </code></pre>
  
  <p>My script which is in the Index view : </p>
  
  <pre><code>        $('.edit-person').click(function () {
                 var id = $(this).data("id");
                 var url = '/Person/EditPerson/'+id;
                 $.get(url, function(data) {
  
                     $('#edit-person-container').html(data);
                     $('#edit-person').modal('show');
  
                 });
          });
  </code></pre>
  
  <p>Also, as you can see, I have put a size for my textboxes but in my modal, it seems to not be taken into account. Any ideas for these issues?</p>