Update a div Content using Ajax.ActionLink

Introduction

In this tip, let's see how to do an Ajax call to an action method which will return a string value. This value will be used to replace a content available in a DIV element. We will use Ajax.ActionLink() to do this and also let's explore this with a Loading panel.

Background

You should have a basic understanding on how to write a program in ASP.NET MVC.

Using the Code

As a very first item, make sure you have added a reference to MicrosoftMvcAjax.js & MicrosoftAjax.js. If not, then use Nuget Package Manager Console to download. Follow the below link to download https://www.nuget.org/packages/MicrosoftMvcAjax.Mvc5/.

Add a Div element in which you would like to replace the content through the string received from Ajax call.

//Div element
<div id="divContent" class="lead">This div content will be replaced if you click the below button.</div>

//Add a Action Link
@Ajax.ActionLink("Do Ajax Call..", "DoAjax", null, new AjaxOptions 
{ UpdateTargetId = "divContent", LoadingElementId = "divLoading", 
OnBegin = "onAjaxBegin", OnComplete = "onAjaxComplete" })

Add an Img tag inside a div tag which will be used as a Loading panel. This will be used as a LoadingElementId in the AjaxOptions.

<div id="divLoading" class="divhide"> //divhide will be set as default and will be changed dynamically.
    <img src="../../Images/loading.gif" alt="" class="progress" />
</div> 

1. Do Ajax Call - Name of the anchor tag.
2. DoAjax - Name of the action method resides in the same controller where the view exists
3. AjaxOptions

• UpdateTargetId - ID of the HTML Element in which you would like to update the content
• LoadingElementId - ID of the Loading Panel in which you have the Loading Panel image available
• InsertionMode - Replace (Default), Before or After

In the controller, add the below action method:

public string DoAjax()
{
      Thread.Sleep(5000);  // Added a thread.sleep() to show the loading panel for some more time. 

      return ("This data is fetched through ajax call. ");
}

Add the below styles into the cshtml, to show and hide the loading image as well as to show the loading image in the center of the screen.

<style>

    .progress 
    {
        position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -100px;
        height: 150px;
        width: 150px;
    }

    .divhide {
        display: none;
    }

    .divShow {
        display: normal;
    }

</style>

The below JavaScript method will be called on Ajax begin and Ajax completed event. We will use this to show and hide the div panel which holds the Loading Image control.

<code><script>
    function onAjaxBegin() {
        $("#divLoading").removeClass("divhide").addClass("divShow");
    }

    function onAjaxComplete() {
        $("#divLoading").removeClass("divShow").addClass("divhide");
    }
</script>

Points of Interest

If ajax.actionlink is redirecting to another page instead of updating the div element, then there might be a JavaScript error on this page. Please refer to http://weblogs.asp.net/owscott/mvc-3-ajax-redirecting-instead-of-updating-div and http://stackoverflow.com/questions/5093147/ajax-actionlink-redirecting-instead-of-updating-tag.

History

• 26^th December, 2014: Initial version