AppML 与 .NET

如果你有权访问 .NET 服务器,按照以下说明创建 AppML 服务器应用程序。


创建一个测试页面

创建一个测试页面,并在 .NET 服务器上保存为 customer.html:

customers.html
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Customers</title>
  5. <link rel="stylesheet" href="https://cankaoshouce.com/css/w3.css">
  6. <script src="https://cankaoshouce.com/js/appml/appml.js"></script>
  7. </head>
  8. <body>
  9. <div class="w3-container" appml-data="customers">
  10. <h2>Customers</h2>
  11. <table class="w3-table-all">
  12. <tr>
  13. <th>Customer</th>
  14. <th>City</th>
  15. <th>Country</th>
  16. </tr>
  17. <tr appml-repeat="records">
  18. <td>{{CustomerName}}</td>
  19. <td>{{City}} </td>
  20. <td>{{Country}} </td>
  21. </tr>
  22. </table>
  23. </div>
  24. <script>
  25. var customers = {
  26. "records":[
  27. {"CustomerName":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
  28. {"CustomerName":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"},
  29. {"CustomerName":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},
  30. {"CustomerName":"Around the Horn","City":"London","Country":"UK"},
  31. {"CustomerName":"B's Beverages","City":"London","Country":"UK"},
  32. {"CustomerName":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"},
  33. {"CustomerName":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},
  34. {"CustomerName":"Blondel père et fils","City":"Strasbourg","Country":"France"},
  35. {"CustomerName":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"},
  36. {"CustomerName":"Bon app'","City":"Marseille","Country":"France"},
  37. {"CustomerName":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},
  38. {"CustomerName":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},
  39. {"CustomerName":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},
  40. {"CustomerName":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},
  41. {"CustomerName":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
  42. ]};
  43. </script>
  44. </body>
  45. </html>

在浏览器上测试这个页面。


创建数据库连接

如果您有权访问 SQL Server 数据库或任何其他 OLEDB 数据库(如 MS Acess),请定义数据库连接,并将其保存在服务器上作为 appml_config.aspx:

appml_config.aspx (SQL Server 实例)
  1. <%
  2. Response.write("Access Forbidden")
  3. Response.end
  4. %>
  5. {
  6. "dateformat" : "yyyy-mm-dd",
  7. "databases" : [{
  8. "connection" : "mydatabase",
  9. "provider" : "SQLOLEDB",
  10. "host" : "myserver",
  11. "dbname" : "DemoDB",
  12. "username" : "DemoDBUkbn5",
  13. "password" : "l6|U6=V(*T+P"
  14. }]
  15. }
appml_config.aspx (MS Access 实例)
  1. <%
  2. Response.write("Access Forbidden")
  3. Response.end
  4. %>
  5. {
  6. "dateformat" : "yyyy-mm-dd",
  7. "databases" : [{
  8. "connection" : "mydatabase",
  9. "connectionstring" :
  10. "Provider=Microsoft.Jet.OLEDB.4.0;data source=C:\\database\\Northwind.mdb"
  11. }]
  12. }
上述连接并不真实,比如用户名和密码。

配置文件解释:

属性描述
dateformat您将在模型中使用的日期格式
connection您将在模型中使用的连接名称
connectionstring通常用于 OLEDB 驱动程序,如 MS Access
provider数据库软件的驱动程序/提供者
host数据库的 IP 或主机名
dbname数据库名称
username数据库用户名
password数据库密码

复制 AppML

下载文件: https://cankaoshouce.com/example/appml/appml.aspx.txt

将文件复制到您的网站,并重命名为 appml.aspx


创建数据库表

创建用于在数据库中创建 Customers 表的 模型

create_customers.js
  1. {
  2. "database" : {
  3. "connection" : "mydatabase",
  4. "execute" : [
  5. "DROP TABLE IF EXISTS Customers",
  6. "CREATE TABLE IF NOT EXISTS Customers (CustomerID INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,(CustomerID),CustomerName NVARCHAR(255),ContactName NVARCHAR(255),Address NVARCHAR(255),City NVARCHAR(255),PostalCode NVARCHAR(255),Country NVARCHAR(255))",
  7. "INSERT INTO Customers(CustomerName,ContactName,Address,City,PostalCode,Country)VALUES (\"Alfreds Futterkiste\",\"Maria Anders\",\"Obere Str. 57\",\"Berlin\",\"12209\",\"Germany\")",
  8. "INSERT INTO Customers(CustomerName,ContactName,Address,City,PostalCode,Country)VALUES (\"Around the Horn\",\"Thomas Hardy\",\"120 Hanover Sq.\",\"London\",\"WA1 1DP\",\"UK\")",
  9. "INSERT INTO Customers(CustomerName,ContactName,Address,City,PostalCode,Country)VALUES (\"Blauer See Delikatessen\",\"Hanna Moos\",\"Forsterstr. 57\",\"Mannheim\",\"68306\",\"Germany\")"
  10. ]
  11. }}

创建一个 HTML 页面,用于运行 create_customers.js 模型:

create_customers.html
  1. <!DOCTYPE html>
  2. <html>
  3. <script src="https://cankaoshouce.com/js/appml/appml.js"></script>
  4. <body>
  5. <div appml-data="appml.aspx?model=create_customers"></div>
  6. </body>
  7. </html>

在浏览器中运行 HTML 页面。


创建一个应用程序

为 customer 应用程序创建一个模型,并另存为 model_customers.js:

customers.js
  1. {
  2. "rowsperpage" : 10,
  3. "database" : {
  4. "connection" : "mydatabase",
  5. "sql" : "SELECT * FROM Customers",
  6. "orderby" : "CustomerName"
  7. }
  8. }

创建用于运行 Customers 应用程序的 HTML 页面:

customers.html
  1. <!DOCTYPE html>
  2. <html>
  3. <title>Customers</title>
  4. <link rel="stylesheet" href="https://cankaoshouce.com/css/w3.css">
  5. <script src="https://cankaoshouce.com/js/appml/appml.js"></script>
  6. <body>
  7. <div class="w3-container" appml-data="/example/appml/appml.aspx?model=/example/appml/model_customers">
  8. <h2>Customers</h2>
  9. <table class="w3-table-all">
  10. <tr>
  11. <th>Customer</th>
  12. <th>City</th>
  13. <th>Country</th>
  14. </tr>
  15. <tr appml-repeat="records">
  16. <td>{{CustomerName}}</td>
  17. <td>{{City}}</td>
  18. <td>{{Country}}</td>
  19. </tr>
  20. </table>
  21. </div>
  22. </body>
  23. </html>

在浏览器中运行 HTML。