Question

我正在尝试使用AngularJs来使用我的ASP.NET Web API。问题是我想根据用户输入（2个Html文本框）将可选参数传递给url但我不知道如何。
这是我的ASP.NET Web API控制器

[Route("api/JobShow/{keyword}/{location}")]    
public class JobShowController : ApiController
{

    [HttpGet]
    public PageResult<sp_JobSearch_Result> Get(ODataQueryOptions<sp_JobSearch_Result> options, string keyword = null, string location = null)
    {
        ODataQuerySettings settings = new ODataQuerySettings()
        {
            PageSize = 20
        };

        JobWindow obj = new JobWindow();
        IQueryable results = options.ApplyTo(obj.showJobs(keyword, location).AsQueryable(), settings);
        return new PageResult<sp_JobSearch_Result>(
           results as IEnumerable<sp_JobSearch_Result>,
           Request.GetNextPageLink(),
           Request.GetInlineCount());
    }
}

这是我的AngularJS控制器

angular.module('JobSearch.SiteController', []).controller('JobSearchCtrl', ['$scope', '$http', function ($scope, $http) {

$http.get('/api/JobShow').success(function (data) {
    $scope.model = data;
});
}]);

url的示例则是... / api / JobShow / Java / Toronto。谢谢大家。

Answer 1

根据您的代码，我将假设您有2个文本框和一个搜索按钮，当按下搜索按钮时，您想要调用您的GET端点。对于这种情况，您要做的是将文本框输入绑定到范围，并使用ng-click绑定搜索按钮，以调用范围中将调用端点的函数。它可能看起来像这样：

控制器

angular.module('JobSearch.SiteController', [])
.controller('JobSearchCtrl', ['$scope', '$http', function ($scope, $http) {
    $scope.getResults= getResults;

    function getResults() {
        $http.get('/api/JobShow/' + $scope.keyword + '/' + $scope.location).success(function (data) {
            $scope.model = data;
        });
    }
}]);

HTML

<div ng-controller="JobSearchCtrl">
    <input type="text" ng-model="keyword">
    <input type="text" ng-model="location">
    <button type="button" ng-click="getResults()">Search</button>
</div>

Answer 2

您可以尝试ngResource！

首先需要包含ng-resource

<script src="angular.js">
<script src="angular-resource.js">

你可以通过Bower或CDN获得它，或者你使用AngularJS的方式。

<强> HTML ：

<body ng-app="MyApp">
  <div ng-controller="MyCtrl">
    <label>Keyword: <input type="text" ng-model="keyword" /></label>
    <label>Location: <input type="text" ng-model="location" /></label>
    <button ng-click="getJobShowPage(keyword, location)">Search</button>
  </div>
</body>

<强>控制器：

angular
  .module('MyApp', ['ngResource']) // Include the ngResource module here

  .controller('MyCtrl', ['$scope', '$resource', function($scope, $resource){

  // Create the $resource
  var JobShowPage = $resource('/api/JobShow/:keyword/:location', {keyword: "@keyword", location: "@location"})

  // Make a scope function to use the resource properly
  $scope.getJobShowPage = function(keyword, location) {
    var parameters = {};
    if (keyword) {
      parameters["keyword"] = keyword;
      if (location) {
        parameters["location"] = location;
      }
    }
    return JobShowPage.get(parameters);
  };


}]);

<强>输入/输出：

当用户未输入任何内容并点击“搜索”时，HTTP请求将为/api/JobShow

如果仅输入keyword，则HTTP请求将为/api/JobShow/{{keyword}}

如果同时输入了keyword和location，则HTTP请求将为/api/JobShow/{{keyword}}/{{location}}

如果仅输入location（无关键字），则HTTP请求将是一个/api/JobShow

您可以使用$ resource查询的返回值，如promise：

JobShowPage.get(parameters).$promise.then(function(response){
  // Do Stuff
  $scope.model = response.data;
});

通过回调：

JobShowPage.get(parameters, function(err, response){
  // Do Stuff
  $scope.model = response.data;
});

或者自动打开它：

// This works, but it's asynchronous
// Useful if consuming directly from the Angular Template
$scope.model = JobShowPage.get(parameters);

AngularJs，根据用户输入将可选参数传递给URL

2 个答案: