title: How to render a partial view (using razor) after user click?
body: <p>I've been searching for a solution, but every thing I tried didn't help, although it seems very easy. I'm sure some of you will know what should I do.</p>
  
  <p>I am using ASP.NET MVC4 (razor).
  I have a side menu, and all I want is that another partial view will be rendered (depends on the menu item's being clicked).
  I have a div on my page that should contain this partial view. The command:  </p>
  
  <pre><code> @Html.Partial("_TitleDescription")
  </code></pre>
  
  <p>works just fine, but it's statically render the partial view (on compilation time). I want it to render it dynamically with every button the user clicked in the menu.</p>
  
  <p>I tried:</p>
  
  <pre><code> @Ajax.ActionLink("Location", "Location", "Product",  new { id = @Model.ID }, new AjaxOptions() { UpdateTargetId = "result", InsertionMode = InsertionMode.Replace, HttpMethod = "GET"})
  </code></pre>
  
  <p>I tried:</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
          function getView() {
              $('#detailsDiv').load("@Url.Action("Location" , "Product" )");
          }
   &lt;/script&gt;
   &lt;a href='javascript:getView();'&gt;Get Partial View&lt;/a&gt;
   &lt;div id="detailsDiv"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and also like this:</p>
  
  <pre><code> &lt;div id="detailsDiv"&gt;
       @{ Html.RenderPartial("_TitleDescription", null); }
   &lt;/div&gt;
  </code></pre>
  
  <p>but nothing works for me.</p>
  
  <hr>
  
  <p>EDIT:</p>
  
  <p>I tried the two answers but non of them works... so here is my controller:</p>
  
  <pre><code> public ActionResult Location(int id = 0)
      {
  
          Product product = unitOfWork.ProductRepository.GetById(id);
  
          return PartialView("Location.cshtml", product);
      }
  </code></pre>
  
  <p>I put a breakpoint and I'm hitting it every time, but still nothing is changing in the view... :(</p>
  
  <p>This is what i tried again:</p>
  
  <pre><code> &lt;div id="detailsDiv"&gt;&lt;/div&gt;
   &lt;a href="#" onclick="loadLocation()"&gt;Location&lt;/a&gt;
  
   &lt;script type="text/javascript"&gt;
        function loadLocation() {
              $.get('@Url.Action("Location","Product", new { id = 15 } )',
                   function (data) {
                       $('#detailsDiv').load(data);
                   });
          }
   &lt;/script&gt;
  </code></pre>
  
  <p>and I also tried this:</p>
  
  <pre><code> &lt;div id="detailsDiv"&gt;&lt;/div&gt;
   @Html.ActionLink("Pages","Location","Product",new {id = 15},new {@class="menu"})
  
   &lt;script type="text/javascript"&gt;
          $(function () {
  
              $(".menu").click(function (e) {
  
                  e.preventDefault();
                  $("#detailsDiv").load($(this).attr("href"))
              });
  
  
          });
      &lt;/script&gt;
  </code></pre>