Question

我的控制器（ItemController）上有以下代码。

 [HttpPost]
    public ActionResult LikeIncrement(VoteItem voteItem)
    {
        if (ModelState.IsValid)
        {
            using (MoraleCheckerDBEntities1 dc = new MoraleCheckerDBEntities1())
            {
                var currentItem = dc.VoteItems.FirstOrDefault(i => i.Id == voteItem.Id);
                currentItem.ThumbsUp = voteItem.ThumbsUp++;
                currentItem.ThumbsDown = voteItem.ThumbsDown + 0;
                dc.SaveChanges();                   
            }

        }
        return View(voteItem);
    }

然后我的视图上有此按钮

<button type="button" class="btn btn-primary btn-lg" id="dislike-btn" >
 <span class="glyphicon glyphicon-thumbs-down"></span>
 </button>

我希望每次用户单击此按钮来调用该方法。拜托。

Answer 1

您必须将按钮插入到通过post方法链接到操作的表单元素中：

<form method="POST" action="Controller/LinkItem">
 ...form data elements ...
 <button type="button" class="btn btn-primary btn-lg" id="dislike-btn" >
  <span class="glyphicon glyphicon-thumbs-down"></span>
 </button>
</form>

或者您可以使用ajax链接按钮执行其操作：

$('#dislike-btn').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
  var optionalData = $(this).closest('form').serialize();
  $.post('Controller/LinkItem', optionalData, function(response) {
    // do something to your controller, you should return a JSON object.
  }
});

Answer 2

这是您可以做的最少的事情：

jQuery

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#dislike-btn').on('click', function(){
            $.ajax({
                url: '@Url.Action("LikeIncrement", "Item")',
                type: 'POST',
                data: {voteItem: 'some data'},
                contentType: "application/json;charset=utf-8",
                success: function (result) {
                    alert("success");
                },
                error: function (jqXHR, status) {
                    // error handler
                    console.log(jqXHR);
                    alert('fail' + status);
                }
            });
        });
</script>

查看

<button type="button" class="btn btn-primary btn-lg" id="dislike-btn" >
 <span class="glyphicon glyphicon-thumbs-down"></span>
 </button>

控制器

    [HttpPost]
    public ActionResult LikeIncrement(VoteItem voteItem)
    {
        if (ModelState.IsValid)
        {
            using (MoraleCheckerDBEntities1 dc = new MoraleCheckerDBEntities1())
            {
                var currentItem = dc.VoteItems.FirstOrDefault(i => i.Id == voteItem.Id);
                currentItem.ThumbsUp = voteItem.ThumbsUp++;
                currentItem.ThumbsDown = voteItem.ThumbsDown + 0;
                dc.SaveChanges();                   
            }

        }
        return View(voteItem);
    }

Answer 3

您应使用表单标签并使用提交按钮，如下所示：

<form action="/LikeIncrement" method="post">
    <input type="submit" value="Submit">
</form>

对于输入模型（VoteItem），应使用Input with Name属性，如下所示：

HTML form Tag

对于MVC BeginForm in MVC

希望对您有所帮助。

如何将发布方法分配给视图中的按钮

3 个答案: