MVC and Ajax Refresh

Using Magentrix MVC framework, you can implement an Ajax refresh. This enables you to re-render or refresh a portion of a page without having to reload the entire page.

The example here will consider that you have two Active Pages. One will be your main page where the site's header and footer are displayed and which shows controls and a search box to filter music record albums. The second of type: Active Template will be the partial content that will be refreshed via Ajax calls and will show a list of music albums based on the given search terms.

The example below is the main Active Page for listing music albums [path: /aspx/albums]:

<aspx:AspxPage runat='server' title='Music Albums'>
   <header>
     <aspx:IncludeScript runat='server' url='<%#Url.Asset("scripts/albums.js")%>'/>
   </header>
   <body>
      <div class='container-fluid'>
          <div class="row">
            <div class='col-md-12'>
               <input type='text' placeholder='Enter keywords' id='keywords' class='form-control'/>
               <input id='btnSearch' type='button' value='Search' class='btn btn-default' data-role='none'/>
            </div>
          </div>
          <div id='albumList'>

          </div>
      </div>
   </body>
</aspx:AspxPage>

The example below is the Markup for the Albums listing (Active Template) [path: /aspx/albumsList]:

<aspx:Repeater runat='server' value='{!Model}' var='album'>
    <body>
      <div class='row album'>
        <div class='col-md-12'>
           <h3><aspx:Field runat='server' value='{!album.Name}'/></h3>
           <h5><aspx:Field runat='server' value='{!album.Artist}'/></h5>
           <p class='text-muted'><aspx:Field runat='server' value='{!album.Description}'/></p>
        </div>
      </div>
    </body>
</aspx:Repeator>

On the Controller side (server side) you can now program the data accesses:

public class AlbumsController : AspxController
{
    public override ActionResponse Index()
    {
        return View();
    } 
     
    [MasterName("Blank")]
    public ActionResponse GetAlbumListing(string keywords)
    {
        var albums = Database.Search<Album__c>(keywords).ToList();
        return View(ActivePages.albumsList, albums);
    }
}

Note that within the above example, for the GetAlbumListing action, a Master Layout selector attribute has been used. This attribute allows you to control which layout should be used to render your page. In order to learn more about Master Layouts click here.

Note: jQuery, jQuery UI and Bootstrap supported versions are already embedded in pages within Magentrix applications.

The albums.js javascript file will be responsible for making the Ajax calls to load the data.

$(function() {
   $("#btnSearch").click(searchAlbums);
}); 

function searchAlbums() {
    //using jquery ajax, load the partial page
    $.ajax({
      url:"/aspx/albums/getAlbumListing",
      data: { keywords:$("#keywords").val() }
    }).done(function(data,status,xhr) {
        $("#albumList").html(data);

        if ($("#albumList .album").length == 0)
          $("#albumList").html("No albums to display");
    });
}

Table of Contents

MVC and Ajax Refresh