title: Modal form refreshing to main page while returning validation instead of displaying in Modal
body: <p><strong>Situation</strong></p>
  
  <p>I am working on an application where I have a table of three fields, I add items to that table by clicking a button and loading a modal pop up where I add the values.</p>
  
  <p><strong>Problem</strong></p>
  
  <p>I have validation in my controller. If for any reason validation fails I want to display the error back on the form. <strong>The problem is</strong>, when I submit and the validation error occurs, the form goes to my edit view and also redirects the browser to the page. So instead of my link "<code>http://localhost:1979/Crops/Edit/34</code>" remaining as a modal, the browser actually redirects to it and my css/bootstrap/modal is lost.</p>
  
  <p><strong>What I have tried</strong></p>
  
  <p>1) I have attempted to use ajax so that my page would not refresh or redirect so  I have </p>
  
  <pre><code>@using (Ajax.BeginForm("Edit", "Crops", null,  new { @class = "form-horizontal", role = "form" }))
  {
  </code></pre>
  
  <p>2) I have added the jquery validate to my script as below</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt; &lt;/title&gt;
  
      &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
      &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&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;/head&gt;
  </code></pre>
  
  <p>3) I verified that it is also in my web config. </p>
  
  <pre><code>&lt;add key="ClientValidationEnabled" value="true" /&gt;
  &lt;add key="UnobtrusiveJavaScriptEnabled" value="true" /&gt;
  </code></pre>
  
  <p>Despite this, when clicking submit, my page still takes me to the edit page where it displays the validation.
  Grateful if I could get assistance so when I submit it shows the validation right there in the modal form instead of going to the edit page. </p>
  
  <p>I have added the edit page along with the index page which calls the model below</p>
  
  <p><strong>Edit Page</strong></p>
  
  <pre><code>@model PSLicense_app.Models.HOLD_cropsGrown
  
  @{
      ViewBag.Title = "Edit";
  }
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt; &lt;/title&gt;
  
      &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
      &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&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;/head&gt;
  
  
  &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"&gt;Edit Crop Grown&lt;/h4&gt;
  &lt;/div&gt;
  &lt;h2&gt; &lt;/h2&gt;
  @using (Ajax.BeginForm("Edit", "Crops", null,  new { @class = "form-horizontal", role = "form" }))
  {
  @*@using (Html.BeginForm())
  {*@
      &lt;div class="modal-body"&gt;
          @Html.AntiForgeryToken()
  
          @Html.HiddenFor(model =&gt; model.availSell)
          &lt;div class="form-horizontal"&gt;
              &lt;h4&gt;&lt;/h4&gt;
              &lt;hr /&gt;
              @Html.ValidationSummary(true)
            @Html.HiddenFor(model =&gt; model.Holding_ID)
  
              &lt;div class="form-group"&gt;
                  &lt;div class="col-md-offset-2 col-md-10"&gt;
             --Fields here
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;button class="btn" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
          &lt;input class="btn btn-primary" type="submit" value="Edit" /&gt;
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>Index (Edit button calls above Modal Code)</p>
  
  <pre><code>@{
      ViewBag.Title = "Index";
  }
  
   &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
  &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
  
       &lt;h2&gt;&lt;/h2&gt;
      &lt;!-- modal placeholder--&gt;
      &lt;div id='myModal' class='modal fade in'&gt;
          &lt;div class=" modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div id='myModalContent'  &gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
      &lt;/div&gt;
  @using GridMvc.Html
  
  
      &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
  
          &lt;/div&gt;
  
  
  
          &lt;table class="table"&gt;
              &lt;tr&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.id)
                  &lt;/th&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.Numof)
                  &lt;/th&gt;
                  &lt;th&gt;
                      @Html.DisplayNameFor(model =&gt; model.availSell)
                  &lt;/th&gt; 
  
              &lt;/tr&gt;
  
  
              @foreach (var item in Model)
  {
      &lt;tr&gt;
          &lt;th&gt;
              @Html.DisplayFor(modelItem =&gt; item.id)
          &lt;/th&gt;
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.Numof)
          &lt;/td&gt;
  
          &lt;td&gt;
              @Html.DisplayFor(modelItem =&gt; item.availSell)
          &lt;/td&gt;
  
  &lt;th&gt;
  
  
          @Html.NoEncodeActionLink("&lt;span class='glyphicon glyphicon-pencil'&gt;&lt;/span&gt;", "Edit", "Edit", "Crops", routeValues: new { id = item.id }, htmlAttributes: new { data_modal = "", @class = "btn btn-default modal-link" })
  
  
  &lt;/th&gt;
  
  
      &lt;/tr&gt;
  }
  
          &lt;/table&gt;
  
      &lt;/div&gt;
  
      &lt;!-- Modal --&gt;
      &lt;div id="modal-container" class="modal fade" role="dialog" data-backdrop="static"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-body"&gt;
                  &lt;div style="text-align:center"&gt;
                      &lt;img src="~/Content/images/loader.gif" alt="Loading Please Wait test" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
      &lt;script type="text/javascript"&gt;
  
          $(function () {
              // Initialize modal dialog
              // attach modal-container bootstrap attributes to links with .modal-link class.
              // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
              $('body').on('click', '.modal-link', function (e) {
                  e.preventDefault();
                  $(this).attr('data-target', '#modal-container');
                  $(this).attr('data-toggle', 'modal');
              });
              //clear modal cache, so that new content can be loaded
              $(document).on("hidden.bs.modal", function (e) {
                  $(e.target).removeData("bs.modal").find(".modal-content").replaceWith('&lt;div class="modal-content"&gt;&lt;div class="modal-body"&gt;&lt;div style="text-align:center"&gt;&lt;img src="/../Content/images/loader.gif" alt="Loading Please Wait" /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;');
  
              });
              //Diable diabledtabs
              $('ul.nav&gt; li.disabled &gt; a').click(function () { return false; });
  
          });
      &lt;/script&gt;
  </code></pre>