从angularjs传递参数至Web API

2021-05-02 00:27

阅读：488

标签：js代码 var inpu content turn $scope return response new

昨天分享的博文《angularjs呼叫Web API》http://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 QueryResult(Cq cq)
        {
            sp.ConnectionString = DB.ConnectionString;
            sp.Parameters = new List() {
                                    new Parameter("@Cid", SqlDbType.NVarChar,-1,cq.Cid)
            };
            sp.ProcedureName = "usp_Cq_SelectByTaKey";
            DataTable dt = sp.ExecuteDataSet().Tables[0];
            return dt.ToList();
        }

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 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>Aidth>
                th>Avalueth>
                th>Cidth>
                th>Cvalueth>
            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

标签：js代码 var inpu content turn $scope return response new

原文地址：http://www.cnblogs.com/insus/p/7776613.html

上一篇：C# 通过url地址获取页面内容

下一篇：c# winform 关于DataGridView的一些操作

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：从angularjs传递参数至Web API
文章链接：http://soscw.com/index.php/essay/81096.html

亲，登录后才可以留言！

从angularjs传递参数至Web API

评论

热门文章

推荐文章

最新文章

置顶文章