Question

下面是我用来填充三个级联地址数据列表的Angular控制器的一部分，最后一个是BootStrap Tab Page小部件。到目前为止，我只对Chrome和Edge进行了测试，结果相似。

public class AreaController : BaseController
{
    private readonly AreaClient _areaClient = new AreaClient(UserHelper.CurrentUser);
    private readonly AgentClient _agentClient = new AgentClient();

    [HttpPost]
    public JsonResult ProvincesJson()
    {
        return Json(_areaClient.GetProvinces().ToList());
    }

    [HttpPost]
    public JsonResult AreasJson(int provinceId)
    {
        var model = _areaClient.GetAreas(provinceId).ToList();
        return Json(model);
    }

    [HttpGet]
    public JsonResult SuburbsJson(int agentId, int areaId)
    {
        var allBurbs = _areaClient.GetSuburbs(areaId).ToList();
        var agentBurbIds = _agentClient.GetAgentSuburbs(agentId).Select(ab => ab.SuburbId).ToList();

        var model = allBurbs.Select(burb => new CheckListItemModel { Id = burb.SuburbId, Label = burb.SuburbName, IsChecked = agentBurbIds.Contains(burb.SuburbId) }).ToList();
        return Json(model);
    }
}

ProvincesJson和AreasJson完全适用于此部分视图：

<div id="areas-and-suburbs" ng-controller="areasCtrl">
    <div class="form-group">
        <select id="ProvinceId" ng-model="geo.provinces.selectedId" ng-change="geo.getAreas(agentId, geo.provinces.selectedId)" class="form-control">
            <option ng-repeat="item in geo.provinces" ng-value="{{item.provinceId}}" class=".area-option">{{item.provinceName}}</option>
        </select>    
    </div>
    <div class="form-group">
        <select id="AreaId" ng-model="geo.areas.selectedId" ng-change="geo.setSuburbs(geo.areas.selectedId)" class="form-control">
            <option ng-repeat="item in geo.areas" ng-value="{{item.areaId}}" class=".area-option">{{item.areaName}}</option>
        </select>
    </div>
    <div class="form-group">
        <div id="area-suburbs-partial">
            @Html.Partial("_Suburbs")
        </div>
    </div>
</div>

内部部分_Suburbs如下所示：

$scope.geo.getSuburbs = function(agentId, areaId) {
    var geoUrl = "\/Area/SuburbsJson";
    $http.post(geoUrl, { areaId: 3, agentId: 1 }, postOptions)
        .then(function(response) {
                var model = angular.fromJson(response.data);
                $scope.agentSuburbs = model.$values;
                _.defer(function() {
                    $scope.$apply();
                });
            },
            function error(response) {
                alert("Ajax error [getSuburbs]: " + response.responseText);
            });
};

然而，当外部parial呈现__Suburbs时，它会调用geo.setSuburbs，我得到＃34; localhost拒绝连接＆＃34; Chrome中的错误。此项目中的所有内容都是相同的域，只有一个项目，省和区域下拉列表正确级联，但当我选择一个新的区域，触发为该区域获取郊区时，我收到错误。

我发现这三个动作之间差别不大，所以我真的不明白为什么与第三个动作的连接被拒绝了。我甚至从SuburbsJson删除了业务逻辑以返回一个简单的int数组，并直接从浏览器调用它，而不是我的Angular控制器的Ajax逻辑，我仍然得到了拒绝连接。

这一个控制器动作可能导致拒绝连接？

BREAKING： area的拼写在某处我是一个触摸阅读障碍者。修复那天解决了一切。

Answer 1

首先，你正在发布你的GET方法，所以MVC不会为你做好路由。

MVC中的HTTPGET方法必须将JsonRequestBehavior.AllowGet标志作为返回Json的第二个参数。

相反

// Do other stuff to get model
return Json(model, JsonRequestBehavior.AllowGet);

请参阅this other SO帖子了解AllowGet为何必要

MVC拒绝仅与一个动作的连接

1 个答案: