How to use Ajax.ActionLink?

Question

First of all, where is the documentation for Ajax.* methods in asp.net mvc?

Can Ajax.ActionLink be used to call an action, get a partial view, open a modal window and put the content in it?

Here's the [MSDN documentation for Ajax.ActionLink](http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxextensions.actionlink.aspx) — Bala R, Apr 07 '11 at 19:28

score 61 · Accepted Answer · edited May 23 '17 at 11:54

Sure, a very similar question was asked before. Set the controller for ajax requests:

public ActionResult Show()
{
    if (Request.IsAjaxRequest()) 
    {
        return PartialView("Your_partial_view", new Model());
    }
    else 
    {
        return View();
    }
}

Set the action link as wanted:

@Ajax.ActionLink("Show", 
                 "Show", 
                 null, 
                 new AjaxOptions { HttpMethod = "GET", 
                 InsertionMode = InsertionMode.Replace, 
                 UpdateTargetId = "dialog_window_id", 
                 OnComplete = "your_js_function();" })

Note that I'm using Razor view engine, and that your AjaxOptions may vary depending on what you want. Finally display it on a modal window. The jQuery UI dialog is suggested.

What would I do in the case Where I want to use image as the anchor display instead of the word **show**? — Mwas, Sep 13 '17 at 13:23

score 45 · Answer 2 · answered Jul 07 '14 at 11:54

45

@Ajax.ActionLink requires jQuery AJAX Unobtrusive library. You can download it via nuget:

Install-Package Microsoft.jQuery.Unobtrusive.Ajax

Then add this code to your View:

@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")

answered Jul 07 '14 at 11:54

komsky

1,568
15
22

This was the key point I don't find in the other documentation. – Rozwel Aug 08 '14 at 16:31
@Rozwel I couldn't find it anywhere either. What an obscure "gotcha". Tip for Microsoft: don't do this. – Ross Brasseaux Sep 07 '16 at 21:51
do this first , add this nugget package even if you are in VS 2017, this issue exists, we have to manually add this package to the project for anything with @Ajax to work in your cshtml – Sundara Prabu Jan 18 '18 at 08:17
Well, +1 for this as all answers failed to add this key point about the Library. – Garry Oct 27 '18 at 20:43

score 9 · Answer 3 · answered Jan 05 '15 at 14:00

For me this worked after I downloaded AJAX Unobtrusive library via NuGet :

 Search and install via NuGet Packages:   Microsoft.jQuery.Unobtrusive.Ajax

Than add in the view the references to jquery and AJAX Unobtrusive:

@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"> </script>

score 6 · Answer 4 · edited Jan 14 '14 at 10:47

Ajax.ActionLink only sends an ajax request to the server. What happens ahead really depends upon type of data returned and what your client side script does with it. You may send a partial view for ajax call or json, xml etc. Ajax.ActionLink however have different callbacks and parameters that allow you to write js code on different events. You can do something before request is sent or onComplete. similarly you have an onSuccess callback. This is where you put your JS code for manipulating result returned by server. You may simply put it back in UpdateTargetID or you can do fancy stuff with this result using jQuery or some other JS library.

How to use Ajax.ActionLink?

4 Answers4

Linked

Related