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語句寫的如今都不用了，只能慢慢學了。歡迎有緣看到的朋友指出不足，共同窗習！很久沒有寫博客了，月到十五光明少，人到中年萬事休。 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程