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

我不知道你为什么要使用部分视图，但你可以这样做。

使用ajax向控制器操作发送请求。
使用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);
}

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

1 个答案: