异步调用操作方法不会加载视图

Question

我在视图中有2-3个部分视图。其中每个都有Web服务调用。 这些是同步调用，如下所示。我想异步加载地址局部视图。我试图使用ajax.In document ready（）

加载它

我可以从个人视图行删除对地址/索引的动作调用，因为我将通过ajax加载视图吗？ 如果我不删除它，那么它会错误地说模型没有通过，如果我删除它，那么部分视图不会加载。我做错了什么？

此外，个人视图和地址视图位于不同的文件夹中。这是导致它无法加载的原因吗？

个人观点：

<div id="PersonalInfo">
  Html.Action("_Index", PersonalInfo)
</div>
<div id="Address">
  Html.Action("../Address/_Index", Address)   // Can i remove this line as i would be loading the 
                                                view via ajax?
</div>

<script type="text/javascript">
  $(document).ready(function () {
      $.ajax({
        type: 'GET',
        url: '@Url.Action("Index", "Address")',
        dataType: 'json',
        success: function (result) {
            $('#Address').html(result); // where #Address is the div id in Address Partial View
        }
    });
  });
</script>

地址视图

 <div id="Address">
    // address displayed in a grid
  </div>

地址控制器

    [HttpGet]
    public ActionResult Index()
    {
        //call service and get List<Address>()
        var address= getAddress();

        return this.PartialView("_Index", address);

    }

Answer 1

你在这里遇到了一些问题：

1. 剃刀语法不正确
2. 错误使用Action扩展方法
3. 使用jQuery插件发出错误的异步请求

1。剃刀语法不正确

此...

<div id="PersonalInfo">
   Html.Action("_Index", PersonalInfo)
</div>

应该使用@转义字符来指示razor停止处理html并开始处理razor语法。这是你应该如何使用它......

<div id="PersonalInfo">
   @Html.Action("_Index", PersonalInfo)
</div>

确保您在此处调用的控制器中存在_Index操作方法

2。 Action扩展方法

的使用不正确

此...

<div id="Address">
  Html.Action("../Address/_Index", Address)   
</div>

肯定会抛出所有类型的异常，因为此重载的第一个参数必须是您尝试调用的Action方法的名称。如果此操作方法位于不同的控制器中（与当前上下文不同），则应使用不同的重载，以允许您指定控制器名称，如下所示...

<div id="Address">
  Html.Action("Index", "Address", null)   
</div>

你应该注意两件事：

• 您的操作方法的名称是＆＃34;索引＆＃34;，而不是＆＃34; _Index＆＃34;
• 根据您发布的代码段，此操作方法不会指望任何路由值，因此我已通过null

3。使用jQuery插件发出不正确的异步请求

正如@dotnetstep所述，这个jQuery ajax方法......

$.ajax({
    type: 'GET',
    url: '@Url.Action("Index", "Address")',
    dataType: 'json',
    success: function (result) {
        $('#Address').html(result);
    }
 });

应将dataType选项设置为html，因为您调用的操作方法方法以html格式响应数据而不是json。更好的是，你根本不需要指定任何东西，jQuery会做出明智的猜测......

$.ajax({
    type: 'GET',
    url: '@Url.Action("Index", "Address")',
    success: function (result) {
        $('#Address').html(result);
    }
 });

Answer 2

数据类型应为HTML。

<div id="PersonalInfo">
  Html.Action("_Index", PersonalInfo)
</div>
<div id="Address">
  Html.Action("../Address/_Index", Address)   // Can i remove this line as i would be loading the 
                                                view via ajax?
</div>

<script type="text/javascript">
  $(document).ready(function () {
      $.ajax({
        type: 'GET',
        url: '@Url.Action("Index", "Address")',
        dataType: 'HTML',
        success: function (result) {
            $('#Address').html(result); // where #Address is the div id in Address Partial View
        }
    });
  });
</script>
Address View