Система голосования, подобная SO в ASP.NET MVC

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

Пожалуйста, обратите внимание, что не может быть син тактично, так как я написал его вне среды 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 
    } 
}); 

});