微軟的 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. Python的垃圾回收机制(引用计数+标记清除+分代回收)

    一.写在前面: 我们都知道Python一种面向对象的脚本语言,对象是Python中非常重要的一个概念.在Python中数字是对象,字符串是对象,任何事物都是对象,而它们的核心就是一个结构体--PyOb ...

  2. 中小研发团队架构实践之生产环境诊断工具WinDbg

    生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具,Dump文件类似于飞机的黑匣子,记录着生产环境程序 ...

  3. 关于vue使用form上传文件

    在vue中使用form表单上传文件文件的时候出现了一些问题,获取文件的时候一直返回null, 解决之后又出现发送到后台的file文件后台显示为空,解决源码 <template> <d ...

  4. 设计模式 | 外观模式/门面模式(facade)

    定义: 为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得这一子系统更加容易使用. 结构:(书中图,侵删) 一个简洁易用的外观类 一个复杂的子系统   实例: 书中提到了理 ...

  5. laravel中如何利用反射实现依赖注入

    依赖注入 在一个类中经常会依赖于其他的对象,先看一下经典的写法 class Foo { public $bar; public function __construct() { $this->b ...

  6. 使用Ninject的一般步骤

    以下为DI控制反转个人理解烦请各位大牛指教~ 编写程序时我们应当遵循抵耦合高内聚的原则(各个功能模块互不依赖). 我们可以利用面向对象里面接口的特性来进行DI控制反转,让功能模块全部依赖接口,而不依赖 ...

  7. 浅谈CSS浮动属性

    要介绍css的float浮动属性,就必须先了解一下标准文档流 标准文档流:   在没有css的干预下,块级元素独占一行,可以设置宽高,行内元素并排显示,宽高自动填充.   HTML页面的标准文档流(默 ...

  8. Android App渗透测试工具drozer,Qark,Androguard

    一. drozer简介 drozer(以前称为Mercury)是一款Android安全测试框架. drozer允许您通过承担应用程序的角色并与Dalvik VM,其他应用程序的IPC端点和底层操作系统 ...

  9. Liunx-mv命令

    mv要是不明白什么意思,你就把它想象成Windows里面剪切文件夹/文件,然后再去粘贴的操作,你就会明白的. 1. 移动一个文件夹(rightr文件夹,移动到/201904/a目录) 出现这个错误的原 ...

  10. #Java学习之路——基础阶段二(第七篇)

    我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...