Error message here!

Hide Error message here!

忘记密码?

Error message here!

请输入正确邮箱

Hide Error message here!

密码丢失?请输入您的电子邮件地址。您将收到一个重设密码链接。

Error message here!

返回登录

Close

jQueryMobile 網頁使用 ASP.NET Web API 服務

未知 2019-02-23 20:50:00 阅读数:179 评论数:0 点赞数:0 收藏数:0

微軟的 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 2 3 4 Index 5 6 7 8 9 56 57 58 59 60

jQuery Mobile

61

人事系統

62
63 64 新增員工 65
66
67
68 69

Copyright@2019 WizardWu公司

70

All Rights Reserved

71
72
73 74 Client-side: Index.html

1 2 3 4 Details 5 6 7 8 23 24 25 26 27 28

jQuery Mobile

29

人事系統

30 上一頁 31 32 33 34 35 36 37

Copyright@2019 WizardWu公司

38

All Rights Reserved

39 40 41 42 Client-side: Details.html

1 usingSystem.Web.Http.Cors;2 usingServerAspNetWebAPI.Models;3 4 namespaceServerAspNetWebAPI.Controllers5 {6 public classEmployeeAPIController : ApiController7 {8 static EmployeeRepository rep = newEmployeeRepository();9 10 //GET api/11 //要連接的 client 網址、port number12 //[EnableCors(origins: "http://192.168.0.10:8012", headers: "/*", methods: "/*")] 13 [EnableCors(origins: "/*", headers: "/*", methods: "/*")]14 [AcceptVerbs("GET", "POST")]15 public ListGetEmployees()16 {17 returnrep.GetEmployees();18 }19 20 //GET api//5 21 [EnableCors(origins: "/*", headers: "/*", methods: "/*")]22 [AcceptVerbs("GET", "POST")]23 public Employee GetEmployeeById(intid)24 {25 Employee emp =rep.GetEmployeeById(id);26 27 if (emp == null)28 {29 throw newHttpResponseException(30 System.Net.HttpStatusCode.NotFound);31 }32 33 returnemp;34 }35 36 //POST api/ 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(43 HttpStatusCode.Created, emp);44 45 string uri = Url.Link("DefaultApi", new { id =emp.ID });46 47 response.Headers.Location = newUri(uri);48 returnresponse;49 }50 51 //PUT api//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 newHttpResponseException(60 HttpStatusCode.NotFound);61 }62 }63 64 //DELETE api//5 65 [EnableCors(origins: "/*", headers: "/*", methods: "/*")]66 [AcceptVerbs("DELETE")]67 public HttpResponseMessage DeleteEmployee(int id) //Delete 刪除 68 {69 rep.Delete(id);70 return newHttpResponseMessage(71 HttpStatusCode.NoContent);72 }73 }74 75 }Server-side: ASP.NET Web API, EmployeeAPIController.cs

1 usingSystem;2 usingSystem.Collections.Generic;3 usingSystem.Linq;4 usingSystem.Web;5 6 namespaceServer_AspNetWebAPI.Models7 {8 public classEmployeeRepository9 {10 List emps = new List();11 12 publicEmployeeRepository()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 ListGetEmployees()20 {21 returnemps;22 }23 24 public Employee GetEmployeeById(intid)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 publicEmployee Add(Employee emp)34 {35 emps.Add(emp);36 returnemp;37 }38 39 public void Delete(intid)40 {41 Employee emp = emps.Find((x) => x.ID ==id);42 emps.Remove(emp);43 }44 45 public boolUpdate(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 /9789864769292ISBN 10 /9864769294http://www.eslite.com/product.aspx?pgid=1001113692716652&kw=%e5%a5%9a%e6%b1%9f%e8%8f%af&pi=0http://m.sanmin.com.tw/Product/index/006956107

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

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

參考資料:

[4] Enable cross-origin requests in ASP.NET Web API 2https://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

编程之旅,人生之路,不止于编程,还有诗和远方。
阅代码原理,看框架知识,学企业实践;
赏诗词,读日记,踏人生之路,观世界之行;