动态“收藏夹”按钮 - 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); 
}