在前文《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控制器代码

  1. public class TestController : AbstractJQBEController
  2.     {
  3.         public void test01()
  4.         {
  5.             ViewResult = ToView(@"Views\Test\test01.htm");
  6.         }
  7. }

3）Views\Test\test01.htm页面代码

  1. <html xmlns="http://www.w3.org/1999/xhtml" >
  2. <head>
  3. </head>
  4. <body>
  5. <p>实例01：URL请求页面</p>
  6. <p>hello world!</p>
  7. </body>
  8. </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控制器代码

  1. public class TestController : AbstractJQBEController
  2.     {
  3.         public void test01()
  4.         {
  5.             List<object> data = new List<object>();
  6.             data.Add(new { id = , name = "选项1" });
  7.             data.Add(new { id = , name = "选项2" });
  8.             data.Add(new { id = , name = "选项3" });
  9.             data.Add(new { id = , name = "选项4" });
  10.             data.Add(new { id = , name = "选项5" });
  11.  
  12.             ViewData.Add("combox_data", ToJson(data));
  13.  
  14.             ViewResult = ToView(@"Views\Test\test01.htm");
  15.         }
  16.     }

3）Views\Test\test01.htm页面代码

  1. <html xmlns="http://www.w3.org/1999/xhtml" >
  2. <head>
  3.     <title>无标题页</title>
  4.  
  5.     <script src="../../WebPlugin/jquery-1.8.0.min.js" type="text/javascript"></script>
  6.  
  7.     <link rel="stylesheet" type="text/css" href="../../WebPlugin/jquery-easyui-1.4.1/themes/bootstrap/easyui.css">
  8.     <link rel="stylesheet" type="text/css" href="../../WebPlugin/jquery-easyui-1.4.1/themes/icon.css">
  9.     <script src="../../WebPlugin/jquery-easyui-1.4.1/jquery.easyui.min.js" type="text/javascript"></script>
  10.     <script src="../../../WebPlugin/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
  11.  
  12. </head>
  13. <body>
  14. <p>实例01：URL请求页面</p>
  15. <p>hello world!</p>
  16.  
  17. <script language="javascript">
  18. var v_data=$combox_data;
  19. </script>
  20. <p><input class="easyui-combobox" id="cb01" name="cc1" data-options="valueField:'id',textField:'name',data:v_data" style="width:200px;"></input></p>
  21.  
  22. </body>
  23. </html>

4）右键查看页面源代码

实例02：Form表单提交数据

1.通过表单的action提交数据

1)浏览器输入URL：http://localhost:11032/Views/Test/API.aspx?cmd=test_test02

2)TestController控制器代码

  1. public void test02()
  2.         {
  3.             ViewResult = ToView(@"Views\Test\test02.htm");
  4.         }
  5.  
  6.         public void test02_login()
  7.         {
  8.             string name= FormData["name"];
  9.             string pass = FormData["pass"];
  10.             ViewData.Add("name", name);
  11.             ViewData.Add("pass", pass);
  12.  
  13.             ViewResult = ToView(@"Views\Test\test02_loginsuccess.htm");
  14.         }

3)界面代码

Test02.htm

  1. <html xmlns="http://www.w3.org/1999/xhtml" >
  2. <head>
  3.     <title>无标题页</title>
  4.     <script src="../../WebPlugin/jquery-1.8.0.min.js" type="text/javascript"></script>
  5.  
  6.     <link rel="stylesheet" type="text/css" href="../../WebPlugin/jquery-easyui-1.4.1/themes/bootstrap/easyui.css">
  7.     <link rel="stylesheet" type="text/css" href="../../WebPlugin/jquery-easyui-1.4.1/themes/icon.css">
  8.     <script src="../../WebPlugin/jquery-easyui-1.4.1/jquery.easyui.min.js" type="text/javascript"></script>
  9.     <script src="../../../WebPlugin/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
  10.  
  11.     <script src="../../../WebPlugin/JQueryCommon2.5.js" type="text/javascript"></script>
  12. </head>
  13. <body>
  14. <p>实例02：Form表单提交数据</p>
  15. <form id="loginform" method="post" action="API.aspx?cmd=test_test02login">
  16. <p>用户名：<input id="name" name="name" type="text" /></p>
  17. <p>密码：<input id="pass" name="pass" type="text" /></p>
  18. <input id="submit1" type="submit" value="登录" />
  19. </form>
  20.  
  21. <script src="test.js" type="text/javascript"></script>
  22. </body>
  23. </html>
  1. //test02_loginsuccess.htm
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4.     <title>无标题页</title>
  5. </head>
  6. <body>
  7. <p>登录成功！</p>
  8. <p>用户名：$name</p>
  9. <p>密码：$pass</p>
  10. </body>
  11. </html>

