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

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

数据类型应该是 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

Answer 2

这里有一些问题：

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>

你应该在这里注意到两件事：

• 您的操作方法的名称是“Index”，而不是“_Index”
• 根据您发布的代码 sn-p，此操作方法不需要任何路由值，因此我已传入 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);
    }
 });