title: How to post a form with Ajax in Razor Pages
body: <p>I'm new to Razor Pages, so I'm probably asking for something very basic.</p>
  
  <p>I have a Razor Page with a form, which consists of dropdown list and button. It has also one parameter, orderId as route data. </p>
  
  <pre><code>&lt;form method="post"&gt;
          &lt;div asp-validation-summary="ModelOnly" class="text-danger"&gt;&lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;label asp-for="Article.Nickname" class="control-label"&gt;&lt;/label&gt;
              &lt;select asp-for="Article.ArticleId" class="form-control"
                      asp-items="@Model.ArticleNicknameSL"&gt;
                  &lt;option value=""&gt;-- Select Article--&lt;/option&gt;
              &lt;/select&gt;
              &lt;span asp-validation-for="Article.ArticleId" class="text-danger" /&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;input type="submit" value="Add Article" id="add-article" asp-page-handler="Article" class="btn btn-primary" /&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>There is a PageModel, which constits of this:</p>
  
  <pre><code>public async Task&lt;IActionResult&gt; OnPostArticleAsync()
      {
          if (!ModelState.IsValid)
          {
              return Page();
          }
          ArticlesInOrder newArticleInOrder = new ArticlesInOrder();
  
          Order = await _context.Orders
              .Include(o =&gt; o.Vendor)
              .Include(o =&gt; o.ArticlesInOrders)
                  .ThenInclude(o =&gt; o.Article)
              .FirstOrDefaultAsync(m =&gt; m.OrderId == OrderId);
  
          Article addArticle = await _context.Articles
              .FirstOrDefaultAsync(a =&gt; a.ArticleId == Article.ArticleId);
  
          newArticleInOrder.Article = addArticle;
          newArticleInOrder.Order = Order;
          newArticleInOrder.Quantity = 1;
          _context.ArticlesInOrders.Add(newArticleInOrder);
          await _context.SaveChangesAsync();
  
          return await LoadData();
      }
  </code></pre>
  
  <p>This page works as intended. However, I would like post the form without postback. But I have no idea how to do this. 
  Back in my old days with asp.net 4 (web forms), I would just put all inside  tag and puff! It works. But I learned that it is not so easy these day.
  I was able to find this: <a href="https://www.learnrazorpages.com/razor-pages/ajax/form-post" rel="nofollow noreferrer">https://www.learnrazorpages.com/razor-pages/ajax/form-post</a> and altered the example this way:</p>
  
  <pre><code>&lt;script&gt;
  $(function () {
      $('#add-article').on('click', function (evt) {
          evt.preventDefault();
          $.ajax({
              type: "POST",
              url: 'handler=Article',
              data: $('form').serialize(),
              headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
              success: function () {
                  alert('Posted using jQuery')
              }
          }
          )
  
          });
      });&lt;/script&gt;
  </code></pre>
  
  <p>But it does not do anything useful, just diplays the message from the alert, so I'm obviously missing something. So, what is the proper way to post a form with jquery?</p>