Question

我有一个角度组件：

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";
        }
}
}

这应该调用

获取（string searchCriteria）

方法。但电话没有发生。但是当我打电话没有价值时

this.http.get（'/ api / RocheClinicalTrial /'/ + JSON.stringify（{ searchCrit}） /）。subscribe（result =＆gt; { //this.searchList = result.json（）; 的console.log（结果）; }）;

它调用

public JsonResult Get（）

方法。你能帮忙吗？

以下是来自网络标签的电话截图

Answer 1

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

第1名：

api/RocheClinicalTrial?searchCriteria=yourSearchCriteria

为此，目前的样本＆＃34;应该＆＃34;工作。但是您只需要使用一个操作，并确保查询参数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.
        }
    }
}

Number 2：Angular 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，它是2,083个字符。对于其他浏览器和客户端，它可能会在同一区域漫游。

要发回适当的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的样本帖子请求将是：

  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);
             });

    }

Answer 2

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

api/RocheClinicalTrial?searchCriteria=yourSearchCriteria

如果您未指定匹配此MVC路由，则需要执行此操作。所以基本上额外的参数在MVC方面匹配相同的东西，然后MVC引擎可以自动为你映射该值。

这也意味着您必须对搜索字符串进行URL编码，否则您的网址可能无效。

如果我是你，我不会使用GET这个方法，使用POST并传递其中的数据。不要忘记URL有字符限制，所以你不能让它们太长

Answer 3

我找到了解决方案。

以下是来自客户端的电话：

function authorize(){
    console.log('hello');
} 

<Router>
    <Route path="/" component={LoginPage}/>
    <Route path='app' component={App} onEnter={authorize}>
        <IndexRoute component={Home}/>
        <Route path='/video-screen' component={VideoScreen}>
            <IndexRoute component={TagList}/>
            <Route path='/add' component={AddTags}/>
            <Route path='/TagList' component={TagList}/>
            <Redirect from='*' to='/'/>
        </Route>
    </Route>
</Router>

这是我的控制器：

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

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

3 个答案: