title: C# MVC: displaying list items with ajax
body: <p>I'm trying to display list items with AJAX.
  First, when you go into the page, you will see the first item of the list.
  After clicking "Next", then AJAX will refresh its div with the next item in the list.</p>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>public ActionResult Index()
      {
          if (Request.IsAjaxRequest())
          {
            return PartialView(_attractions.Last());
          }
  
          return View(_attractions.First());
      }
  </code></pre>
  
  <p><strong>View</strong></p>
  
  <pre><code>@using System.Web.Mvc.Ajax;
  @model EasyTripNow.Models.Attraction
  
  @{
      ViewBag.Title = "Index";
  }
  
      @Html.Partial("_Attraction", Model)
  
      @using (Ajax.BeginForm(
          new AjaxOptions()
          {
              HttpMethod = "get",
              InsertionMode = InsertionMode.Replace,
              UpdateTargetId = "newAttraction"
          }))
      {
          &lt;input type="submit" value="Next"/&gt;
      }
  </code></pre>
  
  <p><strong>Attraction Partial View</strong></p>
  
  <pre><code>@model EasyTripNow.Models.Attraction
  
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;Hi&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="newAttraction"&gt;
      &lt;h4&gt;Attraction&lt;/h4&gt;
      @Html.EditorForModel(Model)
      &lt;p&gt;
          @Html.ActionLink("Edit", "Edit", new {id = Model.ID}) |
          @Html.ActionLink("Back to List", "Index")
      &lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>   public ActionResult Index(int? index)
     {
  
          if (Request.IsAjaxRequest())
          {
              return PartialView(_attractionList.ElementAt(index.Value)); // next element in the list
          }
  
          return View(_attractionList.First());
      }
  </code></pre>
  
  <p><strong>View</strong></p>
  
  <pre><code>@model EasyTripNow.Models.Attraction
  
  @{
      ViewBag.Title = "Index";
  }
  &lt;html&gt;
  
  
  &lt;head&gt;
      &lt;title&gt;Hi&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="attraction"&gt;
      @Html.Partial("_Attraction", Model)
      &lt;button id="next" type="button"&gt;Next&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      var idx = 0;
      var container = $('#attraction');
      var url = '@Url.Action("Index")';
      $('#next').click(function() {
          idx++; // increment
          $.get(url, { index: idx }, function(response) {
              container.empty().append(response);
          });
      });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Attraction Partial view:</strong></p>
  
  <pre><code>@model EasyTripNow.Models.Attraction
  
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;Hi&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h4&gt;Attraction&lt;/h4&gt;
      @Html.DisplayFor(m =&gt; m.ID)
      &lt;p&gt;
          @Html.ActionLink("Edit", "Edit", new {id = Model.ID}) |
          @Html.ActionLink("Back to List", "Index")
      &lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Can't think of a good way to do it.</p>
  
  <p>Any suggestions?</p>