Turning @Html.Action into an Ajax call

Question

I have a view that is rendering 3 Jquery Tabs showing results from a database

<div id="tabs">
<ul>
<li><a href="#tabs-1">Obituaries</a></li>
<li><a href="#tabs-2">Naturalizations</a></li>
<li><a href="#tabs-3">Censuses</a></li>
</ul>

<div id="tabs-1">
@Html.Action("Search", "Obituary", new RouteValueDictionary() { { 
"parameters", Model } })
</div>

<div id="tabs-2">      
  @Html.Action("Search", "Naturalization", new RouteValueDictionary() { { 
"parameters", Model } })
</div>

 <div id="tabs-3">
  @Html.Action("Search", "Census", new RouteValueDictionary() { { 
"parameters", Model } })
</div>
</div>

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.

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.

Here is what I have so far....

<script>
  $(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) { }
  });
 });
  </script>

Answer 1

If you meant sending parameters to your controller's method then you could just pass in an object in the Url of the ajax call.

example: /Search/Naturalization?param1=value1&param2=value2.

In your case using Razor, I am not sure but I think you could do:

@Html.Url("Search", "Naturalization", new { param1 = value1, param2 = value2 })

Answer 2

You can do it by passing the parameter as a serialize, but the following will be right approach to do this

Change Main Page modal as below:

Public class MainModel{
public subModel1 subModel1List{get;set;}
public subModel1 subModel2List{get;set;}
public subModel1 subModel3List{get;set;}
}

---

Main.cshtml page as

@using model.MainModel

<div id="tabs">
<ul>
<li><a href="#tabs-1">Obituaries</a></li>
<li><a href="#tabs-2">Naturalizations</a></li>
<li><a href="#tabs-3">Censuses</a></li>
</ul>

<div id="tabs-1">
@Html.Partial("PartialPageName1",subModel1)
</div>

<div id="tabs-2">      
@Html.Partial("PartialPageName2",subModel2)
</div>

<div id="tabs-3">
 @Html.Partial("PartialPageName3",subModel3)
</div>
</div>

@section scripts{
<script type="text/javqascript">
$(document).ready(function(){

//Event that called when you tab data is being rendered, or beofre render use show.bs.tab
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
 var newTab = e.target // newly activated tab
 var previousTab = e.relatedTarget // previous active tab
var url = newTab == "tabs-1" ? "PathToPartialPage1ControllerMethod"
                             : "tabs-2" ?  "PathToPartialPage2ControllerMethod" 
                                        :  "PathToPartialPage3ControllerMethod";
var parameter = "tabs-1" ? "{"parameter1" : "XYZ"}"
                             : "tabs-2" ?  "{"parameter2" : "XYZ"}" 
                                        :  "{"parameter3" : "XYZ"}";

$.ajax({
     type: "GET",
     url: url,
     dataType: "html",
     data: parameter ,

     success: function data{

        $("#" + newTab ).html();
     },
     error: function (e) { }
  });

})

});

}

---

Partial PartialPageName1.cshtml as

@using model.MainModel
 <div>@Model.PropertyOfsubModel1</div>

Create all other partial like above

---

Now controller to return Main Page as

public ActionResult MainPageView(){
return View(new MainModel()); //You can fill some values here if want or required
}