title: How to refresh data without page reloading in Asp.net core MVC using Ajax?
body: <p>I have data filtering using a checkbox. I want that when I click on the &quot;Submit&quot; button, only the products are updated without reloading the page</p>
  <p>Here's the filtering:</p>
  <pre><code>&lt;form id=&quot;my_form&quot; asp-action=&quot;Face&quot; method=&quot;get&quot;&gt;
      &lt;label&gt;Color:&lt;/label&gt;
      &lt;input type=&quot;checkbox&quot; name=&quot;color&quot; value=&quot;black&quot; /&gt;&lt;span&gt;Black&lt;/span&gt;
      &lt;input type=&quot;checkbox&quot; name=&quot;color&quot; value=&quot;white&quot; /&gt;&lt;span&gt;White&lt;/span&gt;
      &lt;br /&gt;
      &lt;p&gt;&lt;/p&gt;
      &lt;label&gt;Manufacturer:&lt;/label&gt;
      &lt;input type=&quot;checkbox&quot; name=&quot;brand&quot; value=&quot;A&quot; /&gt;&lt;span&gt;A&lt;/span&gt;
      &lt;input type=&quot;checkbox&quot; name=&quot;brand&quot; value=&quot;B&quot; /&gt;&lt;span&gt;B&lt;/span&gt;
      &lt;input class=&quot;btn btn-info float-right&quot; type=&quot;submit&quot; value=&quot;Search&quot; /&gt;
      //Etc
  &lt;/form&gt;
  </code></pre>
  <p>I need this data to be displayed first. And in the case of passing filters, they were updated depending on what I passed to the controller</p>
  <pre><code> &lt;div class=&quot;row pr-3 pl-3&quot;&gt;
              @foreach (var c in Model)
              {
                  &lt;div class=&quot;filter col-md-3 p-0 hover-bc-card&quot; data-category=&quot;@c.PurposeFor&quot;&gt;
                      &lt;div class=&quot;p-3&quot;&gt;
                          &lt;a class=&quot;text-decoration-none text-dark&quot; asp-action=&quot;Product&quot; asp-controller=&quot;Cosmetic&quot; asp-route-id=&quot;@c.Id&quot;&gt;
                              &lt;div&gt;
                                  &lt;img class=&quot;card-img-top p-4 bg-white&quot; src=@c.Img alt=&quot;@c.Name&quot;&gt;
                              &lt;/div&gt;
                          &lt;/a&gt;
                          &lt;div class=&quot;card-body&quot;&gt;
                              &lt;h5 class=&quot;card-title text-center&quot;&gt;@c.Name&lt;/h5&gt;
                              &lt;p class=&quot;card-text text-center f-sz-12 &quot;&gt;@c.PurposeFor&lt;/p&gt;
                              &lt;p class=&quot;card-text rounded text-center price-for-list&quot;&gt;@c.Price ₴&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              }
          &lt;/div&gt;
  </code></pre>
  <p>Just in case my controller:</p>
  <pre><code>public IActionResult Face(string[] color, string[] brand, string[] PurposeFor, string sortOrder)
      {
  
          ViewBag.color = color;
          ViewBag.PurposeFor = PurposeFor;
          ViewBag.brand = brand;
          ViewBag.NameSortParm = string.IsNullOrEmpty(sortOrder) ? &quot;Name_desc&quot; : &quot;&quot;;
          ViewBag.PriceSortParm = sortOrder == &quot;Price&quot; ? &quot;Price_desc&quot; : &quot;Price&quot;;
  
          var cosmetics = db.Cosmetics.Where(c =&gt; c.PurposeFor.Contains(&quot;Face&quot;)).ToList();
          var co_cars = new List&lt;Cosmetic&gt;();
          var ma_cars = new List&lt;Cosmetic&gt;();
          var purposeFor = new List&lt;Cosmetic&gt;();
  
  
          if (color.Length != 0)
          {
              foreach (string co in color)
              {
                  var colorfiltercars = db.Cosmetics.Where(c =&gt; c.Color.Contains(co)).ToList();
                  co_cars.AddRange(colorfiltercars);
              }
          }
          else
          {
              co_cars = cosmetics;
          }
  
          if (PurposeFor.Length != 0)
          {
              foreach (string pf in PurposeFor)
              {
                  var purposefiltercars = db.Cosmetics.Where(c =&gt; c.PurposeFor.Contains(pf)).ToList();
                  purposeFor.AddRange(purposefiltercars);
              }
          }
          else
          {
              purposeFor = cosmetics;
          }
  
          if (brand.Length != 0)
          {
              foreach (string ma in brand)
              {
                  var manufacturerfiltercars = db.Cosmetics.Where(c =&gt; c.Brand.Contains(ma)).ToList();
                  ma_cars.AddRange(manufacturerfiltercars);
              }
          }
          else
          {
              ma_cars = cosmetics;
          }
  
          var filtercars = co_cars.Intersect(ma_cars);
          filtercars = filtercars.Intersect(purposeFor);
  
          switch (sortOrder)
          {
              case &quot;Name_desc&quot;:
                  filtercars = filtercars.OrderByDescending(s =&gt; s.Name);
                  break;
              case &quot;Price&quot;:
                  filtercars = filtercars.OrderBy(s =&gt; s.Price);
                  break;
              case &quot;Price_desc&quot;:
                  filtercars = filtercars.OrderByDescending(s =&gt; s.Price);
                  break;
              default:
                  filtercars = filtercars.OrderBy(s =&gt; s.Name);
                  break;
          }
          return View(filtercars.ToList());
      }
  </code></pre>