Question

我可以使用Jquery调用一个动作，然后在成功时更改图像，就像stackoverflow的投票后功能一样吗？

在我看来，我使用以下代码，但我不想刷新浏览器。任何人都可以为我提供一些代码吗？

非常感谢。

<%if (!item.IsPrinted)
{ %>
     <%=Html.ImageLink("~/Content/images/web/delete.png", "printed", "MarkAsPrinted", "Order", item.TaskID, null, null)%>
 <%}
 else
  {%>
       <img src="~/Content/images/web/star.png" alt="printed" />                    
  <% }  %>

Answer 1

通常，您应该通过ajax调用来调用helper方法，而不是通过ajax调用您的操作。然后，在辅助方法中，更新分数的值（如将最新值存储到数据库等），并在ajax的成功方法中显示相应的图像

修改

public string UpdateVoteScore(int postId, int value) { // store value to database return "success"; }

在JavaScript中：

var UpdateScore = function(postId, newValue) { $.ajax({ type: "POST", url: /YourController/UpdateVoteScore, data: { postId: postId, value: newValue }, success: function(result) { // replace your image $("#MyImage" + postId).attr("src", "some new image path here"); }, error: function(req, status, error) { } }); }

在视图中：

<img id='<%= "MyImage" + post.Id %>' src="some image path" onclick="UpdateScore(scoreValueHere);"></img>

注意： post会在循环中更改，因此post.Id将是唯一的，因此会使图片ID唯一

Answer 2

是的，您可以使用JQuery。例如，让JQuery根据它从服务器脚本返回的内容替换你的一部分HTML代码。

样品：

<html>
  <head>
    <script type="text/javascript" src="jquery-1.3.1.js"></script>
    <script type="text/javascript" src="jquery.form.js"></script>
    <script>
      $(document).ready(function(){
        $('#response a').bind('click',function(event){
          event.preventDefault();
          $.get(this.href,{},function(response){
          if (response.indexOf("OK") >= 0) {
            $('#response').html("<img src="~/Content/images/web/star.png" alt="printed" /> ");
          }
          })    
        })
      });
    </script>
  </head>
  <body>
    ... the other things on you're page
    <div id="response">
      <%=Html.ImageLink("~/Content/images/web/delete.png", "printed", "MarkAsPrinted", "Order", item.TaskID, null, null)%>
    </div>
    ... more things on you're page...
  </body>
</html>

当需要替换“respone”div中的内容时，确保服务器脚本返回“OK”。

Answer 3

我不确定你完全理解ajax究竟是什么或做什么。

通常在没有ajax的情况下发出请求的方式基本上是这样的：

[browser request]->[server handles request]->[new page sent to browser]

与ajax的区别在于请求被发送到服务器，并且响应是通过javascript接收的，没有页面重新加载或任何内容。然后由javascript脚本决定在收到请求后要做什么。

您要为此做的是将请求发送到'vote.asp'或其他内容，然后在收到服务器的响应后使用javascript更改图像。

Answer 4

您可以执行以下操作：

$('#vote_button').click(function() {
   $.ajax({
      type: "GET",
      url: "script_name.asp", //your script that talks to the database
      data: "id=" + some_var, //get arguments
      success: $("#image_to_be_changed").attr("src", "some new image path here");
});

Answer 5

我创建了一个类似于stackoverflow.com的simple voting application，使用angularjs，php和mysql以及要下载的代码。您只需将2个php文件更改为ASP.NET文件即可。其他方面将完好无损。使用AngularJS创建投票应用程序更加容易和灵活。

如何像jquery / ajax函数一样创建stackoverflow post投票？

5 个答案: