时间戳

首页 > 解决方案 > 如何在 Razor Pages 中使用 Ajax 发布表单

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

问题描述

我是 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 发布表单的正确方法是什么？

标签： jqueryrazor-pages

解决方案

好吧，它实际上几乎是正确的。我需要的只是将 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')
            }
        }
        )

        });
    });

推荐阅读