在ASP.NET MVC中类似于SO的投票系统

Question

我正在使用ASP.NET MVC，而我正在尝试构建一个投票系统，类似于stackoverflow。

我希望当我点击投票按钮，在某个操作上发布帖子，在那里进行一些检查，但要保留在我的初始页面上，并增加投票（使用js），如果检查通过（就像SO）。

我想投票的项目由Index Action

填充

查看

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div><input type="submit" name="Vote" value="&#xf106;" class="fa fa-angle-up"/>
    </div>
    <div>@Html.DisplayFor(modelItem => item.Votes)</div>
    <div><input type="submit" name="Vote" value="&#xf107;" class="fa fa-angle-down" /></div>
}

动作

    public ActionResult SendVote(string vote)
    {
        var config = new MapperConfiguration(cfg => cfg.CreateMap<VoteLogViewModel, VoteLog>());
    var mapper = config.CreateMapper();

    switch (vote)
    {
        case "&#xf106;":
            if (ModelState.IsValid)
            {
                //Send to db
                VoteLogViewModel voteLogViewModel = new VoteLogViewModel
                {
                    DateAdded = DateTime.Now,
                    Id = Guid.NewGuid().ToString(),
                    PlaceId = id,
                    UserId = User.Identity.GetUserId(),
                    Vote = 1
                };
                db.VoteLogs.Add(mapper.Map<VoteLog>(voteLogViewModel));
                db.SaveChanges();

            }
            else
            {
                return RedirectToAction("Index");
            }
            break;
        case "&#xf107;":
            if (ModelState.IsValid)
            {
                //Send to db
            }
            else
            {
                return RedirectToAction("Index");
            }
            break;
    }
    return new EmptyResult();
}

如何在不重新加载整个页面的情况下投票？

我是否应该在我的投票图标下设置一些链接，并以某种方式处理这些路线？

Answer 1

您需要做的是使用Ajax

示例：

查看

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div><input type="submit" name="Vote" value="true" class="fa fa-angle-up"/>
    </div>
    <div>@Html.DisplayFor(modelItem => item.Votes)</div>
    <div><input type="submit" name="Vote" value="false" class="fa fa-angle-down" /></div>
}

<script>
$(function(){
    $('input[name="Vote"]').click(function(e){
        e.preventDefault();
        var result = e.data.value;
        $.ajax({
        type: "POST",
        url: url // ActionURL,
        data: result,
        success: function(data) { //Success here },
        });
    });
});
</script>

<强>控制器

public ActionResult SendVote(bool vote)
{
        var config = new MapperConfiguration(cfg => cfg.CreateMap<VoteLogViewModel, VoteLog>());
    var mapper = config.CreateMapper();

    if(!ModelState.IsValid)
    {
        return RedirectToAction("Index");
    }
    if(vote)
    {
        //Send to db
        VoteLogViewModel voteLogViewModel = new VoteLogViewModel
        {
            DateAdded = DateTime.Now,
            Id = Guid.NewGuid().ToString(),
            PlaceId = id,
            UserId = User.Identity.GetUserId(),
            Vote = 1
        };
        db.VoteLogs.Add(mapper.Map<VoteLog>(voteLogViewModel));
        db.SaveChanges();
    }
    else
    {
     //Send to db
    }

    return new EmptyResult();
}

请注意，由于我是在IDE之外编写的，因此它可能在语法上不正确。但这应该让你前进。

我还重构了你的控制器以使用boolean而不是打开一个字符串。

Answer 2

您目前正在执行完整的回发，因为视图中的HTML帮助程序实际上是一种标准的HTML表单。

如果您不想刷新整个页面，则需要向服务器触发AJAX帖子。如果您已在页面上包含jQuery，则以下内容应该有效：

$('form').on('submit', function(e) {
e.preventDefault();

$.ajax({
    type: 'POST',
    url: '@Url.Action(your action method)',
    data: {
        //form variables here
    },
    dataType: 'JSON',
    contentType: 'application/json',
    success: function(result) {
        //handle success
    },
    error: function(result) {
       //handle error 
    }
});

}）;