Question

我有一个视图，它渲染了3个Jquery Tabs，显示了数据库的结果

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

目前页面渲染选项卡的速度很慢，特别是对于较大的数据集，在Jquery脚本执行将div转换为制表符之前，您将在屏幕上看到所有信息2-3秒。

我正在努力将我的@ 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

如果您的意思是向控制器的方法发送参数，那么您只需传入ajax调用的Url中的对象。

示例：/ Search / Naturalization？param1 = value1＆amp; param2 = value2。

在你使用Razor的情况下，我不确定，但我认为你可以做到：

@ Html.Url（“搜索”，“归化”，新{param1 = value1，param2 = value2}）

Answer 2

您可以通过将参数作为序列化传递来实现，但以下将是正确的方法来执行此操作

更改主页面模式如下：

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

Main.cshtml页面为

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

})

});

}

部分PartialPageName1.cshtml为

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

将@ Html.Action转换为Ajax调用

2 个答案: