ASP. NET Web API accepts the QueryString of AngualrJS in two ways,

ASP. NET Web API accepts the QueryString of AngualrJS in two ways,

 

How does ASP. NET Web API accept QueryString from AngualrJS? There are two ways to experience this article.

 

Method 1: http: // localhost: 49705/api/products? Search = GDN

 

This is the native format of QueryString.

 

First, put the current domain name and port number in a custom module.

 

1 (function () {2     "use strict";3 4     angular.module("custommodule", ["ngResource"])5         .constant("appSettings", {6             serverPath: "http://localhost:49705/"7         });8 }());

 

The above depends on the module ngResource, which is in the angular-resource.js file, note that you need to reference this file.

 

Then, create a custom service for custommodule through the factory method.

 

(Function () {"use strict"; // creates a service angular in factory mode. module ("custommodule "). factory ("productResource", ["$ resource", "appsetsouce", productResouce]); function productResouce ($ resource, appsetce) {return $ resource (appsetce. serverPath + "/api/products ");}}());

 

Above, the productResource service returns the complete API Request Path encapsulated by $ resource.

Now, a controller needs to use the productResource service.

 

(function () {    "use strict";    angular        .module("productManagement")        .controller("ProductListCtrl",                     ProductListCtrl);    function ProductListCtrl(productResource) {        var vm = this;        vm.searchCriteria = "GDN";        productResource.query({search: vm.searchCriteria},function (data) {            vm.products = data;        });    }}());

 

Above, the QueryString named search is sent from the front end.

 

In the backend ASP. NET Web API, the parameter name of the action method must be search.

 

public IEnumerable<Product> Get(string search){    var productRepository = new ProductRepository();    var products = productRepository.Retrieve();    return products.Where(p => p.ProductCode.Contains(search));}

 

The WebApiConfig class corresponds to the following settings:

 

config.Routes.MapHttpRoute(    name: "DefaultApi",    routeTemplate: "api/{controller}/{id}",    defaults: new { id = RouteParameter.Optional });

 

In this case, the frontend is http: // localhost: 49705/api/products? Search = GDN.

 

What if we want to request data through http: // localhost: 49705/api/products/GDN?

 

Method 2: http: // localhost: 49705/api/products/GDN

 

Some routing settings are required for this method.

 

AngularJS needs to know that the value passed after products/is assigned to the QueryString of search.

 

You also need to let ASP. NET Web API know that after reading the value after products/, You need to assign the value to the search variable in the route.

 

How can we make AngularJS routes conform to the format?

 

function productResouce($resource, appSettings) {    return $resource(appSettings.serverPath + "/api/products/:search");}

 

How can the routes of ASP. NET Web APIs correspond to those of AngualrJS?

 

First, you must allow the QueryString in the route.

 

config.Routes.MapHttpRoute(    name: "DefaultApi",    routeTemplate: "api/{controller}/{search}",    defaults: new { search = RouteParameter.Optional });

 

Then, the QueryString of search is accepted in the Action method.

 

public IEnumerable<Product> Get(string search){    var productRepository = new ProductRepository();    var products = productRepository.Retrieve();    return products.Where(p => p.ProductCode.Contains(search));}

 

In this case, the frontend requests are http: // localhost: 49705/api/products/GDN.

Summary:

 

● To obtain the QueryString by default, you only need to ensure that the query variables in the front and back sections are consistent. For example, the search
● If you want to obtain QueryString in a custom format such as/, the front-end AngualrJS must define a route in a way similar to/api/products/: search, and the backend ASP. NET Web API also needs to use search as a variable in the routing, in config. routes. set in MapHttpRoute Method