title: MVC 4 Edit modal form using Bootstrap
body: <p>I'm using MVC 4 and Entity Framework to develop an intranet web application. I have a list of persons which can be modify by an edit action. I wanted to make my app more dynamic by using modal forms. So I tried to put my edit view into my Bootstrap modal and I have 2 questions about it :</p>
  
  <ul>
  <li>Should I use a simple or a partial view?</li>
  <li>How can I perform the validation (actually it work but it redirects me to my original view so not in the modal form)</li>
  </ul>
  
  <p>I think I have to use AJAX and/or jQuery but I'm new to these technologies. Any help would be appreciated.</p>
  
  <p>EDIT : My Index View : </p>
  
  <pre><code>@model IEnumerable&lt;BuSIMaterial.Models.Person&gt;
  
  @{
      ViewBag.Title = "Index";
  }
  
  
  &lt;h2&gt;Index&lt;/h2&gt;
  
  &lt;br /&gt;
  
  &lt;div class="group"&gt;
          &lt;input type="button" value="New person" class="btn" onclick="location.href='@Url.Action("Create")';return false;"/&gt;
          &lt;input type="button" value="Download report" class="btn" onclick="location.href='@Url.Action("PersonReport")';return false;"/&gt;
  &lt;/div&gt;
  
  
  @using (Html.BeginForm("SelectedPersonDetails", "Person"))
  {  
      &lt;form class="form-search"&gt;
          &lt;input type="text" id="tbPerson" name="tbPerson" placeholder="Find an employee..." class="input-medium search-query"&gt;
          &lt;button type="submit" class="btn"&gt;Search&lt;/button&gt;
      &lt;/form&gt;
  }
  
  
  &lt;table class="table"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Firstname&lt;/th&gt;
              &lt;th&gt;Lastname&lt;/th&gt;
              &lt;th&gt;Start Date&lt;/th&gt;
              &lt;th&gt;End Date&lt;/th&gt;
              &lt;th&gt;Details&lt;/th&gt;
              &lt;th&gt;Actions&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
  @foreach (BuSIMaterial.Models.Person item in ViewBag.PageOfPersons)
  {
      &lt;tr&gt;
          &lt;td&gt;@item.FirstName&lt;/td&gt;
          &lt;td&gt;@item.LastName&lt;/td&gt;
          &lt;td&gt;@item.StartDate.ToShortDateString()&lt;/td&gt;
          &lt;td&gt;
              @if (item.EndDate.HasValue)
              {
                  @item.EndDate.Value.ToShortDateString()
              }        
          &lt;/td&gt;
  
          &lt;td&gt;
              &lt;a class="details_link" data-target-id="@item.Id_Person"&gt;Details&lt;/a&gt;
          &lt;/td&gt;
  
          &lt;td&gt;
              &lt;div&gt;
                  &lt;button class="btn btn-primary edit-person" data-id="@item.Id_Person"&gt;Edit&lt;/button&gt;
  
              &lt;/div&gt;
          &lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td colspan="6"&gt;
  
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;th&gt;National Number&lt;/th&gt;
                      &lt;td&gt;@item.NumNat&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Vehicle Category&lt;/th&gt;
                      &lt;td&gt;@item.ProductPackageCategory.Name&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Upgrade&lt;/th&gt;&lt;td&gt;@item.Upgrade&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;th&gt;House to work&lt;/th&gt;
                      &lt;td&gt;@item.HouseToWorkKilometers.ToString("G29")&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;div id="details_@item.Id_Person"&gt;&lt;/div&gt;
          &lt;/td&gt;
  
      &lt;/tr&gt;
  
  }
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;div class="modal hide fade in" id="edit-member"&gt;
      &lt;div id="edit-person-container"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  @section Scripts
  {
      @Scripts.Render("~/bundles/jqueryui")
      @Styles.Render("~/Content/themes/base/css")
  
      &lt;script type="text/javascript" language="javascript"&gt;
  
          $(document).ready(function () {
  
              $('#tbPerson').autocomplete({
                  source: '@Url.Action("AutoComplete")'
              });
  
              $(".details_link").click(function () {
                  var id = $(this).data("target-id");
                  var url = '/ProductAllocation/ListByOwner/' + id;
                  $("#details_"+ id).load(url);
              });
  
              $('.edit-person').click(function () {
                  var url = "/Person/EditPerson"; 
                  var id = $(this).attr('data-id');
                  $.get(url + '/' + id, function (data) {
                      $('#edit-person-container').html(data);
                      $('.edit-person').modal('show');
                  });
              });
  
  
          });
  
      &lt;/script&gt;
  }
  </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 = "list-of-people"
                      }))
  {
  
      @Html.ValidationSummary()
      @Html.AntiForgeryToken()
      &lt;div class="modal-body"&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-field"&gt;
              @Html.TextBoxFor(model =&gt; model.LastName, new { maxlength = 50 })
              @Html.ValidationMessageFor(model =&gt; model.LastName)
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button class="btn btn-inverse" type="submit"&gt;Save&lt;/button&gt;
      &lt;/div&gt;
  }
  </code></pre>