Превращение @ Html.Action в вызов Ajax

Question

У меня есть представление, которое отображает 3 вкладки Jquery, показывающие результаты из базы данных

<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>

В настоящее время страница медленно отображает вкладки, особенно с большим набором данных, вы увидите всю информацию на экране в течение 2-3 секунд, прежде чем сценарий Jquery будет выполнен, чтобы превратить div в вкладки.

Я работаю над преобразованием моего метода @ Html.Action в вызов Ajax, однако я озадачен тем, как правильно передать мою Модель в контроллер, как я это делаю в моем методе @ Html.Action.

Вот то, что я имею до сих пор ....

<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

Вы можете сделать это, передав параметр в виде сериализации, но следующий подход будет правильным для этого

Изменить модал главной страницы, как показано ниже:

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) { }
  });

})

});

} * +1010 *

---

Partial PartialPageName1.cshtml as

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

Create all other partial like above

---

Теперь контроллер вернет главную страницу как

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

Answer 2

Если вы хотите отправить параметры в метод вашего контроллера, тогда вы можете просто передать объект в URL-адресе вызова ajax.

пример: /Search/Naturalization?param1=value1&param2=value2.

В вашем случае, используя Razor, я не уверен, но думаю, что вы могли бы сделать:

@Html.Url ("Поиск", "Натурализация", новый {param1 = значение1, param2 = значение2})