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

Bala R
– Bala R

2011-04-07 19:28:58 +00:00
Commented Apr 7, 2011 at 19:28 — Bala R
– Bala R, Commented Apr 7, 2011 at 19:28

Community · Accepted Answer · 2017-05-23 11:54:18Z

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?

komsky · Accepted Answer · 2014-07-07 11:54:46Z

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 7, 2014 at 11:54

komsky

1,58815 silver badges22 bronze badges

4 Comments

Rozwel Over a year ago

This was the key point I don't find in the other documentation.

Ross Brasseaux Over a year ago

@Rozwel I couldn't find it anywhere either. What an obscure "gotcha". Tip for Microsoft: don't do this.

Sundara Prabu Over a year ago

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

Garry Over a year ago

Well, +1 for this as all answers failed to add this key point about the Library.

Stefan Vlad · Accepted Answer · 2015-01-05 14:00:34Z

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>

iCollect.it Ltd · Accepted Answer · 2014-01-14 10:47:06Z

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.

Collectives™ on Stack Overflow

How to use Ajax.ActionLink?

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Linked

Related