如何在Razor Pages中使用Ajax发布表单

Question

我是Razor Pages的新手，所以我可能想要一些非常基本的东西。

我有一个带有表单的剃刀页面，它由下拉列表和按钮组成。它还有一个参数orderId作为路由数据。

<form method="post">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="Article.Nickname" class="control-label"></label>
            <select asp-for="Article.ArticleId" class="form-control"
                    asp-items="@Model.ArticleNicknameSL">
                <option value="">-- Select Article--</option>
            </select>
            <span asp-validation-for="Article.ArticleId" class="text-danger" />
        </div>

        <div class="form-group">
            <input type="submit" value="Add Article" id="add-article" asp-page-handler="Article" class="btn btn-primary" />
        </div>
    </form>

有一个PageModel，它包含以下内容：

public async Task<IActionResult> OnPostArticleAsync()
    {
        if (!ModelState.IsValid)
        {
            return Page();
        }
        ArticlesInOrder newArticleInOrder = new ArticlesInOrder();

        Order = await _context.Orders
            .Include(o => o.Vendor)
            .Include(o => o.ArticlesInOrders)
                .ThenInclude(o => o.Article)
            .FirstOrDefaultAsync(m => m.OrderId == OrderId);

        Article addArticle = await _context.Articles
            .FirstOrDefaultAsync(a => a.ArticleId == Article.ArticleId);

        newArticleInOrder.Article = addArticle;
        newArticleInOrder.Order = Order;
        newArticleInOrder.Quantity = 1;
        _context.ArticlesInOrders.Add(newArticleInOrder);
        await _context.SaveChangesAsync();

        return await LoadData();
    }

此页面按预期工作。但是，我想在没有回发的情况下发布表单。但我不知道该怎么做。回到我以前使用asp.net 4 (web表单)的日子，我只是把所有的东西都放在标签里！它起作用了。但我了解到，这几天并不是那么容易。我找到了这个：https://www.learnrazorpages.com/razor-pages/ajax/form-post，并以这种方式修改了示例：

<script>
$(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')
            }
        }
        )

        });
    });</script>

但它没有做任何有用的事情，只是显示警报中的消息，所以我显然遗漏了一些东西。那么，使用jquery发布表单的正确方式是什么呢？

Answer 1

好的，它实际上几乎是正确的。我所需要的就是将window.location.href添加到url中：

$(function () {
    $('#add-article').on('click', function (evt) {
        evt.preventDefault();
        $.ajax({
            type: "POST",
            url: window.location.href + '?handler=Article',
            data: $('form').serialize(),
            headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
            success: function () {
                alert('Posted using jQuery')
            }
        }
        )

        });
    });