Changing viewmodel properties without making the page flash

I was hoping that I could get some ideas on this:

Im attempting to create a "Show more results" feature on the website that Im working on. Currently, there is a list of ten items that are currently being shown using razor syntax.

@foreach (Movie m in Model.MovieList)
{
   <li>
      @Html.RouteLink("Details", "Details", new { detailsId = m.Id }, new { @class = "hidden double-click-href" })
      <h1>
         @(m.CurrentIdentifier): @m.MovieTitle
         <span class="right">@m.Movie.Description</span>
       </h1>
         <div class="fields">
            <span class="label">Release Date</span>
            <span class="value">@m.CreatedOn.ToShortDateString()</span>
            <span class="label">Genre</span>
            <span class="value">@m.Genre.Name</span>
         </div>
   </li>
}

There is a link "Show More Results" that, when clicked, will append the next 10 cases to the list with a query. The only way I could think to do it was to create an ajax call using JQuery that would call an action, return the JSON results with the information I needed, and fill in a string that is the "template" (duplicate) of the HTML above using a JavaScript method.

The issue is that I do not like the fact that HTML is basically being duplicated and if I attempt to fill in the MovieList property during the call to the action (I need to make it ajax or something similar so that there is no "flashing") it will not be picked up until the page refreshes.

Is there a good way to set the MovieList property so that I do not have to duplicate the HTML and still make the ajax call (not have the page post back)?

Edit:

I attempted the suggestion of @Jamie Dixon and, while I see the request and I can see the proper HTML is being returned, it is not updating the page (the page stays exactly the same as before I clicked the link). Here is the javascript:

 function GetMovieList() {
    var url = location.pathname + '/Filter';
    var size = $('#my-movie-list > li').size();

    $.ajax({
      type: "GET",
      url: url,
      data: { fromNumber: size }, //the number of rows already displayed
      contentType: "application/x-www-form-urlencoded",
      success: function (data) {
      SetShowMoreResultsFeatures(); //checks to see if the 'Show More Results' link should be disabled and some other stuff.
      }
    });
  }

Here is the controller method:

[Route("/Filter")]
public ActionResult GetFilteredMovies(int fromNumber)
{
  ViewData.Model = new DashboardIndexViewModel
  {
    CurrentUser = CurrentUser.User,
    MyCalendar = new CalendarListView(CurrentUser.User),
    CaseCount = movieQuery.Execute(CurrentUser.User.Id).Count(),
    Movies= GetMovies(fromNumber)
  };


  return View("_MovieItem", ViewData.Model);
}

and here is the Partial View "_MovieItem":

@model Matrix.Investigator.Website.ViewModels.Dashboard.DashboardIndexViewModel

@foreach (Movie m in Model.MovieList)
{
   <li>
      @Html.RouteLink("Details", "Details", new { detailsId = m.Id }, new { @class = "hidden double-click-href" })
      <h1>
         @(m.CurrentIdentifier): @m.MovieTitle
        开发者_开发技巧 <span class="right">@m.Movie.Description</span>
       </h1>
         <div class="fields">
            <span class="label">Release Date</span>
            <span class="value">@m.CreatedOn.ToShortDateString()</span>
            <span class="label">Genre</span>
            <span class="value">@m.Genre.Name</span>
         </div>
   </li>
}

---

Put your HTML in a partial view that iterates over a collection to output its HTML.

When you make your ajax call to your controller method, have the controller return the same partial view and pass it your new collection.

You can then simply drop your returned HTML data into the relevant part of your page and there's no duplication.