Новые Razor Страницы из JavaScript с размещением данных

Question

Как я могу опубликовать данные с помощью javascript с последующей загрузкой новой страницы Razor?

Если я вызываю новую страницу Razor из вызова Ajax, то я не могу вернуть эту новую страницу.

Как мне этого добиться?

Спасибо

Клиент: Javascript на Razor Page1.cshtml var ptFilter = (...);// $ .ajax ???call post Метод Page2

Сервер: другая страница бритвы Page2.cs

публичная асинхронная задача OnPostSendAsync ([FromBody] PtFilter ptFilter) {

   var data = await _ptService.GetData(ptFilter);
   // RedirectToPage(data) ??;
   // return Page(data) ??;

}

Answer 1

Обратите внимание на $ ajax.url и @ ajax.success (), который содержит updatePreviewCart ()

В приведенном ниже примере приложения с бритвенными страницами, над которым я работаю, я добавляюэлемент продукта со страницы продукта в компонент просмотра корзины покупок, который принадлежит в меню навигации сайта.Как только товар добавлен в базу данных корзины покупок, блок успешного возврата вызова Ajax в первом фрагменте кода обновит корзину покупок на панели навигации.ViewComponent загружается через BaseController, поскольку компонент используется в файле _Layout.cs.

Products.html

$(".add-to-cart").on("click", function (element: any) {
    element.preventDefault();

    $.ajax({
        cache: false,
        type: "POST",
        url: "Products/?handler=AsyncAddToCart",
        data: { id: $(this).data("id") },
        beforeSend: xhr => {
            xhr.setRequestHeader("XSRF-TOKEN", ($('input:hidden[name="__RequestVerificationToken"]').val() as string));
        },
        success: (data) => {
            if (data.isSuccess) {
                toastr.success($(this).data("name") + " has successfully been added to your cart. <a href='/Index'>Go to checkout</a>");
                updatePreviewCart();
            } else {
                toastr.error(data.message);
            }
        },
        error: (xhr: any, ajaxOptions: any, thrownError: any) => {
            toastr.error("Unable to add items at this time. Please try again later or contact support if issue persists.");
        }
    });
});

UpdateCartPreview.js

function updatePreviewCart() {
    $.ajax(({
        cache: false,
        type: "GET",
        url: "/Base/GetCartViewComponent",
        success: (data) => {
            $("#preview-cart-container").html(data);
        },
        error: (xhr: any, ajaxOptions: any, thrownError: any) => {
            toastr.warning("Your preview cart is still updating. You should see your added item(s) shortly.");
        }
    }));
}

BaseController.cs

[Route("[controller]/[action]")]
    public class BaseController : Controller
    {
        [HttpGet]
        public IActionResult GetCartViewComponent()
        {
            return ViewComponent("Cart");
        }

        [HttpPost]
        public IActionResult SetLanguage(string culture, string returnUrl)
        {
            Response.Cookies.Append(
                CookieRequestCultureProvider.DefaultCookieName,
                CookieRequestCultureProvider.MakeCookieValue(new RequestCulture(culture)),
                new CookieOptions { Expires = DateTimeOffset.UtcNow.AddYears(1)}
            );

            return LocalRedirect(returnUrl);
        }
    }

Cart.cs Просмотреть компонент

public class Cart : ViewComponent
    {
        private readonly ICartService _cartService;

        public Cart(ICartService cartService)
        {
            _cartService = cartService;
        }

        public async Task<IViewComponentResult> InvokeAsync()
        {
            return View("~/Pages/Components/Cart/Default.cshtml", await _cartService.GetCart());
        }
    }

Answer 2

Вы можете отправлять данные через $ .ajax и получать ответ от своего контроллера, затем просто используйте window.location.replace(your page2 action url here)

Что-то вроде этого:

$.ajax({
  url: "...",
  //...
}).done(function(data) {
  //If needed, check received data, then
  window.location.replace(your page2 action url here);
});