使用angular2中的对象调用.net核心控制器get方法_.net_Asp.net Mvc_Angular_Asp.net Web Api_Asp.net Core

使用angular2中的对象调用.net核心控制器get方法

.net asp.net-mvc angular asp.net-web-api asp.net-core

使用angular2中的对象调用.net核心控制器get方法,.net,asp.net-mvc,angular,asp.net-web-api,asp.net-core,.net,Asp.net Mvc,Angular,Asp.net Web Api,Asp.net Core,我有一个角度分量： import { Component } from '@angular/core'; import { Http } from '@angular/http'; @Component({ selector: 'search', template: require('./search.component.html'), styles: [require('./search.component.css')] }) export class Search

我有一个角度分量：

import { Component } from '@angular/core';
import { Http } from '@angular/http';


@Component({
    selector: 'search',
    template: require('./search.component.html'),
    styles: [require('./search.component.css')]
})
export class SearchComponent {
    public tumorType = "Tymor Type";
    public gene = "Gene";
    public searchList: any[];
    public searchCriteria:
        {
            TumorType: string;
            Gene: string;
            Country: string;
        } =
        {
            TumorType: "Acute Lymphoblastic Leukemia",
            Gene: "ABL",
            Country: "Australia"
        };

    constructor(private http: Http) {

    }

    public search() {
        let searchCrit = this.searchCriteria; 
        this.http.get('/api/RocheClinicalTrial/' + JSON.stringify({ searchCrit })).subscribe(result => {
            //this.searchList = result.json();
            console.log(result);
        });

    }
}

和一个mvc控制器

namespace RocheClinicalTrial.Controllers
{
    [AllowAnonymous]
    [Route("api/[controller]")]
    public class RocheClinicalTrialController : Controller
    {
        // GET: api/values
        [HttpGet]
        public JsonResult Get()
        {
            var repo = new Repository.Repository();
            var data = repo.GetData();

            return Json(data);
        }

        [Route("GetData")]
        //GET api/values/5
        [HttpGet("api/values")]
        public string Get(string searchCriteria)
        {
            System.Console.WriteLine(searchCriteria);
            return "value";
        }
}
}

这应该称为

Getstring搜索条件

方法。但是电话没有接通。但是当我没有价值的呼唤

this.http.get'/api/RocheClinicalTrial/'/+JSON.stringify{ searchCrit}/.subscriberesult=>{ //this.searchList=result.json； console.logresult； };

它称之为

公共JsonResult Get

方法。你能帮忙吗

这是“网络”选项卡中的通话截图

如果要绑定搜索条件，请修改api url，使其如下所示：

api/RocheClinicalTrial？searchCriteria=yourSearchCriteria

如果尚未指定与此匹配的MVC路由，则需要执行此操作。因此，基本上额外的参数与MVC端的相同内容匹配，然后MVC引擎可以自动为您映射该值

这还意味着您必须对搜索字符串进行URL编码，否则可能会有无效的URL

如果我是你，我不会使用GET来实现这个方法，而是使用POST并传递其中的数据。别忘了url有一个字符限制，所以不能太长

如果要绑定搜索条件，请修改api url，使其看起来像这样：

api/RocheClinicalTrial？searchCriteria=yourSearchCriteria

如果尚未指定与此匹配的MVC路由，则需要执行此操作。因此，基本上额外的参数与MVC端的相同内容匹配，然后MVC引擎可以自动为您映射该值

这还意味着您必须对搜索字符串进行URL编码，否则可能会有无效的URL

如果我是你，我不会使用GET来实现这个方法，而是使用POST并传递其中的数据。别忘了URL有字符限制，所以不能太长

我找到了一个解决方案

这是我从客户端打来的电话：

    this.http.get('/api/RocheClinicalTrial/Details/' + this.searchCriteria).subscribe(result => {
        //this.searchList = result.json();
        console.log(result);
    });

这是我的控制器：

namespace RocheClinicalTrial.Controllers
{
    [AllowAnonymous]
    [Route("api/RocheClinicalTrial")]
    public class RocheClinicalTrialController : Controller
    {
        // GET: api/values
        [HttpGet]
        public JsonResult Get()
        {
            var repo = new Repository.Repository();
            var data = repo.GetData();

            return Json(data);
        }

        [Route("Details/{ItemName}")]
        //GET api/values/5
        [HttpGet("api/values")]
        public string Get(SearchCriteria searchCriteria)
        {
            System.Console.WriteLine(searchCriteria);
            return "value";
        }
}
}

我找到了解决办法

这是我从客户端打来的电话：

    this.http.get('/api/RocheClinicalTrial/Details/' + this.searchCriteria).subscribe(result => {
        //this.searchList = result.json();
        console.log(result);
    });

这是我的控制器：

namespace RocheClinicalTrial.Controllers
{
    [AllowAnonymous]
    [Route("api/RocheClinicalTrial")]
    public class RocheClinicalTrialController : Controller
    {
        // GET: api/values
        [HttpGet]
        public JsonResult Get()
        {
            var repo = new Repository.Repository();
            var data = repo.GetData();

            return Json(data);
        }

        [Route("Details/{ItemName}")]
        //GET api/values/5
        [HttpGet("api/values")]
        public string Get(SearchCriteria searchCriteria)
        {
            System.Console.WriteLine(searchCriteria);
            return "value";
        }
}
}

我对这里的目标有点困惑。我在这里看到两种可能的api url

第一：

api/RocheClinicalTrial?searchCriteria=yourSearchCriteria

对于这一点，当前示例应该可以工作。但是您只需要使用一个操作，并确保查询参数searchCriteria不为null或空

namespace RocheClinicalTrial.Controllers
{
    [AllowAnonymous]
    [Route("api/[controller]")]
    public class RocheClinicalTrialController : Controller
    {
        // GET: api/values
        [HttpGet]
        public JsonResult Get(string searchCriteria)
        {
            if (string.IsNullOrWhiteSpace(searchCriteria))
            {
                var repo = new Repository.Repository();
                var data = repo.GetData();

                return Json(data);
            }
            // Return back full payload.
        }
    }
}

编号2：用于角度2组件的编号

api/RocheClinicalTrial/yourSearchCriteria

下面的内容就足够了

namespace RocheClinicalTrial.Controllers
{
    [AllowAnonymous]
    [Route("api/[controller]")]
    public class RocheClinicalTrialController : Controller
    {
        // GET: api/values
        [HttpGet]
        public JsonResult Get()
        {
            var repo = new Repository.Repository();
            var data = repo.GetData();

            return Json(data);
        }

        [HttpGet("{searchCriteria}")]
        public string Get(string searchCriteria)
        {
            System.Console.WriteLine(searchCriteria);
            return "value";
        }
    }
}

现在，这里有一个温柔的提醒。根据IE的说法，url长度是有限的，是2083个字符。对于其他浏览器和客户端，它可能在同一区域漫游

要发送回正确的json负载，最好使用POST

那么，类似于以下内容的内容将很有用：

namespace TestApp.Controllers
{
    [Route("api/[controller]")]
    public class ValuesController : Controller
    {
        [HttpGet]
        public JsonResult Get()
        {
            var data = "I'm the default one";
            return Json(data);
        }

        [HttpPost]
        public IActionResult Get([FromBody] SearchCriteria searchCriteria)
        {
            return new ObjectResult(searchCriteria);
        }
    }
}

Angular 2发出的post请求示例如下：

  public search() {
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        let searchCrit = this.searchCriteria; 
        this.http.post('/api/RocheClinicalTrial/', searchCrit, options)
             .subscribe(result => {
                 console.log(result);
             });

    }