单击if else语句后,加载另一个链接

时间:2018-11-30 20:44:33

标签: jquery html ajax razor asp.net-core-mvc

我目前有这些链接,但是我希望它们在每次单击另一个时都加载到视图中。因此,如果单击了if语句中的一个,我希望else语句中的另一个显示在视图上。反之亦然。如何通过链接执行此操作?使用AJAX请求创建onclicks。

@{
    if (SignInManager.IsSignedIn(User))
    {
        if (ViewBag.Wishlist.Contains(item.id))
        {
            <a onclick="RemoveFromWishList(@ViewBag.OrderLine)" id="remove" class="btn btn-default swap swapHeart">
                <span style="color:#8F6B93;" class="glyphicon glyphicon-heart"></span>
            </a>
        }
        else
        {
            <a onclick="AddToWishList(@item.id)" id="add" class="btn btn-default swap swapHeart">
                <span style="color:#8F6B93;" class="glyphicon glyphicon-heart-empty"></span>
            </a>
        }
    }
}

1 个答案:

答案 0 :(得分:1)

使用客户端而不是使用服务器端代码。愿望清单服务器端变量下方将初始化样式属性,该样式属性不使用样式或“ display:none”样式来隐藏正确的链接,具体取决于项目是否在愿望清单中。

//This is server-side
bool wishlist = ViewBag.Wishlist.Contains(item.id);

<!-- Client side only but use server-side definitions inside to initialize -->
<a onclick="RemoveFromWishList(@ViewBag.OrderLine)" id="remove" class="btn btn-default swap swapHeart"
  style="@(wishlist ? "" : "display:none")">
    <span style="color:#8F6B93;" class="glyphicon glyphicon-heart"></span>
</a>
<a onclick="AddToWishList(@item.id)" id="add" class="btn btn-default swap swapHeart"
  style="@(wishlist ? "display:none" : "")">
   <span style="color:#8F6B93;" class="glyphicon glyphicon-heart-empty"></span>
</a>

然后点击,您可以使用JS交换其他内容:

$("a.swapHeart").on("click", function(e) {
  $(this).toggle();
  $(this).siblings("a.swapHeart").toggle();
});

只要链接是真正的兄弟姐妹,这应该起作用。