WebApp MVC 架構的開發細節歸納

  在前文《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.介面效果