zoukankan      html  css  js  c++  java
  • jQueryMobile 網頁使用 ASP.NET Web API 服務

    微軟的 ASP.NET Web API 框架,能以 RESTful 輕量級的架構風格,建立 HTTP 服務,讓多種不同的用戶端,如: 手機、平板、電腦(PC),透過 HTTP 的 GET、POST、PUT、DELETE 方法來「存取(访问)」服務。

    而 jQuery Mobile 框架,設計的目標,是希望能統一,市面上常見的手機、平板...等各種行動裝置。其特性如下:

    • 以 jQuery 為核心
    • 支援 HTML 5
    • 支援滑鼠(鼠标)、手指的觸碰事件
    • 內建多種佈景主題
    • 內建豐富的 UI 控制項(控件)
    • 和微軟的 ASP.NET MVC、Visual Studio 整合容易
    • 支援市面上大部分的行動裝置
    • 具備跨平台的相容性

    本文提供一個可執行的範例下載,用 HTML 網頁 + jQuery Mobile,呼叫(调用) ASP.NET Web API 上的服務。

    範例裡的 ASP.NET Web API 專案(project;项目),已透過 NuGet 安裝 CORS (Cross Origin Resource Sharing, 跨原始資源共用) [4]。

    架構如下圖 1,執行畫面如下圖 2、圖 3。


    圖 1 本文程式範例的架構

    -------------------------------------------------
    本文的程式範例下載:
    https://files.cnblogs.com/files/WizardWu/190223.zip

    Client-side: Index.html、Details.html
    Server-side: ASP.NET Web API
    ---------------------------------------------------


    圖 2 本文範例 Index.html 的執行畫面


    圖 3 本文範例 Details.html 的執行畫面

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <title>Index</title>
     5     <meta name="viewport" content="width=device-width, initial-scale=1">
     6     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
     7     <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
     8     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
     9     <script>
    10         $(document).on('pageinit', "#Page1", createEmployee);
    11 
    12         function createEmployee() {
    13             var IpAndPort = "http://192.168.0.10:8012"; //欲呼叫的 WebAPI 網址
    14 
    15             //$.getJSON("/api/EmployeesAPI",
    16             $.getJSON(IpAndPort + "/api/EmployeeAPI",
    17                 function (data) {
    18                     //先清空 ListView 容器的內容
    19                     $("#listviewContainer").empty();
    20 
    21                     //「動態」建立 ListView 主標籤
    22                     $lv = $("<ul/>");
    23 
    24                     $.each(data, function (key, val) {
    25                         //建立超連結,位址指定到 Details 並帶參數「員工ID」過去
    26                         $anchorDetails = $("<a>");
    27                         $anchorDetails.attr("href", "Details.html?ID=" + val.ID);
    28                         
    29                         //Ajax 要關掉。不然到 create 不能 Run pageinit
    30                         $anchorDetails.attr("data-ajax", "false");
    31                         $anchorDetails.text(val.Name + ", " + val.Age + "歲, " + val.Department);
    32 
    33                         //建立刪除用的第二組超連結。按下去會呼叫 deleteEmoloyee 方法,並傳參數 ID (刪除功能,尚未實作)
    34                         $anchorDel = $("<a>");
    35                         $anchorDel.attr("onclick", "deleteEmployee(" + val.ID + ")");
    36                         $anchorDel.attr("data-icon", "delete");
    37                         
    38                         //I: append: 小括號內的物件,附加到前方物件
    39                         //將超連結標籤,附加到 li 裡面,再附加到 ul
    40                         $("<li/>").append($anchorDetails).append($anchorDel).appendTo($lv);
    41                     });
    42 
    43                     //將 ListView主標籤,附加至容器 listviewContainer
    44                     $lv.appendTo("#listviewContainer");
    45 
    46                     //全部元素附加完後,呼叫 ListView 的 plugin,以動態產生 ListView
    47                     $lv.listview();
    48                 }
    49             )
    50         }
    51 
    52         function deleteEmployee(id) {
    53             alert("刪除功能,尚未實作");
    54         }
    55     </script>
    56 </head>
    57 <body>
    58     <div data-role="page" id="Page1">
    59         <div data-role="header" data-theme="d">
    60             <h1>jQuery Mobile</h1>
    61             <h1>人事系統</h1>
    62         </div>
    63         <div data-role="content">
    64             <a href="#" data-icon="plus" data-ajax="false" data-role="button">新增員工</a>
    65             <br />
    66             <div id="listviewContainer"></div>
    67         </div>
    68         <div data-role="footer" data-theme="d">
    69             <h1>Copyright@2019 WizardWu公司</h1>
    70             <h1>All Rights Reserved</h1>
    71         </div>
    72     </div>
    73 </body>
    74 </html>
    Client-side: Index.html
     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4   <title>Details</title>
     5   <meta name="viewport" content="width=device-width, initial-scale=1" />
     6   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
     7   <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
     8   <script>
     9     $(document).on('pageinit',"#Page1", function () {
    10       //var id = @ViewBag.id;
    11       var IpAndPort = "http://192.168.0.10:8012"; //欲呼叫的 WebAPI 網址
    12       
    13       $.getJSON(IpAndPort + "/api/EmployeeAPI/" +  window.location.search.substr(4),
    14          function (data) {
    15            $("<li/>").text("編號 : " + data.ID).appendTo("#listviewContainer");
    16            $("<li/>").text("姓名 : " + data.Name).appendTo("#listviewContainer");
    17            $("<li/>").text("年齡 : " + data.Age).appendTo("#listviewContainer");
    18            $("<li/>").text("部門 : " + data.Department).appendTo("#listviewContainer");
    19            $("#listviewContainer").listview();
    20          });
    21     });
    22   </script>
    23   <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    24 </head>
    25 <body>
    26   <div data-role="page" id="Page1">
    27     <div data-role="header" data-theme="d">
    28         <h1>jQuery Mobile</h1>
    29         <h1>人事系統</h1>
    30       <a data-rel="back">上一頁</a>
    31     </div>
    32     <div data-role="content">
    33       <ul id="listviewContainer">
    34       </ul>
    35     </div>
    36     <div data-role="footer" data-theme="d">
    37         <h1>Copyright@2019 WizardWu公司</h1>
    38         <h1>All Rights Reserved</h1>
    39     </div>
    40   </div>
    41 </body>
    42 </html>
    Client-side: Details.html
     1 using System.Web.Http.Cors;
     2 using Server_AspNetWebAPI.Models;
     3 
     4 namespace Server_AspNetWebAPI.Controllers
     5 {
     6     public class EmployeeAPIController : ApiController
     7     {
     8         static EmployeeRepository rep = new EmployeeRepository();
     9 
    10         // GET api/<controller>
    11         //要連接的 client 網址、port number
    12         //[EnableCors(origins: "http://192.168.0.10:8012", headers: "*", methods: "*")]
    13         [EnableCors(origins: "*", headers: "*", methods: "*")]
    14         [AcceptVerbs("GET", "POST")]
    15         public List<Employee> GetEmployees()
    16         {            
    17             return rep.GetEmployees();
    18         }
    19 
    20         // GET api/<controller>/5
    21         [EnableCors(origins: "*", headers: "*", methods: "*")]
    22         [AcceptVerbs("GET", "POST")]
    23         public Employee GetEmployeeById(int id)
    24         {
    25             Employee emp = rep.GetEmployeeById(id);
    26 
    27             if (emp == null)
    28             {
    29                 throw new HttpResponseException(
    30                   System.Net.HttpStatusCode.NotFound);
    31             }
    32 
    33             return emp;
    34         }
    35 
    36         // POST api/<controller>
    37         [EnableCors(origins: "*", headers: "*", methods: "*")]
    38         [AcceptVerbs("POST")]
    39         public HttpResponseMessage CreateEmployee(Employee emp) //Post 新增
    40         {
    41             emp = rep.Add(emp);
    42             var response = Request.CreateResponse<Employee>(
    43               HttpStatusCode.Created, emp);
    44 
    45             string uri = Url.Link("DefaultApi", new { id = emp.ID });
    46 
    47             response.Headers.Location = new Uri(uri);
    48             return response;
    49         }
    50 
    51         // PUT api/<controller>/5
    52         [EnableCors(origins: "*", headers: "*", methods: "*")]
    53         [AcceptVerbs("PUT")]
    54         public void EditEmployee(int id, Employee emp) //Put 修改
    55         {
    56             emp.ID = id;
    57             if (!rep.Update(emp))
    58             {
    59                 throw new HttpResponseException(
    60                   HttpStatusCode.NotFound);
    61             }
    62         }
    63 
    64         // DELETE api/<controller>/5
    65         [EnableCors(origins: "*", headers: "*", methods: "*")]
    66         [AcceptVerbs("DELETE")]
    67         public HttpResponseMessage DeleteEmployee(int id) //Delete 刪除
    68         {
    69             rep.Delete(id);
    70             return new HttpResponseMessage(
    71               HttpStatusCode.NoContent);
    72         }
    73     }
    74 
    75 }
    Server-side: ASP.NET Web API, EmployeeAPIController.cs
     1 using System;
     2 using System.Collections.Generic;
     3 using System.Linq;
     4 using System.Web;
     5 
     6 namespace Server_AspNetWebAPI.Models
     7 {
     8     public class EmployeeRepository
     9     {
    10         List<Employee> emps = new List<Employee>();
    11 
    12         public EmployeeRepository()
    13         {
    14             Add(new Employee() { ID = 1, Name = "王小明", Age = 22, Department="業務部" });
    15             Add(new Employee() { ID = 2, Name = "李大華", Age = 33, Department = "資訊部" });
    16             Add(new Employee() { ID = 3, Name = "黃世傑", Age = 44, Department = "會計部" });
    17         }
    18 
    19         public List<Employee> GetEmployees()
    20         {
    21             return emps;
    22         }
    23 
    24         public Employee GetEmployeeById(int id)
    25         {
    26             //var emp = emps.FirstOrDefault(e => e.ID == id);
    27             //if (emp == null)
    28             //    return System.Web.Http.Results.NotFoundResult();
    29 
    30             return emps.Find((x) => x.ID == id);
    31         }
    32 
    33         public Employee Add(Employee emp)
    34         {
    35             emps.Add(emp);
    36             return emp;
    37         }
    38 
    39         public void Delete(int id)
    40         {
    41             Employee emp = emps.Find((x) => x.ID == id);
    42             emps.Remove(emp);
    43         }
    44 
    45         public bool Update(Employee emp)
    46         {
    47             int idx = emps.FindIndex(x => x.ID == emp.ID);
    48             if (idx == -1)            
    49                 return false;
    50             emps.RemoveAt(idx);
    51             emps.Add(emp);
    52             return true;
    53         }
    54     }
    55 }
    Server-side: ASP.NET Web API, EmployeeRepository.cs

    ----------------------------------------------------------------------------------------------------------------------------------------
    再延伸改寫

    若 Client-side 使用的網頁,是用 ASP.NET MVC 開發,其可自動偵測使用者的上網裝置,為電腦或手機 (可再細分 Android 或 iPhone 系統),再自動調用該裝置,專用的 View 檢視 (.cshtml)。

    因為 ASP.NET MVC 已內建 Display Modes 功能,可從瀏覽器送出 Request Header 裡的 User-Agent 字串,判斷是從 PC、手機、iPhone、iPad、Android 裝置送出的請求,再自動調用該裝置的 View 檢視。

    本文 Client-side 的範例,可依 ASP.NET MVC 此功能,再進一步改寫,架構如下圖 4。


    圖 4 本文範例可再延伸改寫的架構


    圖 5 ASP.NET MVC 可自動判斷是從 PC、手機,所送出的請求,再自動調用該裝置的 View 檢視

    ----------------------------------------------------------------------------------------------------------------------------------------
    參考書籍:

    [1] 網頁程式設計 ASP.NET MVC 5.x 範例完美演繹 (繁體中文書籍), 作者:奚江華
    ISBN 13 /9789864769292
    ISBN 10 /9864769294
    http://www.eslite.com/product.aspx?pgid=1001113692716652&kw=%e5%a5%9a%e6%b1%9f%e8%8f%af&pi=0
    http://m.sanmin.com.tw/Product/index/006956107

    [2] jQuery Mobile 與 ASP.NET 實戰開發:跨平台行動介面與網頁應用程式設計 (繁體中文書籍, 已絕版), 作者:許薰尹、周季賢, Ch 12
    ISBN13:9789865912307
    http://www.sanmin.com.tw/Product/index/003707391

    [3] Sams Teach Yourself jQuery Mobile in 24 Hours
    https://www.amazon.com/Teach-Yourself-jQuery-Mobile-Hours/dp/0672335948

    ----------------------------------------------------------------------------------------------------------------------------------------
    參考資料:

    [4] Enable cross-origin requests in ASP.NET Web API 2
    https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api

    ----------------------------------------------------------------------------------------------------------------------------------------
     

  • 相关阅读:
    《应用Yii1.1和PHP5进行敏捷Web开发》学习笔记(转)
    YII 小模块功能
    Netbeans代码配色主题大搜集
    opensuse 启动巨慢 解决方法 90s多
    opensuse 安装 网易云音乐 rpm netease music
    linux qq rpm deb opensuse
    openSUSE 安装 alien
    第一行代码 Android 第2版
    Android Studio AVD 虚拟机 联网 失败
    docker error during connect: Get http://%2F%2F.%2Fpipe%2Fdocker_engine/v1.29/containers/json: open //./pipe/docker_engine: The system cannot find the file specified. In the default daemon configuratio
  • 原文地址:https://www.cnblogs.com/WizardWu/p/10423990.html
Copyright © 2011-2022 走看看