Fatal编程技术网
  • javascript/
  • Javascript ASP.NET MVC中类似SO的投票系统

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

javascript c# asp.net-mvc razor

Javascript ASP.NET MVC中类似SO的投票系统,javascript,c#,asp.net-mvc,razor,Javascript,C#,Asp.net Mvc,Razor,我正在使用ASP.NETMVC，我正在尝试构建一个投票系统，类似于stackoverflow 我希望当我点击voteup按钮时，在一个动作上发表一篇文章，在那里做一些检查，但保留在我的初始页面上，如果检查通过（就像这样），增加投票（使用js） 我要投票的项目由索引操作填充 查看 @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div><input type="submit" name="Vote" v

我正在使用ASP.NETMVC，我正在尝试构建一个投票系统，类似于stackoverflow

我希望当我点击voteup按钮时，在一个动作上发表一篇文章，在那里做一些检查，但保留在我的初始页面上，如果检查通过（就像这样），增加投票（使用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>
}

@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>

@使用（Html.BeginForm（））
{
@Html.AntiForgeryToken（）
@DisplayFor（modelItem=>item.Votes）
}
行动

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

公共操作结果SendVote（字符串投票）
{
var config=new-MapperConfiguration（cfg=>cfg.CreateMap（））；
var mapper=config.CreateMapper（）；
转换（投票）
{
案例“；”：
if（ModelState.IsValid）
{
//发送到数据库
VoteLogViewModel VoteLogViewModel=新VoteLogViewModel
{
DateAdded=DateTime。现在，
Id=Guid.NewGuid（）.ToString（），
PlaceId=id，
UserId=User.Identity.GetUserId（），
投票=1
};
db.VoteLogs.Add（mapper.Map（voteLogViewModel））；
db.SaveChanges（）；
}
其他的
{
返回操作（“索引”）；
}
打破
案例“；”：
if（ModelState.IsValid）
{
//发送到数据库
}
其他的
{
返回操作（“索引”）；
}
打破
}
返回新的EmptyResult（）；
}
在不重新加载整个页面的情况下，我如何投票

我是否应该在我的投票图标下创建一些链接，并用routes处理这些链接？

您需要做的是使用Ajax

例如：

查看

@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>
}

@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>

@使用（Html.BeginForm（））
{
@Html.AntiForgeryToken（）
@DisplayFor（modelItem=>item.Votes）
}
$（函数（）{
$（'input[name=“Vote”]”）。单击（函数（e）{
e、 预防默认值（）；
var结果=e.data.value；
$.ajax({
类型：“POST”，
url:url//ActionURL，
数据：结果，
成功：函数（数据）{//success here}，
});
});
});
控制器

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

公共行动结果发送投票（bool投票）
{
var config=new-MapperConfiguration（cfg=>cfg.CreateMap（））；
var mapper=config.CreateMapper（）；
如果（！ModelState.IsValid）
{
返回操作（“索引”）；
}
如果（投票）
{
//发送到数据库
VoteLogViewModel VoteLogViewModel=新VoteLogViewModel
{
DateAdded=DateTime。现在，
Id=Guid.NewGuid（）.ToString（），
PlaceId=id，
UserId=User.Identity.GetUserId（），
投票=1
};
db.VoteLogs.Add（mapper.Map（voteLogViewModel））；
db.SaveChanges（）；
}
其他的
{
//发送到数据库
}
返回新的EmptyResult（）；
}
请注意，它的语法可能不正确，因为我是在IDE之外编写的。但这应该能让你走了

我还对您的控制器进行了重构，以使用
布尔值而不是打开字符串。
您需要做的是使用Ajax

例如：

查看


@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>
}



@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>



@使用（Html.BeginForm（））
{
@Html.AntiForgeryToken（）
@DisplayFor（modelItem=>item.Votes）
}
$（函数（）{
$（'input[name=“Vote”]”）。单击（函数（e）{
e、 预防默认值（）；
var结果=e.data.value；
$.ajax({
类型：“POST”，
url:url//ActionURL，
数据：结果，
成功：函数（数据）{//success here}，
});
});
});


控制器


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



公共行动结果发送投票（bool投票）
{
var config=new-MapperConfiguration（cfg=>cfg.CreateMap（））；
var mapper=config.CreateMapper（）；
如果（！ModelState.IsValid）
{
返回操作（“索引”）；
}
如果（投票）
{
//发送到数据库
VoteLogViewModel VoteLogViewModel=新VoteLogViewModel
{
DateAdded=DateTime。现在，
Id=Guid.NewGuid（）.ToString（），
PlaceId=id，
UserId=User.Identity.GetUserId（），
投票=1
};
db.VoteLogs.Add（mapper.Map（voteLogViewModel））；
db.SaveChanges（）；
}
其他的
{
//发送到数据库
}
返回新的EmptyResult（）；
}


请注意，它的语法可能不正确，因为我是在IDE之外编写的。但这应该能让你走了


我还对您的控制器进行了重构，以使用
布尔值
，而不是打开字符串。
您当前正在执行完整的回发，因为您视图中的HTML帮助程序本质上是在呈现标准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 
    }
});



}))
 您当前正在执行完整的回发，因为您视图中的HTML助手实质上是在呈现标准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 
    }
});



}))
 如果要保持在同一页上，则需要使用ajax发布值。您可以编写jQuery从controller调用ActionMethod。如果要保持在同一页上，则需要使用ajax发布值。您可以编写jQuery从controller调用ActionMethod。谢谢，是否有理由将它们保存在表单中，因为ajax点击是在点击时触发的？：）@Stefan很好。如果你使用我的方法，你并不真的需要表格。如果你使用StuRatcliffe的批准