Asp.Net MVC WebAPI的建立与前台Jquery ajax后台HttpClient调用详解

时间 2019-12-18

标签 asp.net asp mvc webapi 建立前台 jquery ajax 后台 httpclient 调用详解栏目 ASP 繁體版

原文原文链接

一、什么是WebApi，它有什么用途？

Web API是一个比较宽泛的概念。这里咱们提到Web API特指ASP.NET MVC Web API。在新出的MVC中，增长了WebAPI，用于提供REST风格的WebService，新生成的WebAPI项目和典型的MVC项目同样，包含主要的Models、Views、Controllers等文件夹和Global.asax文件。Views对于WebAPI来讲没有太大的用途，Models中的Model主要用于保存Service和Client交互的对象，这些对象默认状况下会被转换为Json格式的数据迚行传输，Controllers中的Controller对应于WebService来讲是一个Resource，用于提供服务。和普通的MVC同样，Global.asax用于配置路由规则，我的的理解MVC控制器中通常方法返回的是一个视图而Api返回的是数据，能够是List、Json等格式。对于WebAPI来讲它最初被设计为和WCF同样的客户端口、服务端口两套结构咱们到如今尚未提到客户端口是由于咱们的请求别的方式来封装成HTTP请求接收收HTTP相应的好比AJAX和Form表单提交。接下来咱们用VS2017新建一个webApi项目。javascript

二、打开VS2017 点文件-----> 新建---->项目。快捷键（Ctrl+Shift+N）

Web里面的Asp.Net Web 应用程序css

上面必定要选Web API 。项目建好了我先作一个从数据库取出数据在调用的栗子。html

三、在控制器文件夹右键---->添加---->控制器。选择Web API2 Controller Empty点肯定取名Customer 由于后面要操做数据库这张表，点add完成

这时候App_Satrt文件夹下面多了一个文件WebApiConfig.cs，这个文件是它的路由java

因为之前都是用原生的sql访问数据库因此如今也说一下原生的sql 在asp.net MVC中的使用不用EF链接后面也使用EFjquery

四、在Models文件夹下面创建模型类Customer类与SqlDB类，这里没有分三层架构就简单的写在一块儿了理解就行（SqlDB类这里有《Asp.Net中对操做Sql Server 简单处理的SqlDB类》）

  public class Customer
    {
        //ID
        public int ID { get; set; }
        //姓名
        public string Name { get; set; }
        //学号
        public string Number { get; set; }
        //性别1男2女
        public int Sex { get; set; }
        //院系
        public string Department { get; set; }
        //专业
        public string Manjor { get; set; }
        //年级
        public int Class { get; set; }
        //联系方式
        public string Mobile { get; set; }

    }

在项目的web.config配置文件里面必定要加数据库链接字符串配置web

<connectionStrings>
    <!--链接字符串-->
    <add name="SqlConn" connectionString=" Data Source=.;Initial Catalog=OneCardSystem;Integrated Security=True" />
  </connectionStrings>

五、在API控制器里面写个方法返回List类型的数据

这个API控制器必定是继承ApiController这个控制器的ajax

 public class CustomerController : ApiController
    {
        Customer customer = new Customer();
        public List<Customer> GetCustomerAll()
        {
            //sql语句
            string _sql = "Select * from Customer";
            //实例SqlDB类
            SqlDB sb = new SqlDB();
            //定义List储存
            List<Customer> list = new List<Customer>();
            //获取数据
            var data = sb.ExecuteDataSet(_sql).Tables[0].Rows;
            //遍历data
            foreach(DataRow item in data)
            {
                var customer = new Customer()
                {
                    //对应字段
                    ID = Convert.ToInt32(item["ID"].ToString()),
                    Number= item["Number"].ToString(),
                    Name= item["Name"].ToString(),
                    Manjor= item["Manjor"].ToString(),
                    Mobile= item["Mobile"].ToString()
                };
                //逐条添加到list里面
                list.Add(customer);
            }
            //返回list
            return list;
        }
    }

六、运行项目默认来到Home控制器所对应的视图在地址栏后面加上/api/Customer/GetCustomerAll 就能够看到数据了这个是在谷歌浏览器上面看到的结果，不一样的浏览器有不一样的效果有时间本身试试看，API控制器访问主要的就是在端口后面加上/api/控制器/方法名，后面有参数的接上参数跟mvc通常的控制器个人理解就是就多了api的前缀

