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 = , name = "选项1" });
data.Add(new { id = , name = "选项2" });
data.Add(new { id = , name = "选项3" });
data.Add(new { id = , name = "选项4" });
data.Add(new { id = , 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 = , name = "选项1" });
data.Add(new { id = , name = "选项2" });
data.Add(new { id = , name = "选项3" });
data.Add(new { id = , name = "选项4" });
data.Add(new { id = , 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.界面效果
WebApp MVC 框架的开发细节归纳的更多相关文章
- 使用.NET MVC框架项目开发流程（项目开发流程）
MVC项目开发流程 整理需求,进行需求分析.项目设计. 整理数据项,建数据库做前期准备,并整理字典. 建立所需数据库表和视图和模型. 页面实现其初步功能(跳过逻辑后台代码),只是实现页面之间的跳转以及 ...
- 轻量级MVC框架(自行开发)
源码及demo: https://github.com/killallspree/myFrame/
- ASP.NET MVC框架开发系列课程 (webcast视频下载)
课程讲师: 赵劼 MSDN特邀讲师 赵劼(网名“老赵”.英文名“Jeffrey Zhao”,技术博客为http://jeffreyzhao.cnblogs.com),微软最有价值专家(ASP.NET ...
- 自定义MVC框架
我们在学习自定义MVC框架的时候常常会听到Model1 ,Model2和MVC.那么什么是Model1 什么是Model2什么又是MVC呢? 什么是Model1? Model1就是一种纯jsp开发技术 ...
- 自定义MVC框架之工具类-分页类的封装
以前写过一个MVC框架,封装的有点low,经过一段时间的沉淀,打算重新改造下,之前这篇文章封装过一个验证码类. 这次重新改造MVC有几个很大的收获 >全部代码都是用Ubuntu+Vim编写,以前 ...
- 源码分析系列 | 从零开始写MVC框架
1. 前言 2. 为什么要自己手写框架 3. 简单MVC框架设计思路 4. 课程目标 5. 编码实战 5.1 配置阶段 web.xml配置 config.properties 自定义注解 5.2 初始 ...
- 通过Ruby On Rails 框架来更好的理解MVC框架
通过Ruby On Rails 框架来更好的理解MVC框架 1.背景 因为我在学习软件工程课程的时候,对于 MVC 框架理解不太深入,只是在理论层面上掌握,但是不知道如何在开发中使用 MVC ...
- Web前端MVC框架的意义分析
前言: Web前端开发是Web技术发展中的一个重要组成部分,在传统的前端开发中由于外界因素的影响导致其开发形式呈现出简单化的特点,即以页面为主体来展示界面中的信息.然而随着科学技术的不断进步,Web前 ...
- 【原创】三分钟教你学会MVC框架——基于java web开发（2）
没想到我的上一篇博客有这么多人看,还有几位看完之后给我留言加油,不胜感激,备受鼓励,啥都别说了,继续系列文章之第二篇.(如果没看过我第一篇博客的朋友,可以到我的主页上先浏览完再看这篇文章,以免上下文对 ...
随机推荐
- Spring 依赖注入控制反转实现，及编码解析（自制容器）
定义: 在运行期,由外部容器动态的将依赖对象动态地注入到组件中. 两种方式: 手工装配 -set方式 -构造器 -注解方式 自动装配(不推荐) 1利用构造器 2set方法注入 dao: package ...
- 文件上传小技巧/后端处理【以php示例】
引语:在上一篇文章中说到,在页面中可以用隐藏的方式让你的上传页面看起来漂亮.但是这对于性能来说,并没有什么卵用,那么在后台的处理中,难道就没有一些处理技巧么?所谓后台的技巧,应该要包括上传得快一点,上 ...
- python Request库
命令行查看版本:python --version pip --version pip常用命令// 安装包pip install xxx// 升级包pip install -U xxx// 卸载包pip ...
- 学习Git
参考廖雪峰老师的个人网站:http://www.liaoxuefeng.com 版本库初始化 通过git init命令将这个命令变为git可以管理的仓库 添加文件 用命令git add file告诉G ...
- linux下安装小鹤双拼-鹤形
首先安装小小拼音.发现小小拼音真是一个良心软件 http://yong.dgod.net/ 进入下载页面.我是下载 解压版的 解压缩后.放在主目录里.可以改成.yong 隐藏起来 安装步骤(前人栽树, ...
- linux中touch命令参数修改文件的时间戳(转)
linux中touch命令参数不常用,一般在使用make的时候可能会用到,用来修改文件时间戳,或者新建一个不存在的文件,以下是linux中touch命令参数的使用方法: touch [-acm][-r ...
- Libjingle库简介
原文链接 国内现在很多语音聊天工具都是基于TURN方式实现的,包括YY.AK等等,这种方式对于服务器的性能要求很高,而且在用户量增大的时候,服务器压力也会越来越大,用户的语音质量也会受到很大影响.而基 ...
- VS2015安装 Secondary Installer Setup Failed求解决方案
个人同步本文博客地址http://aehyok.com/Blog/Detail/64.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章 ...
- 一种可以避免数据迁移的分库分表scale-out扩容方式
原文地址:http://jm-blog.aliapp.com/?p=590 目前绝大多数应用采取的两种分库分表规则 mod方式 dayofweek系列日期方式(所有星期1的数据在一个库/表,或所有?月 ...
- Openresty 安装教程
Openresty的简单安装方法,如需高级编译安装,请参照安装选项 1.安装配置好Yum源,不赘述此步骤 2.安装必要组件 yum install pcre-devel openssl-devel g ...