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

}）;

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

2 个答案: