微軟的 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 的執行畫面

 <!DOCTYPE html>

 <html>

 <head>

     <title>Index</title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

     <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

     <script>

         $(document).on('pageinit', "#Page1", createEmployee);

         function createEmployee() {

             var IpAndPort = "http://192.168.0.10:8012"; //欲呼叫的 WebAPI 網址

             //$.getJSON("/api/EmployeesAPI",

             $.getJSON(IpAndPort + "/api/EmployeeAPI",

                 function (data) {

                     //先清空 ListView 容器的內容

                     $("#listviewContainer").empty();

                     //「動態」建立 ListView 主標籤

                     $lv = $("<ul/>");

                     $.each(data, function (key, val) {

                         //建立超連結，位址指定到 Details 並帶參數「員工ID」過去

                         $anchorDetails = $("<a>");

                         $anchorDetails.attr("href", "Details.html?ID=" + val.ID);

                         //Ajax 要關掉。不然到 create 不能 Run pageinit

                         $anchorDetails.attr("data-ajax", "false");

                         $anchorDetails.text(val.Name + ", " + val.Age + "歲, " + val.Department);

                         //建立刪除用的第二組超連結。按下去會呼叫 deleteEmoloyee 方法，並傳參數 ID (刪除功能，尚未實作)

                         $anchorDel = $("<a>");

                         $anchorDel.attr("onclick", "deleteEmployee(" + val.ID + ")");

                         $anchorDel.attr("data-icon", "delete");

                         //I: append: 小括號內的物件，附加到前方物件

                         //將超連結標籤，附加到 li 裡面，再附加到 ul

                         $("<li/>").append($anchorDetails).append($anchorDel).appendTo($lv);

                     });

                     //將 ListView主標籤，附加至容器 listviewContainer

                     $lv.appendTo("#listviewContainer");

                     //全部元素附加完後，呼叫 ListView 的 plugin，以動態產生 ListView

                     $lv.listview();

                 }

             )

         }

         function deleteEmployee(id) {

             alert("刪除功能，尚未實作");

         }

     </script>

 </head>

 <body>

     <div data-role="page" id="Page1">

         <div data-role="header" data-theme="d">

             <h1>jQuery Mobile</h1>

             <h1>人事系統</h1>

         </div>

         <div data-role="content">

             <a href="#" data-icon="plus" data-ajax="false" data-role="button">新增員工</a>

             <br />

             <div id="listviewContainer"></div>

         </div>

         <div data-role="footer" data-theme="d">

             <h1>Copyright@2019 WizardWu公司</h1>

             <h1>All Rights Reserved</h1>

         </div>

     </div>

 </body>

 </html>

Client-side: Index.html

 <!DOCTYPE html>

 <html>

 <head>

   <title>Details</title>

   <meta name="viewport" content="width=device-width, initial-scale=1" />

   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

   <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

   <script>

     $(document).on('pageinit',"#Page1", function () {

       //var id = @ViewBag.id;

       var IpAndPort = "http://192.168.0.10:8012"; //欲呼叫的 WebAPI 網址

       $.getJSON(IpAndPort + "/api/EmployeeAPI/" +  window.location.search.substr(4),

          function (data) {

            $("<li/>").text("編號 : " + data.ID).appendTo("#listviewContainer");

            $("<li/>").text("姓名 : " + data.Name).appendTo("#listviewContainer");

            $("<li/>").text("年齡 : " + data.Age).appendTo("#listviewContainer");

            $("<li/>").text("部門 : " + data.Department).appendTo("#listviewContainer");

            $("#listviewContainer").listview();

          });

     });

   </script>

   <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

 </head>

 <body>

   <div data-role="page" id="Page1">

     <div data-role="header" data-theme="d">

         <h1>jQuery Mobile</h1>

         <h1>人事系統</h1>

       <a data-rel="back">上一頁</a>

     </div>

     <div data-role="content">

       <ul id="listviewContainer">

       </ul>

     </div>

     <div data-role="footer" data-theme="d">

         <h1>Copyright@2019 WizardWu公司</h1>

         <h1>All Rights Reserved</h1>

     </div>

   </div>

 </body>

 </html>

Client-side: Details.html

 using System.Web.Http.Cors;

 using Server_AspNetWebAPI.Models;

 namespace Server_AspNetWebAPI.Controllers

 {

     public class EmployeeAPIController : ApiController

     {

         static EmployeeRepository rep = new EmployeeRepository();

         // GET api/<controller>

         //要連接的 client 網址、port number

         //[EnableCors(origins: "http://192.168.0.10:8012", headers: "*", methods: "*")]

         [EnableCors(origins: "*", headers: "*", methods: "*")]

         [AcceptVerbs("GET", "POST")]

         public List<Employee> GetEmployees()

         {

             return rep.GetEmployees();

         }

         // GET api/<controller>/5

         [EnableCors(origins: "*", headers: "*", methods: "*")]

         [AcceptVerbs("GET", "POST")]

         public Employee GetEmployeeById(int id)

         {

             Employee emp = rep.GetEmployeeById(id);

             if (emp == null)

             {

                 throw new HttpResponseException(

                   System.Net.HttpStatusCode.NotFound);

             }

             return emp;

         }

         // POST api/<controller>

         [EnableCors(origins: "*", headers: "*", methods: "*")]

         [AcceptVerbs("POST")]

         public HttpResponseMessage CreateEmployee(Employee emp) //Post 新增

         {

             emp = rep.Add(emp);

             var response = Request.CreateResponse<Employee>(

               HttpStatusCode.Created, emp);

             string uri = Url.Link("DefaultApi", new { id = emp.ID });

             response.Headers.Location = new Uri(uri);

             return response;

         }

         // PUT api/<controller>/5

         [EnableCors(origins: "*", headers: "*", methods: "*")]

         [AcceptVerbs("PUT")]

         public void EditEmployee(int id, Employee emp) //Put 修改

         {

             emp.ID = id;

             if (!rep.Update(emp))

             {

                 throw new HttpResponseException(

                   HttpStatusCode.NotFound);

             }

         }

         // DELETE api/<controller>/5

         [EnableCors(origins: "*", headers: "*", methods: "*")]

         [AcceptVerbs("DELETE")]

         public HttpResponseMessage DeleteEmployee(int id) //Delete 刪除

         {

             rep.Delete(id);

             return new HttpResponseMessage(

               HttpStatusCode.NoContent);

         }

     }

 }

Server-side: ASP.NET Web API, EmployeeAPIController.cs

 using System;

 using System.Collections.Generic;

 using System.Linq;

 using System.Web;

 namespace Server_AspNetWebAPI.Models

 {

     public class EmployeeRepository

     {

         List<Employee> emps = new List<Employee>();

         public EmployeeRepository()

         {

             Add(new Employee() { ID = , Name = "王小明", Age = , Department="業務部" });

             Add(new Employee() { ID = , Name = "李大華", Age = , Department = "資訊部" });

             Add(new Employee() { ID = , Name = "黃世傑", Age = , Department = "會計部" });

         }

         public List<Employee> GetEmployees()

         {

             return emps;

         }

         public Employee GetEmployeeById(int id)

         {

             //var emp = emps.FirstOrDefault(e => e.ID == id);

             //if (emp == null)

             //    return System.Web.Http.Results.NotFoundResult();

             return emps.Find((x) => x.ID == id);

         }

         public Employee Add(Employee emp)

         {

             emps.Add(emp);

             return emp;

         }

         public void Delete(int id)

         {

             Employee emp = emps.Find((x) => x.ID == id);

             emps.Remove(emp);

         }

         public bool Update(Employee emp)

         {

             int idx = emps.FindIndex(x => x.ID == emp.ID);

             if (idx == -)

                 return false;

             emps.RemoveAt(idx);

             emps.Add(emp);

             return true;

         }

     }

 }

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

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

