Question

我有两个应用程序，一个是仅提供数据的WebAPI应用程序。另一个是获取该数据的AngularJS应用程序。我的WebAPI GET方法存在问题。

我正在尝试使用网址参数来调用正确的GET方法。根据我的理解，AngularJS将为我创建URl查询，WebAPI将使用正确的参数查找正确的GET方法。

我遇到的问题是WebAPI跳过了我的正确GET方法，因为它认为URL查询中的参数与请求不匹配。它基本上删除/忽略了GET方法中的参数，但我已经有一个空白的GET方法。所以我收到Multiple actions were found that match the request:错误。

这就是我的WebAPI的外观。请注意，第二个GET方法需要一个只有两个字段的SearchParameters对象。 SearchVariable这是要搜索的内容，SearchTerm是哪个字段（列）来搜索变量。

public class ProductsController : ApiController
{
    // GET: api/Products
    public IEnumerable<Product> Get()
    {
        var productRepository = new ProductRepository();
        return productRepository.Retrieve();
    }

    // GET: api/Products
    public IEnumerable<Product> Get(SearchParameters search)
    {
        var productRepository = new ProductRepository();
        var products = productRepository.Retrieve();
        if(search.SearchField == null)
        {
            return products;
        }
        IEnumerable<Product> result = null;
        // Search on a certain field for the search variable
        switch(search.SearchType)
        {
            case "Product Code":
                result =  products.Where(p => p.ProductCode.ToUpper().Contains(search.SearchField.ToUpper()));
                break;
            case "Product Name":
                result =  products.Where(p => p.ProductName.ToUpper().Contains(search.SearchField.ToUpper()));
                break;
        }
        return result;
    }
}

这是我Controller，我正在调用WebAPI。

(function () {
    "use strict";
    var app = angular.module("productManagement")

    var ProductListCtrl = function($scope, productResource) {
        var vm = this;

        vm.searchCriteria = {
            searchVariable: null,
            searchTerm: "Product Name"
        };
        productResource.query(function (data) {
            vm.products = data;
        });

        $("#searchBtn").click(function () {
            productResource.query({ search: vm.searchCriteria }, function (data) 
{
                vm.products = data;
            });
        });
        $("#searchCategories li").click(function (e) {
            e.preventDefault();
            var selText = $(this).text();
            vm.searchCriteria.searchTerm = selText;
            $scope.$apply();
        });

    }
    app.controller("ProductListCtrl", ["$scope", "productResource", ProductListCtrl]);
}());

我在UI上的搜索框中设置了我的searchCriteria对象。这就是用户界面的样子。

<div class="panel panel-primary"
 ng-controller="ProductListCtrl as vm">
<div class="panel-heading"
     style="font-size:large">
    <div class="span5" style="display: inline;">
        Product List
    </div>
    <div class="span2 pull-right" style="display: inline;">

        <label id="searchTerm" for="searchItem" style="font-size: large; font-weight: normal;">
            {{ vm.searchCriteria.searchTerm }} 
        </label>

        <input id="searchItem" type="search" style="color: #337ab7;" ng-model="vm.searchCriteria.searchVariable"/>
        <div class="btn-group btn-group-sm" style="vertical-align: top;">
            <button id="searchBtn" type="button" class="btn btn-default">Search</button>
            <button id="searchCategoryBtn" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" role="button" >
                <i class="caret"></i>
            </button>
            <ul id="searchCategories" class="dropdown-menu" role="menu">
                <li><a href="#">Product Code</a></li>
                <li><a href="#">Product Name</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="panel-body">
    <table class="table">
        <thead>
            <tr>
                <td><b>Product</b></td>
                <td><b>Code</b></td>
                <td><B>Available</b></td>
                <td><B>Price</b></td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="product in vm.products">
                <td>{{ product.productName}}</td>
                <td>{{ product.productCode }}</td>
                <td>{{ product.releaseDate | date }}</td>
                <td>{{ product.price | currency }}</td>
            </tr>
        </tbody>
    </table>
</div>

为什么我的WebAPI正在跳过我的第二个GET方法，当搜索参数明显放在我Controller的网址上时？问题不在于定义具有相同名称但不同参数的重复方法。这是关于WebAPI跳过第二个GET方法，因为在查看网址中的search参数是否与search匹配时，它无法识别search参数方法中的参数。

当我将public IEnumerable<Product> Get(String search)更改为public IEnumerable<Product> Get(SearchParameters search)时，会出现错误。

AngularJS与WebAPI，WebAPI获取方法被跳过

0 个答案: