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

我正在使用ASP.NET MVC，我试图建立一个投票系统，类似于stackoverflow。在ASP.NET MVC中类似于SO的投票系统

我希望当我点击投票按钮，在一个动作上发表帖子，在那里做一些检查，但留在我的初始页面上，并增加投票（用js），如果检查通过像SO）。

我要投票通过索引操作被填充的项目

查看

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

如何投票，而无需重新加载整个页面？

我应该只是在我的投票图标下做一些链接，并以某种方式处理这个路由？

来源

2016-06-28 Gerald Hughes

如果您想保留在同一页面上，您需要使用ajax发布该值。 –

您可以编写jQuery从控制器调用ActionMethod。 –

你需要做的是使用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而不是打开一个字符串。

来源

2016-06-28 11:33:56

谢谢，是否有任何理由让他们进入一个窗体，因为点击触发ajax点击？:) –

@Stefan好点。如果你使用我的方法，你并不需要这种形式。如果你使用StuRatcliffe的方法，那么你仍然需要表格。 –

'未捕获的SyntaxError：意外的标识符'数据：结果。 –

您目前正在执行完整回发，因为本质上，视图中的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 
    } 
});

}）;

来源

2016-06-28 11:37:52

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

回答

相关问题