AngularJs, Übergabe optionaler Parameter an die URL basierend auf Benutzereingabe

Ich versuche, meine ASP.NET Web API mit AngularJs zu konsumieren. Das Problem ist, dass ich optionale Parameter an die URL basierend auf der Benutzereingabe übergeben möchte (2 HTML-Textfelder), aber ich weiß nicht wie.
Dies ist meine ASP.NET Web API-ControllerAngularJs, Übergabe optionaler Parameter an die URL basierend auf Benutzereingabe

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

Und das ist mein AngularJS Controller

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

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

Beispiel der URL wäre dann .../api/JobShow/Java/Toronto. Danke euch allen.

Quelle

2016-04-07 Iman

Ist die optionale Parameter Sie ist sprachen über die Pfadparameter 'keyword' und' location'? – kazenorin

Ja, das sind sie. Ich zeige es in der Attribut-Route auf meinem API Controller. – Iman

Sie können ngResource versuchen!

Sie müssen zuerst ng-Ressource

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

Sie können es über Bower oder CDN enthalten bekommen, oder je nachdem, wie Sie AngularJS bekam.

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>

-Controller:

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


}]);

Ein-/Ausgänge:

Wenn der Benutzer nichts und klickt 'Suche' eingibt, die HTTP-Anforderung wäre /api/JobShow

Wenn nur die keyword eingegeben wird, würde die HTTP-Anforderung /api/JobShow/{{keyword}}

werden, wenn sowohl die keyword und location eingegeben wird, die HTTP-Anforderung /api/JobShow/{{keyword}}/{{location}}

wäre, wenn nur die location eingetragen ist (kein Schlüsselwort) wäre die HTTP-Anfrage die Vanilla /api/JobShow

Sie können den Rückgabewert der $ Ressourcenabfrage wie ein Versprechen konsumieren:

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

durch Rückrufe:

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

oder Auto unwrap es:

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

Quelle

2016-04-07 06:26:31 kazenorin

Basierend auf Ihrem Code, gehe ich davon aus, dass Sie 2 Textfelder und eine Suchschaltfläche haben, und wenn die Suchschaltfläche gedrückt wird, möchten Sie Ihren GET-Endpunkt aufrufen. Für dieses Szenario sollten Sie die Textboxeingaben an Ihren Bereich binden und die Suchschaltfläche mithilfe von ng-klick an eine Funktion in Ihrem Bereich binden, die Ihren Endpunkt aufruft. Es könnte wie folgt aussehen:

Controller

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>

Quelle

2016-04-07 04:34:34

AngularJs, Übergabe optionaler Parameter an die URL basierend auf Benutzereingabe

Antwort

Verwandte Themen