title: Insert Data from Modal Bootstrap MVC 4 + JQuery (Post Method)
body: <p>I have a modal form that save me on certain data information, work correctly, but I need to update a  in my view with the response and doesn't work correctly and bring me a list without format and class css, like when an error occurs, the modal disappears and brings back a page without css with all the validates error, what I have wrong in my code or that I do to fix it?</p>
  
  <p>My Partial View</p>
  
  <pre><code>@model ControlSystemData.Models.Tourist
  
  
  &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
      &lt;h4 class="modal-title" id="myModalLabel-Update"&gt;Ingresar Turista&lt;/h4&gt;
  &lt;/div&gt;
  
  @using(@Html.BeginForm("Create","Tourist", FormMethod.Post))
  {
      @Html.AntiForgeryToken()
      @Html.ValidationSummary(true)
  
      &lt;fieldset&gt;
          &lt;div class="modal-body" style="text-align:center; padding:10px;"&gt;
              @if (!string.IsNullOrWhiteSpace(ViewBag.Error))
              {
                  &lt;div class="alert alert-danger alert-dismissable" id="danger"&gt;
                      &lt;button type="button" class="close" data-dismiss="alert" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                      @ViewBag.Error
                  &lt;/div&gt;
              }
              &lt;div class="panel-body"&gt;
  
                  &lt;div class="form-group"&gt;
                      @Html.TextBoxFor(u =&gt; u.Name, new { @class = "form-control", @placeholder = "Nombre del Pasajero" })
                      @Html.ValidationMessageFor(u =&gt; u.Name)
                  &lt;/div&gt;
  
                 @*More Data Here*@
  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="submit" class="btn btn-primary"&gt;Guardar&lt;/button&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Cerrar&lt;/button&gt;
          &lt;/div&gt;
      &lt;/fieldset&gt;
  }
  </code></pre>
  
  <p>My Modal Bootstrap </p>
  
  <pre><code>&lt;!--Modal Tourist--&gt;
  &lt;div class="modal fade" id="Modal-Tourist" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;p class="body"&gt;
  
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--End Modal Tourist--&gt;
  </code></pre>
  
  <p>My Controller</p>
  
  <pre><code>[HttpPost]
  public ActionResult Create(Tourist collection)
  {
      if (ModelState.IsValid)
      {
          db.Tourist.Add(collection);
          db.SaveChanges();
          return RedirectToAction("IndexByEventsTourist", "Tourist", new { id = collection.id });
      }
  
  
      Response.StatusCode = 400;
      return PartialView("Create", collection);
  }
  </code></pre>
  
  <p>My Script </p>
  
  <pre><code>&lt;script type="text/javascript" src="~/Scripts/jquery-2.1.4.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
      function clearErrors() {
          $('#msgErrorNewTourist').html('');
          $('#alert').html('');
      }
  
      function writeError(control, msg) {
          var err_msg = '&lt;div class="alert-message error"&gt;&lt;a class="close" href="#"&gt;×&lt;/a&gt;&lt;p&gt;' + msg + '&lt;/p&gt;&lt;/div&gt;';
          $('#' + control).html(err_msg);
      }
  
      $(document).ready(function () {                
          $('#Modal-Tourist form').on('submit', function () {            
              if ($(this).valid()) {
                  $.ajax({
                      url: '@Url.Action("Create","Tourist")',
                      data: $(this).serialize(),
                      success: function (result) {
                          $('#Modal-Tourist').modal('hide');
                          $("#eventsDetailsList").html(result);
                      },
                      error: function (err) {
                          writeError('body', 'Wrong Data');
                      }
                  });
              }
              return false;
          });
  
          function getRequest(url) {
              jQuery.noConflict();
              $.ajax({
                  url: url,
                  context: document.body,
                  success: function (data) {
                      $('.modal-content p.body').html(data);                    
                      $('#Modal-Tourist').modal('show');
                      $('#Name').focus();
                  },
                  error: function (err) {
                      writeError('msgErrorNewTourist', err.responseText);
                  }
              });
          }
  
  
          $('a.newTourist').click(function () {           
              var id = $(this).attr("eventsid");
              var url = '@Url.Content("~/Tourist/Create")/' + id;
  
              getRequest(url);
  
              return false;
  
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I need that the modal stay in your position with your errors or rendering my  correctly with the update. </p>
  
  <p>Thanks </p>
  
  <p>Images 
  <a href="https://i.stack.imgur.com/sfPv3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sfPv3.png" alt="Page rendering correctly"></a>
  <a href="https://i.stack.imgur.com/Ghc1O.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ghc1O.png" alt="Modal with Error from my Controller (in new page not in your main stage)"></a>
  <a href="https://i.stack.imgur.com/xFhdJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xFhdJ.png" alt="Update Succesfuly but not update my div in my page correctly "></a></p>
  
  <p>RedirectToAction </p>
  
  <pre><code>public ActionResult IndexByEventsTourist(int id)
  {
      ViewBag.id = id;
      var eventsById = db.Events.Where(u =&gt; u.id == id).FirstOrDefault();
      ViewBag.Events = eventsById;
  
      var touristByEvent = db.Tourist.Where(u =&gt; u.id == id).Include(u =&gt; u.Events).ToList();
      ViewBag.TouristByEvent = touristByEvent;
  
      return PartialView("IndexByEvents", touristByEvent);
  }
  </code></pre>
  
  <p>Parent page (Render Div with the Partial Render or Update from Modal)</p>
  
  <pre><code>    &lt;div class="col-lg-8"&gt;
          &lt;div class="panel panel-default"&gt;
              &lt;div class="panel-heading"&gt;                
                  &lt;a href="@Url.Action("Create", "Tourist", new { id = Model.id })" eventsid="@Model.id" class="btn btn-primary newTourist"&gt;&lt;i class="fa fa-plus"&gt;&lt;/i&gt; Add&lt;/a&gt;               
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                  &lt;div class="row"&gt;
                      &lt;div id="msgErrorNewTourist"&gt;&lt;/div&gt;
                      &lt;div class="col-lg-12" id="eventsDetailsList"&gt;                        
                              @{Html.RenderAction("IndexByEventsTourist", "Tourist", new { id = Model.id });}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>