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

【问题标题】：How to post a form with Ajax in Razor Pages如何在 Razor Pages 中使用 Ajax 发布表单
【发布时间】：2020-07-24 12:37:19
【问题描述】：

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

我有一个带有表单的 Razor 页面，该表单由下拉列表和按钮组成。它还有一个参数 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（网络表单）的时候，我只是把所有的东西都放在标签和粉扑里！有用。但我了解到，如今这并不容易。我能够找到这个：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 发布表单的正确方法是什么？

【问题讨论】：

如果显示警报，则 AJAX 帖子正在按预期工作。您需要调试 OnPostArticleAsync 处理程序以查看发布的数据会发生什么。也许 ModelState 无效。从您发布的代码中无法判断。
哈！谢谢，我很确定它不起作用，所以我没有尝试简单的调试。无论如何，我现在尝试了，问题是帖子实际上调用了页面模型中的另一个任务 OnPostAsync。 $.ajax 中的 URL 应该是 '1?handler=Article'，而不仅仅是 'handler=Article'，其中 1 是查询字符串中的 orderId。所以现在我需要弄清楚如何从查询字符串获取数据到 javascript/jquery
...或者只是添加 window.location.href 和 ?handler=Article

标签： jquery razor-pages

【解决方案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')
            }
        }
        )

        });
    });

【讨论】：