Jquery Ajax Post is not calling action method - asp.net-mvc-3

Question

function CreateModalDialogWindow(urlPath) {
$.ajax({
url: '#Url.Action("Popup","Project")',
type: 'POST',
async: false,
success: function (data) {
debugger;
$('#dialog').html(data).dialog({
autoOpen: true,
width: 400,
resizable: false,
modal: true
});
},
error: function(){
alert('Error!');
}
});
return false;
}
I wanted to call an actionmethod using ajax post. Here is the action method
[HttpPost]
public PartialViewResult Popup()
{
return PartialView("~/Views/Shared/Project/Popup.cshtml");
}
Please let me know what is wrong in the above code.

Answer 1

There might be different reasons why the action method is not being called:
you have some javascript error
you never call the CreateModalDialogWindow function
you call the CreateModalDialogWindow in the click of a link or form submit but you forgot to cancel the default action of this button by returning false.
So start by first calling this code in the document ready to see if it works:
<script type="text/javascript">
$(function() {
$.ajax({
url: '#Url.Action("Popup", "Project")',
type: 'POST',
success: function (data) {
$('#dialog').html(data).dialog({
autoOpen: true,
width: 400,
resizable: false,
modal: true
});
}
});
});
</script>
Now if you put a breakpoint in your controller action it should normally be hit. I would recommend you using a javascript debugging tool such as FireBug which will help you see any possible javascript errors and see the exact requests/responses being sent during AJAX requests.
You will also notice that I have removed the async: false switch because this makes synchronous calls to the server freezing the web browser during the execution of this request and thus you are no longer doing AJAX.