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)
{ %&开发者_运维技巧gt;
<%=Html.ImageLink("~/Content/images/web/delete.png", "printed", "MarkAsPrinted", "Order", item.TaskID, null, null)%>
<%}
else
{%>
<img src="~/Content/images/web/star.png" alt="printed" />
<% } %>
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
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.
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.
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");
});
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.
加载中,请稍侯......
精彩评论