title: Ajax post method works with problem, in asp.net core project
body: <p>I have a code in asp.net core, that it reads all rows from &quot;Color&quot; table of database (in SQL server) and Shows this data in a data table. Above this table, There is a button after clicking, an accordion opens and shows a form that can insert a new row to below table.</p>
  <p>I have a controller called &quot;ColorController&quot; that has 3 actions: ShowColors, Insert(get mode), Insert(post mode).</p>
  <p><strong>ColorController.cs</strong> :</p>
  <pre><code>    private IColor _icolor;
  
      public ColorController(IColor icolor)
      {
          _icolor = icolor;
      }
  
      public IActionResult ShowColors()
      {
          return View(_icolor.ShowColors());
      }
  
      public IActionResult Insert()
      {
          return View();
      }
  
      [HttpPost]
      public IActionResult Insert(ColorViewModel colorViewModel)
      {
          if (ModelState.IsValid)
          {
              if (_icolor.isColorExist(colorViewModel.ColorCode))
              {
                  ViewBag.Validation = 1;
                  ModelState.AddModelError(&quot;ColorCode&quot;, &quot;Exist!&quot;);
                  return View(colorViewModel);
              }
              else
              {
                  ViewBag.Validation = 0;    
                  
                  // ... Insert codes
  
                  return RedirectToAction(&quot;ShowColors&quot;,&quot;Color&quot;);                   
              }
          }
          else
          {
              ViewBag.Validation = 1;
              return View(colorViewModel);
          }
      }
  </code></pre>
  <p>I write 2 views for actions of color controller. These views:</p>
  <p><strong>ShowColors.cshtml:</strong></p>
  <pre><code>@model IEnumerable&lt;DataAccessLayer.Entities.Color&gt;
  
  &lt;div class=&quot;card&quot;&gt;
      &lt;div class=&quot;card-body&quot;&gt;
          &lt;div class=&quot;accordion&quot;&gt;
              &lt;div class=&quot;accordion-row&quot;&gt;
                  &lt;a class=&quot;accordion-header&quot; href=&quot;#&quot;&gt;
                      &lt;button type=&quot;button&quot; onclick='Insert() &gt;
                          InsertColor
                      &lt;/button&gt;
                  &lt;/a&gt;
                  &lt;div class=&quot;accordion-body&quot; id=&quot;InsertForm&quot;&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;card&quot;&gt;
      &lt;div class=&quot;card-body&quot;&gt;
              &lt;table id=&quot;example&quot; class=&quot;table table-hover&quot;&gt;
  
                @*...Show datatable...*@
  
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
     function Insert() {
         var _url = '@Url.Action(&quot;Insert&quot;, &quot;Color&quot;)';
          $.ajax({
             url: _url,
             type: &quot;Get&quot;,
             data: {}
          }).done(function (result) {
             $('#InsertForm').html(result);
          });
      }
  &lt;/script&gt;
  </code></pre>
  <p><strong>Insert.cshtml</strong> (I use &quot;IsValid&quot; Input for check validation.)</p>
  <pre><code>&lt;div class=&quot;card&quot;&gt;
      &lt;div class=&quot;card-body&quot;&gt;
          &lt;form&gt;
              &lt;input name=&quot;IsValid&quot; type=&quot;hidden&quot; value=&quot;@ViewBag.Validation&quot; id=&quot;validation&quot; /&gt;
              &lt;div asp-validation-summary=&quot;ModelOnly&quot; class=&quot;text-danger&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;form-row&quot;&gt;
                  &lt;div class=&quot;col-md-6 mb-3&quot;&gt;
                      &lt;div class=&quot;form-group&quot;&gt;
                          &lt;label asp-for=&quot;ColorCode&quot; class=&quot;control-label&quot;&gt;&lt;/label&gt;
                          &lt;input asp-for=&quot;ColorCode&quot; class=&quot;form-control&quot; id=&quot;txtColorCode&quot; /&gt;
                          &lt;span asp-validation-for=&quot;ColorCode&quot; class=&quot;text-danger&quot;&gt;&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-md-6 mb-3&quot;&gt;
                      &lt;div class=&quot;form-group&quot;&gt;
                          &lt;label asp-for=&quot;ColorName&quot; class=&quot;control-label&quot;&gt;&lt;/label&gt;
                          &lt;input asp-for=&quot;ColorName&quot; class=&quot;form-control&quot; id=&quot;txtColorName&quot; /&gt;
                          &lt;span asp-validation-for=&quot;ColorName&quot; class=&quot;text-danger&quot;&gt;&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;form-group&quot;&gt;
                      &lt;div class=&quot;ml-3 mt-3&quot;&gt;
                          &lt;button type=&quot;submit&quot; onclick='InsertColor()' &gt;Add Color&lt;/button&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      function InsertColor() {
          var _url = '@Url.Action(&quot;Insert&quot;, &quot;Color&quot;)';
          $.ajax({
              url: _url,
              type: &quot;POST&quot;,
              data: {
                  ColorCode: $(&quot;#txtColorCode&quot;).val(),
                  ColorName: $(&quot;#txtColorName&quot;).val(),
              },
              success: function (response) {
                  $('#InsertForm').html(response);
                  var isValid = $('body').find('[name=&quot;IsValid&quot;]').val();
                  if (isValid == 1) {
                      stop();
                  }
              },
              complete: function (xhr, status) {
                  var isValid = $('body').find('[name=&quot;IsValid&quot;]').val();
                  console.log(&quot;Is valid =&quot; + isValid);
                  if (isValid != 1)
                  {
                      if (status == 'success')
                          window.location.href = '@Url.Action(&quot;ShowColors&quot;, &quot;Color&quot;)';
                  }
              },
          }).done(function (result) {
              $('#InsertForm').html(result);
                  var isValid = $('body').find('[name=&quot;IsValid&quot;]').val();
                  if (isValid != 1) {
                      window.location.href = '@Url.Action(&quot;ShowColors&quot;, &quot;Color&quot;)';
              }
          });
      }
  &lt;/script&gt;
  </code></pre>
  <p>When I run code, everything is OK until I want to insert a new color. GET mode (Insert action) works true, but POST mode have problems. In First time that I add a new color and model State is not valid, the code doesn't work. In next times, If model state is valid, New row insert in database but in table of &quot;ShowColors&quot; view doesn't see. I reload showColors action in code, but in address bar, address has parameters, like this:</p>
  <blockquote>
  <p>localhost:.../Color/ShowColors?IsValid=&amp;ColorCode=pur&amp;ColorName=purple</p>
  </blockquote>
  <p>While I want to show this:</p>
  <blockquote>
  <p>localhost:.../Color/ShowColors</p>
  </blockquote>
  <p>I guess ajax function in &quot;Insert&quot; view is wrong, but I can't find bug. Can someone help me, where is the problem?</p>