Passing parameters from angularjs to Web API, angularjsapi

Passing parameters from angularjs to Web API, angularjsapi

Http://www.cnblogs.com/insus/p/7772022.htmlin angularjs call Web API, which was shared yesterday. Only data is retrieved from entityand postpostis is not obtained.

Today, we will share an example of passing parameters to the Web API to obtain data. In addition, data is stored in SQL. The number table structure was listed last night to help users solve the problem:

Create table [dbo]. [TA] ([Aid] NVARCHAR (20), [Avalue] NVARCHAR (30) goinsert into [dbo]. [TA] VALUES ('a1', 'a1value') gocreate table [dbo]. [TC] ([Cid] NVARCHAR (20), [Cvalue] NVARCHAR (30) goinsert into [dbo]. [TC] VALUES ('c1 ', 'c1value'), ('c2', 'c2value'), ('c3', 'c3value') gocreate table [dbo]. [TB] ([Bid] NVARCHAR (20), [Aid] NVARCHAR (20), [Cid] NVARCHAR (20) goinsert into [dbo]. [TB] VALUES ('b1', 'a1', 'c1'), ('b2', 'a1', 'c2'), ('b3 ', 'a1', 'c3') GOSource Code

A stored procedure is missing:

 

Create procedure [dbo]. [usp_Cq_SelectByTaKey] (@ Cid NVARCHAR (20) ASSELECT. [Aid], [Avalue], c. [Cid], [Cvalue] FROM [dbo]. [TB] AS bRIGHT JOIN [dbo]. [TC] AS c ON (B. [Cid] = c. [Cid]) right join [dbo]. [TA] AS a ON (B. [Aid] =. [Aid]) WHERE c. [Cid] = @ CidGOSource Code

After preparing the database, create a model:

Using System; using System. collections. generic; using System. linq; using System. web; namespace Insus. NET. models {public class Cq {private string _ Aid; public string Aid {get {return _ Aid;} set {_ Aid = value ;}} private string _ Avalue; public string Avalue {get {return _ Avalue;} set {_ Avalue = value;} private string _ Cid; public string Cid {get {return _ Cid ;} set {_ Cid = value ;}} private string _ Cvalue; public string Cvalue {get {return _ Cvalue ;}set {_ Cvalue = value ;}}}}Source Code

The model basically matches the field selected by your stored procedure.

Now we need to write an entity, which is a method for obtaining SQL data from the program:

Public IEnumerable <Cq> QueryResult (Cq cq) {sp. connectionString = DB. connectionString; sp. parameters = new List <Parameter> () {new Parameter ("@ Cid", SqlDbType. NVarChar,-1, cq. cid)}; sp. procedureName = "usp_Cq_SelectByTaKey"; DataTable dt = sp. executeDataSet (). tables [0]; return dt. toList <Cq> ();}Source Code

The following describes how to create a Web API:

 

Using System; using System. collections. generic; using System. linq; using System. net; using System. net. http; using System. web. http; using Insus. NET. models; using Insus. NET. entities; namespace Insus. NET. apis {public class CqApiController: ApiController {[Route ("api/CqApi/GetSearchResult")] [HttpPost] public IEnumerable <Cq> GetSearchResult (Cq cq) {DataEntity de = new DataEntity (); return de. queryResult (cq );}}}Source Code

Finally, we can reference this Web API on the front-end webpage:
Html is like this. Place a text box for users to input parameters. A button for the user to request or query the database. The result is also displayed in a tabel:

 

<Div ng-app = "CqApp" ng-controller = "CqCtrl"> <input id = "Text1" type = "text" ng-model = "Cid"/> <input id = "Button1" type = "button" value = "button" ng-click = "QuerySearch (); "/> <table cellpadding =" 0 "cellspacing =" 0 "> <tr> <th> Aid </th> <th> Avalue </th> <th> Cid </th> <th> Cvalue </th> </tr> <tbody ng-repeat = "c in Cqs"> <tr> <td >{{ c. aid }}</td> <td >{{ c. avalue }}</td> <td >{{ c. cid }}</td> <td >{{ c. cvalue }}</td> </tr> </tbody> </table> </div>Source Code

 

Angularjs code:

 

Var oApp = angular. module ('cqapp', []) oApp. controller ('cqctrl ', function ($ scope, $ http) {$ scope. querySearch = function () {var obj = {}; obj. cid = $ scope. cid; $ http ({method: 'post', url: '/api/CqApi/getsearchresult', dataType: 'json', headers: {'content-type ': 'application/json; charset = UTF-8 '}, data: JSON. stringify (obj ),}). then (function (response) {$ scope. cqs = response. data ;});};});Source Code

Demo: