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

时间:2017-01-17 14:40:04

标签: jquery ajax asp.net-mvc razor

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

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

    [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中的第一篇文章)

1 个答案:

答案 0 :(得分:0)

您应该从您的操作方法返回一个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");
  }
}

最后要在动作方法中生成网址,可以试试这个

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