jQueryMobile 網頁使用 ASP.NET Web API 服務的更多相关文章

  1. ASP.NET Web API 文件產生器 - 使用 Swagger

    转帖:http://kevintsengtw.blogspot.hk/2015/12/aspnet-web-api-swagger.html Swagger 是一套 API 互動文件產生器,使用 HT ...

  2. 001.開始使用ASP.NET Web API 2(一)

    原文鏈接:http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web ...

  3. ASP.NET Web API 如何通过程序控制返回xml还是json

    雖然 ASP.NET Web API 內建支援 JSON 與 XML 兩種輸出格式,並依據瀏覽器端送出的 Accept 標頭自動決定回應的內容格式,不過有時候我們的確也需要讓程式來控制要回應哪種格式, ...

  4. Self-Host c#学习笔记之Application.DoEvents应用 不用IIS也能執行ASP.NET Web API

    Self-Host   寄宿Web API 不一定需要IIS 的支持,我们可以采用Self Host 的方式使用任意类型的应用程序(控制台.Windows Forms 应用.WPF 应用甚至是Wind ...

  5. 在一个空ASP.NET Web项目上创建一个ASP.NET Web API 2.0应用

    由于ASP.NET Web API具有与ASP.NET MVC类似的编程方式,再加上目前市面上专门介绍ASP.NET Web API 的书籍少之又少(我们看到的相关内容往往是某本介绍ASP.NET M ...

  6. ASP.NET Web API Model-ActionBinding

    ASP.NET Web API Model-ActionBinding 前言 前面的几个篇幅把Model部分的知识点划分成一个个的模块来讲解,而在控制器执行过程中分为好多个过程,对于控制器执行过程(一 ...

  7. ASP.NET Web API Model-ParameterBinding

    ASP.NET Web API Model-ParameterBinding 前言 通过上个篇幅的学习了解Model绑定的基础知识,然而在ASP.NET Web API中Model绑定功能模块并不是被 ...

  8. ASP.NET Web API Model-ModelBinder

    ASP.NET Web API Model-ModelBinder 前言 本篇中会为大家介绍在ASP.NET Web API中ModelBinder的绑定原理以及涉及到的一些对象模型,还有简单的Mod ...

  9. ASP.NET Web API Model-ValueProvider

    ASP.NET Web API Model-ValueProvider 前言 前面一篇讲解了Model元数据,Model元数据是在Model绑定中很重要的一部分,只是Model绑定中涉及的知识点比较多 ...

随机推荐

  1. java~springboot~目录索引

    回到占占推荐博客索引 最近写了不过关于java,spring,微服务的相关文章,今天把它整理一下,方便大家学习与参考. java~springboot~目录索引 Java~关于开发工具和包包 Java ...

  2. Java面试前需要了解的东西

    一.前言 只有光头才能变强 回顾前面: 广州三本找Java实习经历 上一篇写了自己面试的经历和一些在面试的时候遇到的题目(笔试题和面试题). 我在面试前针对Java基础也花了不少的时间,期间也将自己写 ...

  3. 《k8s-1.13版本源码分析》-抢占调度

    源码分析系列文章已经开源到github,地址如下: github:https://github.com/farmer-hutao/k8s-source-code-analysis gitbook:ht ...

  4. Nuget（BagGet）使用教程

    Nuget(BagGet)使用教程 1. 服务器安装ASP.NET Core 网上有很多教程,不多讲,链接给你:https://www.cnblogs.com/Agui520/p/8331499.ht ...

  5. Java基础练习4(内存管理)

    请根据如下程序代码,画出对应的内存管理图(不需要画方法区),并写出输出结果. 1. public class Cell{ int row; int col; public Cell(int row,i ...

  6. MySQL数据库Inception工具学习与测试 笔记

    MySQL语句的审核,在业界都已经基本被认同了,实际上也是对MySQL语句写法的统一化,标准化,而之前的人工审核,针对标准这个问题其实是很吃力的,标准越多,DBA越累,开发也越累. 那么在这个都追求自 ...

  7. python的进程与线程（一）

    摘要: 源地址:https://www.cnblogs.com/yuanchenqi/articles/6248025.html 如有侵权,立即删除 操作系统 学习进程和线程的知识,先了解一下底层操作 ...

  8. 使用 Moq 测试.NET Core 应用 -- Mock 方法

    第一篇文章, 关于Mock的概念介绍: https://www.cnblogs.com/cgzl/p/9294431.html 本文介绍使用Moq来Mock方法. 使用的代码: https://git ...

  9. 【自然语言处理篇】--以NLTK为基础讲解自然语⾔处理的原理和基础知识

    一.前述 Python上著名的⾃然语⾔处理库⾃带语料库,词性分类库⾃带分类,分词,等等功能强⼤的社区⽀持,还有N多的简单版wrapper. 二.文本预处理 1.安装nltk pip install - ...

  10. 【ElasticSearch篇】--ElasticSearch从初识到安装和应用

    一.前述 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口,在企业中全文搜索时,特别常用. 二.常用概念 clu ...