title: Turning @Html.Action into an Ajax call
body: <p>I have a view that is rendering 3 Jquery Tabs showing results from a database</p>
  
  <pre><code>&lt;div id="tabs"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#tabs-1"&gt;Obituaries&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#tabs-2"&gt;Naturalizations&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#tabs-3"&gt;Censuses&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div id="tabs-1"&gt;
  @Html.Action("Search", "Obituary", new RouteValueDictionary() { { 
  "parameters", Model } })
  &lt;/div&gt;
  
  &lt;div id="tabs-2"&gt;      
    @Html.Action("Search", "Naturalization", new RouteValueDictionary() { { 
  "parameters", Model } })
  &lt;/div&gt;
  
   &lt;div id="tabs-3"&gt;
    @Html.Action("Search", "Census", new RouteValueDictionary() { { 
  "parameters", Model } })
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Currently the page is slow to render the tabs, especially with a larger data set, you will see all of the information on the screen for 2-3 seconds before the Jquery script executes to turn the divs into tabs. </p>
  
  <p>I am working on converting my @Html.Action method into an Ajax call, however, I am stumped as how to properly pass my Model to the controller, like I do in my @Html.Action method.</p>
  
  <p>Here is what I have so far....</p>
  
  <pre><code>&lt;script&gt;
    $(document).ready(function () {
    $.ajax({
       type: "GET",
       url: '@Html.Url("Search", "Naturalization")',
       dataType: "html",
       data: {//not sure how to pass Model here????  },
  
       success: function (content) {
          $("#tabs-2").html(content);
       },
       error: function (e) { }
    });
   });
    &lt;/script&gt;
  </code></pre>