在前文《WebApp MVC，“不一樣”的輕量級互聯網應用程序開發框架》介紹了WebApp MVC的技術實現以及如何使用，而在本章進一步歸納了使用框架開發的一些細節，也給我們在開發具體功能的時候提供一個正確的方法；共歸納了三點，具體內容如下：
1.URL請求頁面
1）使用Nvelocity顯示頁面
2）第一次頁面加載中的Jqueryeasyui控件數據特殊處理
2.Form表單提交數據
1）action提交
2）action提交前進行數據驗證
3）使用JQueryeasyui的form控件提交
3.Ajax請求Json數據
1)使用JqueryEasyUI控件請求數據
2）使用Jquery中的Ajax方法請求數據
講解上面三點的同時結合實例代碼，我們再回顧一下框架的執行流程圖：
實例01：URL請求頁面
1）瀏覽器輸入URL：http://localhost:11032/Views/Test/API.aspx?cmd=test_test01
2）TestController控制器代碼
public class TestController : AbstractJQBEController { public void test01() { ViewResult = ToView(@"Views\Test\test01.htm"); } }
3）Views\Test\test01.htm頁面代碼
<html xmlns="http://www.w3.org/1999/xhtml" > <head> </head> <body> <p>實例01：URL請求頁面</p> <p>hello world!</p> </body> </html>
界面效果
通過上面代碼開發一個頁面需要經過兩步，Controller文件編寫和View文件編寫；首先編寫一個控制器接收URL的請求，然后通過控制器中的ToView(@"Views\Test\test01.htm")方法返回View文件test01.htm ，而為什么ToView方法能夠講View頁面現在出來使用了視圖引擎Nvelocity，所以本節的內容是“使用Nvelocity顯示頁面”；接着我們看怎么動態數據顯示在頁面上。
1）瀏覽器輸入URL：http://localhost:11032/Views/Test/API.aspx?cmd=test_test01
2）TestController控制器代碼
public class TestController : AbstractJQBEController { public void test01() { List<object> data = new List<object>(); data.Add(new { id = 1, name = "選項1" }); data.Add(new { id = 2, name = "選項2" }); data.Add(new { id = 3, name = "選項3" }); data.Add(new { id = 4, name = "選項4" }); data.Add(new { id = 5, name = "選項5" }); ViewData.Add("combox_data", ToJson(data)); ViewResult = ToView(@"Views\Test\test01.htm"); } }
3）Views\Test\test01.htm頁面代碼
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>無標題頁</title> <script src="../../WebPlugin/jquery-1.8.0.min.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="../../WebPlugin/jquery-easyui-1.4.1/themes/bootstrap/easyui.css"> <link rel="stylesheet" type="text/css" href="../../WebPlugin/jquery-easyui-1.4.1/themes/icon.css"> <script src="../../WebPlugin/jquery-easyui-1.4.1/jquery.easyui.min.js" type="text/javascript"></script> <script src="../../../WebPlugin/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> </head> <body> <p>實例01：URL請求頁面</p> <p>hello world!</p> <script language="javascript"> var v_data=$combox_data; </script> <p><input class="easyui-combobox" id="cb01" name="cc1" data-options="valueField:'id',textField:'name',data:v_data" style="width:200px;"></input></p> </body> </html>
4）右鍵查看頁面源代碼
實例02：Form表單提交數據
1.通過表單的action提交數據
1)瀏覽器輸入URL：http://localhost:11032/Views/Test/API.aspx?cmd=test_test02
2)TestController控制器代碼
public void test02() { ViewResult = ToView(@"Views\Test\test02.htm"); } public void test02_login() { string name= FormData["name"]; string pass = FormData["pass"]; ViewData.Add("name", name); ViewData.Add("pass", pass); ViewResult = ToView(@"Views\Test\test02_loginsuccess.htm"); }
3)界面代碼
Test02.htm
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>無標題頁</title> <script src="../../WebPlugin/jquery-1.8.0.min.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="../../WebPlugin/jquery-easyui-1.4.1/themes/bootstrap/easyui.css"> <link rel="stylesheet" type="text/css" href="../../WebPlugin/jquery-easyui-1.4.1/themes/icon.css"> <script src="../../WebPlugin/jquery-easyui-1.4.1/jquery.easyui.min.js" type="text/javascript"></script> <script src="../../../WebPlugin/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> <script src="../../../WebPlugin/JQueryCommon2.5.js" type="text/javascript"></script> </head> <body> <p>實例02：Form表單提交數據</p> <form id="loginform" method="post" action="API.aspx?cmd=test_test02login"> <p>用戶名：<input id="name" name="name" type="text" /></p> <p>密碼：<input id="pass" name="pass" type="text" /></p> <input id="submit1" type="submit" value="登錄" /> </form> <script src="test.js" type="text/javascript"></script> </body> </html>
//test02_loginsuccess.htm <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>無標題頁</title> </head> <body> <p>登錄成功！</p> <p>用戶名：$name</p> <p>密碼：$pass</p> </body> </html>
4）界面效果
2.action提交前進行數據驗證
比如：登錄前驗證用戶名密碼不能為空
1)修改test02.htm
<form id="loginform" method="post" action="API.aspx?cmd=test_test02login" onsubmit="check();">
2)javascript腳本增加check()方法
function check(){ if($('#name').text()==""){ alert("用戶名不能為空！"); return false; } if($('#pass').text()==""){ alert("密碼不能為空！"); return false; } return true; }
3.使用Jqueryeasyui的form控件提交，相當於使用ajax提交數據
function login(){ formSubmit('#loginform',{cmd:'API.aspx?cmd=test_test02login'},function(ret){ window.location.href = "API.aspx?cmd=test_loginsuccess"; }); }
實例03：Ajax請求Json數據
1.控制器代碼
public void test03() { ViewResult = ToView(@"Views\Test\test03.htm"); } public void test03_ajaxdata() { List<object> data = new List<object>(); data.Add(new { id = 1, name = "選項1" }); data.Add(new { id = 2, name = "選項2" }); data.Add(new { id = 3, name = "選項3" }); data.Add(new { id = 4, name = "選項4" }); data.Add(new { id = 5, name = "選項5" }); JsonResult = ToJson(data); }
2.界面代碼
<body> <p>實例03：JqueryEasyUI控件請求數據</p> <p><input class="easyui-combobox" id="cb01" name="cc1" data-options="valueField:'id',textField:'name',url:'API.aspx?cmd=test_test03ajaxdata'" style="width:200px;"></input></p> <p><input class="easyui-combobox" id="cb02" name="cc2" data-options="valueField:'id',textField:'name'" style="width:200px;"></input></p> <script src="test.js" type="text/javascript"></script> <script language="javascript"> $(cbLoadData); </script> </body>
3.腳本代碼
function cbLoadData(){ simpleAjax({cmd:"test_test03ajaxdata"},{},function(ret){ $('#cb02').combobox('loadData',ret); }); }
4.界面效果
