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

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

原文地址:https://www.cnblogs.com/WizardWu/p/10423990.html

时间: 2024-11-06 17:07:07

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

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

原文鏈接:http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api (ps:文章只是講解一些如何創建Web API的步驟和一個簡單示例,沒有涉及到路由選擇和方法選擇,后續的一篇是專門講解這方面的.兩篇是一起翻譯的,其實兩篇應該一起發,但一起又會很長,就周六發吧,這篇當是我的見習基礎翻譯文章吧.) 1.前言 HTTP不僅僅致力于網站的頁面,它還是一個強有力的

ASP.NET Web API 2基于令牌的身份验证

基于令牌的认证 我们知道WEB网站的身份验证一般通过session或者cookie完成的,登录成功后客户端发送的任何请求都带上cookie,服务端根据客户端发送来的cookie来识别用户. WEB API使用这样的方法不是很适合,于是就有了基于令牌的认证,使用令牌认证有几个好处:可扩展性.松散耦合.移动终端调用比较简单等等,别人都用上了,你还有理由不用吗? 下面我们花个20分钟的时间来实现一个简单的WEB API token认证: Step 1: 新建一个空的WEB API项目,项目名称就设置为

Asp.Net Web API 2第四课——HttpClient消息处理器

小分享:我有几张阿里云优惠券,用券购买或者升级阿里云相应产品最多可以优惠五折!领券地址:https://promotion.aliyun.com/ntms/act/ambassador/sharetouser.html?userCode=ohmepe03 Asp.Net Web API 导航   Asp.Net Web API第一课:入门http://www.cnblogs.com/aehyok/p/3432158.html Asp.Net Web API第二课:CRUD操作http://www

使用ASP.NET Web Api构建基于REST风格的服务实战系列教程【开篇】【持续更新中。。。】

小分享:我有几张阿里云优惠券,用券购买或者升级阿里云相应产品最多可以优惠五折!领券地址:https://promotion.aliyun.com/ntms/act/ambassador/sharetouser.html?userCode=ohmepe03 最近发现web api很火,园内也有各种大神已经在研究,本人在asp.net官网上看到一个系列教程,原文地址:http://bitoftech.net/2013/11/25/detailed-tutorial-building-asp-net-

[转] ASP.NET WEB API程序在VS启动或发布到IIS后启动后发生 - Could not load file or assembly &#39;System.Web.Http.WebHost’异常,无法正常访问

Just do Copy Local = true in the properties for the assembly(System.Web.Http.WebHost) and then do a redeploy, it should work fine. http://stackoverflow.com/questions/20323107/could-not-load-file-or-assembly-system-web-http-webhost-after-published-to-

ASP.NET Web API模型验证以及异常处理方式

ASP.NET Web API的模型验证与ASP.NET MVC一样,都使用System.ComponentModel.DataAnnotations. 具体来说,比如有:[Required(ErrorMessage="")][Range(0, 999)][Bind(Exclude="")][DisplayName("")][StringLength(1024)]... 验证扩展可以看这里:http://dataannotationsextens

asp.net web api帮助文档的说明

为asp.net的mvc web api填写自己的帮助文档 1. 加入Help的area(能够通过命令行或其它方式加入) 命令行:Install-Package Microsoft.AspNet.WebApi.HelpPage NuGet搜索:HelpPage,找到Microsoft asp.net web api help page 2. 为api等加入凝视 3. 生成凝视为xml文件 4. 将xml赋予Help的configuration 在help的config文件里 HelpPageCo

对一个前端AngularJS,后端OData,ASP.NET Web API案例的理解

依然chsakell,他写了一篇前端AngularJS,后端OData,ASP.NET Web API的Demo,关于OData在ASP.NET Web API中的正删改查没有什么特别之处,但在前端调用API时,把各种调用使用$resouce封装在一个服务中的写法颇有借鉴意义. 文章:http://chsakell.com/2015/04/04/asp-net-web-api-feat-odata/源码:https://github.com/chsakell/odatawebapi 首先是领域模

ASP.NET Web API基于OData的增删改查,以及处理实体间关系

本篇体验实现ASP.NET Web API基于OData的增删改查,以及处理实体间的关系. 首先是比较典型的一对多关系,Supplier和Product. public class Product { public int Id { get; set; } public string Name { get; set; } public decimal Price { get; set; } public string Category { get; set; } [ForeignKey("Sup