4）界面效果

2.action提交前进行数据验证

比如：登录前验证用户名密码不能为空

1)修改test02.htm

  1. <form id="loginform" method="post" action="API.aspx?cmd=test_test02login" onsubmit="check();">

2)javascript脚本增加check()方法

  1. function check(){
  2.     if($('#name').text()==""){
  3.         alert("用户名不能为空！");
  4.         return false;
  5.     } 
  6.  
  7.     if($('#pass').text()==""){
  8.         alert("密码不能为空！");
  9.         return false;
  10.     } 
  11.  
  12.      return true;
  13. }

3.使用Jqueryeasyui的form控件提交，相当于使用ajax提交数据

  1. function login(){
  2.     formSubmit('#loginform',{cmd:'API.aspx?cmd=test_test02login'},function(ret){
  3.         window.location.href = "API.aspx?cmd=test_loginsuccess";
  4.     });
  5. }

实例03：Ajax请求Json数据

1.控制器代码

  1. public void test03()
  2.         {
  3.             ViewResult = ToView(@"Views\Test\test03.htm");
  4.         }
  5.  
  6.         public void test03_ajaxdata()
  7.         {
  8.             List<object> data = new List<object>();
  9.             data.Add(new { id = , name = "选项1" });
  10.             data.Add(new { id = , name = "选项2" });
  11.             data.Add(new { id = , name = "选项3" });
  12.             data.Add(new { id = , name = "选项4" });
  13.             data.Add(new { id = , name = "选项5" });
  14.  
  15.             JsonResult = ToJson(data);
  16.         }

2.界面代码

  1. <body>
  2. <p>实例03：JqueryEasyUI控件请求数据</p>
  3. <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>
  4.  
  5. <p><input class="easyui-combobox" id="cb02" name="cc2" data-options="valueField:'id',textField:'name'" style="width:200px;"></input></p>
  6.  
  7. <script src="test.js" type="text/javascript"></script>
  8. <script language="javascript">
  9. $(cbLoadData);
  10. </script>
  11. </body>

3.脚本代码

  1. function cbLoadData(){
  2.     simpleAjax({cmd:"test_test03ajaxdata"},{},function(ret){
  3.         $('#cb02').combobox('loadData',ret);
  4.     });
  5. }

4.界面效果

