CODEWITHSUNDEEP
c#jqueryajaxasp.net-mvc-2
Daoming Yang
Daoming Yang

Reputation: 1325

How to create stackoverflow's post voting like jquery/ajax function?

Can I use Jquery to call an action and then change the image when it success, just like stackoverflow's post voting function?

In my view, I'm using the following code, but I don't want to refresh the browser. Can anyone provide some code about this for me?

Many thanks.

<%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" />                    
  <% }  %>

Upvotes: 3

Views: 629

Answers (5)

Swadesh
Swadesh

Reputation: 651

I created a simple voting application similar to stackoverflow.com using angularjs,php and mysql with code to download. You just need to change the 2 php files into ASP.NET files. Everthing else will be intact. Creating the voting app using AngularJS is much easier and flexible.

Upvotes: 0

Mahesh Velaga
Mahesh Velaga

Reputation: 21991

Generally you should call helper methods through ajax call for this purpose rather than calling your action through ajax. Then, in the helper method, update the value of the score (like storing the latest value to the databse etc) and in the success method of ajax display the appropriate image

Edit:

public string UpdateVoteScore(int postId, int value) {
     // store value to database

     return "success";
}

In 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) {
           }
    });
}

In View:

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

Note: post will be changing as you do this in a loop, so the post.Id will be unique and thus makes the image id unique

Upvotes: 4

vette982
vette982

Reputation: 4870

You could probably do something like:

$('#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");
});

Upvotes: 0

Kdeveloper
Kdeveloper

Reputation: 13819

Yes you can use JQuery for this. For example by letting JQuery replace a part of you're HTML code based on what it get's back from the server script.

Sample:

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

Make sure that the server script returns "OK" when it needs to replace what's in the "respone" div.

Upvotes: 2

Cam
Cam

Reputation: 15234

I'm not sure you fully understand exactly what ajax is or does.

The way requests are normally made without ajax is essentially this:

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

The difference with ajax is that a request is sent to the server, and the response is received by javascript, without the page reloading or anything. It is then up to the javascript script to decide what to do once the request has been received.

What you'd do for this is send the request to 'vote.asp' or something, and then use javascript to change the image once you receive the response from the server.

Upvotes: 0

Related Questions