What's the best way to implement AJAX using ASP.NET MVC and jquery?
I am trying to find the best way to make an AJAX call to perform some action and then do some jquery effect magic to make it look like something is happening.
This is the basic idea: I have a link that when the user clicks on it, I need to update my model to say that the user is interested in the item (server side). However, I would also like to fade the link (this is the caged image I made), change the classes around, and then link the link again. The behavior looks like this: when you are not interested in an element, the link looks like an empty checkbox, when you hover a checkbox over it, when they click on it, the link disappears and comes back with validation in the field, and now when they hover over it, validation disappears (behavior changes).
My problem is that the link doesn't seem to be able to track where it is (regardless of whether it is in a checked state or an unmonitored state).
I've tried doing this in several ways.
Example A:
<a href="#" onclick="oncheck(this,<%= item.ID %>)" class="notchecked"></a>
<script>
function oncheck(link, itemId)
{
//the UI effects are working correctly
if ($(link).hasClass("notchecked")
{
$(link).fadeOut();
$(link).removeClass("notchecked");
$(link).addClass("checked");
$(link).fadeIn("slow");
}
{
$(link).fadeOut();
$(link).removeClass("checked");
$(link).addClass("notchecked");
$(link).fadeIn("slow");
}
//do ajax request using jquery
//I don't really care about the results right now
//This doesn't work though, it never hits my controller action
$.get("Item/ChangeCheckedStatus", { itemId: itemId } );
}
</script>
I have also tried to do this using the Microsoft Ajax Libraries
Example B:
<%=Ajax.ActionLink(" ",
"Item",
"ChangeCheckedStatus",
new { itemId = item.ID },
new AjaxOptions { UpdateTargetId="bogusTarget", OnSuccess = "oncheck" },
new { @class="notchecked" });
<script>
function oncheck()
{
//the UI effects are not working correctly here
if ($(this).hasClass("notchecked")
{
$(this).fadeOut();
$(this).removeClass("notchecked");
$(this).addClass("checked");
$(this).fadeIn("slow");
}
{
$(this).fadeOut();
$(this).removeClass("checked");
$(this).addClass("notchecked");
$(this).fadeIn("slow");
}
}
</script>
In MS AJAX Libraries, I hit the controller action and the element is updated, but then the jquery effects don't work.
Is there an easier way to do what I am trying to accomplish, or am I just missing something obvious here?
UPDATE . This controller action looks like this:
public string ChangeCheckedStatus(long itemId)
{
//do some stuff
return "What is going on???";
}
Note: other actions in the controller work fine, this is only one (this is the only one used via AJAX btw).
source to share
When you call an action with AJAX and determine that the action is never executed (for example, a breakpoint at the beginning of the action never hits), then you should always look at the Net Firebug tab or the response from the server in Fiddler. There are two things to learn here:
- Your JavaScript url including query string parameters and any information in the POSTed form.
- The MVC framework usually gives you informative messages as to why it cannot bind to a specific action, so find this information and the answer from the server.
source to share
You have to use the ajax method as suggested by daddywoodland. The success method will be called when the AJAX call is successful. However, this link will not link to your link other than the window. This is because by the time the success method is asynchronously called, you are within the scope of the original onclick handler, and therefore the method no longer belongs to the link, so it is no longer a reference, but a return to the window. This was the same problem as the previous Microsoft AJAX library example.
So the trick is to declare the success method as a closure inside your onclick method and its closure refers to the link. I have tested the code below and it works. I put a server side breakpoint and it was removed.
<script type="text/javascript" src="../../Scripts/jquery-1.2.6.js"></script>
<a href="#" onclick="onLinkClick(this, 44)" class="notchecked">Click here...</a>
<script type="text/javascript">
// Standard onclick handler.
function onLinkClick(link, itemId) {
// the function called asynchronously when the AJAX works
var onCheck = function() {
if ($(link).hasClass("notchecked")) {
$(link).fadeOut();
$(link).removeClass("notchecked");
$(link).addClass("checked");
$(link).fadeIn("slow");
}
else {
$(link).fadeOut();
$(link).removeClass("checked");
$(link).addClass("notchecked");
$(link).fadeIn("slow");
}
}
// do the AJAX
$.ajax({
type: 'GET',
url: 'Item/ChangeCheckedStatus',
dataType: 'html',
data: { itemId: itemId },
success: function(response) {
onCheck();
}
});
}
</script>
You can copy and paste this. So let me know if that doesn't work.
source to share
Try something like this:
$.get('Item/ChangeCheckedStatus', { itemId: itemId } , 'html', function() {
if ($(this).hasClass("notchecked")
{
$(this).fadeOut();
$(this).removeClass("notchecked");
$(this).addClass("checked");
$(this).fadeIn("slow");
}
{
$(this).fadeOut();
$(this).removeClass("checked");
$(this).addClass("notchecked");
$(this).fadeIn("slow");
}
});
source to share
JQuery's $ .ajax method allows you to react if the ajax call was successful. Start animation after successful call.
$.ajax({
type: 'GET',
url: 'Item/ChangeCheckedStatus',
dataType: 'html',
data: { itemId: itemId },
success: function(response){
if(response == "success") {
onCheck();
}
}
});
function onCheck() {
if ($(this).hasClass("notchecked")
{
$(this).fadeOut();
$(this).removeClass("notchecked");
$(this).addClass("checked");
$(this).fadeIn("slow");
}
{
$(this).fadeOut();
$(this).removeClass("checked");
$(this).addClass("notchecked");
$(this).fadeIn("slow");
}
}
source to share