angularjs – Angular JS MVC Web API模型/参数不绑定.NET Core

我正在使用带有TypeScript和ASP.NET Core MVC / API的Angular JS.

我有一个apiService来处理对服务器的所有POST和GET请求,如下所示:

module TBApp {

    export class apiService {

        static $inject = ['$http','notificationService'];

        constructor(private $http,private notificationService: notificationService) {

        }

        get(url,config,success,failure) {

            return this.$http.get(url,config)

                .then(result => { this.handleResponse(result,success); },result => { this.handleError(result,failure) });
        }

        post(url,data,failure) {

            return this.$http.post(url,data)
                .then(result => { this.handleResponse(result,failure) });
        }

        handleResponse(result,success) {

            alert('success');
            success(result);

        }

        handleError(result,failure) {

            if (result.status === '401') {

                this.notificationService.displayError('Authentication required.');
                //this.$rootScope.previousState = this.$location.path();
                //this.$location.path('/login');

            }
            else if (failure !== null) {
                failure(result);
            }
        }
    }
}

现在,当我发送此请求时:

onCompanyChanged(selectedCompany,model,companyName) {

        this.apiService.post('/api/Dashboard/GetAssetListByCompany',{ companyId: selectedCompany.id },response => {

                this.assetListViewModel = response.data.data;


            },response => {
            this.notificationService.displayError(response.data.message);
        });
    }

它没有绑定控制器中的companyId

这是控制器:

[Route("api/[controller]")]
    public class DashboardController : BaseController
    {
        [HttpPost]
        [Route("GetAssetListByCompany")]
        public IActionResult GetAssetListByCompany([FromBody]int companyId)
        {
            return CreateJsonResult(() =>
            {
                if (companyId == 0) { return new xPTJsonResult(null,xPTStatusCodesEnum.Success,"Company Id is 0"); }

               //var treeModel = _dashboardProvider.GetTreeModelByCompany(companyId,userModel);

                return new xPTJsonResult(null,"Loaded assets successfully");

            });
        }

}

即使我在浏览器中检查了请求,也表明companyId在Payload中.

enter image description here

NOTE: The same function works when I post a ViewModel

编辑

在上面的场景中,我只将一个参数传递给控制器​​,但在某些情况下,我希望能够在不使用ViewModel的情况下传递2或3个参数.

例如

