来自 javascript 的带有发布数据的新 Razor 页面答案

【问题标题】：New Razor Pages from javascript with posting data来自 javascript 的带有发布数据的新 Razor 页面
【发布时间】：2019-06-22 21:28:56
【问题描述】：

如何使用 javascript 发布数据，然后加载新的 Razor 页面？

如果我从 Ajax 调用中调用新的 Razor 页面，则无法返回该新页面。

我怎样才能做到这一点？

谢谢

客户端：Razor Page1.cshtml 上的 Javascript var ptFilter = (...); // $.ajax ???调用Page2的post方法

服务器：另一个剃须刀页面Page2.cs

公共异步任务 OnPostSendAsync([FromBody]PtFilter ptFilter) {

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

}

【问题讨论】：

为什么你不能直接重定向到 Javascript 中的下一页？
你能解决这个问题吗？我正在尝试做类似的事情，我将数据发布到我的 Page1.cs，它进行一些数据收集，然后重定向到 Page2。我希望能够在单独的窗口中打开 Page2。

标签： javascript c# razor-pages

【解决方案1】：

您可以通过 $.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);
});

【讨论】：

我使用 razor pages 核心。我没有控制器。我有一个像控制器这样的页面模型。页面模型从数据库中获取数据并将包含数据的页面返回给客户端（如控制器）。如果我使用 window.location.replace 从 ajax 调用页面，我该如何传递我的数据？
@Enis，您问：“如何使用 javascript 发布数据，然后加载新的 Razor 页面？”。现在你在问另一个相当新的问题。下次请简明扼要。不过，您的新问题，您可以传递查询参数。

【解决方案2】：

请记下包含 updatePreviewCart() 的 $ajax.url 和 @ajax.success()

在下面我一直在处理的剃须刀页面应用程序示例中，我将产品页面中的产品项添加到属于网站导航菜单的购物车视图组件。一旦商品被添加到购物车的数据库中，第一个代码 sn-p 中的 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());
        }
    }

【讨论】：