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

本文关键字：系统 MVC ASP SO 类似于 | 更新日期: 2023-09-27 17:52:13

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

我想当我点击voteup按钮，使一个动作的帖子，做一些检查，但要留在我的初始页面，并增加投票(与js)，如果检查通过(就像SO)。

我要投票的项目是由Index Action

填充的<<p> 视图/strong> 
@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();
}

我如何投票，而不重新加载整个页面?

我应该在我的投票图标下做一些链接，然后用路由来处理这个问题吗?

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

您需要做的是使用Ajax

的例子:<<p> 视图/strong> 

@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，而不是切换到一个字符串。

您当前正在执行一个完整的回发，因为实际上视图中的HTML helper正在呈现一个标准的HTML表单。

如果不希望刷新整个页面，则需要触发对服务器的AJAX post。如果您已经在您的页面中包含了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 
    }
});

});

相关文章：