public IActionResult GetAssetListByCompany([FromBody]int companyId,[FromBody]int assetId)
{....

要么

public IActionResult GetAssetListByCompany([FromBody]int companyId,[FromBody]int assetId,[FromBody]bool canEdit = false)
    {.....

然后在客户端我可以这样做:

this.apiService.post('/api/Dashboard/GetAssetListByCompany',{ companyId: selectedCompany.id,assetId: 123 }.....

要么

this.apiService.post('/api/Dashboard/GetAssetListByCompany',canEdit: true,assetId: 22 }....

解决方法

这里最好的方法是遵循HTTP准则并将操作从POST更改为GET,因为您不修改任何数据.这很简单,仍然可以使用URI通过您的请求发送数据.

MVC改变了

有关各种选项,请参阅Model Binding,此处的最佳方法是基于查询字符串进行绑定,因为您只需要一个基本类型.如果您有一个基本类型数组仍然可以绑定到查询字符串,则查询字符串变量名称将为每个值重复一次.

因此,我们所做的唯一更改是指定参数来自查询字符串,并且它与Http Get请求而不是Post相关联.

[Route("api/[controller]")]
public class DashboardController : BaseController
{
    [HttpGet] // change to HttpGet
    [Route("GetAssetListByCompany")]
    public IActionResult GetAssetListByCompany([FromQuery]int companyId) // use FromQuery
    {
        return CreateJsonResult(() =>
        {
            if (companyId == 0) { return new xPTJsonResult(null,"Company Id is 0"); }

           //var treeModel = _dashboardProvider.GetTreeModelByCompany(companyId,userModel);

            return new xPTJsonResult(null,"Loaded assets successfully");

        });
    }
}

AngularJS发生了变化

我们扩展apiService以允许使用HttpGet传递调用数据.这可以使用params on the $http call完成,它将使用名称作为查询字符串值名称和值作为值部分,根据传入的数据动态创建URL.

export class apiService {
    /* all other code is left as is,just change the get method to also accept data via the params. If null is passed in then it is ignored. */
    get(url,failure) {
        return this.$http({
            url: url,config: config,params: data,method: "GET"
            })
            .then(result => { this.handleResponse(result,failure) });
    }
}

在通话中我们只需要从post更改为get,它应该可以工作.

// only change from post to get
onCompanyChanged(selectedCompany,companyName) {
    this.apiService.get('/api/Dashboard/GetAssetListByCompany',response => {
            this.assetListViewModel = response.data.data;
        },response => {
        this.notificationService.displayError(response.data.message);
    });
}

编辑 – 这很灵活

更重要的是,这种设计在角度方面是灵活的.如果您扩展MVC操作或具有采取其他参数的各种操作,则无需执行任何其他更改即可运行.例:

[HttpGet]
[Route("GetSomethingElseFromServer")]
public IActionResult GetSomethingElseFromServer([FromQuery]int companyId,[FromQuery]string assetName,[FromQuery]string companyModelNumber) // use FromQuery

对你的角度api的调用将是

this.apiService.get('/api/Dashboard/GetSomethingElseFromServer',{ companyId: companyId,assetName: somePassedInAssetNameVar,companyModelNumber: somePassedInModelNumber }

编辑 – 您也可以发送数组

要回答关于如何将多个基元类型作为数组发送的问题,您可以这样做.同样,这假设它不是您要发送的复杂类型,但是,例如,公司ID列表.

c#代码

[HttpGet]
[Route("GetAssetListByCompany")]
public IActionResult GetAssetListByCompany([FromQuery]int[] companyIds) // use an array of int ie. int[]. i changed the variable name to make it clear there can be more than 1

Angular调用,注意没有必要更改服务

onCompanyChanged(selectedCompany,{ "companyIds[]": [id1,id2,id3] },// note the name is now enclosed in quotes,made plural,and includes []. The value is an array
        response => {
            this.assetListViewModel = response.data.data;
        },response => {
        this.notificationService.displayError(response.data.message);
    });
}

编辑 – 如果你想要POST

您目前只发送一个原始字段,因此POST中的MVC框架无法正确反序列化.您需要将参数包装在视图模型中,将其作为查询字符串部分发送,或将其作为表单字段值发送.这是带有查询字符串部分的POST,它可以正常工作.

选项1

将其附加到URL

[HttpPost] // change to HttpGet
[Route("GetAssetListByCompany")]
public IActionResult GetAssetListByCompany([FromQuery] int companyId) // use FromQuery

角度呼叫

this.apiService.post('/api/Dashboard/GetAssetListByCompany/?companyId=' + selectedCompany.id +,null,// the rest of the code remains unchanged so I did not include it

选项2

扩展apiService以获取params对象,以便它可以构建您的查询.无论哪种方式,你都会遇到调用者不得不对http调用有所了解.

this.apiService.post('/api/Dashboard/GetAssetListByCompany',{companyId: selectedCompany.id},// the rest of the code remains unchanged so I did not include it

post(url,params,failure) {
    return this.$http({
        url: url,data: data,params: params,method: "POST"
        })
        .then(result => { this.handleResponse(result,failure) });
}

选项3

更新视图模型以采用复杂类型,这不需要更改角度代码.

public class ListByCompanyModel {
    public int CompanyId {get;set;}
}

[HttpPost] // change to HttpGet
[Route("GetAssetListByCompany")]
public IActionResult GetAssetListByCompany([FromBody] ListByCompanyModel model) // use FromQuery

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


本文将从上往下,循序渐进的介绍一系列相关.NET的概念,先从类型系统开始讲起,我将通过跨语言操作这个例子来逐渐引入一系列.NET的相关概念,这主要包括:CLS、...
基于 .NET 的一个全新的、好用的 PHP SDK + Runtime: PeachPie 来啦!
.NET 异步工作原理介绍。
引子 .NET 6 开始初步引入 PGO。PGO 即 Profile Guided Optimization,通过收集运行时信息来指导 JIT 如何优化代码,相比以前没有 PGO 时可以做更多以前难以
前言 2021/4/8 .NET 6 Preview 3 发布,这个版本的改进大多来自于底层,一起来看看都有什么新特性和改进吧。 库改进 新增值类型作为字典值时更快的处理方法 .NET 6 Previ
前言 开头防杠:.NET 的基础库、语言、运行时团队从来都是相互独立各自更新的,.NET 6 在基础库、运行时上同样做了非常多的改进,不过本文仅仅介绍语言部分。 距离上次介绍 C# 10 的特性已经有
直接使用 CIL - .NET 上的汇编语言编写 .NET Standard 类库
前言 不知不觉中,.NET Framework 已经更新到 4.8,.NET Core 也更新到了 3.0 版本。那么 .NET 的未来怎么样呢? 计划 2019 年 Build 大会上,微软宣布下一
本文带你穿越到未来一起看看未来的 C# 到底长什么样子。
前言 TypedocConverter 是我先前因帮助维护 monaco-editor-uwp 但苦于 monaco editor 的 API 实在太多,手写 C# 的类型绑定十分不划算而发起的一个项
前言 在 2021 年 3 月 11 日, .NET 6 Preview 2 发布,这次的改进主要涉及到 MAUI、新的基础库和运行时、JIT 改进。 .NET 6 正式版将会在 2021 年 11
前言 命名空间已经在 .NET 中使用了多年,一直追溯到 .NET Framework 1.1。它在 .NET 实施本身的数百个位置中使用,并且直接被成千上万个应用程序使用。在所有这些方面,它也是 C
.NET 上的统一跨平台 UI 框架来啦
使用 F# 手写一个 Typedoc 转 C# 代码生成器,方便一切 C# 项目对 TypeScript 项目的封装。
LINQ + SelectMany = Monad!
C# 10 主要特性一览
C# 的编译期反射终于来啦!
前言 2021 年 2 月 17 日微软发布了 .NET 6 的 Preview 1 版本,那么来看看都有什么新特性和改进吧,由于内容太多了因此只介绍一些较为重点的项目。ASP.NET Core 6
前言 有一个东西叫做鸭子类型,所谓鸭子类型就是,只要一个东西表现得像鸭子那么就能推出这玩意就是鸭子。 C 里面其实也暗藏了很多类似鸭子类型的东西,但是很多开发者并不知道,因此也就没法好好利用这些东西,
经过五年半的持续维护,Senparc.Weixin SDK 逐步丰满和完善,在升级的过程中,我们为基础库(Senparc.Weixin.dll)加入了许多通用的功能,例如加密/解密算法、通用缓存方法等