I am using MVC3 with Razor. I have one Action which want to load using AJAX. I am using jQuery UIblock plugin http://jquery.malsup.com/block/# to show some wait image to user.
The View corresponding to action is as shown below:
@using (Ajax.BeginForm("Search", "Home", new AjaxOptions() { HttpMethod = "GET", OnBegin = "BlockUI", OnComplete = "UnBlockUI", UpdateTargetId = "page" }))
{
...................
}
Javascript code is as shown below:
<script type="text/javascript">
function BlockUI() {
$.blockUI({ message: "<img src='@Url.Content("~/Content/images/loading.gif")' />" });
}
function UnBlockUI() {
$.unblockUI({ message: "Done....." });
}
Now I am redirecting to Action using a link as
location.href = '@Url.Content("~/Home/Search/")';
When the search view is loading, I cannot see any Div showing Loading image.
The same thing is working on other page, the only difference is that on other pages the Image is coming on POSTBACK.
Additionally, all Ajax POST operations are working but not GET ones.
What is the problem with Search page here ??
Thanks.
Now I am redirecting to Action using a link as
location.href = '@Url.Content("~/Home/Search/")';
The keyword here is I am redirecting. It's not I am sending an AJAX request. When you redirect, the browser simply stops running any scripts on the current page and redirects away to the target location. The OnBegin
and OnComplete
methods that you have subscribed to will never fire when you redirect which is why you are not seeing any blockUI.