昨天分享的博文《angularjs呼叫Web APIhttp://www.cnblogs.com/insus/p/7772022.html,只是从Entity获取数据,没有进行参数POST。

今天分享一个例子,是传递参数至Web API来获取数据的。而且数据是存储在SQL中。数表结构是昨晚帮助网友解解决问题列举的:

CREATE TABLE [dbo].[TA]
(
[Aid] NVARCHAR(20),
[Avalue] NVARCHAR(30)
)
GO
INSERT INTO [dbo].[TA] VALUES('A1','A1value')
GO CREATE TABLE [dbo].[TC]
(
[Cid] NVARCHAR(20),
[Cvalue] NVARCHAR(30)
)
GO
INSERT INTO [dbo].[TC] VALUES('C1','C1value'),('C2','C2value'),('C3','C3value')
GO CREATE TABLE [dbo].[TB]
(
[Bid] NVARCHAR(20),
[Aid] NVARCHAR(20),
[Cid] NVARCHAR(20)
) GO
INSERT INTO [dbo].[TB] VALUES ('B1','A1','C1'),('B2','A1','C2'),('B3','A1','C3')
GO

Source Code

还缺少一个存储过程:

CREATE PROCEDURE [dbo].[usp_Cq_SelectByTaKey]
(
@Cid NVARCHAR(20)
)
AS
SELECT a.[Aid],[Avalue],c.[Cid],[Cvalue] FROM [dbo].[TB] AS b
RIGHT JOIN [dbo].[TC] AS c ON (b.[Cid] = c.[Cid])
RIGHT JOIN [dbo].[TA] AS a ON (b.[Aid] = a.[Aid])
WHERE c.[Cid] = @Cid
GO

Source Code

数据库方面准备完毕,接下来是创建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

模型与你的存储过程所SELECT的字段基本上匹配即可。

现在我们要写一个实体,是从程序中获取SQL的数据方法:

public IEnumerable<Cq> QueryResult(Cq cq)
{
sp.ConnectionString = DB.ConnectionString;
sp.Parameters = new List<Parameter>() {
new Parameter("@Cid", SqlDbType.NVarChar,-,cq.Cid)
};
sp.ProcedureName = "usp_Cq_SelectByTaKey";
DataTable dt = sp.ExecuteDataSet().Tables[];
return dt.ToList<Cq>();
}

Source Code

下面是本篇的重点,创建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

最后我们再实现在前端网页去引用此Web API:
html是这样子的,放置一个文本框,让用户输入参数。一个铵钮,让用户请求或查询数据库。还有把结果呈现在一个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代码:

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

演示:

从angularjs传递参数至Web API的更多相关文章

  1. [译]ABP框架使用AngularJs,ASP.NET MVC,Web API和EntityFramework构建N层架构的SPA应用程序

    本文转自:http://www.skcode.cn/archives/281 本文演示ABP框架如何使用AngularJs,ASP.NET MVC,Web API 和EntityFramework构建 ...

  2. ABP 教程文档 1-1 手把手引进门之 AngularJs, ASP.NET MVC, Web API 和 EntityFramework(官方教程翻译版 版本3.2.5)含学习资料

    本文是ABP官方文档翻译版,翻译基于 3.2.5 版本 转载请注明出处:http://www.cnblogs.com/yabu007/  谢谢 官方文档分四部分 一. 教程文档 二.ABP 框架 三. ...

  3. 完成AngularJS with MVC 5, Web API 2项目

    经过接近两个月的日夜奋战,完成AngularJS with MVC 5, Web API 2的项目,这也是进入公司以后最大的一个项目,从项目需求.用户Prototype/Demo,招人,开发完成,可谓 ...

  4. Angularjs 通过asp.net web api认证登录

    Angularjs 通过asp.net web api认证登录 Angularjs利用asp.net mvc提供的asp.net identity,membership实现居于数据库的用户名/密码的认 ...

  5. 前端AngularJS后端ASP.NET Web API上传文件

    本篇体验使用AngularJS向后端ASP.NET API控制器上传文件.    首先服务端: public class FilesController : ApiController { //usi ...

  6. POST多个参数到Web API控制器

    交互基于Json的方式打包传递就不介绍了,主要设置请求头为 contentType: "application/json", //必须有 数据位Json格式的字符串,在服务器端定义 ...

  7. Axios 各种请求方式传递参数(非axios api 请求方式)

    get delete 方法较为不同 get请求方式将需要入参的数据作为 params 属性的值,最后整体作为参数传递 delete请求方式将将需要入参的数据作为 data 属性的值,最后整体作为参数传 ...

  8. 传递多个参数并获取Web API的数据

    近段时间学习Web Api觉得非常有意思.默认的路由情况之下,获取数据时,它不必指定Action操作名. 还有另外感想,就是自从学习asp.net MVC之后,加上jQuery,让Insus.NET已 ...

  9. Web API的参数、多版本和Filter

    一.关于API的参数a) Web API在WebApiConfig.cs中配置了路由模板,默认为"api/{controller}/{id}",这与MVC路由模板的区别在于没有{a ...

随机推荐

  1. 转:drupal常用api

    drupal常用api   最短的函数 // 语言字串,除了可以获取对应语言外,还可以设置字串变量.可以是!var, @var或 %var,%var就添加元素外层.@var会过滤HTML,!var会原 ...

  2. Java字符串占位符(commons-text)替换(转载)

    Java字符串占位符(commons-text)替换 https://blog.csdn.net/varyall/article/details/83651798 <dependency> ...

  3. 活字格 QQ 群和客户

    上活字格的官网溜达了一圈,有2点收获: 1. 活字格基础教学 QQ 群 这个群居然有1790人!好大的一个群,是不是说明学活字格的人也多呢,我潜水几天看看先 2. 活字格的用户真是各行各业都有,看到他 ...

  4. loadrunner 运行场景-运行时设置

    运行场景-运行时设置 by:授客 QQ:1033553122 A.   查看.修改单个脚本的运行时设置 a)   途径1: Scenario Groups.Scenario Groups Script ...

  5. loadrunner 场景设计-设置结果文件保存路径

    场景设计-设置结果文件保存路径 by:授客 QQ:1033553122 Results->Results settings Results Name 结果文件夹名称 Directory 指定结果 ...

  6. Linux下内存查看命令

    在Linux下面,我们常用top命令来查看系统进程,top也能显示系统内存.我们常用的Linux下查看内容的专用工具是free命令. Linux下内存查看命令free详解: 在Linux下查看内存我们 ...

  7. IP Core 分类

    IP(Intelligent Property)核是具有知识产权核的集成电路芯核总称,是经过反复验证过的.具有特定功能的宏模块,与芯片制造工艺无关,可以移植到不同的半导体工艺中.到了SOC阶段,IP核 ...

  8. chrony时间服务器

    chrony有着比ntp服务器更好的优势来同步服务,在集群架构中,采用此种服务来同步时间也是最好的方式. 在集群环境中,一般都是一个服务器,然后上百个客户端来同步服务端的时间,接下来我们看看如何配置. ...

  9. Jersey常用注解解释 @DET、@PUT、@POST 、@DELETE等

    uri : ... /resource/{id} public voide method(@PathParam("id") String userId){} uri :  .../ ...

  10. MySQL InnoDB Update和Crash Recovery流程

    MySQL InnoDB Update和Crash Recovery流程 概要信息 首先介绍了Redo,Undo,Log Sequence Number (LSN),Checkpoint,Rollba ...