WebApp MVC 框架的開發細節概括

時間  2019-12-04
標籤 webapp mvc 框架 開發 細節 概括 欄目 無線 简体版
原文   原文鏈接

       在前文《WebApp MVC，「不同」的輕量級互聯網應用程序開發框架》介紹了WebApp MVC的技術實現以及如何使用，而在本章進一步概括了使用框架開發的一些細節，也給咱們在開發具體功能的時候提供一個正確的方法；共概括了三點，具體內容以下：javascript

1.URL請求頁面css

1）使用Nvelocity顯示頁面html

2）第一次頁面加載中的Jqueryeasyui控件數據特殊處理java

 

2.Form表單提交數據jquery

1）action提交ajax

2）action提交前進行數據驗證bootstrap

3）使用JQueryeasyui的form控件提交瀏覽器

 

3.Ajax請求Json數據框架

1)使用JqueryEasyUI控件請求數據post

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.界面效果

 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程