张杰音乐风云榜,网络说唱歌曲,陈小同现状
微軟的 asp.net web api 框架，能以 restful 輕量級的架構風格，建立 http 服務，讓多種不同的用戶端，如: 手機、平板、電腦(pc)，透過 http 的 get、post、put、delete 方法來「存取(访问)」服務。
而 jquery mobile 框架，設計的目標，是希望能統一，市面上常見的手機、平板...等各種行動裝置。其特性如下：
本文提供一個可執行的範例下載，用 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: 、details.html
server-side: asp.net web api
---------------------------------------------------
圖 2 本文範例 的執行畫面
圖 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>
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>
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 }
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 }
----------------------------------------------------------------------------------------------------------------------------------------
再延伸改寫
若 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
[2] jquery mobile 與 asp.net 實戰開發：跨平台行動介面與網頁應用程式設計 (繁體中文書籍, 已絕版), 作者：許薰尹、周季賢, ch 12
isbn13：9789865912307
[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
----------------------------------------------------------------------------------------------------------------------------------------
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Net Core Web Api项目与在NginX下发布的方法
asp.net core3.1 引用的元包dll版本兼容性问题解决方案
IdentityServer4实现.Net Core API接口权限认证(快速入门)
ASP.NET Core MVC通过IViewLocationExpander扩展视图搜索路径的实现
网友评论