CODEWITHSUNDEEP
asp.net-mvc
Bronzato
Bronzato

Reputation: 9342

Replace the Ajax.ActionLink by the same functionality with jQuery

With asp.net mvc we can do an ajax call like this:

@{
    var ajaxOpts = new AjaxOptions { UpdateTargetId = "main-content", OnBegin = "fctTabLoading", OnComplete = "fctTabLoaded", InsertionMode = InsertionMode.Replace };
}

@Ajax.ActionLink("my link text", "MyAction", "MyController", new { id = Model.RequestID }, ajaxOpts)

Which produce the following html:

<a data-ajax="true" data-ajax-begin="fctTabLoading" data-ajax-complete="fctTabLoaded" data-ajax-mode="replace" data-ajax-update="#main-content" href="/MyController/MyAction/19">my link text</a>

Now I would like to execute the same ajax call but from jQuery and I don't know how to proceed!

I would like something like:

                    $.ajax({
                        type: "Post",
                        url: myURL,
                        begin: fctTabLoading,
                        complete: fctTabLoaded,
                        mode: "replace",
                        update: "#main-content",
                        cache: false,
                        success: function () { alert('success'); }
                    });

I know the above ajax script won't work because 'mode' and 'update' are not recognized. So I am blocked.

It drives me crazy :(

Why I cannot use the MVC ActionLink? Because I first need to show a jquery dialog to let the user confirm then only do the ajax call in order to refresh a specific div on my page.

Any help is greatly appreciated.

Thanks.

Upvotes: 1

Views: 2805

Answers (2)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038820

You could start by replacing your Ajax link with a normal link:

@Html.ActionLink(
    "my link text",                   // linkText
    "MyAction",                       // actionName
    "MyController",                   // controllerName
    new { id = Model.RequestID },     // routeValues
    new { id = "mylink" }             // htmlAttributes
)

which will produce the following markup:

<a href="/MyController/MyAction/12345" id="mylink">my link text</a>

and then in a separate js file unobtrusively AJAXify it:

$(function() {
    $('#mylink').click(function() {
        $.ajax({
            url: this.href,
            type: 'POST',
            beforeSend: fctTabLoading,   // corresponds to your OnBegin callback
            complete: fctTabLoaded,      // corresponds to your OnComplete callback
            success: function(result) {
                $('#main-content').html(result);
            }
        });

        return false;
    });
});

Upvotes: 3

Brian S
Brian S

Reputation: 1061

As you know, the Ajax.ActionLink uses jquery.unobtrusive-ajax.js to execute the ajax links.

If you look at that file, you will see that the event handlers use jquery's live event binder. This binds the event listener to the document object. So, if you wanted to confirm before this event was triggered, you could bind directly to the element like the following:

$('#YOUR_ELEMENT').click(function () {
    var confirmed = confirm("CONFIRM_MESSAGE");
    if (!confirmed ) {
        return false;
    }
    return true;
});

To use jquery dialog you could do the following:

function confirmDialog () {
   $('#YOUR_DIALOG').dialog(
       { buttons: { "Ok": function() { return true; },
                  { "Cancel": function() {return false;}
       }
   });

}

and then you would set confirmed in the previous function to confirmDialog(). ***The dialog options may not be exactly what you want, but this should get you going.

Upvotes: 0

Related Questions