ASP.NET MVCのSOに似た投票システム

Question

私はASP.NET MVCを使用しています。私は投票システムを構築しようとしています。これはstackoverflowと似ています。

私は投票ボタンをクリックすると、アクションの投稿を作成し、そこにいくつかのチェックを行いますが、私の最初のページに残り、チェックが合格すれば（jsを使って）そのようです）。

私が投票したい項目をインデックスアクションによって移入され

ビュー

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

それがSYNされない場合がありますのでご注意ください私はIDEの外でそれを書いてから戦術的に正しい。しかし、これはあなたに行く必要があります。

また、文字列を切り替えるのではなくbooleanを使用するようにコントローラをリファクタリングしました。

Answer 2

現在、ビュー内のHTMLヘルパーが標準HTMLフォームを取り消しているため、完全なポストバックを実行しています。

ページ全体を更新したくない場合は、サーバーにAJAXポストをトリガーする必要があります。あなたのページに既にjQueryを組み込んでいる場合は、次のようなものが動作するはずです：

}）;