WebApp MVC 框架的开发细节归纳的更多相关文章

  1. 使用.NET MVC框架项目开发流程（项目开发流程）

    MVC项目开发流程 整理需求,进行需求分析.项目设计. 整理数据项,建数据库做前期准备,并整理字典. 建立所需数据库表和视图和模型. 页面实现其初步功能(跳过逻辑后台代码),只是实现页面之间的跳转以及 ...

  2. 轻量级MVC框架(自行开发)

    源码及demo: https://github.com/killallspree/myFrame/

  3. ASP.NET MVC框架开发系列课程 (webcast视频下载)

    课程讲师: 赵劼 MSDN特邀讲师 赵劼(网名“老赵”.英文名“Jeffrey Zhao”,技术博客为http://jeffreyzhao.cnblogs.com),微软最有价值专家(ASP.NET ...

  4. 自定义MVC框架

    我们在学习自定义MVC框架的时候常常会听到Model1 ,Model2和MVC.那么什么是Model1 什么是Model2什么又是MVC呢? 什么是Model1? Model1就是一种纯jsp开发技术 ...

  5. 自定义MVC框架之工具类-分页类的封装

    以前写过一个MVC框架,封装的有点low,经过一段时间的沉淀,打算重新改造下,之前这篇文章封装过一个验证码类. 这次重新改造MVC有几个很大的收获 >全部代码都是用Ubuntu+Vim编写,以前 ...

  6. 源码分析系列 | 从零开始写MVC框架

    1. 前言 2. 为什么要自己手写框架 3. 简单MVC框架设计思路 4. 课程目标 5. 编码实战 5.1 配置阶段 web.xml配置 config.properties 自定义注解 5.2 初始 ...

  7. 通过Ruby On Rails 框架来更好的理解MVC框架

    通过Ruby On Rails 框架来更好的理解MVC框架   1.背景    因为我在学习软件工程课程的时候,对于 MVC 框架理解不太深入,只是在理论层面上掌握,但是不知道如何在开发中使用 MVC ...

  8. Web前端MVC框架的意义分析

    前言: Web前端开发是Web技术发展中的一个重要组成部分,在传统的前端开发中由于外界因素的影响导致其开发形式呈现出简单化的特点,即以页面为主体来展示界面中的信息.然而随着科学技术的不断进步,Web前 ...

  9. 【原创】三分钟教你学会MVC框架——基于java web开发（2）

    没想到我的上一篇博客有这么多人看,还有几位看完之后给我留言加油,不胜感激,备受鼓励,啥都别说了,继续系列文章之第二篇.(如果没看过我第一篇博客的朋友,可以到我的主页上先浏览完再看这篇文章,以免上下文对 ...

随机推荐

  1. Hive 安装配置

    系统:Ubuntu 64 bit系统 step1:创建hive文件目录,并在hive目录下创建tmp,warehouse 和 log目录: Step2:解压hive安装包: Step3:创建配置文件: ...

  2. Web开发者的六个代码调试平台

    代码调试平台是Web开发者进行开发.测试.分享.协作和交流的网络应用,它们支持实时的编辑.预览HTML.CSS和JavaScript的客户端代码.这些代码调试平台最值得称道的地方在于,它们中的大多数都 ...

  3. javascript中重要概念-闭包-深入理解

    在上次的分享中javascript--函数参数与闭包--详解,对闭包的解释不够深入.本人经过一段时间的学习,对闭包的概念又有了新的理解.于是便把学习的过程整理成文章,一是为了加深自己闭包的理解,二是给 ...

  4. 25款顶级的jQuery表格插件

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  5. fir.im Weekly - 如果让你重新做一款APP

    设想下:如果让你重新做一款 APP ,你会用到哪些开发.设计等资源和工具? 本期的 Weekly 为大家分享了最近不错的 APP 开发资源,大部分是关于 iOS 开发. Android 开发.UI设计 ...

  6. hdu 1284完全背包

    http://acm.hdu.edu.cn/showproblem.php?pid=1284 New~ 欢迎“热爱编程”的高考少年——报考杭州电子科技大学计算机学院关于2015年杭电ACM暑期集训队的 ...

  7. [原创]IBM BLM模型思维导图

    [原创]IBM BLM模型思维导图 IBM业务领先模型 http://wenku.baidu.com/view/1d1d247af242336c1eb95e3b.html?from=search

  8. 在cxf中使用配置避免增加字段导致客户端必须更新、同步实体属性的问题

    在使用cxf实现webservice时,经常碰到的问题就是如果在服务端,修改了一个接口的签名实现,如增加一个字段,或者删除一个字段.在这种情况下,在默认的配置中,就会报以下的错误信息: org.apa ...

  9. android 图片占用内存与什么有关

    android 图片占用内存与什么有关 原文链接:http://blog.csdn.net/zjl5211314/article/details/7041813 在开发手机应用的时候,内存是有限的,那 ...

  10. 聊聊CSS postproccessors

      阿里妈妈 @一丝 准备发布其CSSGrace,即CSS后处理插件,于是顺便聊聊CSS postprocessors. 从Rework说起 Rework是TJ大神开发的CSS预处理框架.但为什么会出 ...