ActionLink method for Ajax (for asynchronous loading)

The ActionLink method of 8.2.1 Ajax

In the Razor view, Ajax helper methods can be accessed through Ajax properties. Like the HTML helper method, most Ajax helper methods on Ajax properties are extension methods (in addition to the Ajaxhelper type).

The ActionLink method of the Ajax property can create an anchor label with an asynchronous behavior. If you want to add a "daily deal" link to the MVC Music store at the bottom of the open page, ask the user to click on the link to display the details of the discounted album on the current page instead of displaying it in a new page.

To achieve this effect, you need to add the following code after the list of albums already in the View "views/home/index.cshtml":

<div id="Dailydeal">@Ajax. ActionLink ("Click here to see today ' s special!",                         "Dailydeal",                         Newajaxoptions{Updatetargetid="Dailydeal", Insertionmodeinsertionmode=Insertionmode.replace, HttpMethod="GET"                        })      </div>

The first parameter of the ActionLink method specifies the link text, and the second parameter is the name of the operation to invoke asynchronously. Similar to the same name as the HTML helper method, the Ajax helper method ActionLink also provides a variety of overloaded versions to pass controller names, route values, and HTML attributes.

The ajaxoptions parameter is significantly different for the HTML helper method and the Ajax helper method. This parameter specifies how the request is sent and the results returned by the server are processed. The parameters also include options for handling errors, displaying loading elements, displaying confirmation dialogs, and so on. In this example, the option for the Ajaxoption parameter specifies that the element with the ID value of "dailydeal" be replaced with the response element from the server. To get the response from the server, you need to add a dailydeal action on the controller HomeController:

 Public actionresult dailydeal ()  {     var album = getdailydeal ();       return Partialview ("_dailydeal", album);  }    Private Album getdailydeal ()  {     return  storedb.albums        = a.price)        . First ();  }

The return value of the target operation of the Ajax Action link is plain text or HTML. In this example, the HTML is returned by rendering a partial view. The following razor code is _dailydeal under the project's Views/home folder. The cshtml file.

@model MvcMusicStore.Models.Album<p> "@Model. Title"Src="@Model. Albumarturl"/> </p> <div id="album-details"> <p> <em>Artist:</em>@Model. Artist.name</p> <p> <em>Price:</em>@String. Format ("{0:f}", Model.price)</p> <pclass="Button">@Html. ActionLink ("Add to Cart","AddToCart",             "ShoppingCart",New{id = model.albumid},"")         </p> </div>

When the user clicks the link, an asynchronous request is sent to the Dailydeal action of the controller HomeController. Once the operation returns HTML from a rendered view, the script in the background replaces the existing Dailydeal element in the DOM with the returned HTML. Before the user clicks the link, the bottom 8-2 of the application's first page is shown.

(Click to view larger image) Figure 8-2

After the user clicks and views the discount album, the page does not refresh all, showing the effect as shown in 8-3.

(Click to view larger image) Figure 8-3

If you want to see the code in the operation, you can use NuGet to install the Wrox.ProMvc3.Ajax.Action link package. The code in the package relies on the data access classes in the MVC Music store, so it's a good idea to try the packages in the MVC Music Store project. Once the package is installed, you can navigate to/actionlink to view the new home page.

The content generated by Ajax.actionlink can get the response from the server and can be ported directly to the page. How did this happen? The next section describes how the asynchronous operation links work.

ActionLink method for Ajax (for asynchronous loading)