Click here to Skip to main content
15,868,419 members
Articles / Web Development / HTML
Tip/Trick

Update a div Content using Ajax.ActionLink

Rate me:
Please Sign up or sign in to vote.
4.56/5 (8 votes)
26 Dec 2014CPOL2 min read 54.5K   9   3
Update a Div element using ajax.ActionLink with Loading Panel

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.

HTML
//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.

ASP.NET
<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:

C#
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.

CSS
<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.

JavaScript
<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

  • 26th December, 2014: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead ProPhoenix Technologies Private Limited
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionVery very cool, but... Pin
Michael Breeden30-Dec-14 10:12
Michael Breeden30-Dec-14 10:12 
QuestionGreat tip Pin
BeeWayDev26-Dec-14 11:32
BeeWayDev26-Dec-14 11:32 
QuestionGood Topic Pin
Amir Mohammad Nasrollahi26-Dec-14 9:08
Amir Mohammad Nasrollahi26-Dec-14 9:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.