动态“收藏”按钮 - 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 并进行 DB 处理

  [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);
}