title: MVC 4 - Show Item Details in the same page for single row
body: <p>The question I have is how can I show the details of a selected movie when clicking on Details link on the same page? Currently when you click on the hyperlink you are redirected to the controller and action that will display the info about that movie such as <code>Movies/Details/1</code>. I would like it to be displayed on <code>Movies</code></p>
  
  <p>I used the sample code located here: <a href="http://code.msdn.microsoft.com/MVC5-Demo-with-Entity-c6bc81df" rel="nofollow">http://code.msdn.microsoft.com/MVC5-Demo-with-Entity-c6bc81df</a> to create my MVC application.</p>
  
  <p>It uses CRUD create read, update and delete records.</p>
  
  <p>The reason for this is I am creating a website to be used with buttons to display the appropriate data in the database for example Button1 - ID1, Button2 - ID2 etc....</p>
  
  <p>Is this possible to details on the same page where movies are listed?</p>
  
  <p><strong>Index.cshtml</strong></p>
  
  <pre><code>@model IEnumerable&lt;MvcMovie.Models.Movie&gt;
  @{
      ViewBag.Title = "Index";
  }
  &lt;h2&gt;Index&lt;/h2&gt;
  
  &lt;p&gt;
      @Html.ActionLink("Create New", "Create")
  &lt;/p&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;th&gt;@Html.DisplayNameFor(model =&gt; model.Title)&lt;/th&gt;
          &lt;th&gt;@Html.DisplayNameFor(model =&gt; model.Genre)&lt;/th&gt;
          &lt;th&gt;@Html.DisplayNameFor(model =&gt; model.Price)&lt;/th&gt;
      &lt;/tr&gt;
  
  @foreach (var item in Model) {
      &lt;tr&gt;
          &lt;td&gt;@Html.DisplayFor(modelItem =&gt; item.Title)&lt;/td&gt;
          &lt;td&gt;@Html.DisplayFor(modelItem =&gt; item.Genre)&lt;/td&gt;
          &lt;td&gt;@Html.DisplayFor(modelItem =&gt; item.Price)&lt;/td&gt;
          &lt;td&gt;
          &lt;a href='@Url.Action("Details", new { id = item.ID })' class="ajax"&gt;Details&lt;/a&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  }
  &lt;/table&gt;
  
  &lt;div id="TargetDiv"&gt;&lt;/div&gt;
  &lt;script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $(".ajax").on("click", function (e) {
              e.preventDefault();
              var elementUrl = $(this).attr('href');
              $.ajax({
                  url: elementUrl,
                  cache: false,
                  success: function (data) {
                      $('#TargetDiv').html(data);
                  }
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>MovieController</strong></p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Data;
  using System.Data.Entity;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;
  using MvcMovie.Models;
  
  namespace MvcMovie.Controllers
      {
          public class Movies2Controller : Controller
          {
              private Jess_MoviesEntities db = new Jess_MoviesEntities();
              public ActionResult Index()
              {return View(db.Movies.ToList());}
  
              public ActionResult OneMovie(int id)
              {return View();}
          }
      }
  </code></pre>