Частичное обновление страницы с ajax - PullRequest
Новая
       50

Частичное обновление страницы с ajax

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

еще один вопрос для начинающих. У меня есть страница заказа со списком статей в заказе. Для добавления новых статей в заказ существует выпадающий список со всеми существующими статьями. Я хотел бы добавить элементы в заказ без обратной передачи. Поэтому я создал частичный список статей по порядку. Я поместил частичный тег на страницу заказа и добавил jquery, вызывающий OnPostArticleAsyn c обработчик для обработки добавления новой статьи, а затем вызывающий OnGetRefre sh обработчик, который помещает обновленные данные в div # article. 

<div id="articles">
@if (Model.Articles != null)
{
    <partial name="_Articles" model="Model.Articles" />
}


<div class="row">
<div class="col-md-4">
    <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">

            </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>
</div>


<script>
$(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 () {
                $('#articles').load(window.location.href +'?handler=Refresh');
            }
        }
        )

        });
    });

</script>

Модель страницы: 

public PartialViewResult OnGetRefresh()
    {
        Articles =  _context.ArticlesInOrders
            .Include(a => a.Article)
            .Where(a => a.OrderId == OrderId)
            .ToList();
        return Partial("_Articles", Articles);
    }

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();
    }

Так, когда страница отображается в первый раз, частичный тег отображает статьи и когда добавляется новая статья, она отображается обработчиком Refre sh. Сейчас он работает - с jquery он показывает новые данные, вызывая OnGetRefre sh, без jquery он показывает новые данные с помощью «return await LoadData ();» в конце OnPostArticleAsyn c.

LoadData выглядит так: 

public async Task<IActionResult> LoadData()
    {
        //some data loading
        return Page();}

Мне просто интересно, насколько плоха идея, что я называю это «return Page ();» во время звонка ajax. По-видимому, это не влияет на результат, но я не уверен, если это просто по счастливой случайности или это действительно не имеет значения. Да, я могу легко создать другой обработчик для вызова ajax, но тогда мне пришлось поддерживать два разных обработчика для одной и той же вещи, чего я хотел бы избежать.

...