七、如今在浏览器里面能够直接调用这个api了，接下来在一个项目中Home所对应的Index视图里面咱们用前台技术（jQuery getJSON）访问调用一下试试

把引用的布局我却是删除了，Views文件夹下面的_ViewStart.cshtml 删除了 Index.cshtml里面的的内容也删了 sql

代码在下面别忘了引用JS数据库

<!DOCTYPE html>
<html lang="en">
<head>
    <title>ASP.NET Web API</title>
    <script type="text/javascript" src="~/Scripts/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.getJSON("/api/Customer/GetCustomerAll", function (data) {
               // console.log(data);
                $.each(data, function (key, val) {
                    $("#batMain").append("<tr><td>" + data[key].ID + "</td><td>" + data[key].Name + "</td><td>" + data[key].Number + "</td><td>" + data[key].Manjor + "</td><td><a class='tabEdit'>编辑</a>&nbsp;&nbsp;&nbsp;<a class='tabDele'>删除</a></td></tr>");
                    Op();
                });
            });
            $("#btnSave").click(function () {
                var id = $("#txtID").val();
                var Name = $("#txtName").val();
                var Number = $("#txtNumber").val();
                var Manjor = $("#txtManjor").val();
                var customer = {
                    ID:id,
                    Name:Name,
                    Number:Number,
                    Manjor:Manjor
                }
                $.ajax({
                    type: "post",
                    url: "/api/Customer/Edit",
                    // data: { "id": id, "Name": Name, "Number": Number, "Manjor": Manjor },
                    data: JSON.stringify(customer),
                    contentType:"application/json",
                    success: function (data) {
                        console.log(data);
                    },
                    error: function () {
                    }
                });
            });
        });
        function Op() {
            var id = "";
            var row
            var tab = document.getElementById("batMain");
            var edit = $(".tabEdit");
            var dele = $(".tabDele");
            for (var i = 0; i < edit.length; i++) {
                edit[i].onclick = function () {
                    row = this.parentNode.parentNode.rowIndex;
                    id = $("#batMain tr:eq(" + row + ") td:eq(0)").html();
                    $("#txtID").val($("#batMain tr:eq(" + row + ") td:eq(0)").html());
                    $("#txtName").val($("#batMain tr:eq(" + row + ") td:eq(1)").html());
                    $("#txtNumber").val($("#batMain tr:eq(" + row + ") td:eq(2)").html());
                    $("#txtManjor").val($("#batMain tr:eq(" + row + ") td:eq(3)").html());
                }
            }
        }
    </script>
    <style type="text/css">
        table{width:100%;}
        table tr td{text-align:center; line-height:20px; height:25px; min-width:80px;  border:1px solid #d0cfcf;word-wrap:break-word;word-break:break-all;}
        a{list-style:none;font-size:12px;font-weight:600; color:#072af7;}
        a:hover{cursor:pointer}
        .trOne{background:rgb(202, 200, 212); line-height:40px; font-size:14px; font-weight:600;}
    </style>
</head>
<body id="body">
    <div style="width:90%; margin: 0 auto;">
        <h1>学生信息</h1>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td width="20%"><input type="text" id="txtID" readonly="readonly" /></td>
                <td width="20%"><input type="text" id="txtName" /></td>
                <td width="20%"><input type="text" id="txtNumber" /></td>
                <td width="20%"><input type="text" id="txtManjor" /></td>
                <td width="20%"><input type="button" id="btnSave" value="肯定" /></td>
            </tr>
        </table>
        <table cellpadding="0" cellspacing="0" id="batMain">
            <tr class="trOne">
                <td width="20%">ID</td>
                <td width="20%">姓名</td>
                <td width="20%">学号</td>
                <td width="20%">专业</td>
                <td width="20%">操做</td>
            </tr>
        </table>
    </div>
</body>
</html>

看看效果json

这里的编辑删除操做我尚未作完，不过通常的asp.net mvc我里面用的是ajax请求后台这个不是请求API只是处理通常的增删查改，这里记录一下传值的问题

dada里面能够是// data: { "id": id, "Name": Name, "Number": Number, "Manjor": Manjor },这样的格式后台获取直接用Request["ID"] 这样子就能够获取了。也能够在方法里面定义对应的参数，参数名要跟data里面的同样

也能够传值成一个对象过去 data: JSON.stringify(customer), 这样后台接收 var stream = HttpContext.Request.InputStream; string JsonStr = new StreamReader(stream).ReadToEnd(); 而后本身解析一下

若是要在请求的API里面传参数我只能传一个ID 其余的尚未研究要传对象过去的话还要在方法里面加上 ([FromBody] Customer ct)这样

八、在后台经过HttpClient调用API 我作练习的时候是用两个项目一个运行着另外一个调用这个如今我弄在一个项目里面用控制器来请求。新建一个控制器Show右键Index添加视图Index.cshyml

  public class ShowController : Controller
    {
        // GET: Show
        public ActionResult Index()
        {
            //获取端口
            string url= Request.Url.ToString();
            var httpClient = new HttpClient();
            var data= httpClient.GetAsync(url+ "api/Customer/GetCustomerAll").Result.Content.ReadAsStringAsync().Result;//调用API
            System.Web.Script.Serialization. JavaScriptSerializer Serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
            List<Customer> objs = Serializer.Deserialize<List<Customer>>(data);//Json反序列化成List

            // Customer cs = JsonConvert.DeserializeObject<Customer>(cg.ReturnData);
            //, JsonRequestBehavior.AllowGet
            return View(objs);
        }
    }

视图

对应的代码

@{
    ViewBag.Title = "Index";
}
@using WebApiTest.Models;
@model List<Customer>

<html lang="en">
<head>
    <title>调用API</title>
    <style type="text/css">
        table{width:100%;}
        table tr td{text-align:center; line-height:20px; height:25px; min-width:80px;  border:1px solid #d0cfcf;word-wrap:break-word;word-break:break-all;}
        a{list-style:none;font-size:12px;font-weight:600; color:#072af7;}
        a:hover{cursor:pointer}
        .trOne{background:rgb(202, 200, 212); line-height:40px; font-size:14px; font-weight:600;}
    </style>
</head>
<body id="body">
    <br />
    <div style="width:90%; margin: 0 auto;">

        <table>
            <tr class="trOne">
                <td width="20%">ID</td>
                <td width="20%">姓名</td>
                <td width="30%">学号</td>
                <td width="30%">专业</td>
            </tr>
            @{ 
                if(Model.Count>0)
                {
                    foreach(var item in Model)
                    {
                        <tr>
                            <td>@item.ID</td>
                            <td>@item.Name</td>
                            <td>@item.Number</td>
                            <td>@item.Manjor</td>
                        </tr>
                    }
                }
            }
        </table>
    </div>
</body>
</html>

注意应用using System.Web.Script.Serialization; 没有的话来这里找

修改路由配置指向Show 控制器运行项目你会看到

九、遇到的问题：

若是这里你要返回一个Json数据记得添加 return（objs, JsonRequestBehavior.AllowGet）写成这样具体什么错我也忘记了 JsonResult也是同样的new 的时候同样的添加后面的

若是在不一样的项目中调用还要在配置文件里面加下面的代码加在<system.webServer>里面实在写API的项目的配置文件里面

<!--跨域配置-->
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Max-Age" value="30" />
        <add name="Access-Control-Allow-Methods" value="GET,POST,OPTIONS" />
        <add name="Access-Control-Allow-Headers" value="Content-Type, Accept" />
      </customHeaders>
    <tpProtocol>
    <handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <remove name="OPTIONSVerbHandler" />
      <remove name="TRACEVerbHandler" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>

要是调试的时候出错发现请求的路径会自动的加上一个Home 在api前面记得在api里面类名前面加 [RoutePrefix("Api/Customer")]

十、总结：原本的需求是要调用人家的API数据库记录调用的地址、时间、返回的数据这些，就先弄弄，EF、Linq拉姆达这些后面有时间在弄吧我弄了一点不是很理解在这里仍是个小白，之前都是用原生的Sql语句写的如今都不用了，只能慢慢学了。欢迎有缘看到的朋友指出不足，共同窗习！很久没有写博客了，月到十五光明少，人到中年万事休。