动态的“收藏夹”按钮-ASP.NET MVC

Question

我创建了一个表，该表使用“无限加载”过程动态生成记录，我的HTML代码中有一个按钮，我需要使用它来允许用户将其添加到自己喜欢的项目中-这就是我的HTML代码

@model List<PagesAuth.Models.Links.MLink>

@foreach (var I in Model)
{
    <tr> 
        <td class="v-align-top" id="itemcard">                
            <h4 class="card-title">
                @I._title 
                <small><cite>@I._tp_created.ToString("dd MMM yyyy")</cite> /small>
            </h4>            
            <div class="pull-right" id="options">
                <ul class="list-inline text-right" >                   
                    @if (I._tp_favourite == 0)
                    {
                    <li><button class="btn-link glyphicon glyphicon-heart-empty" onclick="location.href='@Url.RequestContext .Action("_Fav", "Home", "@I._id")'"></button></li>
                    }
                    else
                    {
                  <li><button class="btn-link glyphicon glyphicon-heart-empty" onclick="location.href='@Url.RequestContext .Action("_UnFav", "Home", "@I._id")'"></button></li>
                    }
                </ul>
            </div>    
        </div>

        </td>
    </tr>
}

我正在尝试使用“收藏夹”按钮来允许用户将该网站添加到他们的收藏夹列表中（我可以使用数据库更新等）

<ul class="list-inline text-right" >                   
                    @if (I._tp_favourite == 0)
                    {
                    <li><button class="btn-link glyphicon glyphicon-heart-empty" onclick="location.href='@Url.RequestContext .Action("_Fav", "Home", "@I._id")'"></button></li>
                    }
                    else
                    {
                  <li><button class="btn-link glyphicon glyphicon-heart-empty" onclick="location.href='@Url.RequestContext .Action("_UnFav", "Home", "@I._id")'"></button></li>
                    }
                </ul>

• 我想知道的是如何在用户前端上实现这一点-就像我想的那样，我应该只创建PartialView并使其仅在我的控制器中成为子操作，发送ID并进行数据库处理

   [ChildActionOnly] public ActionResult _Fav(int ID) {//Do DB Processing return PartialView(ID); } 

首先以下不起作用

onclick="location.href='@Url.RequestContext .Action("_UnFav", "Home", "@I._id")'"

其次，如果最终完成此工作，它仍然会刷新页面，而我不希望那样。

有没有更好的方法来实现这一目标

干杯

Answer 1

我不知道您为什么要使用部分视图，但是您可以通过这种方式来实现。

1. 使用ajax将请求发送到控制器操作。
2. 使用JavaScript处理动作结果。

视图：

@model List<PagesAuth.Models.Links.MLink>

@foreach (var I in Model)
{
    <tr> 
        <td class="v-align-top" id="itemcard">                
            <h4 class="card-title">
                @I._title 
                <small><cite>@I._tp_created.ToString("dd MMM yyyy")</cite> /small>
            </h4>            
            <div class="pull-right" id="options">
                <ul class="list-inline text-right" >                   
                    @if (I._tp_favourite == 0)
                    {
                        <li><button class="btn-link glyphicon glyphicon-heart-empty" onclick="Fav(@I._id)"></button></li>
                    }
                    else
                    {
                        <li><button class="btn-link glyphicon glyphicon-heart-empty" onclick="UnFav(@I._id)"></button></li>
                    }
                </ul>
            </div>    
        </div>

        </td>
    </tr>
}

JS：

在这里，我只是提醒收藏夹操作成功，否则您将遇到一系列字符串错误。 您可以随意重定向或执行某些操作。

<script type="text/javascript">

    function Fav(id) {
        var url = '@Url.Action("_Fav", "Home")';

        $.ajax({
            url: url,
            type: 'POST',
            data: {
                id: id
            },
            success: function (data) {
                if(data.length == 0) // No errors
                    alert("Fave success!");
            },
            error: function (jqXHR) { // Http Status is not 200
            },
            complete: function (jqXHR, status) { // Whether success or error it enters here
            }
        }); 
    };

    function UnFav(id) {
        var url = '@Url.Action("_UnFav", "Home")';

        $.ajax({
            url: url,
            type: 'POST',
            data: {
                id: id
            },
            success: function (data) {
                if(data.length == 0) // No errors
                    alert("Unfave success!");
            },
            error: function (jqXHR) { // Http Status is not 200
            },
            complete: function (jqXHR, status) { // Whether success or error it enters here
            }
        }); 
    };

</script>

控制器：

[HttpPost]
public ActionResult _Fav(int ID)
{
    List<string> errors = new List<string>(); // You might want to return an error if something wrong happened

    //Do DB Processing   

    return Json(errors, JsonRequestBehavior.AllowGet);
}

[HttpPost]
public ActionResult _UnFav(int ID)
{
    List<string> errors = new List<string>(); // You might want to return an error if something wrong happened

    //Do DB Processing   

    return Json(errors, JsonRequestBehavior.AllowGet);
}