使用 AJAX 调用重定向用户身份验证表单

Question

我正在使用 ASP MVC、jQuery 和 AJAX 开发一个 .Net Web 应用程序。 我有一个产品列表，当我单击产品的详细信息按钮时，我会被重定向到包含“添加到购物车”按钮的详细信息视图中

此按钮调用以下段代码的操作：

    [Authorize]
    public ActionResult AddToCart(int articleId)
    {
        ViewBag.CartCount = 0;
        List<Cart> cart = null;

        if (User.Identity.IsAuthenticated)
        {
            if (Session["Cart"] == null)
            {
                cart = new List<Cart>();
                cart.Add(new Cart { ArticleId = articleId, Count = 1, DateCreated = DateTime.Now });
                Session["Cart"] = cart;
            }
            else
            {
                cart = Session["Cart"] as List<Cart>;
                var alreadyOrdered = cart.FirstOrDefault(x => x.ArticleId == articleId);
                cart.Remove(alreadyOrdered);

                if (alreadyOrdered != null)
                {
                    alreadyOrdered.Count++;
                    cart.Add(alreadyOrdered);
                }
                else
                {
                    cart.Add(new Cart { ArticleId = articleId, Count = 1, DateCreated = DateTime.Now });
                }
                Session["Cart"] = cart;
            }
            ViewBag.CartCount = cart.Count;
            return Content(cart.Count.ToString());
        }

        return RedirectToAction("Login", "Account");
    }

在我看来，我有以下代码：

    @model WebShop.Web.ViewModels.ArticleViewModel

<div class="row">
    <div class="col-md-6">
        <img src="http://placehold.it/400x250/000/fff"
             alt="Kodak Brownie Flash B Camera"
             class="image-responsive" />
    </div>
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                <h1>@Model.Label</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <span class="label label-default">@Model.CategoryName</span>
                <span class="label label-info">@Model.SubCategoryName</span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <p class="description">
                    @Model.Description
                </p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 bottom-rule">
                <h2 class="product-price">@Model.Price.ToString("###") €</h2>
            </div>
        </div>
        <div class="row add-to-cart">
            <div class="col-md-5 product-qty">
                <span class="btn btn-default btn-lg btn-qty">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                </span>
                <input class="btn btn-default btn-lg btn-qty" value="1" />
                <span class="btn btn-default btn-lg btn-qty">
                    <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
                </span>
            </div>
            <div class="col-md-4">
                <button class="btn btn-lg btn-brand btn-full-width addToCart" id="@Model.Id">
                    Ajouter au panier
                </button>
            </div>
        </div><!-- end row -->
        <div class="row">
            <div class="col-md-12 bottom-rule top-10"></div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        $('.addToCart').click(function () {
            var articleId = parseInt($(this).attr('id'));

            $.ajax({
                type: 'POST',
                url: '@Url.Action("AddToCart", "Shopping")',
                data: { articleId: articleId },
                success: function (data) {
                    $('#CartModal').html(data);
                    console.log(data);
                },
                error: function (err) {
                    console.log(err);
                }
            });

        });
    });
</script>

我的愿望是当我单击“添加到购物车”按钮并且用户未通过身份验证时，他必须被重定向到身份验证页面（我正在使用 ASP 模板进行身份验证）并在继续选择产品之后。 当用户已经连接时，必须返回该值。 换句话说，如果用户未通过身份验证，我想将用户重定向到登录页面。

我该如何处理这种情况？

提前感谢您的帮助（这是我在 StackOverFlow 中的第一篇文章）

Answer 1

您应该从您的操作方法返回一个 json 响应，并在您的 ajax 调用中检查此数据并确定要做什么（重定向到登录页面或其他页面或其他内容）

当一切顺利时，你可以像这样返回一个 JSON

{
  "status":"success",
  "cartItemCount":3
}

如果用户未通过身份验证，则返回类似的内容

{
  "status":"notloggedin"
  "redirectUrl":"account/login"
}

所以你的操作方法代码会是这样的

if (User.Identity.IsAuthenticated)
{
  // set to cart session
   return Json(new { status="success", cartItemCount=cart.Count()});
}
else
{
  var rUrl="url to login action here"; //use UrlHelper to generate this
  return Json(new { status="notloggedin", redirectUrl=redirectUrl });
}

现在在您的成功回调中检查状态属性并根据需要重定向

success: function (data) {
  if(data.status==="success")
  {
     $('#CartModal').html(data.cartItemCount);
  }
  else if(data.status==="notloggedin")
  {
    window.location.href=data.redirectUrl;
  }
  else
  {
     alert("some error");
  }
}

最后在action方法中生成url，可以试试这个

var urlBuilder = new UrlHelper(Request.RequestContext);
var url = urlBuilder.Action("YourAction", "YourController");