title: Asp.net MVC Core - unable to load partial view using Ajax
body: <p>Following this <a href="https://visualstudiomagazine.com/blogs/tool-tracker/2015/05/ajax-partial-views-asp-net-mvc.aspx" rel="nofollow noreferrer">article</a>, I'm tTrying to load <code>Partial View</code> via <code>Ajax</code>. But it's not loading <code>partial view</code>.</p>
  
  <p>NOTES: </p>
  
  <ol>
  <li>I'm using VS2015 with latest updates with default installation/configuration of Jquery that comes with Visual Studio's MVC Core web app project template.</li>
  <li>Google Chrome's developer tool shows no error. And, the browser's view source still displays <code>&lt;div id="UpdateTabData"&gt;&lt;/div&gt;</code> tag empty</li>
  <li>I've tested by placing <code>alert('Test')</code> inside the click event in the Ajax call and by using a <code>breakpoint</code> inside controller action method that Ajax is indeed calling the TestAction method and that the method is indeed returning <code>return PartialView("PartialView", myViemodel);</code> without any error inside action method.</li>
  <li>But the Ajax at the end returns the my custom error message from it's error function</li>
  </ol>
  
  <p><strong>Controller</strong>:</p>
  
  <pre><code>[HttpGet]
  public IActionResult TestAction(string calledFrom)
  {
    ... some code here with a view model myViemodel
  
    return PartialView("myPartialViewName", myViemodel);
  }
  </code></pre>
  
  <p><strong>View:</strong></p>
  
  <pre><code>@model myProj.Models.myTestViewModel
  ...some html here...
  &lt;div id="UpdateTabData"&gt;&lt;/div&gt;
  ... more html here
  ...
  </code></pre>
  
  <p><strong>Ajax code at the end of view</strong>:</p>
  
  <pre><code>$(document).ready(function () {
  
      $('#myTabstripID li').click(function () {
          var li_id = $(this).attr("id");
  
          $.ajax({
              url: '@Url.Action("TestAction", "myControllerName")',
              data: { calledFrom: li_id},
              contentType: 'application/json',
              dataType: 'html'
              type: 'GET',
              cache: false,
              success: function (data) {
                  $('#UpdateTabData').html(data);
              },
              error: function (data) {
                  alert('Error occurred');
              }
          });
      });
  
  });
  </code></pre>