Как разместить форму с Ajax в Razor Pages - PullRequest
Новая
       60

Как разместить форму с Ajax в Razor Pages

0 голосов
/ 11 апреля 2020

Я новичок в Razor Pages, поэтому я, вероятно, прошу что-то очень простое c.

У меня есть Razor Page с формой, которая состоит из выпадающего списка и кнопки. Он также имеет один параметр, 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?

1 Ответ

0 голосов
/ 12 апреля 2020

Хорошо, это на самом деле почти правильно. Все, что мне нужно, это добавить 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')
            }
        }
        )

        });
    });
...