在ASP.NET MVC中類似於SO的投票系統

Question

我正在使用ASP.NET MVC，我試圖建立一個投票系統，類似於stackoverflow。

我希望當我點擊投票按鈕，在一個動作上發表帖子，在那裏做一些檢查，但留在我的初始頁面上，並增加投票（用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(); 
} 

如何投票，而無需重新加載整個頁面？

我應該只是在我的投票圖標下做一些鏈接，並以某種方式處理這個路由？

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

}）;