Css 如何在MVC上使用Ajax助手创建切换按钮

我将这个小功能添加到MVC网站上最喜欢的项目中，在UI端开发它时遇到了一些困难。我已经更改了更改的处理和数据库方面

它可以正常工作，但我需要刷新页面，以查看按钮更改为“添加收藏夹”到“删除收藏夹”之类的图标

我从视图中看到的丑陋代码出现在这里

@{
    if(ViewBag.IsFavourited == true)
    { 
        <script type="text/javascript">
            $(function () {
                $("#addfavourite").hide();
            });
        </script>
    }
    else
    {
        <script type="text/javascript">
            $(function () {
                $("#deletefavourite").hide();
            });
        </script>
    }
}   

<div id="deletefavourite" class="pull-right">
    @Ajax.ActionLink("Unfavourite", "Delete", "Favourite", new { id = Model.BlogPostId },
            new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "deletefavourite", LoadingElementId = "addfavourite" }, new { @class = "deletefavourite" })
</div>

<div id="addfavourite" class="pull-right">
    @Ajax.ActionLink("Add to favourites", "Add", "Favourite", new { id = Model.BlogPostId },
            new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "addfavourite", LoadingElementId = "deletefavourite" }, new { @class = "addfavourite" })
</div>

CSS使链接成为图标

<style type="text/css">

.addfavourite {
    background-image: url('@Url.Content("~/Content/Images/heart-black.png")');
    background-repeat: no-repeat; 
    display: block;
    text-indent: -9999px;
    height: 50px;
    width: 50px;
}

.deletefavourite {
    background-image: url('@Url.Content("~/Content/Images/heart-checked.png")');
    background-repeat: no-repeat;    
    display: block;
    text-indent: -9999px;
    height: 50px;
    width: 50px;
}

AddFavorite先生{
背景图片：url（'@url.Content（“~/Content/Images/heart black.png”）；
背景重复：无重复；
显示：块；
文本缩进：-9999px；
高度：50px；
宽度：50px；
}
.deleteFavorite{
背景图片：url（'@url.Content（“~/Content/Images/heart-checked.png”）；
背景重复：无重复；
显示：块；
文本缩进：-9999px；
高度：50px；
宽度：50px；
}

---

由于您对返回的内容不感兴趣，因此可以执行切换技术：

CSS

.favourites .add, .favourites .delete{    
    background-repeat: no-repeat;
    text-indent: -9999px;
    height: 50px;
    width: 50px;
}
.favourites .add{
    background-image: url('@Url.Content("~/Content/Images/heart-black.png")');
    display:block;
}
.favourites .delete{
    background-image: url('@Url.Content("~/Content/Images/heart-checked.png")');
    display:none;
}
.favourites.active .add{
    display:none;
}
.favourites.active .delete{
    display:block;
}

查看

<div class="favourites pull-right @(ViewBag.IsFavourited ? "active" : "")">
    <div class="add">
        @Ajax.ActionLink("Add to favourites", "Add", "Favourite",
        new { id = Model.BlogPostId },
        new AjaxOptions { OnSuccess = "ToggleFavouriteLink" })
    </div>
    <div class="delete">
        @Ajax.ActionLink("Unfavourite", "Delete", "Favourite",
        new { id = Model.BlogPostId },
        new AjaxOptions {OnSuccess = "ToggleFavouriteLink" })
    </div>
</div>

@ActionLink（“添加到收藏夹”、“添加”、“收藏夹”，
新的{id=Model.BlogPostId}，
新的AjaxOptions{OnSuccess=“toggleFavoriteLink”}）
@ActionLink（“不利”、“删除”、“喜爱”，
新的{id=Model.BlogPostId}，
新的AjaxOptions{OnSuccess=“toggleFavoriteLink”}）

脚本

<script type="text/javascript">
    function ToggleFavouriteLink() {
        $(".favourites").toggleClass("active");
    }
</script>

函数toggleFavoriteLink（）{
$（“.Favorites”）.toggleClass（“活动”）；
}

您的

收藏/添加

和

收藏/删除

返回了什么？@MK.显然没有什么，先生。我应该返回什么？无论Ajax.ActionLink呈现什么样的锚定标记？它都非常有效。嗯，只是个小问题。图像无法单击。我现在正试图修复它。@laurencenye由于您的风格，要修复它：首先删除

文本缩进：-9999px

然后添加

.favorites一个{显示：内联块；宽度：100%；高度：100%；}

并将助手更新为

@Ajax.ActionLink（“，…”

），确保它有空间，因为空字符串将引发异常。

<script type="text/javascript">
    function ToggleFavouriteLink() {
        $(".favourites").toggleClass("active");
    }
</script>