Ajax.ActionLink does not work when OnBegin is true

Question

I intend to call function when clicked on ActionLink and depending on the ouptput of the function would either go the next page or show alert.

When OnBegin is true in Ajax.ActionLink, it should hit the controller method and hence go to specified view. But when I click on the ActionLink, OnBegin returns true but nothing happens. I see the same page.

<script src="~/Scripts/jquery-2.1.0.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>


@using (@Html.BeginForm())
{  

    @Ajax.ActionLink("Add Document", // <-- Text to display
                                     "AddDocument", // <-- Action Method Name
                                    "Home", // <-- Controller Name
                                    null,
                                    new AjaxOptions { OnBegin = "OnBegin('AddDocument')" },
                                    null
                                    )



}

<script type="text/javascript">
    function OnBegin(vObject) {
        debugger;      

        return true;       
    }

</script>

Any help would be appreciated.

Thanks.

Answer 1

I think that you are using it in the wrong way. @Ajax.ActionLink will hit your controller and retrieve the content of the response but you haven't set any space to hold the response. One of the properties of AjaxOptions is UpdateTargetId which should be setted to the id tag that will hold the response.

@Ajax.ActionLink("Add Document", "AddDocument", "Home", 
    new AjaxOptions 
    { 
        OnBegin = "OnBegin('AddDocument')",
        UpdateTargetId = "responseContent"
    })

In the view put a tag to hold the response:

<div id="responseContent"></div>

The response will be inserted inside the div.